Figma 设计稿转代码（D2C）#

前置校验#

必需参数#

参数说明fileKeyFigma 文件 KeynodeIdFigma 节点 ID

缺少以上参数时，提示用户提供。

可选参数#

参数默认值使用时机framework自动用户明确指定目标框架时传入，取值： react / vue / ios-oc / ios-swift / kuikly / taro / uniapp / hippydepth自动仅当用户显式要求限制节点树遍历深度时传入，否则不加localfalse默认不要加。仅当用户明确要求"使用本地缓存"才传入updatefalse仅当用户明确表示"修改/更新之前生成的代码"时传入；新建代码时一律不传silenttrue默认静默。仅当用户要求交互式配置页面时显式传 --silent=false

⚠️ local 与 update 都是 显式触发 参数，默认一律不传。不要因为"为了更快"而主动加 --local——运行没有缓存会直接失败。

环境检查#

执行 sloth --version 确认 CLI 可用。不可用则跳转 错误排除。

执行流程#

text

Task Progress:
- [ ] Step 1: 执行 sloth d2c CLI 生成 chunks
- [ ] Step 2: 并行处理代码片段与聚合
- [ ] Step 3: 生成最终代码并写入文件

Step 1：执行 sloth d2c CLI#

在工作区根目录运行（Bash）：

bash

sloth d2c \
  --file-key <fileKey> \
  --node-id <nodeId> \
  [--framework <react|vue|ios-oc|ios-swift|kuikly|taro|uniapp|hippy>] \
  [--depth <n>] \
  [--local] \
  [--update] \
  --silent --json

CLI 成功时以 JSON 形式输出到 stdout：

json

{
  "ok": true,
  "fileKey": "...",
  "nodeId": "...",
  "convertedNodeId": "...",
  "chunksDir": ".sloth/<fileKey>/<convertedNodeId>/chunks"
}

• 解析 JSON 得到 chunksDir 与 convertedNodeId。
• ok=false 或非零退出码时跳转 错误排除。

Step 2：并行处理代码片段与聚合#

以 Step 1 返回的 chunksDir 为基础，启动多个 sloth-d2c-agent subagent， 并行执行：

任务提示词路径代码片段处理（多个）{chunksDir}/{index}.md聚合处理{chunksDir}/codeAggregation.md

全部 Subagent 完成后进入下一步。

Step 3：生成最终代码并写入文件#

主 Agent 收集第 2 步执行完毕的结果，结合读取 {chunksDir}/finalGenerate.md 的内容作为提示词转换代码，写入项目文件中。

错误排除#

错误场景处理方式sloth: command not found执行 sloth -v：有版本号则提示配置 PATH；无版本号则执行 npm install -g sloth-d2c-mcp 安装CLI 退出码非 0 / ok:false读取 JSON 中的 error/ message 字段并展示给用户文件不存在（chunksDir 为空）提示用户检查 fileKey 和 nodeId 是否正确， 停止执行超时建议用户先执行 sloth server restart 再重试；或增加 shell 超时配置403 错误未配置有效 Figma Token，提示用户执行 sloth config 并配置 mcp.figmaApiKey，或使用 --figma-api-key404 错误设计稿未找到，提示用户核实 fileKey 和 nodeIdNode 版本过低检查用户 Node 版本是否 ≥ 18