← 返回
未分类 Key

Sloth D2C Skills

将Figma设计稿转换为前端组件代码(Design to Code)。通过 `sloth d2c` CLI 获取设计稿数据,分片处理并生成最终代码。当用户提到Figma转代码、设计稿转代码、D2C、design to code、生成页面时使用。
将Figma设计稿转为前端组件代码(Design to Code)。使用 `sloth d2c` CLI 获取设计稿数据,分片处理生成代码。适用于用户提及Figma转代码、设计稿转代码、D2C、design to code或生成页面的场景。
cherokeeli cherokeeli 来源
未分类 clawhub v1.0.2 2 版本 99838.7 Key: 需要
★ 0
Stars
📥 619
下载
💾 0
安装
2
版本
#latest

概述

Figma 设计稿转代码(D2C)

前置校验

必需参数

参数说明
---------------------
fileKeyFigma 文件 Key
nodeIdFigma 节点 ID

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

可选参数

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

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

环境检查

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

执行流程

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

Step 1:执行 sloth d2c CLI

在工作区根目录运行(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:

{
  "ok": true,
  "fileKey": "...",
  "nodeId": "...",
  "convertedNodeId": "...",
  "chunksDir": ".sloth/<fileKey>/<convertedNodeId>/chunks"
}
  • 解析 JSON 得到 chunksDirconvertedNodeId
  • 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-key
404 错误设计稿未找到,提示用户核实 fileKey 和 nodeId
Node 版本过低检查用户 Node 版本是否 ≥ 18

版本历史

共 2 个版本

  • v1.0.2 当前
    2026-05-07 03:50 安全 安全
  • v1.0.1
    2026-05-02 03:59 安全

安全检测

腾讯云安全 (Keen)

安全,无风险
查看报告

腾讯云安全 (Sanbu)

安全,无风险
查看报告

🔗 相关推荐

dev-programming

Github

steipete
使用 `gh` CLI 与 GitHub 交互,通过 `gh issue`、`gh pr`、`gh run` 和 `gh api` 管理议题、PR、CI 运行及高级查询。
★ 678 📥 327,602
dev-programming

Mcporter

steipete
使用 mcporter CLI 直接列出、配置、认证及调用 MCP 服务器/工具(支持 HTTP 或 stdio),涵盖临时服务器、配置编辑及 CLI/类型生成功能。
★ 195 📥 67,678
dev-programming

YouTube

byungkyu
使用托管OAuth集成YouTube Data API,支持搜索视频、管理播放列表、获取频道数据及评论互动,适用于用户需要时使用此技能。
★ 142 📥 41,602