design-builder

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Builder

设计构建器

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

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

Workflow

工作流程

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

Each step is independent. Can run isolated or chained. PRD (from prd-writer skill) is optional input at any step.

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

每个步骤相互独立，可单独运行或链式执行。PRD（来自prd-writer技能）是任意步骤的可选输入。

Artifacts

产出物

.specs/docs/
├── prd-{project-name}.md              # PRD (optional, from prd-writer)
└── {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
    └── export/
        └── index.html                 # HTML optimized for design tools

src/                                   # React components (frontend)

.specs/docs/
├── prd-{project-name}.md              # PRD（可选，来自prd-writer技能）
└── {project-name}/
    ├── copy.yaml                      # 结构化文案
    ├── design.json                    # 设计令牌
    ├── variants/
    │   ├── minimal/index.html         # 极简风格变体预览
    │   ├── editorial/index.html       # 社论风格变体预览
    │   ├── startup/index.html         # 创业风格变体预览
    │   ├── bold/index.html            # 大胆风格变体预览
    │   ├── {custom}/index.html        # 自定义变体（如有需求）
    │   └── index.html                 # 对比页面
    └── export/
        └── index.html                 # 适配设计工具的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

触发模式	参考文档
提取文案、从URL提取文案、从网站提取内容	copy.md
提取设计、从图片提取设计、提取设计令牌	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, export to Penpot	export.md

触发模式	参考文档
构建前端、创建组件、生成React代码	frontend.md
生成变体、预览设计、HTML变体	variants.md
导出设计、导出至Figma、导出至Penpot	export.md

Cross-References

交叉引用

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

External inputs (optional):
prd-writer ------> copy.md (product context)
prd-writer ------> design.md (product context)

copy.md ---------> design.md (文案为设计提供参考)
design.md -------> frontend.md (需要设计令牌)
design.md -------> variants.md (需要设计令牌)
design.md -------> export.md (需要设计令牌)
variants.md -----> frontend.md (用户选择变体后构建React代码)

外部输入（可选）：
prd-writer ------> copy.md (产品上下文)
prd-writer ------> design.md (产品上下文)

Required Skills

必备技能

The

frontend-design

skill is required for variant generation, frontend building, and design export. It provides design principles to avoid generic AI aesthetics.

Before running any building trigger (frontend, variants, export), check if the skill is installed by looking for files in

~/.claude/skills/frontend-design/

. If not found, warn the user and suggest installing it:

The frontend-design skill is required but not installed.
Install it: npx skills add https://github.com/anthropics/skills/tree/main/frontend-design

Extraction triggers (copy, design) do NOT require this skill.

frontend-design

技能是变体生成、前端构建和设计导出所必需的。它提供设计原则，避免通用AI美学风格。

在运行任何构建类触发词（前端、变体、导出）之前，请检查该技能是否已安装，可查看

~/.claude/skills/frontend-design/

目录下的文件。若未找到，请提示用户并建议安装：

The frontend-design skill is required but not installed.
Install it: npx skills add https://github.com/anthropics/skills/tree/main/frontend-design

提取类触发词（文案、设计）不需要该技能。

Guidelines

指导原则

Project naming: Ask user for project name. Use kebab-case for directory names.
Existing artifacts: Always check for existing copy.yaml, design.json, and PRD 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）。
已有产出物：开始前务必检查是否存在copy.yaml、design.json和PRD文件。若存在，将其作为上下文使用。
缺失前置条件：若缺少必需的产出物，建议用户先运行对应步骤（例如："请先运行提取设计步骤以生成design.json"）。

Error Handling

错误处理

No copy.yaml: Proceed without it, or suggest running extract copy first
No design.json: Required for frontend/variants/export -- suggest running extract design
No PRD: Optional at every step, never block on it
No frontend-design skill: Required for frontend/variants/export -- warn and suggest install
WebFetch fails: Ask user to paste a screenshot instead

无copy.yaml文件：可继续执行，或建议先运行提取文案步骤
无design.json文件：前端/变体/导出步骤必需，建议先运行提取设计步骤
无PRD文件：所有步骤均为可选，切勿因缺失而阻塞流程
无frontend-design技能：前端/变体/导出步骤必需，提示用户并建议安装
WebFetch失败：请用户提供截图替代