【免费下载链接】claude-talk-to-figma-mcp
A Model Context Protocol (MCP) that allows Claude Desktop and other AI tools (Claude Code, Cursor, Antigravity, etc.) to read, analyze, and modify Figma designs
claude-talk-to-figma-mcp 是一个开源的 Figma MCP 服务器（Model Context Protocol），它能让 Claude Desktop、Cursor、Claude Code 等 8 种 AI 工具直接读取、分析并修改 Figma 设计稿——改配色、查对比度、生成组件代码，一句中文指令即可完成。相比 Figma 官方 MCP 需要 Dev Mode 付费授权，这个项目任何 Figma 账号（包括免费版）都能用。
🏗️ 工作原理：只需要搭 3 块拼图
理解架构后，配置就不再是"照抄命令"，而是心里有数：
| 组件 | 作用 | 对应源码 |
|---|---|---|
| WebSocket 服务器 | AI 向 Figma 发送命令的通道 | src/socket.ts |
| Figma 插件 | 接收命令并把结果返回给 AI | src/claude_mcp_plugin/ |
| MCP Server | 让 AI 工具发现并调用 39 个设计工具 | src/talk_to_figma_mcp/server.ts |
三者分别对应下面三步：终端启动 → Figma 装插件 → AI 工具填配置。
✅ 准备清单（5 分钟）
开始配置前，确认以下三项已就绪：
- 🖥️ 已安装 Node.js（运行环境）
- 🎨 Figma 桌面版（插件只支持桌面客户端，网页版不行）
- 🤖 你的 AI 工具之一：Claude Desktop / Claude Code / Cursor / Antigravity / Windsurf / VS Code + GitHub Copilot / Cline / Roo Code
🚀 通用三步配置法
第 1 步：一条命令启动 WebSocket 服务器
在终端中，进入你想安装工具的文件夹，运行：
npx claude-talk-to-figma-mcp
这是一条"全能命令"：自动克隆仓库、安装依赖（Bun）并启动服务器。启动后可访问 http://localhost:3055/status 验证服务是否正常。
💡 日常再次使用时，只需进入项目目录运行
bun run socket或npm run socket即可，无需重复整个流程。
第 2 步：在 Figma 中导入插件
在 Figma 桌面版：菜单 → 插件 → 开发（Development）→ 从 manifest 导入插件，选择你运行命令所在目录下的 src/claude_mcp_plugin/manifest.json 文件，然后打开插件。
插件连接成功后，绿色框中会显示一个 channel 通道 ID（如上图中的 gto429ko），记住它，第 4 步要用。
第 3 步：在 AI 工具中注册 MCP Server
所有工具的核心配置完全相同，只是写入的位置不同：
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]
}
}
}
📋 8 种 AI 工具配置清单
1️⃣ Claude Desktop（最省心）
方案 A（推荐）：从项目 Releases 页下载 claude-talk-to-figma-mcp.dxt 文件，双击即可自动完成配置。
方案 B：打开 设置 → Developer → Edit Config，在 claude_desktop_config.json 中加入上面的 JSON 配置，重启 Claude Desktop。
2️⃣ Claude Code（终端党福音）
在项目终端中一行注册：
claude mcp add ClaudeTalkToFigma -- npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-server
运行 claude mcp list 验证；也可以在项目根目录创建 .mcp.json（内容即上面的 JSON）做按项目配置，之后在 Claude Code 里输入 /mcp 查看连接状态。
3️⃣ Cursor（可视化配置）
- 打开 Cursor Settings → Tools & Integrations
- 点击 Add Custom MCP（或 New MCP Server），打开
mcp.json - 粘贴上面的 JSON 配置，保存并重启 Cursor
配置成功后，列表中会出现 ClaudeTalkToFigma，开关打开并显示 "39 tools enabled" 即大功告成：
4️⃣ Antigravity
Agent 聊天框右上角三点菜单 → MCP Servers → Manage MCP Servers → View raw config，在 mcp_config.json 中加入上面的 JSON，保存后重启。
5️⃣ Windsurf
Windsurf Settings → Cascade → MCP Servers → View raw config，编辑 mcp_config.json 加入 JSON 配置，保存后点击 Cascade 面板的 Refresh 按钮加载服务器。
6️⃣ VS Code + GitHub Copilot
需要账号已启用 Copilot。两种加法任选：
- 命令面板：
Ctrl+Shift+P→ 搜索 "MCP: Add Server" → 选择 Command (stdio) → 命令填npx，参数填-p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-server，命名为ClaudeTalkToFigma - 命令行：
code --add-mcp "{...}"一次性写入
在 Copilot 聊天框输入 # 即可看到可用的 MCP 工具。
7️⃣ Cline（VS Code 扩展）
打开 Cline 扩展 Settings → MCP Servers，在 cline_mcp_settings.json 的 mcpServers 中加入相同 JSON（建议保留 "disabled": false 与 "alwaysAllow": [] 两个字段），保存后 Cline 会自动识别。
8️⃣ Roo Code（VS Code 扩展）
点击 Roo Code 面板的 MCP 图标 → Edit MCP Settings，在 mcp_settings.json 中加入相同 JSON，保存并重启。Roo Code 还支持在项目根目录创建 .roo/mcp.json 做按项目配置。
🐳 团队协作？ 也可以用 Docker 跑共享的 WebSocket 服务：克隆仓库
git clone https://gitcode.com/gh_mirrors/cl/claude-talk-to-figma-mcp后执行docker build -t figma-websocket .，再docker run -d -p 3055:3055 --name figma-ws figma-websocket即可，详见 INSTALLATION.md。
🔌 开始工作：30 秒完成首次对话
- 在 Figma 中打开插件，复制绿色框里的 channel ID
- 在 AI 聊天框输入：
Connect to Figma, channel 你的ID - 然后直接用自然语言下指令即可 ✅
一句话指令示例：
- 🎨 无障碍检查："找出所有对比度低于 4.5:1 的文字，并给出符合 WCAG AA 的替代色"
- 🏷️ 品牌焕新："把文档中所有主按钮的 #FF6B6B 改成 #E63946"
- ⚙️ 开发交接："为 'CardProduct' 生成 React 组件，样式用 CSS modules"
完整命令参考 COMMANDS.md，覆盖设计分析、元素创建、样式修改、变量、SVG 导入等 39 个工具。
🛠️ 遇到问题？
遇到"连接失败、工具不出现、端口被占用"等常见问题，先查 TROUBLESHOOTING.md——里面按错误类型整理了解决方案，绝大多数卡点都能对号入座。
📚 延伸阅读
- INSTALLATION.md — 完整安装指南（含 Docker 部署）
- COMMANDS.md — 39 个 MCP 工具全量参考
- scripts/setup.sh — 一键安装脚本
- tests/ — 单元与集成测试
- CHANGELOG.md — 版本更新记录
MIT 协议开源，放心商用。配置一次，8 个 AI 工具即刻获得"设计超能力" 🎨
【免费下载链接】claude-talk-to-figma-mcp
A Model Context Protocol (MCP) that allows Claude Desktop and other AI tools (Claude Code, Cursor, Antigravity, etc.) to read, analyze, and modify Figma designs
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
