用途：把 Figma 设计还原为生产级 React + TypeScript 组件，追求像素级视觉保真，通过辅助脚本减少手工错误。
前置条件：需要 Figma API Token（Figma → Settings → Personal Access Tokens）、Node.js 18+，coderio 安装在 scripts/ 目录（由 Setup 阶段处理）。
工作流分三阶段。Phase 0 SETUP：创建辅助脚本与隔离依赖环境，命令包括 mkdir -p scripts、复制 skills/design-to-code/scripts/package.json 与 coderio-skill.mjs 到 scripts/，然后 cd scripts && pnpm install && cd ..；新项目可选执行 node scripts/coderio-skill.mjs scaffold-prompt "MyApp" 并按输出说明创建文件。Phase 1 PROTOCOL：先用 node scripts/coderio-skill.mjs fetch-figma "<Figma URL>" "<Token>" 拉取数据并确认 process/thumbnail.png 存在；再生成并保存组件结构 JSON（save-structure）；随后用 list-components 列出组件，对每个组件生成 props 提示、由 AI 依据缩略图提取 props 并保存校验（save-props）。Phase 2 CODE：用 list-gen-tasks 获取带索引的任务列表，从 0 开始逐个生成并保存代码（code-prompt、save-code），最后把根组件注入 App.tsx。
关键约束：结构、props、代码生成步骤均须附加 process/thumbnail.png，AI 依据缩略图判断间距与布局细节；文本内容须严格来自输入数据，不得臆造；Phase 2 必须按索引顺序执行，否则会报 Module not found。
限制与排错：资料未提供收费、价格、支持平台与效果保证等信息。常见问题包括 props 校验失败（多为未附加缩略图）、模块未找到（父组件先于子组件保存）以及视觉不匹配（未附加缩略图）。