当用户需要基于PRD文档生成完整Web设计规范时使用本技能。技能读取PRD的03-design-handoff.md和04-pages-components.md，产出包含完整hex色板、字体、间距、动效、组件样式的DESIGN.md设计规范文档。是PRD完成后、Claude Code落地前的视觉层设计环节。
Design Spec专家：PRD产出完整设计规范生成器
【适用场景】
当用户需要基于PRD文档生成完整Web设计规范时，使用本技能。典型场景包括：
- "做一份设计规范" - "定一下视觉风格" - "帮我写DESIGN.md" - "参考XX出一套设计token" - "按PRD设计页面"
核心价值： 本技能只产规范文档，不写实现代码。代码由下游Claude Code/Cursor等AI编程Agent基于DESIGN.md + PRD.md自行实现。
重要： 本技能是PRD之后的环节，必须先有PRD/文件夹和03-design-handoff.md才能运行。
【操作步骤】
Step 1：PRD完成度门禁检查
读取`PRD/03-design-handoff.md`和`PRD/04-pages-components.md`后，先做3项门禁检查：
- [ ] 03-design-handoff.md的§3.1（产品调性关键词）有内容 - [ ] 03-design-handoff.md的§3.6（组件清单视觉密度提示）至少列了1个页面/组件 - [ ] 04-pages-components.md存在且能读到组件清单
任何一项不通过，告诉用户： > "⚠️ 我读了PRD/03-design-handoff.md，发现[具体缺什么]。建议先回PRD把03-design-handoff.md补完再做设计规范——否则我做出来的规范会和你的页面/组件清单脱节。"
Step 2：收集设计输入
按优先级检测输入来源：
1. 项目根目录已有`DESIGN.md`？→ 问用户：沿用/修改/重建 2. 有`PRD/03-design-handoff.md`？→ 读取7个小节作为主要输入 3. 有`PRD/04-pages-components.md`？→ 读取完整页面/组件清单 4. 用户给了参考URL/截图/关键词？→ 直接进入提取
PRD设计交接区包含：
- §3.1 产品调性关键词 - §3.2 目标用户视觉感受 - §3.3 目标市场与语言 - §3.4 参考竞品 - §3.5 视觉约束 - §3.6 组件清单视觉密度提示 - §3.7 输出契约
Step 3：交互档位确认
必须问一次交互档位：
| 档位 | 体验 | 适用场景 |
|---|---|---|
| L1 静态优雅（默认） | hover + 柔和入场动画 | 正式产品 |
| L2 精致动感 | 滚动驱动 + 微物理 | 消费品/创投产品 |
| L3 极简克制 | 极简动效，弱反馈 | 开发者工具/严肃产品 |
Step 4：产出DESIGN.md
按以下模块产出设计规范：
1. 色彩系统：
```markdown
色彩
主色
| 角色 | 色值 | 用途 |
|---|---|---|
| Primary | #XXXXXX | 主按钮、链接 |
| Secondary | #XXXXXX | 次级元素 |
| Accent | #XXXXXX | 强调、高亮 |
功能色
| 角色 | 色值 | 用途 |
|---|---|---|
| Success | #XXXXXX | 成功状态 |
| Warning | #XXXXXX | 警告状态 |
| Error | #XXXXXX | 错误状态 |
中性色
| 角色 | 色值 | 用途 |
|---|---|---|
| Background | #XXXXXX | 背景色 |
| Surface | #XXXXXX | 卡片/表面 |
| Border | #XXXXXX | 边框/分割线 |
| Text Primary | #XXXXXX | 主文本 |
| Text Secondary | #XXXXXX | 次级文本 |
2. 字体系统：
```markdown
字体
| 角色 | 字体 | 字号 | 字重 | 行高 |
|---|---|---|---|---|
| Display | Inter | 48px | 700 | 1.2 |
| H1 | Inter | 32px | 600 | 1.3 |
| H2 | Inter | 24px | 600 | 1.4 |
| Body | Inter | 16px | 400 | 1.5 |
| Small | Inter | 14px | 400 | 1.5 |
| Caption | Inter | 12px | 400 | 1.4 |
3. 间距系统：
```markdown
间距
| Token | 值 | 用途 |
|---|---|---|
| xs | 4px | 紧凑间距 |
| sm | 8px | 小间距 |
| md | 16px | 默认间距 |
| lg | 24px | 大间距 |
| xl | 32px | 区块间距 |
| 2xl | 48px | 页面级间距 |
4. 动效规范：
```markdown
动效
| 类型 | 参数 | 用途 |
|---|---|---|
| 入场 | duration: 300ms, easing: ease-out | 元素出现 |
| 退出 | duration: 200ms, easing: ease-in | 元素消失 |
| Hover | duration: 150ms | 交互反馈 |
| 过渡 | duration: 200ms | 页面切换 |
5. 组件样式：
按PRD/04-pages-components.md中的组件清单，给每个组件定义样式：
```markdown
组件
Button
| 状态 | 背景色 | 文字色 | 边框 |
|---|---|---|---|
| Default | Primary | White | none |
| Hover | Darken 10% | White | none |
| Active | Darken 20% | White | none |
| Disabled | Gray 200 | Gray 500 | none |
Input
| 状态 | 边框色 | 背景色 |
|---|---|---|
| Default | Border | White |
| Focus | Primary | White |
| Error | Error | White |
Step 5：交付DESIGN.md
最终交付物是`DESIGN.md`文件，保存在项目根目录，可手动修改或被任何工具消费。
【代码模板】
触发提示词
```markdown /design-spec
我跑过了/prd-writing，现在PRD/文件夹里有03-design-handoff.md和04-pages-components.md。 帮我产出DESIGN.md设计规范。 ```
PRD缺失时的回复
```markdown ⚠️ 我检测到当前目录没有PRD/文件夹，或PRD/03-design-handoff.md不存在。
design-spec是PRD之后的环节，必须先有PRD才能跑本skill。
建议先跑 /prd-writing，等PRD完成后再说。
如果你坚持跳过PRD，我可以用对话兜底（最多问3个问题），但效果会差很多。 ```
输入来源优先级
| 来源 | 处理方式 |
|---|---|
| PRD/03-design-handoff.md | 直接读取7个小节 |
| PRD/04-pages-components.md | 直接读取组件清单 |
| 参考URL | WebFetch抓取提取 |
| 参考截图 | 从图中读视觉气质 |
| 关键词 | 直接转token |
【复盘要点】
核心原则
1. PRD先于DESIGN：0→1项目必须先定结构（页面/组件），才能定视觉（颜色/字体/动效）。不能颠倒顺序。
2. 只产规范文档，不写代码：代码由下游Claude Code基于DESIGN.md + PRD.md实现。
3. 继承优于重复：有PRD设计交接区就直接继承，不要重复提问。
4. MVP优先：规范服务于"先把核心功能跑起来"，不为"将来可能用到"加复杂度。
与PRD的边界
| 谁来做 | 做什么 |
|---|---|
| PRD | 结构（页面/组件/路由/数据/逻辑） |
| DESIGN.md | 视觉（颜色/字体/间距/动效） |
| Claude Code | 代码实现 |
质量验收标准
- ✅ 色彩系统有hex值和用途说明 - ✅ 字体系统有完整字号/字重/行高 - ✅ 间距系统有token值 - ✅ 动效规范有具体参数 - ✅ 组件样式覆盖PRD中的所有组件 - ✅ DESIGN.md可被Claude Code直接消费
来源： chusimin/vibe-engineering-template (GitHub) | https://github.com/chusimin/vibe-engineering-template