npm install sloth-d2c-mcpSloth D2C 设计稿转代码工具,包括 Sloth D2C 设计稿转代码 Figma 插件及 Sloth D2C MCP 工具。
Sloth D2C 设计稿转代码插件,面向前端开发与设计团队的智能化工具,支持设计稿快速转前端代码,并通过协同 MCP 工具,写入生产级前端代码;同时支持文本/图片+Prompt输入AI,生成目标风格页面并转译至Figma节点。
Sloth D2C MCP 工具,获取插件推送的转码数据,通过拦截页面配置框架选择、转换倍率、颜色格式、图片存储、提示词编辑等基础设置,同时支持圈选分组、组件映射、模块标记等高级设置,以生成提示词指导 Agent 生成目标代码并写入。
插件支持生成代码页面预览,同时支持源码二次编辑。在插件转码后,提供代码编辑器编辑源码,实时预览效果。
插件支持文本/图片+Prompt 输入 AI,生成目标风格页面代码并预览。同时支持转译至成 Figma 节点并插入 Figma 设计稿。
设计了创新的 MCP 拦截器。利用 await 挂起 MCP 的核心请求,为用户创造了一个交互窗口。通过配置拦截及数据推送突破 RESTful API 限制,最大化还原度。
MCP 默认支持 React、Vue 代码生成,系统内置提示词默认配置。同时支持新增自定义框架,配置自定义框架生成提示词。
支持图片本地存储、OSS 存储及自定义图片上传方式。
支持圈选分组与智能采样,圈选分组功能允许你在设计稿预览页中手动划分代码结构区域,每个区域分别在不同的采用请求流程进行代码生成,提高转码效率和准确性。
从项目中选择组件文件,将项目中的组件映射对应圈选元素,生成代码时直接引用对应组件。
对圈选后的模块进行标记,方便其他设计稿类似模块的直接复用,无需重复生成。
``bash使用 pnpm(推荐)
pnpm install sloth-d2c-mcp -g
配置 MCP
TME-Continue
`yaml
- name: sloth-d2c-mcp
command: sloth
connectionTimeout: 3000000
args:
- --stdio
`Copilot
`json
"d2c-cli": {
"type": "stdio",
"command": "sloth",
"args": ["--stdio"]
}
``> 提示:推荐使用 Claude AI 模型。若需转码长设计稿,请开启 MCP 采样功能以优化转码策略(TME-Continue 和 Copilot 均支持)。