Sloth D2C MCP

简介

Sloth D2C 设计稿转代码工具，包括 Sloth D2C 设计稿转代码 Figma 插件及 Sloth D2C MCP 工具。

Sloth D2C 设计稿转代码插件，面向前端开发与设计团队的智能化工具，支持设计稿快速转前端代码，并通过协同 MCP 工具，写入生产级前端代码；同时支持文本/图片+Prompt输入AI，生成目标风格页面并转译至Figma节点。

Sloth D2C MCP 工具，获取插件推送的转码数据，通过拦截页面配置框架选择、转换倍率、颜色格式、图片存储、提示词编辑等基础设置，同时支持圈选分组、组件映射、模块标记等高级设置，以生成提示词指导 Agent 生成目标代码并写入。

核心能力

效果预览及源码调整

插件支持生成代码页面预览，同时支持源码二次编辑。在插件转码后，提供代码编辑器编辑源码，实时预览效果。

AI 生成页面

插件支持文本/图片+Prompt 输入 AI，生成目标风格页面代码并预览。同时支持转译至成 Figma 节点并插入 Figma 设计稿。

自研 MCP 拦截器

设计了创新的 MCP 拦截器。利用 await 挂起 MCP 的核心请求，为用户创造了一个交互窗口。通过配置拦截及数据推送突破 RESTful API 限制，最大化还原度。

支持多种框架

MCP 默认支持 React、Vue 代码生成，系统内置提示词默认配置。同时支持新增自定义框架，配置自定义框架生成提示词。

多种图片存储方式

支持图片本地存储、OSS 存储及自定义图片上传方式。

圈选分组与采样

支持圈选分组与智能采样，圈选分组功能允许你在设计稿预览页中手动划分代码结构区域，每个区域分别在不同的采用请求流程进行代码生成，提高转码效率和准确性。

组件映射

从项目中选择组件文件，将项目中的组件映射对应圈选元素，生成代码时直接引用对应组件。

模块标记

对圈选后的模块进行标记，方便其他设计稿类似模块的直接复用，无需重复生成。

安装 MCP

# 使用 pnpm（推荐）
pnpm install sloth-d2c-mcp -g

# 或使用 npm
npm install sloth-d2c-mcp -g

# 验证安装
sloth

配置 MCP

TME-Continue

- name: sloth-d2c-mcp
  command: sloth
  connectionTimeout: 3000000
  args:
    - --stdio

Copilot

"d2c-cli": {
  "type": "stdio",
  "command": "sloth",
  "args": ["--stdio"]
}

提示：推荐使用 Claude AI 模型。若需转码长设计稿，请开启 MCP 采样功能以优化转码策略（TME-Continue 和 Copilot 均支持）。