design-ui-gallery

# Design UI Gallery Skill ## 意图 帮助 Agent 快速定位视觉风格方向。当用户说"参考 XX 风格"或"给我几个风格方向"时，提供风格特征描述、适用场景和关键实现要素。 本 skill **负责视觉风格选型**。设计系统基础（配色、字体、间距）用 `design-system`；具体组件实现用目标框架 skill。 ## 触发场景 - 用户要求某种视觉风格（毛玻璃、粗野主义、极简等）。 - 需要探索多个风格方向做选择。 - 需要了解某种风格的关键实现要素。 - 落地页、后台、移动端 App 的整体视觉方向选择。 ## 工作流 ### 1. 确认需求 1. 项目类型：落地页 / 后台 / 移动端 / 展示站。 2. 品牌调性：专业 / 友好 / 科技 / 文艺 / 大胆。 3. 目标用户群体。 4. 参考风格关键词。 ### 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` |