Back to Details

design-flow

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
This skill orchestrates the full designer workflow by running each skill in sequence. You are a guide walking the designer through each phase. Do not rush. Each phase must be completed and confirmed before moving to the next.
该技能按顺序运行每个设计相关技能，以此编排完整的设计师工作流。你将作为向导带领设计师走完每个阶段，不要急于推进，每个阶段必须完成并确认后才能进入下一阶段。

Example prompts

示例提示词

  • "Run the full design flow"
  • "Walk me through the complete process for a new project"
  • "Start from scratch and take me through everything"
  • "Design flow for a dashboard app"
  • "运行完整设计流程"
  • "带我走完新项目的完整流程"
  • "从零开始，带我走完所有环节"
  • "仪表盘应用的设计流程"

The Sequence

流程序列

1. Grill Me          → Clarify thinking
2. Design Brief      → Document intent
3. Info Architecture  → Define structure
4. Design Tokens     → Establish visual system
5. Brief to Tasks    → Plan the build
6. Frontend Design   → Build it
—
7. Design Review     → Run separately when ready
1. Grill Me          → 澄清思路
2. Design Brief      → 记录项目意图
3. Info Architecture  → 定义结构
4. Design Tokens     → 搭建视觉系统
5. Brief to Tasks    → 规划落地步骤
6. Frontend Design   → 实现构建
—
7. Design Review     → 准备就绪后单独运行

Rules

规则

  1. At the start, tell the designer what the full sequence looks like (phases 1-6, with review available separately) and ask if they want to skip any phases. Common skip patterns:
    • Already have a clear idea → skip grill-me
    • Single component, not a full page → skip information-architecture
    • Existing project with tokens → skip design-tokens
  2. Before each phase, announce which phase you are entering and what it will produce. Example: "Phase 2: Design Brief. I'll interview you about the project and produce a DESIGN_BRIEF.md file. Ready?"
  3. During each phase, read the corresponding SKILL.md file and follow its full instructions. Do not summarize or abbreviate the skill. Run it properly.
  4. After each phase, summarize what was produced (the file name, the key decisions, any open questions) and ask: "Ready to move to the next phase?" Wait for confirmation.
  5. Between phases, check if the output from the previous phase changes anything about the next phase. For example, if the brief names a philosophy, mention that the tokens phase will use it.
  6. The designer can stop at any point. If they say "that's enough for now," summarize where they are in the sequence and what the next phase would be when they return.
  1. 流程开始时，告知设计师完整的流程序列（阶段1-6，设计评审单独提供），并询问是否要跳过某些阶段。常见跳过场景：
    • 已有明确思路 → 跳过grill-me
    • 仅开发单个组件，而非完整页面 → 跳过information-architecture
    • 现有项目已配置Design Tokens → 跳过design-tokens
  2. 进入每个阶段前，告知当前进入的阶段以及该阶段的产出。示例："阶段2：Design Brief。我会向你了解项目相关信息，最终产出DESIGN_BRIEF.md文件。准备好了吗？"
  3. 每个阶段执行期间，读取对应的SKILL.md文件并完全遵循其说明，不要对技能内容进行总结或简化，需完整执行。
  4. 每个阶段结束后，总结该阶段的产出（文件名、核心决策、所有未解决问题），并询问："准备好进入下一阶段了吗？"等待确认后再推进。
  5. 阶段衔接时，检查上一阶段的输出是否会对下一阶段产生影响。例如，如果设计概要中提到了设计理念，要告知下一阶段的Design Tokens环节会沿用该理念。
  6. 设计师可随时终止流程。如果他们说"现在就到这里吧"，要总结当前所处的流程节点，以及下次返回时需要执行的下一个阶段。

Phase Details

阶段详情

Phase 1: Grill Me

阶段1：Grill Me

Read the 
grill-me
skill (grill-me/SKILL.md) and follow its instructions. Produces: Shared understanding of the project. No file output. Transition: "We've resolved the key decisions. Ready to capture this as a design brief?"
读取
grill-me
技能（grill-me/SKILL.md）并遵循其说明执行。 产出：对项目的共识，无文件输出。 过渡话术："我们已经明确了核心决策，准备好将这些内容整理为Design Brief了吗？"

Phase 2: Design Brief

阶段2：Design Brief

Read the 
design-brief
skill (design-brief/SKILL.md) and follow its instructions. Produces: 
.design/<feature-slug>/DESIGN_BRIEF.md
. Transition: "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?"
读取
design-brief
技能（design-brief/SKILL.md）并遵循其说明执行。 产出：
.design/<feature-slug>/DESIGN_BRIEF.md
。 过渡话术："设计概要已保存，下一阶段是信息架构，我们将定义页面结构和导航。如果你要构建的是单个组件可以跳过该阶段，是否继续？"

Phase 3: Information Architecture

阶段3：信息架构

Read the 
information-architecture
skill (information-architecture/SKILL.md) and follow its instructions. Produces: 
.design/<feature-slug>/INFORMATION_ARCHITECTURE.md
. Transition: "IA is defined. Next we'll generate design tokens (colors, spacing, typography) based on the philosophy from the brief. Continue?"
读取
information-architecture
技能（information-architecture/SKILL.md）并遵循其说明执行。 产出：
.design/<feature-slug>/INFORMATION_ARCHITECTURE.md
。 过渡话术："信息架构已定义，接下来我们会基于设计概要中的理念生成Design Tokens（颜色、间距、排版规则），是否继续？"

Phase 4: Design Tokens

阶段4：Design Tokens

Read the 
design-tokens
skill (design-tokens/SKILL.md) and follow its instructions. Produces: Token file (CSS variables, Tailwind config, or theme file depending on stack). Transition: "Tokens are set. Next I'll break the brief into a task list so we can build in order. Continue?"
读取
design-tokens
技能（design-tokens/SKILL.md）并遵循其说明执行。 产出：Token文件（根据技术栈不同为CSS变量、Tailwind配置或主题文件）。 过渡话术："Design Tokens已配置完成，接下来我会把设计概要拆解为任务列表，方便我们按顺序构建，是否继续？"

Phase 5: Brief to Tasks

阶段5：概要转任务

Read the 
brief-to-tasks
skill (brief-to-tasks/SKILL.md) and follow its instructions. Produces: 
.design/<feature-slug>/TASKS.md
. Transition: "Tasks are ready. Now we build. I'll start with the first task on the list. Continue?"
读取
brief-to-tasks
技能（brief-to-tasks/SKILL.md）并遵循其说明执行。 产出：
.design/<feature-slug>/TASKS.md
。 过渡话术："任务列表已准备完毕，现在我们开始构建，我会从列表中的第一个任务开始，是否继续？"

Phase 6: Frontend Design

阶段6：前端设计

Read the 
frontend-design
skill (frontend-design/SKILL.md) and follow its instructions. Work through the tasks from 
TASKS.md
in order. After completing each task, check it off and confirm with the designer before moving to the next task. Produces: Built components and pages. Transition: "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."
The flow ends here. Phase 7 is not automatic.
读取
frontend-design
技能（frontend-design/SKILL.md）并遵循其说明执行。 按顺序完成
TASKS.md
中的任务，每完成一个任务就勾选标记，和设计师确认后再进入下一个任务。 产出：构建完成的组件和页面。 过渡话术："流程已全部完成，你的设计概要、信息架构、Design Tokens和任务列表都已保存在项目中。当你准备好进行设计评审时，运行
/design-review
，我会对照设计概要对构建结果进行校验。"
流程到此结束，阶段7不会自动运行。

Phase 7: Design Review (on request only)

阶段7：设计评审（仅按需触发）

This phase does NOT run automatically. It only runs if:
  • The designer explicitly asks for a review during the flow
  • The designer runs 
    /design-review
    separately after building
The review requires built code to examine. If no components or pages have been built yet, do not run this phase. Instead, remind the designer: "Run 
/design-review
once you have something built. It will check the output against the brief."
When triggered, read the 
design-review
skill (design-review/SKILL.md) and follow its instructions. The review will capture screenshots of the running application using Playwright MCP (preferred), the Cursor IDE Browser (fallback), or by asking the user to provide them manually if no browser tool is available.
Produces: 
.design/<feature-slug>/DESIGN_REVIEW.md
+ screenshots saved in 
.design/<feature-slug>/screenshots/
. Transition: "Review is done. Screenshots are saved in 
.design/<feature-slug>/screenshots/
. If there are must-fix items, I can address them now."
该阶段不会自动运行，仅在以下场景触发：
  • 设计师在流程中明确要求进行评审
  • 设计师在构建完成后单独运行
    /design-review
评审需要已构建的代码作为校验对象，如果还没有构建任何组件或页面，不要运行该阶段，而是提醒设计师："等你有构建完成的内容后再运行
/design-review
，它会对照设计概要校验输出结果。"
触发后，读取
design-review
技能（design-review/SKILL.md）并遵循其说明执行。评审将通过Playwright MCP（优先）、Cursor IDE浏览器（备选）抓取运行中应用的截图，如果没有可用的浏览器工具，会要求用户手动提供截图。 产出：
.design/<feature-slug>/DESIGN_REVIEW.md
+ 保存在
.design/<feature-slug>/screenshots/
的截图。 过渡话术："评审已完成，截图保存在
.design/<feature-slug>/screenshots/
路径下。如果有必须修复的问题，我现在就可以处理。"

Project Files Structure

项目文件结构

All design flow artifacts are saved under 
.design/<feature-slug>/
where 
<feature-slug>
is a short, lowercase, hyphenated name derived from the feature being designed. This ensures multiple features can be designed independently without overwriting each other.
.design/
└── <feature-slug>/
    ├── DESIGN_BRIEF.md              ← Phase 2: Project intent, goals, aesthetic direction
    ├── INFORMATION_ARCHITECTURE.md  ← Phase 3: Navigation, page structure, user flows
    ├── DESIGN_TOKENS.*              ← Phase 4: Colors, spacing, typography, shadows (CSS/Tailwind/theme)
    ├── TASKS.md                     ← Phase 5: Ordered build checklist from the brief
    ├── DESIGN_REVIEW.md             ← Phase 7: Prioritized critique against the brief
    └── screenshots/                 ← Phase 7: Visual evidence from the running app
        ├── review-[page]-desktop-1280.png
        ├── review-[page]-tablet-768.png
        ├── review-[page]-mobile-375.png
        ├── review-[page]-dark-mode-*.png
        └── review-[component]-[state].png
The 
screenshots/
subfolder is created during the design review phase. All visual evidence of the review (responsive breakpoints, interactive states, dark mode) is saved here with descriptive filenames so findings in 
DESIGN_REVIEW.md
are traceable.
所有设计流程产物都保存在
.design/<feature-slug>/
路径下，其中
<feature-slug>
是基于待设计功能生成的短横线分隔的小写短名称，确保多个功能可以独立设计，不会互相覆盖。
.design/
└── <feature-slug>/
    ├── DESIGN_BRIEF.md              ← 阶段2：项目意图、目标、美学方向
    ├── INFORMATION_ARCHITECTURE.md  ← 阶段3：导航、页面结构、用户流程
    ├── DESIGN_TOKENS.*              ← 阶段4：颜色、间距、排版、阴影（CSS/Tailwind/主题文件）
    ├── TASKS.md                     ← 阶段5：基于设计概要生成的有序构建检查清单
    ├── DESIGN_REVIEW.md             ← 阶段7：对照设计概要的优先级评审意见
    └── screenshots/                 ← 阶段7：运行中应用的可视化凭证
        ├── review-[page]-desktop-1280.png
        ├── review-[page]-tablet-768.png
        ├── review-[page]-mobile-375.png
        ├── review-[page]-dark-mode-*.png
        └── review-[component]-[state].png
screenshots/
子文件夹会在设计评审阶段创建，所有评审的可视化凭证（响应式断点、交互状态、深色模式）都会保存在这里，使用描述性文件名，方便
DESIGN_REVIEW.md
中的评审意见溯源。

If the Designer Returns Mid-Flow

若设计师中途返回继续流程

Check the 
.design/
folder for existing feature subfolders. If files from earlier phases exist (DESIGN_BRIEF.md, INFORMATION_ARCHITECTURE.md, TASKS.md) inside a feature folder, read them to understand where the designer left off. Ask which feature to resume if multiple folders exist. Resume from the next incomplete phase.
检查
.design/
文件夹下是否有已存在的功能子文件夹，如果某个功能文件夹中存在之前阶段的文件（DESIGN_BRIEF.md、INFORMATION_ARCHITECTURE.md、TASKS.md），读取这些文件确认设计师上次的进度节点。如果存在多个文件夹，询问要恢复哪个功能的流程，从下一个未完成的阶段继续执行。