design-to-code

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design to Code

设计转代码

Convert visual designs into production-ready React components using a four-stage pipeline: Extract, Match, Adapt, Render.

bash

/ork:design-to-code screenshot of hero section    # From description
/ork:design-to-code /tmp/mockup.png               # From screenshot
/ork:design-to-code https://example.com/pricing    # From URL

使用四阶段流水线（提取、匹配、适配、渲染）将视觉设计转换为可用于生产环境的React组件。

bash

/ork:design-to-code screenshot of hero section    # From description
/ork:design-to-code /tmp/mockup.png               # From screenshot
/ork:design-to-code https://example.com/pricing    # From URL

Pipeline Overview

流水线概述

Input (screenshot/description/URL)
  │
  ▼
┌─────────────────────────┐
│ Stage 1: EXTRACT         │  Stitch MCP → HTML + design context
│ get_screen_code          │  Extract colors, typography, layout
│ extract_design_context   │  Produce design-tokens.json
└─────────┬───────────────┘
          │
          ▼
┌─────────────────────────┐
│ Stage 2: MATCH           │  21st.dev Magic → search components
│ Search by description    │  Find production-ready matches
│ Filter by framework      │  React + Tailwind preferred
└─────────┬───────────────┘
          │
          ▼
┌─────────────────────────┐
│ Stage 3: ADAPT           │  Merge extracted design + matched
│ Apply project tokens     │  components into final implementation
│ Customize to codebase    │  Tests + types included
└─────────┬───────────────┘
          │
          ▼
┌─────────────────────────┐
│ Stage 4: RENDER          │  Register as json-render catalog entry
│ Generate Zod schema      │  Same component → PDF, email, video
│ Add to defineCatalog()   │  Multi-surface reuse via MCP output
└─────────────────────────┘

Input (screenshot/description/URL)
  │
  ▼
┌─────────────────────────┐
│ Stage 1: EXTRACT         │  Stitch MCP → HTML + design context
│ get_screen_code          │  Extract colors, typography, layout
│ extract_design_context   │  Produce design-tokens.json
└─────────┬───────────────┘
          │
          ▼
┌─────────────────────────┐
│ Stage 2: MATCH           │  21st.dev Magic → search components
│ Search by description    │  Find production-ready matches
│ Filter by framework      │  React + Tailwind preferred
└─────────┬───────────────┘
          │
          ▼
┌─────────────────────────┐
│ Stage 3: ADAPT           │  Merge extracted design + matched
│ Apply project tokens     │  components into final implementation
│ Customize to codebase    │  Tests + types included
└─────────┬───────────────┘
          │
          ▼
┌─────────────────────────┐
│ Stage 4: RENDER          │  Register as json-render catalog entry
│ Generate Zod schema      │  Same component → PDF, email, video
│ Add to defineCatalog()   │  Multi-surface reuse via MCP output
└─────────────────────────┘

Argument Resolution

参数解析

python

INPUT = ""  # Full argument string

python

INPUT = ""  # Full argument string

Detect input type:

- Starts with "/" or "~" or contains ".png"/".jpg" → screenshot file path

- Starts with "http" → URL to screenshot or live page

- Otherwise → natural language description

undefined

undefined

Step 0: Detect Input Type and Project Context

步骤0：检测输入类型和项目上下文

python

TaskCreate(subject="Design to code: {INPUT}", description="Four-stage pipeline: extract, match, adapt, render")

python

TaskCreate(subject="Design to code: {INPUT}", description="Four-stage pipeline: extract, match, adapt, render")

Detect project's design system

Glob("/tailwind.config.*") Glob("/tokens.css") Glob("**/.tokens.json")

Read existing tokens if found → used in Stage 3

undefined

undefined

Stage 1: Extract Design Context

阶段1：提取设计上下文

If stitch MCP is available:

python

undefined

如果Stitch MCP可用：

python

undefined

For screenshot/URL input:

Use official Stitch MCP tools to extract design HTML and context

Tools: get_screen, list_screens, get_project

For description input:

generate_screen_from_text to create design, then get_screen to extract


**If stitch MCP is NOT available (fallback):**
```python


**如果Stitch MCP不可用（备选方案）：**
```python

For screenshot: Read the image file directly (Claude is multimodal)

Analyze layout, colors, typography, spacing from the image

For URL: WebFetch the page, extract HTML structure

For description: Skip extraction, proceed to Stage 2 with description


Extract and produce:
- Color palette (hex/oklch values)
- Typography (font families, sizes, weights)
- Spacing patterns (padding, margins, gaps)
- Component structure (headers, cards, buttons, etc.)
- Layout pattern (grid, flex, sidebar, etc.)


提取并生成以下内容：
- 调色板（十六进制/oklch值）
- 排版（字体族、字号、字重）
- 间距模式（内边距、外边距、间隙）
- 组件结构（页眉、卡片、按钮等）
- 布局模式（网格、弹性布局、侧边栏等）

Stage 2: Match Components from Registry

阶段2：从注册表匹配组件

If 21st-dev-magic is available:

python

undefined

如果21st-dev-magic可用：

python

undefined

Search 21st.dev for matching components

Use the component descriptions from Stage 1

Example: "animated pricing table with toggle"

Filter: React, Tailwind CSS, shadcn/ui compatible


**If 21st-dev-magic is NOT available (fallback):**
```python


**如果21st-dev-magic不可用（备选方案）：**
```python

Search for components in the project's existing codebase

Grep(pattern="export.*function|export.const", glob="**/.tsx")

Check for shadcn/ui components

Glob("**/components/ui/*.tsx")

Generate from scratch if no matches found


Present matches to user:
```python
AskUserQuestion(questions=[{
  "question": "Which component approach for {component_name}?",
  "header": "Component",
  "options": [
    {"label": "Use 21st.dev match", "description": "{matched_component_name} — {match_score}% match"},
    {"label": "Adapt from codebase", "description": "Modify existing {existing_component}"},
    {"label": "Generate from scratch", "description": "Build new component from extracted design"}
  ],
  "multiSelect": false
}])


向用户展示匹配结果：
```python
AskUserQuestion(questions=[{
  "question": "Which component approach for {component_name}?",
  "header": "Component",
  "options": [
    {"label": "Use 21st.dev match", "description": "{matched_component_name} — {match_score}% match"},
    {"label": "Adapt from codebase", "description": "Modify existing {existing_component}"},
    {"label": "Generate from scratch", "description": "Build new component from extracted design"}
  ],
  "multiSelect": false
}])

Stage 3: Adapt to Project

阶段3：适配项目需求

Merge the extracted design context with matched/generated components:

Apply project tokens — Replace hardcoded colors/spacing with project's design tokens
Match naming conventions — Follow project's component naming patterns
Add TypeScript types — Full type safety with Zod validation for any data props
Include tests — MSW handlers for API-backed components, render tests for static
Responsive — Mobile-first with breakpoints matching project's system

将提取的设计上下文与匹配/生成的组件合并：

应用项目令牌 — 用项目的设计令牌替换硬编码的颜色和间距
匹配命名规范 — 遵循项目的组件命名模式
添加TypeScript类型 — 通过Zod验证为所有数据属性提供完整的类型安全
包含测试 — 为基于API的组件添加MSW处理程序，为静态组件添加渲染测试
响应式设计 — 采用移动端优先，断点与项目系统保持一致

Output Structure

输出结构

src/components/
  └── {ComponentName}/
      ├── {ComponentName}.tsx       # Main component
      ├── {ComponentName}.test.tsx  # Tests
      └── index.ts                 # Barrel export

src/components/
  └── {ComponentName}/
      ├── {ComponentName}.tsx       # Main component
      ├── {ComponentName}.test.tsx  # Tests
      └── index.ts                 # Barrel export

Stage 4: Register in json-render Catalog

阶段4：在Json-Render目录中注册

After ADAPT produces a working React component, register it as a json-render catalog entry for multi-surface reuse.

Generate Zod schema — Derive a Zod schema from the component's TypeScript props
Add catalog entry — Register in the project's
```
defineCatalog()
```
call with props schema and children declaration
Verify rendering — Confirm the component renders correctly through
```
<Render catalog={catalog} />
```
path

typescript

import { z } from 'zod'

// Zod schema derived from {ComponentName}Props
const componentSchema = z.object({
  title: z.string().max(100),
  variant: z.enum(['default', 'featured']).default('default'),
  // ... props from the adapted component
})

// Add to project catalog
import { defineCatalog, mergeCatalogs } from '@json-render/core'
import { existingCatalog } from './catalog'

export const catalog = mergeCatalogs(existingCatalog, {
  {ComponentName}: {
    props: componentSchema,
    children: true, // or false for leaf components
  },
})

Enables: same component output to PDF, email, video, or MCP response — no reimplementation needed.

Skip condition: If the project has no json-render dependency or catalog, inform the user and skip Stage 4. The component from Stage 3 is still fully usable standalone.

在ADAPT阶段生成可用的React组件后，将其注册为json-render目录条目，以支持多场景复用。

生成Zod模式 — 从组件的TypeScript属性派生Zod模式
添加目录条目 — 在项目的
```
defineCatalog()
```
调用中注册，包含属性模式和子元素声明
验证渲染 — 确认组件通过
```
<Render catalog={catalog} />
```
路径可正确渲染

typescript

import { z } from 'zod'

// Zod schema derived from {ComponentName}Props
const componentSchema = z.object({
  title: z.string().max(100),
  variant: z.enum(['default', 'featured']).default('default'),
  // ... props from the adapted component
})

// Add to project catalog
import { defineCatalog, mergeCatalogs } from '@json-render/core'
import { existingCatalog } from './catalog'

export const catalog = mergeCatalogs(existingCatalog, {
  {ComponentName}: {
    props: componentSchema,
    children: true, // or false for leaf components
  },
})

实现效果： 同一组件可输出为PDF、邮件、视频或MCP响应 — 无需重新实现。

跳过条件： 如果项目没有json-render依赖或目录，告知用户并跳过阶段4。阶段3生成的组件仍可独立使用。

Graceful Degradation

降级处理

stitch	21st-dev-magic	json-render catalog	Behavior
Available	Available	Available	Full pipeline: extract + match + adapt + render
Available	Available	Unavailable	Extract + match + adapt (skip Stage 4)
Available	Unavailable	Available	Extract design, generate + register in catalog
Unavailable	Available	Available	Description-based search + adapt + register
Unavailable	Unavailable	Unavailable	Manual analysis + generate from scratch (still works)

The skill ALWAYS produces output regardless of MCP/catalog availability. Stage 4 is additive — skipping it still yields a working component.

stitch	21st-dev-magic	json-render catalog	行为
可用	可用	可用	完整流水线：提取 + 匹配 + 适配 + 渲染
可用	可用	不可用	提取 + 匹配 + 适配（跳过阶段4）
可用	不可用	可用	提取设计信息，生成并注册到目录
不可用	可用	可用	基于描述的搜索 + 适配 + 注册
不可用	不可用	不可用	手动分析 + 从头生成（仍可正常工作）

无论MCP/目录是否可用，该技能始终能生成输出。阶段4为附加功能 — 跳过它仍能得到可用的组件。

design-to-code

Original

Translation

Design to Code

设计转代码

Pipeline Overview

流水线概述

Argument Resolution

参数解析

Detect input type:

Detect input type:

- Starts with "/" or "~" or contains ".png"/".jpg" → screenshot file path

- Starts with "/" or "~" or contains ".png"/".jpg" → screenshot file path

- Starts with "http" → URL to screenshot or live page

- Starts with "http" → URL to screenshot or live page

- Otherwise → natural language description

- Otherwise → natural language description

Step 0: Detect Input Type and Project Context

步骤0：检测输入类型和项目上下文

Detect project's design system

Detect project's design system

Read existing tokens if found → used in Stage 3

Read existing tokens if found → used in Stage 3

Stage 1: Extract Design Context

阶段1：提取设计上下文

For screenshot/URL input:

For screenshot/URL input:

Use official Stitch MCP tools to extract design HTML and context

Use official Stitch MCP tools to extract design HTML and context

Tools: get_screen, list_screens, get_project

Tools: get_screen, list_screens, get_project

For description input:

For description input:

generate_screen_from_text to create design, then get_screen to extract

generate_screen_from_text to create design, then get_screen to extract

For screenshot: Read the image file directly (Claude is multimodal)

For screenshot: Read the image file directly (Claude is multimodal)

Analyze layout, colors, typography, spacing from the image

Analyze layout, colors, typography, spacing from the image

For URL: WebFetch the page, extract HTML structure

For URL: WebFetch the page, extract HTML structure

For description: Skip extraction, proceed to Stage 2 with description

For description: Skip extraction, proceed to Stage 2 with description

Stage 2: Match Components from Registry

阶段2：从注册表匹配组件

Search 21st.dev for matching components

Search 21st.dev for matching components

Use the component descriptions from Stage 1

Use the component descriptions from Stage 1

Example: "animated pricing table with toggle"

Example: "animated pricing table with toggle"

Filter: React, Tailwind CSS, shadcn/ui compatible

Filter: React, Tailwind CSS, shadcn/ui compatible

Search for components in the project's existing codebase

Search for components in the project's existing codebase

Check for shadcn/ui components

Check for shadcn/ui components

Generate from scratch if no matches found

Generate from scratch if no matches found

Stage 3: Adapt to Project

阶段3：适配项目需求

Output Structure

输出结构

Stage 4: Register in json-render Catalog

阶段4：在Json-Render目录中注册

Graceful Degradation

降级处理

Anti-Patterns

反模式

Related Skills

相关技能