Claude AI 智能体与 Figma MCP 对话

让您的 AI 智能体能够读取、分析和修改 Figma 设计。

从此 Git 仓库安装

本分支已打包为 Codex、Claude Desktop、Claude Code、Cursor、Windsurf、Cline、Roo Code 以及任何支持本地 stdio MCP 服务器的客户端做好准备。

Codex：

codex plugin marketplace add Desrid/desrid-html-to-figma --ref main
codex plugin add desrid-html-to-figma@desrid-html-to-figma

通用 MCP 客户端： 使用根目录下的 .mcp.json，或从 GitHub 配置命令：

{
  "mcpServers": {
    "desrid_html_to_figma": {
      "command": "npx",
      "args": [
        "--yes",
        "--package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz",
        "desrid-html-to-figma-server"
      ]
    }
  }
}

Claude Desktop： 从 GitHub Releases 打开 desrid-html-to-figma.dxt。

所有客户端还需要本地 Figma 开发插件和 WebSocket 桥接。请参阅跨智能体安装指南或 Codex 指南。

与您最喜爱的智能体工具搭配使用：

• Claude Desktop

• Claude Code

• Cursor

• Antigravity

• Windsurf

• VS Code + GitHub Copilot

• Cline

• Roo Code

👩🏽💻 适用人群

UX/UI 团队

自动化重复性设计任务，无需手动操作即可维护品牌一致性：

• 自动无障碍审计 — 在几秒内检测并修复对比度问题

• 批量样式更新 — 通过单条命令更改整个文档中的颜色、字体或间距

• 视觉层级分析 — 即时获取设计结构反馈

开发者

直接从设计生成可用于生产的代码：

• React/Vue/SwiftUI 组件 — 从设计到代码一步到位

• 带设计令牌的代码 — 保持设计与开发同步

• 减少交接摩擦 — 减少与设计团队的来回迭代

主要优势：与需要 Dev Mode 许可证的 Figma 官方 MCP 不同，此 MCP 适用于任何 Figma 账户（甚至包括免费账户）。

💡 实际应用场景

无障碍检测：

“找出所有对比度 <4.5:1 的文本，并建议符合 WCAG AA 的颜色”

品牌重塑：

“将文档中所有主要按钮的 #FF6B6B 更改为 #E63946”

设计分析：

“分析这个屏幕的视觉层级，并根据设计原则提出改进建议”

开发交接：

“生成 ‘CardProduct’ 的 React 组件，包括 PropTypes 和 CSS modules 样式”

⚡️ 快速安装

安装时间： 5 分钟 | 首个自动化： 2 分钟

环境要求

• 已安装 Node.js

• Figma Desktop

• AI 客户端：

  • Claude Desktop

  • Claude Code

  • Cursor

  • Antigravity

  • Windsurf

  • VS Code + GitHub Copilot

  • Cline

  • Roo Code

步骤 1：安装并启动 websocket

让智能体能够向 Figma 发送命令。

打开终端，导航到您要安装此工具的文件夹，然后运行：

npx --yes --package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz desrid-html-to-figma

💡 提示：此命令会下载版本化的 GitHub Release 包并启动本地桥接服务。如果是克隆的代码库，请在后续会话中运行 npm run socket。

步骤 2：在 Figma 中安装插件

让 Figma 能够接收来自智能体的命令并返回响应。

在 Figma Desktop 中，进入 菜单 → 插件 → 开发 → 导入插件清单位 → 在您安装 MCP 的文件夹中，选择 src/claude_mcp_plugin/manifest.json

步骤 3：配置您的智能体工具

让智能体能够使用 MCP 的读取和修改工具。

Claude Desktop

从最新版本中下载 desrid-html-to-figma.dxt，然后双击。Claude 将自动完成配置。

Cursor

1. 打开 Cursor 设置 → 工具与集成

2. 点击 “New MCP Server” 以打开 mcp.json 文件

3. 添加以下配置：

{
  "mcpServers": {
    "desrid_html_to_figma": {
      "command": "npx",
      "args": ["--yes", "--package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz", "desrid-html-to-figma-server"]
    }
  }
}

4. 保存文件并重启 Cursor

其他智能体工具

对于其他工具（Claude Code、Windsurf、VS Code + GitHub Copilot、Cline、Roo Code），您可以按照详细安装指南中的 “配置您的智能体工具”章节 中的说明操作。

步骤 4：开始工作

1. 在 Figma 中打开插件

2. 复制通道 ID（绿色框内显示加粗的代码）

3. 在对话中输入：Connect to Figma, channel {your-ID}

✅ 随时可以和 AI 一起设计！

后续日常工作会话

在日常工作中再次使用 MCP 时，您无需重复整个安装过程：

1. 启动 socket：在终端中，进入 your-project/desrid-html-to-figma 并运行 npm run socket。

2. 在 Figma 中打开插件：您可以在最近使用的插件列表中找到它。

3. 连接 AI：复制通道 ID，并告诉您的智能体：Connect to Figma, channel {your-ID}。

🤖 多智能体与并行执行

此 MCP 服务器开箱即用地支持 安全的并行执行，允许多个 AI 智能体（例如 Claude Code 的子智能体或团队集群）同时在您的 Figma 文件上工作，而不会锁定插件。内置的命令队列会在服务器端依次处理请求，防止 Figma API 超时。

注意：由于多个智能体可能同时修改文档，依赖隐式页面上下文是不安全的。因此，像 set_current_page 这类有状态命令 已被禁用。所有智能体在执行任何创建或结构调整命令（例如 create_frame、create_text）时，都必须明确提供 parentId 参数。

（特别感谢 @mmabas77 为此功能所做的架构设计和贡献！）

🐳 备选方案：使用 Docker

如果您偏好 Docker，或需要在团队环境中运行 WebSocket 服务器，请参阅详细安装文档中的 Docker 安装指南。

🛠️ 功能

设计分析

• 获取文档信息、当前选择、样式

• 扫描文本、审计组件、导出资源

元素创建

• 形状、文本、框架，支持完整样式控制

• 克隆、分组、组织元素

修改

• 颜色、边框、圆角、阴影

• 自动布局、高级排版

• 本地组件和团队库组件

请参阅完整命令列表。

📚 文档

• 详细安装 — 手动设置、Cursor、Windsurf 和其他 IDE

• 可用命令 — 完整工具参考

• 常见问题排查 — 常见错误及其解决方法

• 贡献指南 — 架构、测试、贡献指南

• 更新日志 — 版本历史

🙏 致谢

基于 Sonny Lazuardi 的 cursor-talk-to-figma-mcp，由 Xúlio Zé 为其适配了 Claude Desktop 并扩展了更多工具。

如果您想了解项目的所有贡献，可以查看贡献指南中的 “贡献者”章节。

MIT 许可证

📊 项目状态

✅ 稳定生产 - 工具已可日常用于设计和开发团队

🚀 积极开发中：

• 完整支持用于生产场景的命令

• 增强导出：Tailwind CSS/SwiftUI 代码生成

您有特定需求？

在 GitHub Issues 上提出新功能建议

您的反馈和贡献让这个项目继续发展。❤️