design-speclisted

# Design Spec — 设计规范生成器 只做一件事:产出一份高质量的 `DESIGN.md`。 代码落地不归本 SKILL 管——交给下游 Claude Code 读 DESIGN.md + PRD.md 自己实现。 --- ## 与其他 Skill 的衔接关系 ``` /mrd → 从数据分析市场需求 → MRD.md ↓ /brd → 判断商业可行性 → BRD.md ↓ /prd-writing → 定义产品结构 → PRD/ 文件夹（含 PRD/03-design-handoff.md 设计交接清单） ↓ /design-spec → 读 PRD/03-design-handoff.md + PRD/04-pages-components.md → 产出 DESIGN.md（本 Skill） ↓ Claude Code 默认能力 → 基于 PRD/ + DESIGN.md 实现 MVP 代码 ``` 设计规范是**规格层**,代码实现是**执行层**——两层分离,互不污染。 ### 🔒 PRD 必须先于 DESIGN（教学场景的硬性顺序） 本 skill **必须在 PRD 完成后才运行**。如果当前目录没有 `PRD/` 文件夹（或没有 `PRD/03-design-handoff.md`），告诉用户先跑 `/prd-writing`，不要硬上。 **为什么这样划线**： 0→1 项目还没有"已存在的设计系统"作为约束，必须先定结构（页面/组件/路由）才能定皮肤（颜色/字体/动效）。如果反过来（先 DESIGN 再 PRD），DESIGN 阶段不知道有哪些组件要被定规范，做出的设计是空中楼阁。这条流程顺序在教学场景里是绝对的。 --- ## 核心原则 1. **DESIGN.md 是显式产物**,保存到项目根目录,可手动改、可被任何工具消费 2. **不写页面代码**,代码由 Claude Code 读 DESIGN.md + PRD/ 自己生成 3. **PRD 是上游,本 skill 是下游**——0→1 项目必须先有 PRD/ 文件夹,本 skill 读 `PRD/03-design-handoff.md` 作为输入 4. **能继承就继承**:有 03-design-handoff.md 就读它,有参考 URL/截图就提取 5. **有数据就用数据,没数据用对话**——不要一上来就给问卷 6. **MVP 优先**——规范服务于「先把核心功能跑起来」,不要为「将来可能用到」加复杂度 7. **默认 Web 端响应式网页**,除非用户明确说要做 App --- ## 启动检测(按优先级) 按以下顺序判断从哪里起步: 1. 项目根目录已有 `DESIGN.md`?→ 问用户:**沿用 / 修改 / 重建** 2. **项目根目录有 `PRD/03-design-handoff.md`?**（推荐路径，0→1 教学流程的标准入口） → 读它的 7 个小节（产品调性 / 目标用户视觉感受 / 目标市场与语言 / 参考竞品 / 视觉约束 / 组件密度提示 / 输出契约），作为主要输入 → **同时读 `PRD/04-pages-components.md`** 拿到完整页面/组件清单（决定要为哪些组件定样式） 3. 项目根目录有旧版 `PRD.md`（单文件版）?→ 读末尾的「设计交接区」字段（兼容历史版本） 4. 用户给了参考 URL / 截图 / 关键词?→ 直接进