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 均支持）。