ui-styles

---
name: ui-styles
description: 离线 UI 风格库（79 个风格家族，中英双语 prompt）。当用户需要为项目选定视觉风格、生成 UI 设计 prompt、或询问某个具体设计风格（如 claymorphism / glassmorphism / neoBrutalism / vaporwave / synthwave / bento grids / minimalism 等）时使用。触发词：「UI 风格」「设计风格推荐」「UI prompt」「视觉风格」「换个风格」「这个项目用什么风格」。
---

# UI Styles Skill

离线封装自 https://github.com/TonnyWong1052/UI-Prompt 的 UI 风格 prompt 库，覆盖 5 大分类 79 个风格家族，中英双语。

## 数据结构

- `catalog.json` — 全部风格的轻量索引（id / 分类 / 名称 / 描述 / 标签 / prompt 路径）
- `prompts/<category>/<familyId>/`
  - `style.md` — 风格定义：视觉理念、材质质感、交互体验、整体氛围（适合让 AI 理解一个风格"是什么"）
  - `custom.md` — 可直接使用的生成式 prompt 模板（适合让 AI "按这个风格生成代码"）
- 5 个分类：`core`（核心设计系统）、`visual`（视觉效果）、`retro`（复古/年代）、`layout`（版式）、`interaction`（交互）

## 工作流程

### 触发方式

1. **推荐风格**：用户描述项目（"我在做一个 SaaS 后台"/"游戏官网"/"开发者工具"），让你挑风格
2. **直接命名**：用户点名一个风格（"用 claymorphism"/"给我 vaporwave"），让你产出 prompt
3. **对比/浏览**：用户问"有哪些风格"或"和 X 风格类似的有哪些"

### 执行步骤

**步骤 1 — 读 catalog**
```
Read <skill-root>/catalog.json
```
`<skill-root>` 是本 skill 的安装目录（通常 `~/.claude/skills/ui-styles/` 或项目内 `.claude/skills/ui-styles/`）。取出所有 family 的 `id / name / description / tags / category`，作为筛选基础。

**步骤 2 — 筛选 / 匹配**
- 若用户给项目上下文：根据项目调性（B 端工具 / C 端娱乐 / 数据展示 / 营销页 / 游戏 / 复古怀旧 / 极简专业 …）匹配 `tags` 和 `description`，输出 Top 3-5 候选，每个附一句话推荐理由
- 若用户点名风格：直接定位对应的 family（注意中英文名都可能匹配）
- 若用户要浏览：按 category 分组列出，避免一次倾倒太多

**步骤 3 — 加载详细 prompt（按需）**
- 用户确认要某个风格后，按 `catalog.json` 中 `prompts.custom` 或 `prompts.style` 路径读取 md 文件
- `custom.md` 优先用于"帮我生成 UI"场景
- `style.md` 优先用于"解释这个风格"或"提供给设计师参考"场景
- 默认输出中文（zh-CN 段落），若项目是英文项目或用户明确要英文则用 en-US

**步骤 4 — 输出**
- 把对应语言段落整段呈现给用户，可附简短说明
- 如果用户接下来要直接生成 UI 代码，用 prompt 作为系统指令，结合项目实际页面需求生成

## 风格分类速览

| Category | 数量 | 代表风格 |
|---|---|---|
| `core` | 9 | flatDesign / minimalism / brutalism / memphis / scrollNarrative / skeuomorphism / typography / fluent2 / materialDesign |
| `visual` | 50+ | claymorphism / glassmorphism / neoBrutalism / synthwave / vaporwave / y2k / gradients / 3dElements / bentoGrids / kawaiiMinimal / wabiSabi / industrial / biophilic / blueprint / popArt / sciFiHud … |
| `retro` | 15 | arcadeCRT / artDeco / bauhaus / darkAcademia / filmNoir / frutigerAero / midCenturyModern / newspaper / retroFuturism / retroOS / steampunk / swissDesign / synthwave / vhsAesthetic / digitalRetro |
| `layout` | 1 | magazine |
| `interaction` | 1 | mouseTracking |

## 推荐启发式

- **B 端工具 / SaaS / 数据看板** → minimalism, flatDesign, fluent2, bentoGrids, swissDesign, utilityFirst
- **开发者工具 / 技术博客** → minimalism, monochrome, blueprint, terminal-like (retroOS / vhsAesthetic)
- **创意作品集 / 设计师官网** → brutalism, neoBrutalism, memphis, claymorphism, holographicFoil, antiDesign
- **营销落地页 / 品牌站** → gradients, glassmorphism, 3dElements, auroraGlass, bentoGrids
- **游戏 / 娱乐 / 音乐** → synthwave, vaporwave, neonCyberpunk, retroFuturism, y2k, sciFiHud
- **复古 / 怀旧 / 文艺** → midCenturyModern, swissDesign, newspaper, artDeco, darkAcademia, wabiSabi, inkWash
- **自然 / 健康 / 生活方式** → biophilic, organic, natural, scandi, wabiSabi, solarpunk
- **儿童 / 教育 / 萌系** → kawaiiMinimal, claymorphism, paperCutout, handDrawnSketch, comicBook

## 注意事项

- catalog 和 prompt 内容都是从上游仓库 (TonnyWong1052/UI-Prompt) 镜像而来，是该项目的设计成果，引用时建议保留来源链接
- 79 个 family 中，9 个只有 `style.md` 没有 `custom.md`（catalog 中 `prompts.custom` 为 null），这些只能解释风格、不能直接生成代码
- 不要在响应中倾倒整个 catalog；先筛选、再按需读 prompt
- 如果用户问的风格不在 catalog 里，直接说不在并给出最接近的候选，不要编造