Sloth D2C MCP

Figma Design-to-Code MCP Server | Figma 设计稿转代码 MCP 服务

English | 中文

English

Table of Contents

• Introduction
• Features
• Requirements
• Installation
• MCP Configuration
• Usage
• MCP Tools
• CLI Commands
• Supported Frameworks
• Plugin System
• Component Mapping
• Configuration
• Architecture
• License

Introduction

Sloth D2C MCP is a Model Context Protocol (MCP) server that converts Figma design files into production-ready frontend code. It acts as an AI-powered tool bridge between your IDE's AI coding assistant and Figma, enabling automated design-to-code conversion with interactive configuration, intelligent grouping, component reuse, and multi-framework support.

Features

• Multi-Framework Support — React, Vue, iOS (OC/Swift), Taro, UniApp
• Interactive Configuration UI — Visual configuration page for grouping, component mapping, and prompt customization (via VSCode extension, Web browser, or Tauri client)
• Intelligent Sampling — Breaks long pages into groups and uses AI sampling (MCP createMessage) for optimized code generation per group
• Component Library Matching — Automatically maps design elements to existing project components via screenshot-based template matching (OpenCV.js)
• Update Mode — Analyzes design changes (HTML Diff) and generates incremental update prompts
• Plugin System — Extensible Hook mechanism (onFetchImage, onSamplingComplete, beforeFinalPrompt, etc.)
• Silent Mode — Skip the configuration UI for automated CI/CD pipelines
• Module Splitting — Split designs into independent modules with per-module code generation
• Local Cache — Pre-cache Figma data for offline/faster conversion

Requirements

• Node.js >= 18
• pnpm (recommended) or npm
• An AI coding assistant that supports MCP, such as:
  • CodeBuddy (support sampling)
  • GitHub Copilot (support sampling)
  • TME-Continue (support sampling)
  • Cursor
  • Claude Desktop

Installation

# Using pnpm (recommended)
pnpm install sloth-d2c-mcp -g

# Using npm
npm install sloth-d2c-mcp -g

# Verify installation
sloth --version

MCP Configuration

Configure Sloth as an MCP server in your AI coding assistant:

TME-Continue

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

CodeBuddy

{
  "sloth-d2c-mcp": {
    "type": "stdio",
    "command": "sloth",
    "timeout": 3000000,
    "args": ["--stdio"]
  }
}

GitHub Copilot / Cursor

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

Claude Desktop

{
  "mcpServers": {
    "sloth-d2c-mcp": {
      "command": "sloth",
      "args": ["--stdio"]
    }
  }
}

Tip: Claude AI models are recommended. For long design pages, enable MCP Sampling for optimized conversion strategy (supported by TME-Continue、CodeBuddy and Copilot).

Usage

Basic Conversion

Simply paste a Figma design URL into your AI chat:

Convert this Figma design to React code:
https://www.figma.com/design/xxxxx/MyDesign?node-id=123-456

The AI will automatically extract the fileKey and nodeId, invoke the d2c_figma tool, and an interactive configuration page will open for you to:

1. Configure Figma API Token (first time only)
2. Set target framework and conversion options
3. Group design elements (marquee selection)
4. Map design groups to existing components
5. Customize AI prompts

After submitting, the AI generates the final code.

Silent Mode (No UI)

Convert this Figma design to Vue code in silent mode:
https://www.figma.com/design/xxxxx/MyDesign?node-id=123-456

Update Mode

Update the code based on the new Figma design:
https://www.figma.com/design/xxxxx/MyDesign?node-id=123-456

Pre-cache Design Data

Pre-cache this Figma design data:
https://www.figma.com/design/xxxxx/MyDesign?node-id=123-456

MCP Tools

| Tool | Description | | ----------------- | -------------------------------------------------------------------------------------------------------------- | | d2c_figma | Convert Figma design file to code (main tool) | | d2c_process | Write prompts (from grouping + component mapping in config UI) to local files for Skills-based code generation | | mark_components | Mark and save components to components.json for future reuse |

CLI Commands

| Command | Description | | ---------------------- | ------------------------------------------------- | | sloth | Start MCP Server in stdio mode (for AI clients) | | sloth config | Show configuration file path | | sloth cache | Show cache directory path | | sloth server start | Start HTTP service in background | | sloth server stop | Stop the running service | | sloth server restart | Restart the service | | sloth add <package> | Install a global npm package (plugin) and restart | | sloth update | Update sloth-d2c-mcp to the latest version | | sloth version | Show version information | | sloth --help | Show help | | sloth --log[=path] | Enable file logging |

Supported Frameworks

| Framework | Value | Built-in Prompts | | --------------- | ----------- | ---------------- | | React | react | ✅ Full | | Vue | vue | ✅ Full | | iOS Objective-C | ios-oc | ✅ Full | | iOS Swift | ios-swift | ✅ Full | | Taro | taro | ✅ Full | | UniApp | uniapp | ✅ Full |

Custom frameworks can be added via the configuration UI or config file.

Plugin System

Sloth supports a plugin system for extending the conversion pipeline.

Installing Plugins

sloth add @sloth/my-plugin

Plugin Interface

interface SlothPlugin {
  name: string
  version?: string
  description?: string

  // Hooks
  afterSubmitConfigData?: (params: any) => Promise<any>
  onFetchImage?: (params: any) => Promise<any>
  onSamplingComplete?: (params: any) => Promise<any>
  beforeFinalPrompt?: (params: any) => Promise<any>
}

Plugin Hooks

| Hook | Trigger | Use Case | | ----------------------- | ---------------------------- | ------------------------------------- | | afterSubmitConfigData | After user submits config | Modify config or return custom prompt | | onFetchImage | After imageMap is fetched | Upload images to CDN | | onSamplingComplete | After all sampling completes | Post-process code snippets | | beforeFinalPrompt | Before building final prompt | Inject additional prompts |

Workspace Plugins

Create .sloth/plugins.json in your project root:

{
  "plugins": ["my-local-plugin", { "name": "@sloth/my-plugin", "config": { "key": "value" } }]
}

Component Mapping

Sloth maintains a component database at .sloth/components.json in your project. Components can be:

1. Manually registered — via mark_components MCP tool
2. AI-analyzed — by selecting project files in the configuration UI
3. Screenshot-matched — using OpenCV.js template matching to auto-suggest mappings

During conversion, Sloth checks the component database and provides mapping suggestions, enabling AI to reuse existing components instead of generating redundant code.

Configuration

Figma API Token

Note: If you use the Sloth D2C Figma Plugin to initiate conversion, the plugin pushes design data directly to the local cache, so no Figma API Token is required. You only need to configure a Figma API Token when pasting a Figma node URL directly in the AI chat (traditional MCP usage).

Get your Figma Personal Access Token from Figma Settings.

Configure it in one of two ways:

1. Via Configuration UI — Opens automatically on first use
2. Via Config File — Run sloth config to get the config path, then edit:

{
  "mcp": {
    "figmaApiKey": "figd_xxxxxxxxxxxxx"
  }
}

Image Storage Options

| Option | Description | | ------- | ---------------------------------------------------- | | local | Save images to local directory (default: ./static) | | oss | Upload to Alibaba Cloud OSS | | api | Upload via custom API endpoint | | Plugin | Custom upload via plugin hook |

Prompt Customization

Sloth provides multiple ways to customize conversion prompts for different frameworks and use cases.

Available Prompts

| Prompt | Description | | ----------------------------- | -------------------------------------------- | | frameworkGuidePrompt | Framework-specific guidance for AI | | chunkOptimizePrompt | Per-group code optimization prompt | | aggregationOptimizePrompt | Page-level code aggregation prompt | | finalOptimizePrompt | Final code generation prompt | | componentAnalysisPrompt | Component analysis prompt | | noSamplingAggregationPrompt | Fallback prompt when sampling is unavailable |

Method 1: Configuration UI

The easiest way to customize prompts is through the interactive configuration page:

1. Start a conversion by pasting a Figma URL
2. In the configuration page, find the "Prompts" or "Advanced Settings" section
3. Edit the prompts directly in the text areas
4. Submit to apply

Method 2: Project-level Configuration

Create .sloth/config.json in your project root:

{
  "prompts": {
    "react": {
      "frameworkGuidePrompt": "Use functional components with hooks. Follow React 18 best practices.",
      "chunkOptimizePrompt": "Optimize for performance. Use memo where appropriate.",
      "finalOptimizePrompt": "Ensure accessibility (a11y) compliance."
    },
    "vue": {
      "frameworkGuidePrompt": "Use Vue 3 Composition API with <script setup>.",
      "chunkOptimizePrompt": "Use computed properties for derived state."
    }
  }
}

Method 3: Using @doc References (Configuration UI Only)

For longer prompts, store them in .sloth/doc/ and reference them in the configuration UI's prompt input fields:

.sloth/
├── doc/
│   ├── react-guide.md
│   ├── coding-standards.md
│   └── component-rules.md
└── config.json

In the configuration UI prompt input, use @doc to include file contents:

@doc react-guide.md
@doc coding-standards.md

Note: The @doc syntax only works in the configuration UI's prompt input fields, not in config.json. For config files, use the path reference format: @[document](.sloth/doc/spacing-calculation.md)

Method 4: Figma Plugin

Configure prompts directly in Figma using the Sloth D2C plugin. These prompts travel with the design file and are automatically merged during conversion.

Install: Sloth D2C on Figma Community

Prompt Priority (Highest to Lowest)

1. Figma Plugin prompts — Set by designers in Figma
2. Configuration UI prompts — Set during conversion
3. Project config — .sloth/config.json
4. Built-in defaults — Framework-specific defaults

Example: Custom React Prompt

<!-- .sloth/doc/react-guide.md -->

## React Code Guidelines

- Use TypeScript with strict mode
- Use functional components only
- Use CSS Modules for styling (\*.module.css)
- Follow naming conventions:
  - Components: PascalCase
  - Files: PascalCase.tsx
  - Hooks: useCamelCase
- Import order: React → third-party → local → styles
- Add JSDoc comments for component props

Then reference it in config file:

{
  "prompts": {
    "react": {
      "frameworkGuidePrompt": "Refer to @[document](.sloth/doc/react-guide.md)"
    }
  }
}

Figma Plugin Integration

You can also get conversion prompts directly from the Sloth D2C Figma Plugin.

Install the Figma Plugin: Sloth D2C on Figma Community

When the MCP server processes a design, it will automatically fetch and merge prompts configured in the Figma plugin, giving designers control over how their designs are converted to code.

Architecture

┌──────────────────────────────────────────────┐
│          AI Coding Assistant (Client)         │
│   TME-Continue / CodeBuddy / Copilot / etc.  │
└──────────────┬───────────────────────────────┘
               │ MCP Protocol (stdio / HTTP)
┌──────────────▼───────────────────────────────┐
│          Sloth D2C MCP Server                │
│                                              │
│  MCP Tools ─── HTTP Server ─── Plugin Mgr   │
│      │              │               │        │
│      └──── Core Layer (Config, File, ────┘   │
│             Sampling, PromptBuilder)         │
│                     │                        │
│         sloth-d2c-node (Conversion Engine)   │
└──────────────┬───────────────────────────────┘
               │
       Figma REST API

License

ISC

中文

目录

• 简介
• 功能特性
• 环境要求
• 安装
• 配置 MCP
• 使用方法
• MCP 工具
• CLI 命令
• 支持框架
• 插件系统
• 组件映射
• 配置说明
• 架构图
• 许可证

简介

Sloth D2C MCP 是一个基于 Model Context Protocol (MCP) 的 Figma 设计稿转代码服务器。它作为 AI 编程助手的工具桥梁，连接 IDE 中的 AI 和 Figma，实现自动化的设计转代码，支持交互式配置、智能分组、组件复用和多框架输出。

功能特性

• 多框架支持 — React、Vue、iOS (OC/Swift)、Taro、UniApp
• 交互式配置界面 — 可视化配置页面，支持元素分组、组件映射、提示词定制（通过 VSCode 扩展、Web 浏览器或 Tauri 客户端）
• 智能采样 — 将长页面拆分为分组，利用 AI 采样（MCP createMessage）逐组优化代码
• 组件库匹配 — 通过截图模板匹配（OpenCV.js）自动将设计元素映射到项目已有组件
• 增量更新模式 — 分析设计变更（HTML Diff），生成增量更新提示词
• 插件系统 — 可扩展的 Hook 机制（onFetchImage、onSamplingComplete、beforeFinalPrompt 等）
• 静默模式 — 跳过配置界面，适用于自动化 CI/CD 流程
• 模块拆分 — 将设计稿拆分为独立模块，逐模块生成代码
• 本地缓存 — 预缓存 Figma 数据，支持离线/加速转换

环境要求

• Node.js >= 18
• pnpm（推荐）或 npm
• 支持 MCP 的 AI 编程助手：
  • CodeBuddy（支持采样）
  • GitHub Copilot（支持采样）
  • TME-Continue（支持采样）
  • Cursor
  • Claude Desktop

安装

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

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

# 验证安装
sloth --version

配置 MCP

在 AI 编程助手中配置 Sloth 作为 MCP 服务器：

TME-Continue

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

CodeBuddy

{
  "sloth-d2c-mcp": {
    "type": "stdio",
    "command": "sloth",
    "timeout": 3000000,
    "args": ["--stdio"]
  }
}

GitHub Copilot / Cursor

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

Claude Desktop

{
  "mcpServers": {
    "sloth-d2c-mcp": {
      "command": "sloth",
      "args": ["--stdio"]
    }
  }
}

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

使用方法

基本转码

在 AI 对话中粘贴 Figma 设计链接：

将这个 Figma 设计转换为 React 代码：
https://www.figma.com/design/xxxxx/MyDesign?node-id=123-456

AI 会自动提取 fileKey 和 nodeId，调用 d2c_figma 工具，弹出交互式配置页面供你：

1. 配置 Figma API Token（仅首次需要）
2. 设置目标框架和转换选项
3. 框选分组设计元素
4. 映射设计分组到已有组件
5. 自定义 AI 提示词

提交后，AI 生成最终代码。

静默模式（无 UI）

以静默模式将此 Figma 设计转换为 Vue 代码：
https://www.figma.com/design/xxxxx/MyDesign?node-id=123-456

增量更新模式

根据新的 Figma 设计更新代码：
https://www.figma.com/design/xxxxx/MyDesign?node-id=123-456

预缓存设计数据

预缓存这个 Figma 设计数据：
https://www.figma.com/design/xxxxx/MyDesign?node-id=123-456

MCP 工具

| 工具 | 说明 | | ----------------- | -------------------------------------------------------------------- | | d2c_figma | 将 Figma 设计文件转换为代码（主要工具） | | d2c_process | 将拦截页中框选和组件映射提交的提示词写入本地文件，供 Skills 生成代码 | | mark_components | 标记并保存组件到 components.json，供后续复用 |

CLI 命令

| 命令 | 说明 | | ---------------------- | ------------------------------------------------ | | sloth | 以 stdio 模式启动 MCP Server（供 AI 客户端调用） | | sloth config | 显示配置文件路径 | | sloth cache | 显示缓存目录路径 | | sloth server start | 后台启动 HTTP 服务 | | sloth server stop | 停止运行中的服务 | | sloth server restart | 重启服务 | | sloth add <package> | 全局安装 npm 包（插件）并重启服务 | | sloth update | 更新 sloth-d2c-mcp 到最新版本 | | sloth version | 显示版本信息 | | sloth --help | 显示帮助信息 | | sloth --log[=path] | 开启文件日志 |

支持框架

| 框架 | 枚举值 | 内置提示词 | | --------------- | ----------- | ---------- | | React | react | ✅ 完整 | | Vue | vue | ✅ 完整 | | iOS Objective-C | ios-oc | ✅ 完整 | | iOS Swift | ios-swift | ✅ 完整 | | Taro | taro | ✅ 完整 | | UniApp | uniapp | ✅ 完整 |

可通过配置界面或配置文件添加自定义框架。

插件系统

Sloth 支持插件系统来扩展转码流程。

安装插件

sloth add @sloth/my-plugin

插件接口

interface SlothPlugin {
  name: string
  version?: string
  description?: string

  // Hooks
  afterSubmitConfigData?: (params: any) => Promise<any>
  onFetchImage?: (params: any) => Promise<any>
  onSamplingComplete?: (params: any) => Promise<any>
  beforeFinalPrompt?: (params: any) => Promise<any>
}

插件 Hook

| Hook | 触发时机 | 用途 | | ----------------------- | ------------------ | ------------------------------ | | afterSubmitConfigData | 用户提交配置后 | 修改配置或返回自定义提示词 | | onFetchImage | 获取到 imageMap 后 | 自定义图片上传（如上传到 CDN） | | onSamplingComplete | 所有采样完成后 | 对代码片段进行后处理 | | beforeFinalPrompt | 构建最终提示词前 | 注入额外提示词 |

工作区插件

在项目根目录创建 .sloth/plugins.json：

{
  "plugins": ["my-local-plugin", { "name": "@sloth/my-plugin", "config": { "key": "value" } }]
}

组件映射

Sloth 在项目根目录的 .sloth/components.json 维护组件数据库。组件可通过以下方式注册：

1. 手动注册 — 通过 mark_components MCP 工具
2. AI 分析 — 在配置界面选择项目文件进行分析
3. 截图匹配 — 使用 OpenCV.js 模板匹配自动建议映射

转码时，Sloth 检查组件数据库并提供映射建议，使 AI 复用已有组件而非生成重复代码。

配置说明

Figma API Token

注意：如果通过 Sloth D2C Figma 插件 发起转码，插件会将设计数据直接推送到本地缓存，无需配置 Figma API Token。只有当你直接在 AI 对话中粘贴 Figma 节点链接（传统 MCP 使用方式）时，才需要配置 Figma API Token。

从 Figma 设置 获取个人访问令牌。

两种配置方式：

1. 通过配置界面 — 首次使用时自动弹出
2. 通过配置文件 — 运行 sloth config 获取路径，然后编辑：

{
  "mcp": {
    "figmaApiKey": "figd_xxxxxxxxxxxxx"
  }
}

图片存储选项

| 选项 | 说明 | | ------- | --------------------------------- | | local | 保存到本地目录（默认 ./static） | | oss | 上传到阿里云 OSS | | api | 通过自定义 API 上传 | | 插件 | 通过插件 Hook 自定义上传 |

提示词定制

Sloth 提供多种方式来自定义不同框架的转码提示词。

可用提示词

| 提示词 | 说明 | | ----------------------------- | ------------------------ | | frameworkGuidePrompt | 框架特定的 AI 指导 | | chunkOptimizePrompt | 逐组代码优化提示词 | | aggregationOptimizePrompt | 页面级代码聚合提示词 | | finalOptimizePrompt | 最终代码生成提示词 | | componentAnalysisPrompt | 组件分析提示词 | | noSamplingAggregationPrompt | 不支持采样时的备用提示词 |

方式一：配置界面

最简单的自定义提示词方式是通过交互式配置页面：

1. 粘贴 Figma URL 开始转码
2. 在配置页面中找到「提示词」或「高级设置」区域
3. 直接在文本框中编辑提示词
4. 提交即可生效

方式二：项目级配置

在项目根目录创建 .sloth/config.json：

{
  "prompts": {
    "react": {
      "frameworkGuidePrompt": "使用函数组件和 Hooks，遵循 React 18 最佳实践。",
      "chunkOptimizePrompt": "优化性能，适当使用 memo。",
      "finalOptimizePrompt": "确保无障碍（a11y）合规。"
    },
    "vue": {
      "frameworkGuidePrompt": "使用 Vue 3 组合式 API 和 <script setup>。",
      "chunkOptimizePrompt": "使用计算属性处理派生状态。"
    }
  }
}

方式三：使用 @doc 引用（仅配置界面）

对于较长的提示词，可存储在 .sloth/doc/ 目录，并在配置界面的提示词输入框中引用：

.sloth/
├── doc/
│   ├── react-guide.md
│   ├── coding-standards.md
│   └── component-rules.md
└── config.json

在配置界面的提示词输入框中，使用 @doc 引用文件内容：

@doc react-guide.md
@doc coding-standards.md

注意：@doc 语法仅适用于配置界面的提示词输入框，不能在 config.json 中直接使用。在配置文件中，请使用路径引用格式：@[文档](.sloth/doc/spacing-calculation.md)

方式四：Figma 插件

直接在 Figma 中使用 Sloth D2C 插件配置提示词。这些提示词会跟随设计文件，转码时自动合并。

安装：Sloth D2C - Figma 社区

提示词优先级（从高到低）

1. Figma 插件提示词 — 开发在 Figma 中设置
2. 配置界面提示词 — 转码时设置
3. 项目配置 — .sloth/config.json
4. 内置默认值 — 框架特定的默认提示词

示例：自定义 React 提示词

<!-- .sloth/doc/react-guide.md -->

## React 代码规范

- 使用 TypeScript 严格模式
- 仅使用函数组件
- 使用 CSS Modules 样式（\*.module.css）
- 命名规范：
  - 组件：PascalCase
  - 文件：PascalCase.tsx
  - Hooks：useCamelCase
- 导入顺序：React → 第三方库 → 本地模块 → 样式
- 为组件 props 添加 JSDoc 注释

然后在配置文件中引用：

{
  "prompts": {
    "react": {
      "frameworkGuidePrompt": "参考 @[文档](.sloth/doc/react-guide.md)"
    }
  }
}

Figma 插件集成

你也可以直接在 Sloth D2C Figma 插件 中获取转码提示词。

安装 Figma 插件：Sloth D2C - Figma 社区

MCP 服务处理设计稿时，会自动获取并合并 Figma 插件中配置的提示词，让设计师能够控制其设计如何被转换为代码。

架构图

┌──────────────────────────────────────────────┐
│          AI 编程助手 (客户端)                  │
│   TME-Continue / CodeBuddy / Copilot 等       │
└──────────────┬───────────────────────────────┘
               │ MCP 协议 (stdio / HTTP)
┌──────────────▼───────────────────────────────┐
│          Sloth D2C MCP Server                │
│                                              │
│  MCP 工具 ─── HTTP 服务 ─── 插件管理器       │
│      │              │               │        │
│      └──── 核心层 (配置、文件、采样、────┘     │
│             提示词构建)                       │
│                     │                        │
│         sloth-d2c-node (核心转换引擎)         │
└──────────────┬───────────────────────────────┘
               │
         Figma REST API

许可证

ISC