需要从零开始或完整走设计到构建流程时…

适用于用户想完整走一遍设计流程、从零开始项目、运行完整工作流，或提到 design flow / full workflow 时。

适用场景

解决思路

1. 作为引导者，按顺序运行每个 designer skill；不要匆忙；每个阶段必须完成并确认后才能进入下一阶段。
2. 在开始时，告诉设计师完整序列（阶段 1-6，review 可单独运行），并询问是否想跳过任何阶段。
3. 在开始时提供常见跳过模式：已有清晰想法 → 跳过 grill-me；单个组件而非完整页面 → 跳过 information-architecture；已有 token 的现有项目 → 跳过 design-tokens。
4. 在每个阶段之前，宣布进入哪个阶段以及它将产出什么。示例："Phase 2: Design Brief. I'll interview you about the project and produce a DESIGN_BRIEF.md file. Ready?"
5. 在每个阶段期间，读取对应的 SKILL.md 文件并遵循其完整指示；不要总结或缩写该技能；正确运行它。
6. 在每个阶段之后，总结产出了什么（文件名、关键决策、任何未决问题），并询问："Ready to move to the next phase?" 等待确认。
7. 在阶段之间，检查上一阶段的输出是否改变下一阶段的任何内容；例如，如果 brief 命名了 philosophy，提及 tokens 阶段将使用它。
8. 设计师可随时停止；如果他们表示 "that's enough for now"，总结他们在序列中的位置以及他们返回时的下一阶段。
9. Phase 1：读取 `grill-me` 技能（`grill-me/SKILL.md`）并遵循其指示；产出对项目的共同理解，无文件输出；转场："We've resolved the key decisions. Ready to capture this as a design brief?"
10. Phase 2：读取 `design-brief` 技能（`design-brief/SKILL.md`）并遵循其指示；产出 `.design/<feature-slug>/DESIGN_BRIEF.md`；转场："The brief is saved. Next is information architecture, where we'll define the page structure and navigation. Skip this if you're building a single component. Continue?"
11. Phase 3：读取 `information-architecture` 技能（`information-architecture/SKILL.md`）并遵循其指示；产出 `.design/<feature-slug>/INFORMATION_ARCHITECTURE.md`；转场："IA is defined. Next we'll generate design tokens (colors, spacing, typography) based on the philosophy from the brief. Continue?"
12. Phase 4：读取 `design-tokens` 技能（`design-tokens/SKILL.md`）并遵循其指示；产出 token 文件（根据技术栈选择 CSS variables、Tailwind config 或 theme file）；转场："Tokens are set. Next I'll break the brief into a task list so we can build in order. Continue?"
13. Phase 5：读取 `brief-to-tasks` 技能（`brief-to-tasks/SKILL.md`）并遵循其指示；产出 `.design/<feature-slug>/TASKS.md`；转场："Tasks are ready. Now we build. I'll start with the first task on the list. Continue?"
14. Phase 6：读取 `frontend-design` 技能（`frontend-design/SKILL.md`）并遵循其指示；按顺序处理 `TASKS.md` 中的任务；每完成一个任务后勾选，并与设计师确认后再进入下一个任务；产出已构建的组件和页面；转场："The flow is complete. Your brief, IA, tokens, and tasks are all saved in the project. When you're ready for a design review, run `/design-review` and I'll critique the build against the brief."
15. 流程在 Phase 6 结束；Phase 7 不自动运行。
16. Phase 7 仅在设计师在流程中明确要求 review，或设计师在构建后单独运行 `/design-review` 时运行。
17. 如果还没有构建任何组件或页面，不要运行 Phase 7；提醒设计师："Run `/design-review` once you have something built. It will check the output against the brief."
18. 触发 Phase 7 时，读取 `design-review` 技能（`design-review/SKILL.md`）并遵循其指示；review 将使用 `Playwright MCP`（首选）、`Cursor IDE Browser`（备选）捕获运行中应用的截图，如果没有浏览器工具则让用户手动提供截图。
19. Phase 7 产出 `.design/<feature-slug>/DESIGN_REVIEW.md` 和截图，截图保存在 `.design/<feature-slug>/screenshots/`；转场："Review is done. Screenshots are saved in `.design/<feature-slug>/screenshots/`. If there are must-fix items, I can address them now."
20. 所有设计流程产物保存在 `.design/<feature-slug>/` 下，其中 `<feature-slug>` 是从被设计功能派生的简短、小写、连字符名称；确保多个功能可独立设计而不互相覆盖。
21. `.design/<feature-slug>/` 下的文件结构：`DESIGN_BRIEF.md`（Phase 2：项目意图、目标、审美方向）、`INFORMATION_ARCHITECTURE.md`（Phase 3：导航、页面结构、用户流程）、`DESIGN_TOKENS.*`（Phase 4：颜色、间距、字体、阴影，CSS/Tailwind/theme）、`TASKS.md`（Phase 5：从 brief 生成的有序构建清单）、`DESIGN_REVIEW.md`（Phase 7：基于 brief 的优先级批评）、`screenshots/`（Phase 7：运行中应用的视觉证据）。
22. `screenshots/` 子文件夹在设计 review 阶段创建；所有 review 的视觉证据（响应式断点、交互状态、深色模式）保存在这里，文件名描述性强，以便 `DESIGN_REVIEW.md` 中的发现可追溯；示例文件名：`review-[page]-desktop-1280.png`、`review-[page]-tablet-768.png`、`review-[page]-mobile-375.png`、`review-[page]-dark-mode-*.png`、`review-[component]-[state].png`。
23. 如果设计师在流程中途返回，检查 `.design/` 文件夹下现有的 feature 子文件夹。
24. 如果某个 feature 文件夹中存在早期阶段文件（`DESIGN_BRIEF.md`、`INFORMATION_ARCHITECTURE.md`、`TASKS.md`），读取它们以了解设计师在哪里离开。
25. 如果存在多个 feature 文件夹，询问要恢复哪个 feature。
26. 从下一个未完成阶段恢复。

适用边界 · 注意事项

• 只想快速构建单个组件或局部页面时，不必运行完整流程；可跳过 information-architecture 等阶段。
• 还没有任何已构建代码时，不要运行 Phase 7 Design Review，因为它需要检查运行中的应用。
• 已有清晰想法、已有 design tokens 的现有项目等，可跳过对应阶段，而不是照搬全流程。