名称: 设计到代码描述: 使用coderio将Figma设计像素完美地转换为React代码。生成生产就绪的代码（TypeScript, Vite, TailwindCSS V4），具有高视觉保真度。特点包括健壮的错误处理、检查点恢复和通过辅助脚本的流线化执行。

设计到代码

从Figma设计高保真地还原UI到生产就绪的React + TypeScript组件。这个技能使用健壮的辅助脚本来最小化手动错误并确保像素完美的结果。

前提条件

Figma API Token: 从Figma → 设置 → 个人访问令牌获取
Node.js: 版本18+
coderio: 安装在scripts/文件夹中（由设置阶段处理）

工作流程概述

阶段0: 设置    → 创建辅助脚本和脚本环境
阶段1: 协议生成 → 生成设计协议（结构 & 属性）
阶段2: 代码生成 → 生成组件和资源

阶段0: 设置

步骤0.1: 初始化辅助脚本

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

mkdir -p scripts

# 1. 复制脚本文件
# 注意: 确保你有'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. 在scripts目录中安装coderio（根据需要调整版本）
cd scripts && pnpm install && cd ..

步骤0.2: 脚手架项目（可选）

如果启动新项目：

运行: node scripts/coderio-skill.mjs scaffold-prompt "MyApp"
AI任务: 遵循命令输出的指令创建文件。

阶段1: 协议生成

步骤1.1: 获取数据

# 替换为你的URL和Token
node scripts/coderio-skill.mjs fetch-figma "https://figma.com/file/..." "figd_..."

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

步骤1.2: 生成结构

生成提示:

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。

处理结果:

node scripts/coderio-skill.mjs save-structure

步骤1.3: 提取属性（迭代）

列出组件:

node scripts/coderio-skill.mjs list-components

对于列表中的每个组件:

a. 生成提示:
```
node scripts/coderio-skill.mjs props-prompt "ComponentName" > scripts/current-props-prompt.md
```
b. AI任务（属性）:
- 附加: process/thumbnail.png（必须）
- 读取: scripts/current-props-prompt.md
- 指令: “提取属性和状态数据。在文本和图像路径上做到像素完美。”
- 保存: 将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开始）: