design-to-code

设计转代码

将 Figma 设计高保真还原为可用于生产环境的 React + TypeScript 组件。 此 SKILL 使用健壮的辅助脚本，以尽量减少手动错误并确保像素级精准的效果。

前置条件

1. Figma API Token：从 Figma → Settings → Personal Access Tokens 获取
2. Node.js：版本 18+
3. coderio：已安装在 scripts/ 文件夹中（在 Setup 阶段完成）

工作流概览

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

---

阶段 0：设置

步骤 0.1：初始化辅助脚本

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

mkdir -p scripts

# 1. Copy script files
# Note: Ensure you have the 'skills/design-to-code/scripts' directory available
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)
cd scripts && pnpm install && cd ..

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

如果要开始一个新项目：

1. 运行：node scripts/coderio-skill.mjs scaffold-prompt "MyApp"
2. AI 任务：按照命令输出的说明创建文件。

---

阶段 1：协议生成

步骤 1.1：获取数据

# Replace with your URL and Token
node scripts/coderio-skill.mjs fetch-figma "https://figma.com/file/..." "figd_..."

验证：process/thumbnail.png 应该存在。

步骤 1.2：生成结构

1. 生成提示词：

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

2. AI 任务（结构）：

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

3. 处理结果：

   node scripts/coderio-skill.mjs save-structure
   

步骤 1.3：提取 Props（迭代）

1. 列出组件：

   node scripts/coderio-skill.mjs list-components
   

2. 对列表中的每个组件：

   a. 生成提示词：

   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. 保存并验证：

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

---

阶段 2：代码生成

步骤 2.1：规划任务

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

这会输出带索引（0、1、2……）的任务列表。

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

对每个任务索引（从 0 开始）：

1. 生成提示词：

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

2. AI 任务（代码）：

   • 附加：process/thumbnail.png（必需）
   • 读取：scripts/code-prompt.md
   • 指令：“生成 React 组件代码。务必与缩略图完全一致。严格使用输入数据中的文本内容，不要臆造。”
   • 保存：将代码块粘贴到 scripts/code-output.txt。

3. 保存代码：

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

步骤 2.3：最终集成

将根组件注入 App.tsx。使用阶段 2.1 最后一个任务中提供的路径。

---

故障排除

• “Props validation failed”：AI 生成的 props 为空。检查 AI 是否已收到并能看到 process/thumbnail.png。重试 props 生成步骤。
• “Module not found”：确保在父组件之前，已对其子组件运行 node scripts/coderio-skill.mjs save-code。阶段 2 必须按顺序（0、1、2……）完成。
• “Visuals don't match”：是否附加了缩略图？AI 依赖它来把握原始数据中没有体现的间距和布局细节。