用途:design-flow 是一个编排型技能,把完整的设计到构建流程串成一条引导式序列,带领设计师逐阶段推进。适用于“运行完整设计流程”“从零开始带我走一遍”“为仪表盘应用做设计流程”等场景。
主要能力:按顺序编排各设计师技能——1. Grill Me(澄清思路,无文件输出);2. Design Brief(产出 DESIGN_BRIEF.md);3. Information Architecture(产出 INFORMATION_ARCHITECTURE.md);4. Design Tokens(产出 CSS 变量、Tailwind 配置或主题文件);5. Brief to Tasks(产出 TASKS.md);6. Frontend Design(按任务清单构建组件与页面);7. Design Review(仅在请求时运行,产出 DESIGN_REVIEW.md 与截图)。
使用方式:开始时先说明完整序列(阶段 1-6,评审单独提供),并询问是否跳过某些阶段。常见跳过情形:已有清晰想法可跳过 grill-me;只做单个组件而非整页可跳过 information-architecture;已有 tokens 的现有项目可跳过 design-tokens。每个阶段前先宣告进入哪个阶段及其产出,阶段中读取对应 SKILL.md 并完整执行,阶段后总结产出并等待确认再继续。设计师可随时停止。
文件结构:所有产物保存在 .design/<feature-slug>/ 下,包含 DESIGN_BRIEF.md、INFORMATION_ARCHITECTURE.md、DESIGN_TOKENS.*、TASKS.md、DESIGN_REVIEW.md 及 screenshots/ 子目录,便于多个功能独立设计互不覆盖。中途返回时检查该目录,读取已有文件判断进度并从下一个未完成阶段继续。
限制:阶段 7 不会自动运行,需设计师明确请求或单独运行 /design-review,且必须有已构建的代码可供检查;评审截图依赖 Playwright MCP(首选)、Cursor IDE Browser(备选)或用户手动提供。具体收费、平台支持等信息暂未提供。