app-shell-ui
为AI生成桌面工具风应用界面提供统一视觉外壳的Skill。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：app-shell-ui。 它的用途是：为AI生成桌面工具风应用界面提供统一视觉外壳的Skill。 完整的 Skill 内容见：https://321skill.com/skills/app-shell-ui/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘使用 app-shell-ui，做一个深色主题的服务器监控面板，左侧是导航菜单，右侧展示CPU、内存、网络流量的实时图表卡片。’，它会自动生成一个符合桌面工具风格、布局规整、配色克制的监控界面HTML代码。
介绍
App Shell UI Skill 旨在解决AI（如Codex、Claude Code、Grok）生成前端界面时风格不统一、偏向通用Web仪表盘或运营后台的问题。它提供了一套可复用的视觉语言规范，强制AI输出具有“桌面工具感”的界面，如系统设置、Clash Verge等客户端风格，而非传统的网页布局。
使用时，只需在提示词中指定“使用 app-shell-ui”，AI便会自动遵循其设计约束，生成左导航栏、右内容区、克制配色、双主题支持以及等高并列卡片等标准组件。用户无需在提示词中详细描述版式细节，大大简化了生成特定风格界面的过程。
该Skill非常适合需要快速原型设计、构建内部工具或希望界面具有专业桌面应用质感的前端开发者、产品经理和全栈开发者。它特别适用于生成控制台、设置页面、数据管理面板、AI工作台等类型的界面。
请注意，本Skill是一个“外壳”规范，专注于界面结构和基础视觉风格，不包含具体的业务逻辑代码。安装时需复制整个仓库目录，以确保AI能正确读取SKILL.md中的完整约束信息，而非仅复制单个文件。
核心特点
与通用前端生成Skill不同，App Shell UI强制定义了“桌面工具风”这一特定视觉风格（左导航+右内容、Token驱动、克制图标），并提供了浅/深双主题支持，确保AI生成的界面具有高度一致的系统级应用质感，而非普通的网页或后台管理系统。
注意事项
不适合需要生成营销落地页、复杂动画效果或高度定制化艺术风格界面的场景。
常见问题
app-shell-ui skill 怎么用？
在给AI（如Claude Code）的提示词开头加上“使用 app-shell-ui”，然后描述你的业务需求（如“做一个系统设置页面”）即可。
支持哪些AI Agent？
支持能加载SKILL.md文件的Agent，如Codex、Claude Code和Grok。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/app-shell-ui/raw/index.md 读取 app-shell-ui 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/app-shell-ui/raw/index.md（查看排版版本）