背景

CodeBuddy 的 MCP 界面与 VS Code 不同，没有 ▶ Start 启动按钮。Figma 官方的 https://mcp.figma.com/mcp（HTTP OAuth 型）在 CodeBuddy 中会出现点击「连接」无反应、手动添加 Token 无效等问题。

解决方案：使用社区维护的 figma-developer-mcp 包，走 Figma REST API + Personal Access Token 认证，稳定可靠。

---

前置条件

1. Node.js >= 20

figma-developer-mcp 要求 Node.js >= 20.20.0。

检查当前版本：

node -v

如果版本低于 20，通过 nvm 升级：

# 安装 Node 20 LTS
nvm install 20.18.1

# 切换到新版本
nvm use 20.18.1

# 确认版本
node -v    # 应显示 v20.18.1

注意：nvm-windows 不支持 nvm alias 命令，nvm use 执行后会自动持久化，无需额外操作。

2. Figma Personal Access Token

1. 登录 Figma
2. 点击右上角头像 → 进入 Settings
3. 左侧导航栏选择 Security → Personal Access Tokens
4. 点击 Create a new personal access token
5. 填写名称（如 CodeBuddy），权限可全选（无负面影响），点击 Generate token
6. 立即复制 Token 并妥善保存（只显示一次）

---

安装 figma-developer-mcp

npm install -g figma-developer-mcp

安装成功不会有引擎警告。确保当前 Node 版本 >= 20。

---

配置 CodeBuddy MCP

1. 打开 CodeBuddy，点击侧边栏对话面板右上角的 CodeBuddy Settings 按钮
2. 切换到 MCP 标签页
3. 如果之前添加过 figma 的 HTTP 配置，先删除它
4. 点击 Add MCP，在弹出的 JSON 编辑器中填入：

{
  "mcpServers": {
    "figma": {
      "type": "stdio",
      "command": "figma-developer-mcp",
      "args": ["--figma-api-key=你的Token", "--stdio"]
    }
  }
}

将 你的Token 替换为前面生成的 Figma Personal Access Token。

5. 保存配置，等待几秒，figma 卡片状态变为 绿色 即表示成功。

---

使用 Figma MCP

1. 在 CodeBuddy 中打开 Craft Agent 对话面板（就是当前对话界面，确认顶部已选中 Craft 模式）
2. 在 Figma 中复制设计稿链接
3. 在输入框中粘贴链接，告诉 Agent 你的需求，例如：

把这个 Figma 设计稿转成 React 组件：
https://www.figma.com/design/xxxxx

4. Agent 会自动调用已配置的 Figma MCP 读取设计数据并生成代码。

如果对话界面有 Add from Figma（Figma）按钮，也可直接点击导入设计稿，更方便。

使用示例

下面展示部分操作流程和实际效果。

1. 选择控件并添加到对话

在 CodeBuddy 内打开 Figma 页面并登录账号，选中对应控件样式，然后点击 添加到对话 按钮，将需求告诉 Agent。

2. 生成的数据监控界面效果

Agent 读取 Figma 设计数据后，即可生成对应的代码实现。

更新前按钮效果：

更新后按钮效果：

---

常见问题

Q: 点击「连接」按钮没有反应？

Figmau 官方的 HTTP OAuth 型 MCP 在 CodeBuddy 中弹窗授权可能被拦截，且不支持直接填入 Personal Access Token。换用本文推荐的 figma-developer-mcp stdio 方案即可。

Q: 报错 MCP error -32000: Connection closed？

通常是依赖缓存损坏。清理后重试：

# 清理 npx 缓存目录
cmd /c "rmdir /s /q D:\nvm\node_cache\_npx\图码对应缓存目录"

# 重新全局安装
npm install -g figma-developer-mcp

Q: 报错 ERR_MODULE_NOT_FOUND？

Node.js 版本过低（< 20），需要升级到 Node 20+。

Q: 能否读取未授权文件？

需要在 Figma 中具有该设计文件的编辑或开发权限。如果是社区模板，请先点 Duplicate 复制到自己草稿箱后再使用。

---

相关链接

• CodeBuddy 官方文档
• figma-developer-mcp (npm)
• Figma Personal Access Tokens