design-builder

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Builder

设计构建器

Design-to-code pipeline: discover, extract, tokenize, build.

设计转代码流水线：发现、提取、令牌化、构建。

Workflow

工作流程

discovery --> copy --> design --> frontend / variants / export

Each step is independent. Can run isolated or chained. Discovery is always the first step -- never skip it.

discovery --> copy --> design --> frontend / variants / export

每个步骤都是独立的，可以单独运行或链式执行。Discovery始终是第一步——切勿跳过。

Discovery

Before any operation, establish project context.

在执行任何操作前，先建立项目上下文。

Step 1: Check Existing Context

步骤1：检查现有上下文

Look for existing documents in

.specs/docs/

```
prd.md
```
-- PRD
```
brief.md
```
-- Brief

If found: read and extract purpose, audience, tone, and key features. Skip to the relevant trigger operation.

查看

.specs/docs/

中的现有文档：

```
prd.md
```
-- 产品需求文档（PRD）
```
brief.md
```
-- 项目简报（Brief）

若找到：读取并提取项目目标、受众、风格基调及核心功能。跳转到对应的触发操作。

Step 2: Lightweight Discovery (when no PRD/Brief exists)

步骤2：轻量Discovery（无PRD/Brief时）

Ask up to 4 questions, one stage only:

What is the project purpose? (landing page, app, tool, portfolio)
Who is the target audience?
What is the visual reference? (URLs, screenshots, descriptions)
Any brand or style constraints? (colors, fonts, existing guidelines)

If the user answers "I don't know" to any question, mark as TBD and move forward. Summarize understanding before proceeding.

最多提出4个问题，一次只问一个：

项目目标是什么？（落地页、应用、工具、作品集）
目标受众是谁？
视觉参考是什么？（URL、截图、描述）
有哪些品牌或风格约束？（颜色、字体、现有规范）

若用户对任何问题回答“我不知道”，标记为TBD并继续。在推进前总结当前理解。

Step 3: Route to Operation

步骤3：路由至对应操作

Phase 1 -- Extraction (how to obtain design tokens):

Has URL reference?
  Yes --> Extract copy --> Extract design
  No  --> Has image reference?
    Yes --> Extract design
    No  --> Visual discovery (tone, colors, typography) --> Extract design

Phase 2 -- Building (what to build -- user chooses):

design.json exists --> What to build?
  Preview first    --> Variants --> Frontend or Export
  Build directly   --> Frontend
  Send to Figma    --> Variants --> Export
  External tool    --> Generate prompt (v0, aura.build, replit, etc.)

Valid paths after design.json:

design --> variants --> frontend
design --> variants --> export
design --> frontend (directly)
design --> prompt for external tool

阶段1 -- 提取（获取设计令牌的方式）：

是否有URL参考？
  是 --> 提取文案 --> 提取设计
  否  --> 是否有图片参考？
    是 --> 提取设计
    否  --> 视觉Discovery（风格基调、颜色、排版） --> 提取设计

阶段2 -- 构建（构建内容——由用户选择）：

已存在design.json --> 构建什么？
  先预览    --> 生成变体 --> 前端代码或导出
  直接构建   --> 前端代码
  发送至Figma    --> 生成变体 --> 导出
  外部工具    --> 生成提示词（v0、aura.build、replit等）

design.json生成后的有效路径：

design --> 变体 --> 前端代码
design --> 变体 --> 导出
design --> 前端代码（直接）
design --> 生成外部工具提示词

Artifacts

产物

.specs/docs/
├── prd.md                             # PRD (optional)
├── brief.md                           # Brief (optional)
└── {project-name}/
    ├── copy.yaml                      # Structured content
    ├── design.json                    # Design tokens
    ├── variants/
    │   ├── minimal/index.html         # Variant preview
    │   ├── editorial/index.html
    │   ├── startup/index.html
    │   ├── bold/index.html
    │   ├── {custom}/index.html        # Custom variant (if requested)
    │   └── index.html                 # Comparison page
src/                                   # React components (frontend)

.specs/docs/
├── prd.md                             # PRD（可选）
├── brief.md                           # Brief（可选）
└── {project-name}/
    ├── copy.yaml                      # 结构化文案
    ├── design.json                    # 设计令牌
    ├── variants/
    │   ├── minimal/index.html         # 变体预览
    │   ├── editorial/index.html
    │   ├── startup/index.html
    │   ├── bold/index.html
    │   ├── {custom}/index.html        # 自定义变体（若有需求）
    │   └── index.html                 # 对比页面
src/                                   # React组件（前端代码）

Triggers

触发词

Extraction

提取

Trigger Pattern	Reference
Extract copy, copy from URL, content from website	copy.md
Extract design, design from image, design tokens	design.md

触发模式	参考文档
Extract copy、从URL提取文案、从网站提取内容	copy.md
Extract design、从图片提取设计、设计令牌	design.md

Building

构建

Trigger Pattern	Reference
Build frontend, create components, generate React	frontend.md
Generate variants, preview designs, HTML variants	variants.md
Export design, export to Figma, send to Figma	export.md

触发模式	参考文档
Build frontend、创建组件、生成React	frontend.md
Generate variants、预览设计、HTML变体	variants.md
Export design、导出至Figma、发送至Figma	export.md

Cross-References

交叉引用

copy.md ---------> design.md (content informs design)
design.md -------> frontend.md (tokens required)
design.md -------> variants.md (tokens required)
aesthetics.md ---> frontend.md (design principles)
aesthetics.md ---> variants.md (design principles)
variants.md -----> frontend.md (user picks variant, then builds React)
variants.md -----> export.md (variants required for Figma export)

copy.md ---------> design.md（文案为设计提供参考）
design.md -------> frontend.md（需要令牌）
design.md -------> variants.md（需要令牌）
aesthetics.md ---> frontend.md（设计原则）
aesthetics.md ---> variants.md（设计原则）
variants.md -----> frontend.md（用户选择变体后构建React）
variants.md -----> export.md（导出至Figma需要变体）

Guidelines

规范

Project naming: Ask user for project name. Use kebab-case for directory names.
Discovery first: Always check for existing PRD/Brief before any operation. Use them as context when available.
Existing artifacts: Always check for existing copy.yaml, design.json before starting. Use them as context when available.
Missing prerequisites: If a required artifact is missing, suggest which step to run first (e.g., "Run extract design first to generate design.json").

项目命名：询问用户项目名称。目录名使用kebab-case格式。
先做Discovery：执行任何操作前，始终先检查现有PRD/Brief。若存在则将其作为上下文使用。
现有产物：开始前始终检查是否存在copy.yaml、design.json。若存在则将其作为上下文使用。
缺失前置条件：若缺少必需的产物，建议先运行对应的步骤（例如：“请先运行extract design以生成design.json”）。

Suggestions

建议

After completing any operation, suggest next steps without coupling to specific skills:

If no PRD/Brief existed: "For more complete product documentation, consider creating a PRD or Brief before the next iteration."
If variants were generated: "To send a variant to Figma for refinement, run export to Figma."
Standard next steps per operation (already defined in each reference file).

完成任何操作后，建议下一步骤，但不绑定到特定技能：

若无PRD/Brief：“为了更完整的产品文档，建议在下一次迭代前创建PRD或Brief。”
若已生成变体：“若要将变体发送至Figma进行优化，请运行导出至Figma操作。”
各操作的标准下一步骤（已在各参考文档中定义）。

Error Handling

错误处理

No PRD/Brief: Run lightweight discovery, never block on it
No copy.yaml: Proceed without it, or suggest running extract copy first
No design.json: Required for frontend/variants/export -- suggest running extract design
WebFetch fails: Ask user to paste a screenshot instead

无PRD/Brief：运行轻量Discovery，切勿因此阻塞流程
无copy.yaml：继续执行，或建议先运行extract copy
无design.json：构建前端/变体/导出必需的前置条件——建议先运行extract design
WebFetch失败：请用户粘贴截图替代