# 提示词 · 02.1 设计系统展示页生成器

> **使用方法**：把以下全部内容复制，粘贴到 Claude Code 对话框发送即可。
>
> **前置依赖**：
> - `output/DESIGN.md` 已存在（由 02-设计系统设计师 产出）
> - `output/tokens.css` 已存在（由 02-设计系统设计师 产出）
>
> **产出**：`output/design-system-showcase.html`（单个 HTML 文件）
>
> **用途**：这是一个**设计系统评审页**——把 DESIGN.md 的所有设计理念和 tokens.css 的所有变量可视化呈现，让评审人（设计师/产品/老板）打开一个页面就能一目了然地判断"这个设计行不行"。不是产品页面，是设计系统的"自我介绍"。

---

# Role / 角色定义
你是一位 **世界顶级** 的设计系统展示专家（Design System Showcase Specialist），同时是资深前端工程师。你的专长是把抽象的设计规范（DESIGN.md + tokens.css）转化为**一眼看懂、专业可信**的可视化评审页面。

你做过 Stripe、Linear、Vercel、Anthropic 等顶级公司的设计系统展示页（Style Guide / Design System Showcase）。你知道评审人想看什么：不是花哨的动画，而是**每个设计决策的清晰对照和真实渲染**。

---

# Task / 任务目标
根据 `DESIGN.md` 和 `tokens.css`，生成一个**完整、独立、自包含**的 HTML 评审页。

**核心目标**：
- **一目了然**：评审人打开页面，3 秒内知道这是什么设计系统、什么风格、什么气质
- **完整覆盖**：DESIGN.md 的 9 段设计理念 + tokens.css 的全部 56 个变量，都要可视化呈现
- **真实渲染**：不是"写个表格说颜色是 #xxx"，而是**真实渲染那个颜色/字体/间距/组件**，让评审人看到实际效果
- **可以长**：这是评审页，单页长滚动，内容完整优先于"一屏装下"

---

# Input / 输入说明

1. `DESIGN.md`：9 段设计宣言（视觉主题/色彩美学/排版字体/间距体系/布局空间/组件设计/动效交互/品牌情感/设计禁忌）
2. `tokens.css`：56 个 CSS 变量（Surface/Foreground/Border/Accent/Semantic/Typography/TypeScale/Spacing/Radius/Elevation/Focus/Motion/Layout）

**这两个文件是唯一真理来源**。展示页的所有内容都从这两个文件提取，不发明新内容。

---

# Implementation Requirements / 实现要求

## 1. Tech Stack & Resources（技术栈与资源）

- **核心技术**：原生 HTML + Tailwind CSS（仅用于布局工具类）
- **Head 区资源引入（必须）**：
  - Tailwind CSS CDN：
    ```html
    <script src="https://cdn.tailwindcss.com"></script>
    ```
  - 字体（从 tokens.css 的 `--font-display` / `--font-body` / `--font-mono` 提取，通过 Google Fonts 引入）
  - 图标库：Phosphor Icons
    ```html
    <script src="https://unpkg.com/@phosphor-icons/web"></script>
    ```

- **设计 Token 注入（关键要求）**：
  读取 `tokens.css`，将 `:root {}` 块（及 `[data-theme="dark"]` 块，如有）**原封不动粘贴**到页面 `<style>` 中。此后全文使用 `var(--xxx)` 引用，**禁止硬编码 Hex 颜色值**（hex 只允许出现在 `:root {}` 块内部和色板展示区的"Hex 值标注"文字中）。

---

## 2. 页面结构（必须包含以下 11 个 Section，按顺序）

页面采用**单列长滚动**布局，每个 Section 用明显的章节标题分隔。桌面端主体宽度 1200-1400px 居中。

### Section 1: Hero（设计系统名片）

- **设计系统名称**（H1，用 `--font-display`，最大字号）
- **Category** 标签（来自 DESIGN.md 文件头的 Category）
- **一句话摘要**（来自 DESIGN.md 文件头的摘要）
- **核心隐喻**（来自 §1，用一段沉浸式文字呈现，这是"灵魂")
- **设计签名**：用一个视觉元素体现这个设计系统的独特签名（来自 §1 的"设计签名"描述）

> 这一节让评审人 3 秒内 get 到设计气质。

### Section 2: 设计理念（来自 §1）

用卡片或分栏布局呈现：
- **用户情绪**：用户使用时应感到什么？（来自 §1）
- **设计决策理由**：为什么选浅色/深色？为什么选这种风格？（来自 §1）
- **风格定位**：在整个行业中的坐标（来自 §1）
- **Prior Art**：参考了哪些真实产品/设计系统，从每个参考中汲取了什么（来自 §1，用表格或卡片）

### Section 3: 色彩系统（来自 §2 + tokens.css）

**这是评审页的核心**。必须真实渲染每个颜色。

分 5 组展示，每组用网格色块：

**3.1 Surface 色板**
- 每个变量一个色块：`--bg` / `--surface` / `--surface-warm` / `--surface-hover`
- 色块上标注：变量名、Hex 值、用途说明（来自 §2 的设计理由）

**3.2 Foreground / Text 色板**
- `--fg` / `--fg-2` / `--muted` / `--meta`
- 色块用**实际文字渲染**（在对应背景上显示"This is foreground text"），让评审人直接看到可读性

**3.3 Border 色板**
- `--border` / `--border-soft`
- 用实际带边框的盒子展示

**3.4 Accent 色板**
- `--accent` / `--accent-hover` / `--accent-active` / `--accent-on`
- 用按钮的真实状态展示（default/hover/active），让评审人看到 accent 的实际效果
- **强调色纪律说明**：标注"每屏最多 2 处可见使用，中性色 70-90%，accent 5-10%，语义色 0-5%"（来自 §2）

**3.5 Semantic 色板**
- `--success` / `--warn` / `--danger`
- 用状态提示组件展示（成功/警告/错误的 Toast 或 Badge）

> 每个色块必须显示 Hex 值，让评审人能核对。

### Section 4: 排版系统（来自 §3 + tokens.css）

**4.1 字体展示**
- Display 字体：用 `--font-display` 渲染一段大标题示例（如"The quick brown fox"）
- Body 字体：用 `--font-body` 渲染一段正文示例
- Mono 字体：用 `--font-mono` 渲染一段代码/数据示例
- 每个标注：font stack、字体哲学（为什么选这套字体，来自 §3）

**4.2 字号梯度（Type Scale）**
- 从 `--text-xs` 到 `--text-4xl`，每个字号实际渲染一行示例文字
- 标注像素值，让评审人看到梯度差异

**4.3 Letter-spacing 规则**
- 用表格展示：ALL CAPS / Display / 标题 / 小文本 / UI 标签 / 正文 各自的 letter-spacing 值（来自 §3 硬规则）
- 每行实际渲染对应文字，让评审人看到字距差异

**4.4 Line-height**
- 展示 `--leading-body` 和 `--leading-tight` 的实际段落效果

### Section 5: 间距体系（来自 §4 + tokens.css）

- 用**可视化色条**展示 `--space-1` 到 `--space-12` 的实际尺寸（每个间距用一个对应宽度的色条）
- 标注像素值
- 展示 Section rhythm：`--section-y-desktop` / `tablet` / `phone` 的对比

### Section 6: 布局与空间（来自 §5 + tokens.css）

- **Bento Grid 示例**：用实际的 Bento Grid 布局展示几个卡片，体现"便当盒美学"
- **Container**：标注 `--container-max` / gutter 值
- **深度与层级**：展示 `--elev-flat` / `--elev-ring` / `--elev-raised` 三个层级的卡片，让评审人看到"浮起来"的效果

### Section 7: 圆角与焦点（来自 tokens.css）

- **圆角梯度**：`--radius-sm` / `--radius-md` / `--radius-lg` / `--radius-pill`，每个用一个对应圆角的盒子展示
- **Focus Ring**：展示 `--focus-ring` 的实际效果（一个聚焦状态的输入框/按钮）

### Section 8: 组件库（来自 §6）

**从 DESIGN.md §6 直接复制组件 CSS**，然后渲染每个组件的所有状态：

- **按钮**：default / hover / active / focus-visible / disabled（至少 2 种变体：主按钮 + 次按钮）
- **卡片**：default / hover（体现交互哲学：阴影提升型/色彩响应型/物理位移型）
- **输入框**：default / focus / error / disabled
- **徽章/Badge**：各种语义色
- 其他 DESIGN.md §6 中定义的组件

> 每个组件必须**真实可交互**（hover/active 能看到状态变化），不是静态截图。

### Section 9: 动效与交互物理（来自 §7 + tokens.css）

- **Motion 时长**：展示 `--motion-fast` (150ms) 和 `--motion-base` (200ms) 的实际过渡效果（一个 hover 元素）
- **Easing 曲线**：展示 `--ease-standard` 的曲线，并用实际动画演示
- **微反馈演示**：按钮按压、输入框聚焦、卡片悬停的实际 CSS 效果（从 §7 直接复制 CSS）
- **进场动画**：展示一个 staggered 进场效果
- **prefers-reduced-motion 说明**：标注本系统如何处理无障碍

### Section 10: 品牌情感与声音（来自 §8）

- **品牌关键词**：3-5 个关键词（来自 §8），用大字呈现
- **情感化细节**：空状态 / Loading / 404 的实际样式示例（真实渲染，不是描述）
- **Agent Prompt Guide**：给生成 HTML 的 agent 的设计指令（来自 §8）

### Section 11: 设计禁忌（来自 §9）

- 用**对比展示**呈现每条禁忌：
  - 左侧：✅ 正确做法
  - 右侧：❌ 禁止做法（用红色叉号标注）
- 每条附理由（来自 §9）

> 这是最有评审价值的部分——让评审人看到"什么不能做"。

---

## 3. Layout & Responsiveness（布局与响应式）

- **桌面端优先**：以 1440px 宽度为主设计参考，主体内容 1200-1400px 居中
- **移动端适配**：约 375px 单列滚动（次要，评审场景以桌面为主）
- **长滚动**：页面可以很长（2000-5000px 高度正常），用清晰的 Section 锚点导航
- **建议**：顶部加一个**固定导航条**，列出 11 个 Section 的锚点，方便评审人快速跳转

---

## 4. Visual Aesthetics（视觉与美学）

- **严格遵守 DESIGN.md**：这个展示页本身必须**践行**它所展示的设计系统——用 `var(--xxx)` 引用所有 token，用 Bento Grid 布局，用签名级视觉决策
- **展示页本身就是设计系统的最佳示范**：如果展示页自己都不好看，设计系统就有问题
- **克制但完整**：信息密度高但不拥挤，每个 Section 有呼吸空间

---

## 5. Content Rules（内容规则）

- **真实渲染**：颜色用真实色块，字体用真实渲染，间距用真实尺寸，组件用真实交互——**禁止只用文字描述**
- **标注完整**：每个展示元素标注：变量名、数值、用途、设计理由（来自 DESIGN.md 对应章节）
- **不发明内容**：所有文案从 DESIGN.md 提取，不自己编设计理念
- **Hex 值显示**：色彩区每个色块必须显示 Hex 值，方便评审核对

---

## 6. Code Style（代码风格）

- 完整 HTML 结构（DOCTYPE、html、head、body、meta charset、viewport）
- `<title>`：`{设计系统名称} · Design System Showcase`
- Tailwind Class 有条理，2 空格缩进
- 组件 CSS 优先从 DESIGN.md §6/§7 直接复制

---

# Output / 输出格式

- 请直接输出**一个 HTML 文件的完整代码**，不要添加任何解释性文字
- 输出文件：`output/design-system-showcase.html`

---

## 执行指令

- **DESIGN.md 路径**：`output/DESIGN.md`
- **tokens.css 路径**：`output/tokens.css`

请先完整读取 DESIGN.md 和 tokens.css，然后：
1. 将 tokens.css 的 `:root {}` 粘贴到 `<style>`
2. 从 DESIGN.md 提取 9 段内容，映射到展示页的 11 个 Section
3. 生成完整的单页 HTML

**硬性约束**：
1. 全文使用 `var(--xxx)` 引用设计 Token，禁止硬编码颜色（hex 只允许在 `:root {}` 内和色板标注文字中）
2. 11 个 Section 缺一不可
3. 每个颜色/字体/间距/组件必须**真实渲染**，不能只用文字描述
4. 展示页本身必须践行它所展示的设计系统（用 Bento Grid、用签名视觉、用 token 引用）

请先阅读 DESIGN.md 和 tokens.css 确保已经理解后，再开始工作。

---

## 输出后自校验（生成后必须执行）

生成 HTML 并保存后，**立即**对自己刚写的文件执行以下检查：

1. **Grep 搜索 `:root {`**：确认 `<style>` 中包含从 tokens.css 粘贴的 `:root {}` 块
2. **Grep 搜索 `#[0-9a-fA-F]{3,6}`**：检查硬编码 hex 颜色。hex 值只允许出现在：
   - `:root {}` 块内部
   - 色板展示区的"Hex 值标注"文字中（如 `<span>#0B5FBA</span>`）
   - 组件 CSS 中出现任何其他 hex 值即为违规
3. **Grep 搜索 11 个 Section 标题**：确认全部存在
   - Hero / 设计理念 / 色彩系统 / 排版系统 / 间距体系 / 布局与空间 / 圆角与焦点 / 组件库 / 动效 / 品牌情感 / 设计禁忌
4. **检查色彩区**：确认 Surface / Foreground / Border / Accent / Semantic 五组色板都有真实渲染的色块
5. **检查组件区**：确认按钮/卡片/输入框都有多状态展示（default/hover/active/focus）
6. **如果检查不通过**：自行修复，修复后重新保存，禁止交付不合规的 HTML

> 这不是可选步骤。HTML 文件保存后必须执行，通过后才能汇报"已完成"。