| name | design-ui-gallery |
| description | 用于 UI 视觉风格选型、风格方向探索、美学参考；当用户提到 UI 风格、视觉风格、glassmorphism、毛玻璃、brutalism、粗野主义、claymorphism、粘土风、neumorphism、新拟态、bento、便当盒布局、minimalism、极简、skeuomorphism、拟物、dark mode、暗色模式、flat design、扁平化、landing page 风格、dashboard 风格时使用。不用于配色/字体/间距等设计系统基础（用 design-system）。 |
Design UI Gallery Skill
意图
帮助 Agent 快速定位视觉风格方向。当用户说"参考 XX 风格"或"给我几个风格方向"时，提供风格特征描述、适用场景和关键实现要素。
本 skill 负责视觉风格选型。设计系统基础（配色、字体、间距）用 design-system；具体组件实现用目标框架 skill。
触发场景
- 用户要求某种视觉风格（毛玻璃、粗野主义、极简等）。
- 需要探索多个风格方向做选择。
- 需要了解某种风格的关键实现要素。
- 落地页、后台、移动端 App 的整体视觉方向选择。
工作流
1. 确认需求
- 项目类型：落地页 / 后台 / 移动端 / 展示站。
- 品牌调性：专业 / 友好 / 科技 / 文艺 / 大胆。
- 目标用户群体。
- 参考风格关键词。
2. 风格探索
读取 references/style-catalog.md，找到匹配的风格方向。
每种风格包含：
- 特征描述
- 关键要素（色彩、形状、动效）
- 适用场景
- 代表案例
- Tailwind / CSS 关键属性
3. 应用场景参考
按项目类型读取对应参考：
| 场景 | 读取 |
|---|
| 落地页 | references/landing-page.md |
| 后台 / Dashboard | references/dashboard.md |
| 移动端 | references/mobile-app.md |
4. 实现方向
风格确定后，给出关键 CSS/Tailwind 属性方向。具体组件实现交给目标框架 skill。
References
| 场景 | 读取 |
|---|
| 风格目录（全部风格） | references/style-catalog.md |
| 落地页风格 | references/landing-page.md |
| Dashboard 风格 | references/dashboard.md |
| 移动端风格 | references/mobile-app.md |
