← 返回目录

Design To Code

社区

将 Figma 设计图和截图转换为代码组件（React、Svelte、Vue）

查看安装方法 ↓ 横向对比 GitHub 源仓库 ↗

分类: 开发工具第 422 / 438
Stars: ★ 2.8k 非常热门
传输方式: stdio（本地进程）
运行环境: Node.js
凭据: 可选 API Key
许可证: MIT
最近提交: 今天
工具数: 5

27FMRS · D

该服务器专注于设计到代码的转换，功能明确，但属于社区维护，非官方出品，使用时需谨慎处理凭据和生成代码的质量。

最强项 · 维护活跃度 10/20 最弱项 · 可靠性 3/20

可靠性

3/20

安全与权限

4/20

维护活跃度

10/20

文档质量

4/20

安装易用性

6/20

查看各项评分依据

可靠性 3/20: 本次仅提供清单（manifest）与市场级 README，未包含 plugins/mcp/design-to-code 的源码、测试、CI 工作流或工具列表。清单声明了 npm 包与 stdio 传输，但无从验证进程能否干净启动、MCP 初始化与工具列表握手是否成功，也无法确认“将 Figma 设计与截图转换为代码”的声明与真实工具行为一致。按证据缺失即扣分、不确定即向下取整的原则，可靠性分数很低。
安全与权限 4/20: 没有源码可供审查，凭据处理、最小权限、数据边界、危险操作确认机制均无法评估。该服务涉及设计数据与截图处理，Figma 集成通常需要 API 令牌，但资料中未披露任何数据流或权限边界说明。提供的材料未发现恶意软件、凭据窃取、隐蔽外传或破坏性默认操作等红线问题，但缺少证据不等于安全，因此给分很低。
维护活跃度 10/20: 仓库未被归档，清单声明为 MIT 许可，README 也声称活跃发布与验证驱动的 PR 检查，但静态审查无法确认这些情况适用于 design-to-code 这个具体服务器包。没有针对该插件的变更日志、安全响应渠道或依赖更新记录。仓库星标与用户数仅作为发现信号，不用于加分。评分对应“活跃但治理存在缺口”的锚点。
文档质量 4/20: 提供的文档仅有清单中的一行描述和 README 分类表中的一行简介；没有工具参数说明、认证指南、速率/费用限制、故障排查或该服务器的客户端配置示例。仓库 README 的通用 ccpi 安装命令与 /plugin marketplace add 只能说明安装入口，不能说明本服务器行为。因至少存在可识别的安装入口，评分略高于“文档与能力矛盾”的底线，但仍处于很低的水平。
安装易用性 6/20: 清单给出了 npm 包标识与 stdio 传输方式，仓库 README 也展示了 marketplace-add 与 ccpi install 命令，安装路径看似可行。但没有针对该服务器的客户端配置示例，没有平台兼容性说明，也没有可验证的执行证据（CI 或已提交测试）来突破静态审查上限。手动集成步骤是隐含的而非文档化的，因此分数较低。

静态评测 · 未实际运行收录于 2026-08-07

查看 FMRS 评分方法 →

选型与风险

能访问什么访问网络

适合谁

前端开发者
设计工程师
使用 Claude Code 进行原型开发的团队

不适合谁

非开发者用户
需要处理复杂交互逻辑的场景
生产级项目中的最终代码生成（仍需人工审查）

所需权限

访问 Figma 文件（需要 Figma API 令牌）
读取本地文件系统中的截图
生成代码文件（可能写入磁盘）

风险与副作用

需要 Figma 令牌，可能泄露敏感设计
生成的代码可能包含不安全的依赖或缺失优化
服务器来自第三方仓库，未经官方审查，存在供应链风险

安装接入

准备工作

运行环境：Node.js

确保已安装 Node.js 和 npm。然后通过 MCP 客户端配置添加服务器：在配置文件中设置 mcpServers.design-to-code，命令为 npx，参数为 -y @claude-code-plugins-plus/design-to-code。或者，在 Claude Code 中使用 /plugin marketplace add jeremylongshore/claude-code-plugins 添加市场，然后 /plugin install design-to-code@claude-code-plugins-plus。

claude_desktop_config.json

{
  "mcpServers": {
    "design-to-code": {
      "command": "npx",
      "args": [
        "-y",
        "@claude-code-plugins-plus/design-to-code"
      ]
    }
  }
}

以 Claude Desktop 为例。其他客户端的配置文件位置或字段可能不同（如 VS Code 使用 servers 字段），可用下方配置生成器转换。

.vscode/mcp.json

{
  "servers": {
    "design-to-code": {
      "command": "npx",
      "args": [
        "-y",
        "@claude-code-plugins-plus/design-to-code"
      ]
    }
  }
}

写入项目的 .vscode/mcp.json（VS Code 使用 servers 字段）。

Terminal

claude mcp add design-to-code -- npx -y @claude-code-plugins-plus/design-to-code

在终端运行；先把 <…> 占位符换成你自己的值。

生成并校验客户端配置

验证是否装好

在客户端连接 design-to-code 服务器后，检查工具列表中是否出现 convert_design_to_code、analyze_design_assets 等五个工具；或让 AI 调用 get_figma_token 确认 Figma 凭据状态。

常见排障

确保 Figma 令牌有效且未过期
检查 npm 包是否存在且版本正确
确认 MCP 客户端配置中的命令和参数正确
查看服务器日志以获取详细错误信息

试试这样问

连接成功后，可以直接对 AI 助手这样说：

把这个 Figma 设计稿转换成 React 组件代码
分析这张设计截图里包含哪些素材资源
列出我 Figma 项目里的所有组件
把生成的组件导出为 Svelte 组件文件

工具能力 5

convert_design_to_code 写入

将 Figma 设计或截图转换为指定框架的代码组件。

analyze_design_assets 只读

分析设计文件中的资产，提取样式、布局和组件结构。

export_code_component 写入

将设计元素导出为可复用的代码组件。

list_project_components 只读

列出项目中已转换的组件。

get_figma_token 只读

获取 Figma 访问令牌的配置状态。

使用场景

将 Figma 设计稿自动转换为 React 组件

将 UI 截图转换为 Svelte 或 Vue 组件

在设计迭代中快速生成可用的前端代码

支持客户端

Claude Desktop

Claude Code

依据项目文档列出，未经本站实测。

详细介绍

design-to-code 是一个 MCP 服务器，用于将 Figma 设计文件和截图转换为可用的前端组件，支持 React、Svelte、Vue 等框架。它属于 Claude Code 插件市场的设计类别，通过 stdin 传输运行，提供内置可访问性功能。该服务器位于 jeremylongshore/claude-code-plugins-plus-skills 仓库的 plugins/mcp/design-to-code 子目录中，作为 npm 包分发。

同仓库的其他 Server

源版本 ebea1067983c 数据同步于 2026-10-12 查看 FMRS 评分方法