适合谁
- 前端开发者
- 设计工程师
- 使用 Claude Code 进行原型开发的团队
D
27FMRS · D
该服务器专注于设计到代码的转换，功能明确，但属于社区维护，非官方出品，使用时需谨慎处理凭据和生成代码的质量。
design-to-code 是一个 MCP 服务器，用于将 Figma 设计文件和截图转换为可用的前端组件，支持 React、Svelte、Vue 等框架。它属于 Claude Code 插件市场的设计类别，通过 stdin 传输运行，提供内置可访问性功能。该服务器位于 jeremylongshore/claude-code-plugins-plus-skills 仓库的 plugins/mcp/design-to-code 子目录中，作为 npm 包分发。
工具能力
convert_design_to_code
将 Figma 设计或截图转换为指定框架的代码组件。
analyze_design_assets
分析设计文件中的资产，提取样式、布局和组件结构。
export_code_component
将设计元素导出为可复用的代码组件。
list_project_components
列出项目中已转换的组件。
get_figma_token
获取 Figma 访问令牌的配置状态。
安装接入
确保已安装 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"
]
}
}
}
选型与风险
不适合谁
- 非开发者用户
- 需要处理复杂交互逻辑的场景
- 生产级项目中的最终代码生成（仍需人工审查）
所需权限
- 访问 Figma 文件（需要 Figma API 令牌）
- 读取本地文件系统中的截图
- 生成代码文件（可能写入磁盘）
风险与副作用
- 需要 Figma 令牌，可能泄露敏感设计
- 生成的代码可能包含不安全的依赖或缺失优化
- 服务器来自第三方仓库，未经官方审查，存在供应链风险
常见排障
- 确保 Figma 令牌有效且未过期
- 检查 npm 包是否存在且版本正确
- 确认 MCP 客户端配置中的命令和参数正确
- 查看服务器日志以获取详细错误信息
使用场景
将 Figma 设计稿自动转换为 React 组件
将 UI 截图转换为 Svelte 或 Vue 组件
在设计迭代中快速生成可用的前端代码
支持客户端
Claude Desktop完整支持
Claude Code完整支持