design-to-code

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design to Code

设计转代码

High-fidelity UI restoration from Figma designs to production-ready React + TypeScript components. This SKILL uses a robust helper script to minimize manual errors and ensure pixel-perfect results.

将Figma设计高保真还原为生产就绪的React + TypeScript组件。本SKILL借助强大的辅助脚本减少手动错误，确保像素级精准的结果。

Prerequisites

前置条件

Figma API Token: Get from Figma → Settings → Personal Access Tokens
Node.js: Version 18+
coderio: Installed in
```
scripts/
```
folder (handled by Setup phase)

Figma API令牌：从Figma → 设置 → 个人访问令牌获取
Node.js：版本18+
coderio：已安装在
```
scripts/
```
目录下（由设置阶段处理）

Workflow Overview

工作流概述

Phase 0: SETUP    → Create helper script and script environment
Phase 1: PROTOCOL → Generate design protocol (Structure & Props)
Phase 2: CODE     → Generate components and assets

Phase 0: SETUP    → Create helper script and script environment
Phase 1: PROTOCOL → Generate design protocol (Structure & Props)
Phase 2: CODE     → Generate components and assets

Phase 0: Setup

阶段0：设置

Step 0.1: Initialize Helper Script

步骤0.1：初始化辅助脚本

User Action: Run these commands to create the execution helper and isolate its dependencies.

bash

mkdir -p scripts

用户操作：运行以下命令创建执行辅助工具并隔离其依赖项。

bash

mkdir -p scripts

1. Copy script files

1. 复制脚本文件

Note: Ensure you have the 'skills/design-to-code/scripts' directory available

注意：确保你拥有'skills/design-to-code/scripts'目录

cp skills/design-to-code/scripts/package.json scripts/package.json cp skills/design-to-code/scripts/coderio-skill.mjs scripts/coderio-skill.mjs

2. Install coderio in scripts directory (adjust version if needed)

2. 在scripts目录中安装coderio（如有需要可调整版本）

cd scripts && pnpm install && cd ..

undefined

cd scripts && pnpm install && cd ..

undefined

Step 0.2: Scaffold Project (Optional)

步骤0.2：搭建项目（可选）

If starting a new project:

Run:

node scripts/coderio-skill.mjs scaffold-prompt "MyApp"

AI Task: Follow the instructions output by the command to create files.

如果是启动新项目：

运行：

node scripts/coderio-skill.mjs scaffold-prompt "MyApp"

AI任务：按照命令输出的说明创建文件。

Phase 1: Protocol Generation

阶段1：协议生成

Step 1.1: Fetch Data

步骤1.1：获取数据

bash

undefined

bash

undefined

Replace with your URL and Token

替换为你的URL和令牌

node scripts/coderio-skill.mjs fetch-figma "https://figma.com/file/..." "figd_..."


**Verify**: `process/thumbnail.png` should exist.

node scripts/coderio-skill.mjs fetch-figma "https://figma.com/file/..." "figd_..."


**验证**：`process/thumbnail.png`应已生成。

Step 1.2: Generate Structure

步骤1.2：生成结构

Generate Prompt:

bash

node scripts/coderio-skill.mjs structure-prompt > scripts/structure-prompt.md

AI Task (Structure):
- ATTACH:
```
process/thumbnail.png
```
  (MANDATORY)
- READ:
```
scripts/structure-prompt.md
```
- INSTRUCTION: "Generate the component structure JSON based on the prompt and the attached thumbnail. Focus on visual grouping. Use text content to name components accurately (e.g. 'SafeProducts', not 'FAQ')."
- SAVE: Paste the JSON result into
```
scripts/structure-output.json
```
  .

Process Result:

bash

node scripts/coderio-skill.mjs save-structure

生成提示词：

bash

node scripts/coderio-skill.mjs structure-prompt > scripts/structure-prompt.md

AI任务（结构）：
- 附加：
```
process/thumbnail.png
```
  （必填）
- 阅读：
```
scripts/structure-prompt.md
```
- 说明：“根据提示词和附加的缩略图生成组件结构JSON。重点关注视觉分组。使用文本内容准确命名组件（例如'SafeProducts'，而非'FAQ'）。”
- 保存：将JSON结果粘贴到
```
scripts/structure-output.json
```
  中。

处理结果：

bash

node scripts/coderio-skill.mjs save-structure

Step 1.3: Extract Props (Iterative)

步骤1.3：提取Props（迭代式）

List Components:

bash

node scripts/coderio-skill.mjs list-components

For EACH component in the list:

a. Generate Prompt:

bash

node scripts/coderio-skill.mjs props-prompt "ComponentName" > scripts/current-props-prompt.md

b. AI Task (Props):

ATTACH:
```
process/thumbnail.png
```
(MANDATORY)
READ:
```
scripts/current-props-prompt.md
```
INSTRUCTION: "Extract props and state data. Be pixel-perfect with text and image paths."
SAVE: Paste the JSON result into
```
scripts/ComponentName-props.json
```
.

c. Save & Validate:

bash

node scripts/coderio-skill.mjs save-props "ComponentName"
# If this fails, re-do step 'b' with better attention to the thumbnail

列出组件：

bash

node scripts/coderio-skill.mjs list-components

针对列表中的每个组件：

a. 生成提示词：

bash

node scripts/coderio-skill.mjs props-prompt "ComponentName" > scripts/current-props-prompt.md

b. AI任务（Props）：

附加：
```
process/thumbnail.png
```
（必填）
阅读：
```
scripts/current-props-prompt.md
```
说明：“提取Props和状态数据。在文本和图片路径上做到像素级精准。”
保存：将JSON结果粘贴到
```
scripts/ComponentName-props.json
```
中。

c. 保存并验证：

bash

node scripts/coderio-skill.mjs save-props "ComponentName"
# 如果失败，请重新执行步骤'b'，并更仔细地查看缩略图

Phase 2: Code Generation

阶段2：代码生成

Step 2.1: Plan Tasks

步骤2.1：规划任务

bash

node scripts/coderio-skill.mjs list-gen-tasks

This outputs a list of tasks with indices (0, 1, 2...).

bash

node scripts/coderio-skill.mjs list-gen-tasks

此命令会输出带有序号（0、1、2...）的任务列表。

Step 2.2: Generate Components (Iterative)

步骤2.2：生成组件（迭代式）

For EACH task index (starting from 0):

Generate Prompt:

bash

node scripts/coderio-skill.mjs code-prompt 0 > scripts/code-prompt.md
# Replace '0' with current task index

AI Task (Code):
- ATTACH:
```
process/thumbnail.png
```
  (MANDATORY)
- READ:
```
scripts/code-prompt.md
```
- INSTRUCTION: "Generate the React component code. Match the thumbnail EXACTLY. Use STRICT text content from input data, do not hallucinate."
- SAVE: Paste the code block into
```
scripts/code-output.txt
```
  .

Save Code:

bash

node scripts/coderio-skill.mjs save-code 0
# Replace '0' with current task index

针对每个任务序号（从0开始）：

生成提示词：

bash

node scripts/coderio-skill.mjs code-prompt 0 > scripts/code-prompt.md
# 将'0'替换为当前任务序号

AI任务（代码）：
- 附加：
```
process/thumbnail.png
```
  （必填）
- 阅读：
```
scripts/code-prompt.md
```
- 说明：“生成React组件代码。完全匹配缩略图。使用输入数据中的严格文本内容，不要虚构信息。”
- 保存：将代码块粘贴到
```
scripts/code-output.txt
```
  中。

保存代码：

bash

node scripts/coderio-skill.mjs save-code 0
# 将'0'替换为当前任务序号

Step 2.3: Final Integration

步骤2.3：最终集成

Inject the root component into

App.tsx

. Use the path found in the last task of Phase 2.1.

将根组件注入到

App.tsx

中。使用阶段2.1最后一个任务中找到的路径。

Troubleshooting

故障排除

"Props validation failed": The AI generated empty props. Check if
```
process/thumbnail.png
```
was attached and visible to the AI. Retry the props generation step.
"Module not found": Ensure
```
node scripts/coderio-skill.mjs save-code
```
was run for the child component before the parent component. Phase 2 must be done in order (0, 1, 2...).
"Visuals don't match": Did you attach the thumbnail? The AI relies on it for spacing and layout nuances not present in the raw data.

“Props验证失败”：AI生成了空Props。检查
```
process/thumbnail.png
```
是否已附加并能被AI看到。重新执行Props生成步骤。
“模块未找到”：确保在父组件之前已为子组件执行
```
node scripts/coderio-skill.mjs save-code
```
。阶段2必须按顺序执行（0、1、2...）。
“视觉效果不匹配”：你是否附加了缩略图？AI依赖它来获取原始数据中没有的间距和布局细节。