# 提示词 · 02 设计系统设计师

> **使用方法**：把以下全部内容复制，粘贴到 Claude Code 对话框发送即可。
>
> **前置依赖**：`output/PRD详细版.md` 已存在（由 01-PRD优化器 产出）
>
> **产出**：`output/DESIGN.md` + `output/tokens.css`

---

# 首席设计官 & 设计系统架构师

## 背景与输入
你正在主导一款产品的全案视觉设计，并将其转化为一套**完整的设计系统**。
1.  **核心输入**：`PRD详细版.md`（作为业务逻辑、用户场景和环境的唯一来源）。
2.  **期望标准**：**"教科书级"的设计范本**。这份文档既是给国际奖项评委看的设计宣言，也是给机器精确执行的工程契约。人类读到的是"为什么这样设计"，机器读到的是"怎么执行"。
3.  **核心挑战**：在艺术表达（视觉冲击）与工程严谨（token 契约）之间找到完美平衡——文字要有感染力和设计洞见，数值要精确且可执行。

## 使命
深度阅读 PRD，剖析产品的内在基因，为其量身定制一套**设计系统**，包含两份文件：
- `DESIGN.md`：9段编号结构的设计语言文档——**这是一份设计宣言，不只是规格书**。每个设计决策都必须回答"为什么这样做"和"这样做好在哪里"。
- `tokens.css`：完整的 CSS 变量契约（可被直接粘贴到任何 HTML 的 `<style>` 中）

## 战略分析流

**默认使用浅色模式。** 除非用户明确要求深色，否则一律以浅色为基准进行设计。先执行以下判断逻辑确认风格方向：

1.  **环境分析**：
    *   **默认 → 浅色模式**：通透、呼吸感、人文、秩序。除非用户特别要求，否则不做深色。
    *   *仅当用户明确要求时*，才考虑深色模式或高对比度模式。

2.  **风格定调**：
    *   **Linear 风**：微光、渐变边框、玻璃拟态。（适合科技/SaaS）
    *   **Apple / Dieter Rams 风**：极致克制、黑白灰、大留白。（适合创意/工具）
    *   **科幻 HUD 风**：粒子、线条、全息感。（适合大屏/监控）

## 大师级设计法则

无论你选择了哪种风格（深或浅），都必须严格遵守以下**高维设计标准**：

1.  **视觉层级**：抛弃线框，**用光影和空间来塑造层级**。重要的东西要"浮"上来，次要的东西要"沉"下去。
2.  **微观质感**：
    *   *深色模式下*：使用噪点、微渐变、内发光来消除死黑。
    *   *浅色模式下*：使用弥散投影、模糊、纸张感来增加温度。
3.  **Bento Grid**：将复杂信息收纳进模块化的网格容器中。这是一种通用的、极具现代感的布局方式，**必须采用**，因为它能带来秩序之美。
4.  **动态叙事**：界面是流动的。描述元素如何响应鼠标的悬停、点击和数据加载。拒绝生硬的切换。
5.  **设计签名**：每个设计系统必须有至少一个**签名级视觉决策**——一个大胆的排版选择、一个意外的颜色决策、或一个独特的交互细节。验收标准：截图给项目外的人看，能认出是哪个产品 = 有签名；认不出 = 交付了模板。

---

## 产出 1：DESIGN.md（9段结构 · 设计宣言）

### 文件头格式（必须严格遵守）

```markdown
# Design System Inspired by {产品名称}

> Category: {从下方14个分类中选择一个}
> {一句话摘要，用于 picker 预览}
```

**Category 可选值**（必须精确匹配其一）：
AI & LLM, Developer Tools, Productivity & SaaS, Backend & Data, Design & Creative, Fintech & Crypto, E-Commerce & Retail, Media & Consumer, Automotive, Editorial & Print, Retro & Nostalgic, Bold & Expressive, Modern & Minimal, Professional & Corporate

### 9段编号结构（必须严格遵守）

标题**必须以 `## 数字.` 开头**，9段缺一不可。标题用中文：

```markdown
## 1. 视觉主题与氛围
## 2. 色彩美学
## 3. 排版与字体
## 4. 间距体系
## 5. 布局与空间构成
## 6. 组件设计
## 7. 动效与交互物理
## 8. 品牌情感与声音
## 9. 设计禁忌
```

### 各段内容要求

**## 1. 视觉主题与氛围**（50-80 行——这是全文的灵魂章节，必须浓墨重彩）
- **核心隐喻**：用一段沉浸式的文字定义产品的物理感觉。不要说"这是一个深色主题的工具"，要说"你站在深夜的远洋舰桥里，窗外是无边深蓝，脚下是数据涌动的海流"。让读者**身临其境**。
- **用户情绪**：用户在使用时应感到什么？是冷静的掌控感、温暖的归属感、还是锐利的竞技感？为什么这种情绪对产品至关重要？
- **设计决策的理由**：为什么选择深色/浅色？为什么选择这种风格原型？这个选择对用户意味着什么？（例如："考虑到安全分析师需 24 小时值守，采用深色护眼模式——不是因为深色酷，而是因为深夜的屏幕亮度是对人眼的暴力"）
- **风格定位**：这个设计系统在整个行业中的坐标是什么？它在模仿谁、致敬谁、又超越了谁？
- 色彩速览表：Markdown 表格列出核心色 Hex + 角色
- 参考先例：列出参考的真实产品或设计系统，说明从每个参考中汲取了什么

**## 2. 色彩美学**（40-60 行）
- **色彩哲学**：为什么选择这套色彩？每种颜色不只是 Hex 值，它承载着什么情感和功能使命？（例如："品牌主色 #0B5FBA 不是随机选的蓝——它是信任的波长，在浅色背景上如远处的灯塔"）
- **强调色纪律**：`--accent` 每屏最多 2 处可见使用（典型组合：1 个标签/eyebrow + 1 个主 CTA）。链接、hover、focus ring 都算 accent 用量。中性色占画面 70-90%，accent 占 5-10%，语义色占 0-5%。必须在 DESIGN.md 中声明这个占比上限
- Surface 色板表（bg / surface / surface-hover / border）——附设计理由
- Data/Accent 色板表（accent / accent-hover / semantic colors）——附情感定义
- Text 色板表（primary / secondary / tertiary）——附可读性分析
- **所有颜色必须给出具体 Hex 值**，禁止占位符
- 如果是深色 Only，必须声明并解释原因
- CSS 变量必须放在 `:root {}` 块中
- **所有文本色与背景色的对比度必须 ≥ 4.5:1（WCAG 2.2 AA）。在最终输出前，用 WCAG 对比度公式验证 `--fg` / `--fg-2` / `--muted` / `--meta` / `--accent-on` 等所有文本色与其主要背景色的配对；若 `--accent` 用作按钮背景且按钮文字为普通字号（< 24px 或 < 18.66px bold），该按钮背景与按钮文字色的对比度也必须 ≥ 4.5:1**
- **深色主题下，surface 层级必须遵循"海拔越高、亮度越高"原则，并给出 `--surface` / `--surface-raised` / `--surface-overlay` 等 elevation token；边框颜色 `--border` 在深底上作为 UI 边界时，与非文本元素的相邻对比度应 ≥ 3:1（WCAG 2.2 Non-text Contrast）**

**## 3. 排版与字体**（30-45 行）
- **字体哲学**：为什么选这套字体？它传达了什么气质？（例如："JetBrains Mono 用于数据——因为等宽字体让数字像子弹一样整齐排列，传达精密感"）
- 字体栈（Display / Body / Mono）
- 字号梯度（至少 4 级：xs/sm/base/lg/xl/2xl/3xl/4xl）——解释为什么是这个梯度
- **Letter-spacing 硬规则**（必须输出精确数值表，这是 AI 设计中最常被跳过的规则）：
  - ALL CAPS 文本：`letter-spacing ≥ 0.06em`（无例外）
  - Display 大字（48px+）：`letter-spacing: -0.02 ~ -0.03em`
  - 标题（32px+）：`letter-spacing: -0.01 ~ -0.02em`
  - 小文本（11-13px）：`letter-spacing: 0.01 ~ 0.02em`
  - UI 标签/按钮：`letter-spacing: 0.02em`
  - 正文：`letter-spacing: 0`（默认）
- Line-height 规范——营造什么"杂志感"或"仪表感"
- **必须包含字体标签块**：
```
Font labels for catalog extraction:

Display: {完整 font stack}
Body: {完整 font stack}
Mono: {完整 font stack}
```

**## 4. 间距体系**（15-25 行）
- **间距哲学**：间距不只是"留白"，它是信息的呼吸节奏。解释 4px 基准的选择理由和节奏感。
- 4px 基准间距体系（space-1 到 space-12）
- Section rhythm（desktop / tablet / phone 的垂直间距）——不同设备的呼吸节奏为什么不同
- CSS 变量放在 `:root {}` 中

**## 5. 布局与空间构成**（35-50 行）
- **布局哲学**：为什么用 Bento Grid？它如何将混沌的信息转化为秩序之美？（例如："Bento Grid 不是装饰——它是认知减负工具。每个格子都是一个独立的认知单元，用户的注意力不需要在页面间跳跃"）
- Bento Grid 布局策略（列数、间距、响应式断点）
- Container max-width + gutter 的选择理由
- **深度与层级**：如何用光影/发光塑造 Z 轴？为什么"重要的东西浮上来"比"加边框"更高级？
- 响应式行为（desktop / tablet / phone）

**## 6. 组件设计**（120-250 行）
- **组件哲学**：每个组件的设计意图是什么？它解决了什么用户问题？
- **交互哲学**：该品牌的 hover/active 反馈通过什么表达？选定一种并贯穿全部组件：
  - 阴影提升型：`.card:hover { box-shadow: var(--elev-raised); }`——纯阴影，不改颜色，不用 transform
  - 色彩响应型：`.card:hover { border-color: var(--accent); }`——边框/背景微变
  - 物理位移型：`.card:hover { transform: translateY(-2px); }`——真实位移
  - 选定后**所有组件必须遵循同一套交互语言**，禁止混搭
- 3-6 个核心组件的完整 CSS（按钮、卡片、输入框、徽章等）
- **每个组件必须包含 `:hover`、`:active`、`:focus-visible` 三种状态的完整 CSS**，不能只有静态态
- 每个组件配一段设计说明：为什么是这个圆角/投影/间距？
- **禁止硬编码颜色**，必须用 `var(--xxx)` 引用 token
- 组件 CSS 要真实可用，禁止 Lorem Ipsum 或 `/* TODO */`

**## 7. 动效与交互物理**（40-80 行）
- **动效哲学**：界面是活的。动效不是装饰，它是界面的"呼吸"和"心跳"。解释为什么选择了这种动效语言。
- **微反馈 CSS**：输出按钮按压、输入框聚焦、卡片悬停的具体 CSS 代码。所有 transition 必须使用 `var(--motion-fast)` 或 `var(--motion-base)` + `var(--ease-standard)`，禁止裸写 duration/easing 数值
- **进场动画 CSS**：输出页面元素进场编排的 `@keyframes` + `animation` 属性。定义哪些元素有 staggered delay，节奏感如何
- **状态切换 CSS**：Tab 切换、弹窗展开/收起、下拉菜单展开的 transition CSS
- `prefers-reduced-motion` 必须针对特定元素类名写 override，禁止全局 `*` 选择器
- 以上所有 CSS 必须可直接复制到 HTML 的 `<style>` 中使用

**## 8. 品牌情感与声音**（25-40 行）
- **品牌灵魂**：如果这个产品是一个人，ta 的性格是什么？用 3-5 个关键词定义，并解释为什么。
- **情感化细节**：空状态 / Loading / 404 的风格定义——这些"边缘时刻"往往是用户记住产品的瞬间
- **插画或 3D 元素风格指引**：如果有视觉装饰，它们应该传递什么情绪？
- **Agent 设计指令**：给生成 HTML 的 agent 的设计指令（3-5 条关键准则，让 agent 知道什么该做什么不该做）

**## 9. 设计禁忌**（10-20 行）
- **必须具体且有约束力**，每条说明"禁止什么"和"为什么禁止"
- 禁止空泛（"避免糟糕的设计"是无效的）
- 每条以"禁止"开头，附上理由
- 示例："禁止使用超过 4px 的圆角——这个美学是功能性的，不是友好的。大圆角会让信息密度看起来松散，削弱仪表盘的精密感"

---

## 产出 2：tokens.css（CSS 变量契约）

这是**机器可执行的设计系统**。Agent 会把 `:root {}` 块原封不动粘贴到每个 HTML 的 `<style>` 中，然后全文用 `var(--xxx)` 引用。

### 必填 Token 清单（56 个，缺一不可）

所有变量必须放在 **一个** `:root {}` 块中：

```css
:root {
  /* ─── Surface (3 levels) ─── */
  --bg: {Hex值};
  --surface: {Hex值};
  --surface-warm: var(--surface);   /* 无第三层时 alias 到 surface */
  --surface-raised: var(--surface); /* hover/下拉/抬升态，深色主题下应比 surface 更亮 */
  --surface-overlay: var(--surface); /* 模态/tooltip 最高层级，深色主题下应最亮 */

  /* ─── Foreground (4 levels) ─── */
  --fg: {Hex值};
  --fg-2: var(--fg);                /* 无第二层时 alias 到 fg */
  --muted: {Hex值};
  --meta: var(--muted);             /* 无第四层时 alias 到 muted */

  /* ─── Border (2 levels) ─── */
  --border: {Hex值};                /* 深色主题下需保证与 --bg 对比度 ≥ 3:1，作为 UI 边界可见 */
  --border-soft: var(--border);     /* 无软边框时 alias 到 border */

  /* ─── Accent ─── */
  --accent: {Hex值};                /* 若用于普通字号按钮背景，需与 --accent-on 对比度 ≥ 4.5:1 */
  --accent-on: #ffffff;             /* accent 做背景时的前景色，需与 --accent 对比度 ≥ 4.5:1 */
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-active: color-mix(in oklab, var(--accent), black 14%);

  /* ─── Semantic ─── */
  --success: {Hex值};
  --warn: {Hex值};
  --danger: {Hex值};

  /* ─── Typography — fonts ─── */
  --font-display: {font stack};
  --font-body: {font stack};
  --font-mono: {font stack};

  /* ─── Type scale ─── */
  --text-xs: {值};
  --text-sm: {值};
  --text-base: {值};
  --text-lg: {值};
  --text-xl: {值};
  --text-2xl: {值};
  --text-3xl: {值};
  --text-4xl: {值};

  /* ─── Leading & Tracking ─── */
  --leading-body: {值};
  --leading-tight: {值};
  --tracking-display: {值};

  /* ─── Spacing (4px base) ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ─── Section rhythm ─── */
  --section-y-desktop: {值};
  --section-y-tablet: {值};
  --section-y-phone: {值};

  /* ─── Radius ─── */
  --radius-sm: {值};
  --radius-md: {值};
  --radius-lg: {值};
  --radius-pill: 9999px;

  /* ─── Surface elevation ─── */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 2px 8px color-mix(in oklab, var(--fg), transparent 92%);
  --elev-float: 0 8px 32px color-mix(in oklab, var(--fg), transparent 88%);

  /* ─── Focus ─── */
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);

  /* ─── Motion ─── */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ─── Layout ─── */
  --container-max: {值};
  --container-gutter-desktop: {值};
  --container-gutter-tablet: {值};
  --container-gutter-phone: {值};
}
```

### 暗色模式覆盖（如果适用）

如果产品有暗色模式（或暗色 Only），在 `:root {}` 之后追加：

```css
[data-theme="dark"] {
  --bg: {暗色值};
  --surface: {暗色值};
  --fg: {暗色值};
  /* ...只覆盖需要变化的 token... */
}
```

**禁止**为明暗模式分别写完整的 token 块——必须用 `[data-theme="dark"]` 选择器覆盖。

---

## 输出前自检

生成文件前，**必须**逐项确认以下检查：

- [ ] DESIGN.md 有 9 个 `## 数字.` 标题，按 1→9 顺序排列
- [ ] 文件头：第一个 H1 = 设计系统名称，紧接 `> Category:` + 摘要
- [ ] Category 值精确匹配 14 个分类之一
- [ ] 无占位 hex 值（`#REPLACE_ME` / `currentColor` / CSS 变量名出现在颜色表中）
- [ ] 所有 CSS 变量包裹在 `:root {}` 块中，禁止裸写
- [ ] DESIGN.md 的排版与字体段包含 `Display:` / `Body:` / `Mono:` 字体标签块
- [ ] tokens.css 的 `:root {}` 包含全部 56 个必填 token
- [ ] 新增 `--surface-raised` / `--surface-overlay` elevation token，深色主题下亮度随海拔递增
- [ ] B-slot token（`--fg-2` / `--meta` / `--surface-warm` / `--surface-raised` / `--surface-overlay` / `--border-soft`）用 `var()` alias
- [ ] 组件 CSS 中零硬编码颜色（`#ffffff` 等），全部用 `var(--xxx)`
- [ ] 每个交互组件有 `:focus-visible` 样式
- [ ] `prefers-reduced-motion` 针对特定元素类名，不用全局 `*`
- [ ] 暗色模式用 `[data-theme="dark"]` 覆盖，不复制完整 token 块
- [ ] 设计禁忌至少 4 条，每条具体且有约束力
- [ ] **所有文本色与对应背景色对比度 ≥ 4.5:1；若 accent 用于普通字号按钮背景，按钮文字与 accent 背景对比度 ≥ 4.5:1**
- [ ] **深色主题下 `--border` 与 `--bg` 的对比度 ≥ 3:1，确保 UI 边界可见**
- [ ] DESIGN.md 总长 400-800 行
- [ ] tokens.css 可以直接被 `<style>` 引用，无外部依赖

---

## 输出约束

1.  **输出文件**：`output/DESIGN.md` + `output/tokens.css`（两份文件，保存在 output/ 目录下）。这是产品**唯一的设计系统文档**。
2.  **默认浅色**：除非用户明确要求深色，否则一律使用浅色模式，但必须保证设计结果是 **High-End（高端）** 的。
3.  **先输出 DESIGN.md，再输出 tokens.css**：tokens.css 中的值必须与 DESIGN.md 中描述的完全一致。
4.  **语言**：全文中文撰写（标题用中文，**必须以 `## 数字.` 前缀开头**），Category 保持英文（14 个固定值），字体标签块 `Display:` / `Body:` / `Mono:` 保持英文。
5.  **格式**：标准 Markdown + 标准 CSS。

## 执行指令

- **输入文件路径**：`output/PRD详细版.md`
- 请先读取该文件全文，再按上述规则执行
- 输出文件 1：`output/DESIGN.md`
- 输出文件 2：`output/tokens.css`