Claude Talk to Figma MCP

Claude与Figma MCP对话

一个模型上下文协议（MCP）插件，允许Claude Desktop和其他AI工具（GitHub Copilot、Cursor等）直接与Figma交互，实现强大的AI辅助设计功能。

重要：本项目基于 光标与figma mcp对话 桑尼·拉祖迪。它已被调整为与Claude Desktop配合使用，并扩展了其他工具。原始信用属于Sonny Lazuardi❤️

⚡ 安装

1.先决条件

2.设置

git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git
cd claude-talk-to-figma-mcp
bun install

• macOS/Linux: bun run build
• 视窗: bun run build:win

3.AI客户端配置

选项1:DXT软件包（仅限克劳德桌面版）

1. 下载：获取最新信息 claude-talk-to-figma-mcp.dxt 从 发布
2. 安装：双击 .dxt file → Claude Desktop会自动安装

选项2:JSON（克劳德桌面或光标）

• 克劳德桌面：运行 bun run configure-claude （重新启动克劳德桌面）
• 光标:

1. 转到光标设置→ 工具和集成 1. 点击“新建MCP服务器”打开 mcp.json config(截图) 1. 添加此配置：

  {
    "mcpServers": {
      "ClaudeTalkToFigma": {
        "command": "bunx",
        "args": ["claude-talk-to-figma-mcp@latest"]
      }
    }
  }

4. 保存文件(截图)

4.设置Figma插件（所有方法都需要）

导入 src/claude_mcp_plugin/manifest.json 在Figma→ Menu → 插件→ 发展

4.首次连接

1. 启动服务器: bun socket （核实 http://localhost:3055/status)
2. 连接插件：在Figma中打开Claude MCP插件→ 复制频道ID
3. 测试：询问您的AI客户端：“与Figma对话，频道{频道ID}”

✅ 成功：你的AI应该确认连接，然后你就可以开始设计了！

______________________________________________________________________

🚀 核心概念

运作原理

Claude Desktop ↔ MCP Server ↔ WebSocket Server ↔ Figma Plugin

简单：Claude发送设计命令→ Figma实时执行它们\ 双向：从Figma获取信息，创建/修改元素，管理组件

关键能力

• 文档交互：分析设计、获取选择、导出资产
• 元素创建：具有完全样式控制的形状、文本、框架
• 智能修改：颜色、效果、自动布局、响应式设计
• 文本精通：高级排版、字体加载、文本扫描
• 组件集成：本地和团队库组件

______________________________________________________________________

🛠️ 使用模式

AI设计入门

1. 让Claude成为用户体验专家: 使用此提示 🎨
2. 连接到您的项目：“与Figma对话，频道{频道ID}”
3. 开始设计：“创建具有现代风格的移动应用程序登录屏幕”

有效的激励示例

✅ Good: "Create a dashboard with a sidebar navigation, header with user profile, and main content area with card-based metrics"

✅ Good: "Redesign this button component with hover states and better contrast ratios"

❌ Avoid: "Make it look nice" (too vague)

______________________________________________________________________

📚 命令参考

📄 文档工具

🔧 创建工具

✏️ 修改工具

📝 文本工具

🎨 组件工具

______________________________________________________________________

构建DXT包（开发人员）

要创建自己的DXT包，请执行以下操作：

npm run build:dxt    # Builds TypeScript and packages DXT

这创造了 claude-talk-to-figma-mcp.dxt 准备分发。

______________________________________________________________________

🧪 测试和质量保证

自动化测试

bun run test            # Run all tests
bun run test:watch      # Watch mode
bun run test:coverage   # Coverage report

集成测试

bun run test:integration  # Guided end-to-end testing

手动验证检查表

• \[\]WebSocket服务器在端口3055上启动
• \[\]Figma插件连接并生成通道ID
• \[\]AI工具识别“ClaudeTalkToFigma”MCP（克劳德桌面、光标等）
• \[\]执行基本命令（创建矩形、更改颜色）
• \[\]错误处理工作（无效命令、超时）
• \[\]AI工具和Figma之间的通道通信工作

______________________________________________________________________

🐛 故障排除和支持

连接问题

• “无法连接到WebSocket”：确保 bun socket 正在运行
• “未找到插件”：在Figma开发设置中验证插件导入
• “MCP不可用”:

- 克劳德桌面：运行 bun run configure-claude 并重新启动克劳德 - 光标IDE：检查MCP配置 mcp.json 文件 - 其他AI工具：验证MCP集成设置

执行问题

• “命令失败”：检查Figma开发控制台是否有错误
• “找不到字体”：使用 load_font_async 验证字体可用性
• “权限被拒绝”：确保您对Figma文档具有编辑权限
• “超时错误”：复杂的操作可能需要重试

性能问题

• 反应缓慢：大型文档可能需要更多的处理时间
• 内存使用：关闭未使用的Figma选项卡，必要时重新启动
• WebSocket断开连接：服务器自动重新连接，如果持续，则重新启动

常见解决方案

1. 重启顺序：停止服务器→ 关闭AI工具→ 重新启动两者
2. 清洁重新安装：删除 node_modules → bun install → bun run build
3. 检查日志：服务器终端显示详细的错误消息
4. 更新字体：有些团队字体需要在Figma中手动加载
5. 配置检查：在AI工具的设置中验证MCP设置
6. 端口冲突：确保端口3055未被其他应用程序使用

______________________________________________________________________

🏗️ 高级主题

建筑深潜

+----------------+     +-------+     +---------------+     +---------------+
|                |     |       |     |               |     |               |
| Claude Desktop ||  MCP  || WebSocket Srv || Figma Plugin  |
|   (AI Agent)   |     |       |     |  (Port 3055)  |     |  (UI Plugin)  |
|                |     |       |     |               |     |               |
+----------------+     +-------+     +---------------+     +---------------+

设计原则:

• MCP服务器：业务逻辑、验证、默认值
• WebSocket服务器：消息路由和协议转换
• Figma插件：Figma上下文中的纯命令执行器

益处:

• 明确区分关注点
• 易于测试和维护
• 用于附加工具的可扩展架构

项目结构

src/
  talk_to_figma_mcp/     # MCP Server implementation
    server.ts            # Main entry point
    tools/               # Tool categories by function
      document-tools.ts  # Document interaction
      creation-tools.ts  # Shape and element creation
      modification-tools.ts # Property modification
      text-tools.ts      # Text manipulation
    utils/               # Shared utilities
    types/               # TypeScript definitions
  claude_mcp_plugin/     # Figma plugin
    code.js              # Plugin implementation
    manifest.json        # Plugin configuration

贡献指南

1. 叉和分支: git checkout -b feature/amazing-feature
2. 代码规范：遵循现有的TypeScript模式
3. 测试：添加新功能的测试
4. 文档：更新相关章节
5. 拉取请求：对变更的清晰描述

最近的贡献者

______________________________________________________________________

📋 版本历史记录

当前版本：0.6.1

• 🔧 工具修复：The set_stroke_color 工具现在可以正确接受 strokeWeight 的 0 用于创建不可见的笔划。

上一页：0.6.0

• 📦 自动化配送：用于自动生成DXT包和发布上传的GitHub Actions工作流
• ⚡ 增强的用户体验：终端用户的安装时间从15-30分钟缩短到2-5分钟
• 🔧 开发者工具：DXT打包的新构建脚本(npm run build:dxt, npm run pack)

看 更改日志.md 查看完整的版本历史记录。

______________________________________________________________________

📄 许可证和信用证

许可证：MIT许可证-请参阅 许可证 文件

作者:

• Xúlio Zé - *克劳德改编* -
• 桑尼·拉祖迪 - *原始实施* -

致谢:

• 克劳德和模型上下文协议的拟人团队
• 优秀插件API的Figma社区
• Bun团队实现快速JavaScript运行时