从设计稿到代码：编程工具调用 Figma MCP 完整指南本文主要介绍AI 编程工具（Claude Code、Curso

从设计稿到代码：Claude Code / OpenCode / Cursor / VS Code 调用 Figma MCP 完整指南

让 AI 读懂你的 Figma 设计，自动生成高保真前后端代码。本文覆盖安装配置、官方 vs 三方 MCP 选型对比、以及提示词工程的最佳实践。

1. 背景与核心概念

传统的设计→开发流程中，设计师在 Figma 交付原型后，前端工程师需要手动逐像素还原样式、间距、圆角、字体……这个「翻译」过程天然存在信息损耗。

Figma MCP 解决的就是这个问题：它让 AI Coding Agent（如 Claude Code、OpenCode、Cursor、VS Code 等）能够直接读取 Figma 设计文件中的节点信息、布局结构、样式变量，然后据此生成代码。你不再需要截图或复制样式数据——AI 可以直接「看懂」设计稿。

工作流程概览

Figma 设计稿 ──MCP──▶ AI Coding Agent ──▶ 生成代码 ──▶ 项目目录
     │                    │
     │              读取布局/样式/变量
     │              理解组件结构
     │              导出截图辅助定位
     ▼
   用户提交 Prompt

2. MCP 协议简介

MCP（Model Context Protocol）是 Anthropic 提出的开放协议标准，用于让 AI 工具安全地连接外部服务和数据源。简单来说：

MCP Server = 一个本地或远程进程，负责与目标 API（如 Figma API）通信
MCP Client = AI 工具本身（Claude Code、OpenCode、Cursor、VS Code 等），通过 MCP 协议向 Server 发起请求

MCP Server 支持三种传输方式：

传输方式	适用场景	特点
stdio	本地进程	通过命令行启动子进程，适合访问文件系统
HTTP / Streamable HTTP	远程服务	稳定可靠，逐渐取代 SSE，是目前主流推荐方式
SSE	远程服务	Server-Sent Events（已被 Streamable HTTP 取代）

3. 主流 MCP 方案对比

目前社区主要有三个路线：Figma 官方 MCP Server、figma-developer-mcp（Framelink） 和 TalkToFigma MCP。下面详细对比。

3.1 Figma 官方 MCP Server

由 Figma 团队官方出品，是目前功能最全的方案。

服务端地址： https://mcp.figma.com/mcp（Streamable HTTP 传输）

核心能力：

✅ get_design_context — 获取选中 Frame 的设计上下文（布局、样式、颜色、排版），默认输出 React + Tailwind 格式
✅ get_metadata — 获取 XML 格式的节点元数据（层级关系、位置、尺寸、类型）
✅ export_node_as_image — 导出节点为截图（PNG/JPG/SVG/PDF），对保持布局 fidelity 极有帮助
✅ get_variable_context — 获取 Design Tokens（颜色、间距、字体变量）
✅ Write to Canvas — 创建/修改 Figma 元素（Beta 阶段免费，未来可能收费）
✅ Code Connect — 将 Figma 组件映射到你代码库中的真实组件，实现复用
✅ 搜索设计库中的组件、变量、样式
✅ Web Page → Figma 转换（逐步推出中）
✅ 支持 Gemini CLI 安装扩展

速率限制：

计划	限制
Starter 计划 / View 或 Collab 座席	每月最多 6 次 tool call
Professional+（Dev/Full 座席）	按 Tier 1 REST API 速率限制（每分钟若干次）

认证方式： OAuth 2.0（通过 MCP 客户端内置引导登录，无需手动管理 Token）

优点：

官方维护，API 稳定性最高
功能最全面（读写双向 + Code Connect）
支持 Figma Make 文件格式
无需自行管理 Access Token

缺点：

Starter 用户速率限制极低（月 6 次）
仅支持 HTTP 传输（不支持本地部署的 stdio 模式）
部分高级功能仍在 Beta

3.2 figma-developer-mcp（Framelink MCP for Figma）⭐ 14.5k stars

该项目近期品牌升级为 Framelink MCP for Figma，npm 包名仍为 figma-developer-mcp。社区常以原名指代。

GitHub: github.com/GLips/Figma…

安装方式： npx -y figma-developer-mcp --figma-api-key=YOUR_KEY

核心能力：

读取 Figma 节点的布局信息（Auto Layout、约束、尺寸）
提取样式数据（颜色、字体、阴影、模糊）
结构化精简输出——比原始 API 响应更聚焦于前端需要的信息

认证方式： Figma Personal Access Token

优点：

纯本地 stdio 运行，不受云服务商限流影响
输出经过预处理过滤，token 消耗更少
免费使用，无次数限制
社区活跃（14.5k+ stars）
Cursor、Claude Code、VS Code 等均可使用

缺点：

只能读取，不能写入 Figma
无截图导出能力
不直接支持 Code Connect
依赖个人 API Token 的安全性

3.3 cursor-talk-to-figma-mcp（Grab 团队）⭐ 6.7k stars

GitHub: github.com/grab/cursor…

核心能力：

读取设计 + 写入 Figma（创建/修改节点、文本替换、自动布局调整）
双向通信：需要 Figma 插件 + WebSocket 服务器
丰富的 design system 操作（组件实例、变量、样式管理）

安装方式： bunx cursor-talk-to-figma-mcp@latest（需要 Bun）

优点：

读写双向
功能丰富度堪比官方方案
支持 FigJam diagrams

缺点：

必须使用 Bun 运行时（非 Node.js）
需要额外安装 Figma 桌面插件并手动链接
WebSocket 连接增加了部署复杂度
作者不是 Figma 员工，长期维护风险不确定

3.4 对比总表

维度	官方 MCP	Framelink MCP (figma-developer-mcp)	TalkToFigma MCP
提供方	Figma 官方	GLips（个人）/ Framelink	Grab 团队
传输方式	Streamable HTTP	stdio	stdio + WebSocket
读取设计	✅ 完全支持	✅ 完全支持	✅ 完全支持
写入 Figma	✅ Beta	❌	✅
截图导出	✅	❌	✅
Code Connect	✅	❌	❌
认证方式	OAuth（内置）	Personal Token	Personal Token
速率限制	Starter 用户月 6 次	无限制	取决于 Figma API
是否需要 Token	否	是	是
部署复杂度	低	低	高
推荐场景	Pro 及以上用户	预算有限 / 需要大量 tool call	需要双向操作

3.5 选型建议

追求稳定 + 有 Professional 以上账号 → 用 官方 MCP
想零成本快速上手 / 需要大量 design context 查询 → 用 Framelink MCP (figma-developer-mcp)
需要修改 Figma 设计稿 → 根据复杂度选官方（简单）或 TalkToFigma（复杂）

4. Claude Code 接入 Figma MCP

4.1 方式一：安装官方插件（推荐）

Claude Code 提供了官方 Plugin 机制，一条命令搞定：

claude plugin install figma@claude-plugins-official

这会自动完成以下事项：

添加 Figma MCP Server 配置
安装 Agent Skills（实现设计、Code Connect、Design System Rules）
配置资产处理规则

安装完成后验证：

claude mcp list          # 确认 Figma server 已列出
claude mcp get figma     # 查看具体配置

4.2 方式二：手动配置

如果你更熟悉手动配置，可以使用 Claude Code 的原生 MCP 命令：

# 添加 Figma HTTP MCP Server（OAuth 认证自动引导）
claude mcp add --transport http figma https://mcp.figma.com/mcp

首次运行时，Claude Code 会弹出浏览器引导你完成 OAuth 授权。

如果需要指定作用域：

# 仅当前项目可用（写入 .mcp.json 到项目根目录）
claude mcp add --transport http figma https://mcp.figma.com/mcp --scope local

# 跨所有项目全局可用（写入 ~/.claude.json）
claude mcp add --transport http figma https://mcp.figma.com/mcp --scope user

# 项目级共享（通过 .mcp.json 共享给团队成员）
claude mcp add --transport http figma https://mcp.figma.com/mcp --scope project

scope 说明：新版 Claude Code 中 local 对应旧版的 project（写入 .mcp.json），user 对应旧版的 global（写入 ~/.claude.json）。

4.3 方式三：手动编辑配置文件

Claude Code 的项目级配置存储在项目根目录的 .mcp.json 中：

// .mcp.json（项目根目录，推荐）
{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

全局配置存储在 ~/.claude.json 中：

// ~/.claude.json（全局配置）
{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

4.4 使用 figma-developer-mcp（替代方案）

如果使用第三方 MCP，切换为 stdio 模式：

claude mcp add --transport stdio \
  --env FIGMA_API_KEY=your_personal_access_token \
  figma-dev \
  -- npx -y figma-developer-mcp

获取 Figma Personal Access Token：

打开 www.figma.com/developer
点击「Personal access tokens」
点击「Create new token」，设置名称和过期日期
复制生成的 Token

5. OpenCode（Anomaly.co 版）接入 Figma MCP

💡 注意：此处指 github.com/anomalyco/o…（TypeScript 写的开源 AI Coding Agent），并非 Go 语言的 opencode 项目。

5.1 配置文件位置

OpenCode 的 MCP 配置放在 opencode.json 中的 mcp 字段下，文件路径优先级：

全局配置： ~/.config/opencode/opencode.json（所有项目生效）
项目配置： 项目根目录下的 opencode.json（仅当前项目）
其他位置可参考文档 opencode.ai/docs/config

5.2 接入 Figma 官方 MCP（Remote / HTTP）

Figma 官方 MCP Server 基于 Streamable HTTP，属于 Remote 类型：

// ~/.config/opencode/opencode.json
{
  "$schema": "https://opencode.ai/config.json",
  "model": "anthropic/claude-sonnet-4-5",
  "mcp": {
    "figma": {
      "type": "remote",
      "url": "https://mcp.figma.com/mcp",
      "enabled": true
    }
  }
}

首次运行时，OpenCode 会引导完成 OAuth 授权登录。

如需自定义 Timeout：

"mcp": {
  "figma": {
    "type": "remote",
    "url": "https://mcp.figma.com/mcp",
    "enabled": true,
    "timeout": 10000
  }
}

需要带 Bearer Token 认证时（如果你有自己的代理）：

"mcp": {
  "figma": {
    "type": "remote",
    "url": "https://mcp.figma.com/mcp",
    "enabled": true,
    "headers": {
      "Authorization": "Bearer YOUR_TOKEN"
    }
  }
}

OAuth 自动关闭（如果不想走 OAuth 流程）：

"mcp": {
  "figma": {
    "type": "remote",
    "url": "https://mcp.figma.com/mcp",
    "enabled": true,
    "oauth": false
  }
}

5.3 接入 figma-developer-mcp（Local / stdio）

第三方 figma-developer-mcp 是本地进程模式（Local / stdio），需要在启动时传入 API Key：

{
  "$schema": "https://opencode.ai/config.json",
  "model": "anthropic/claude-sonnet-4-5",
  "mcp": {
    "figma-dev": {
      "type": "local",
      "command": ["npx", "-y", "figma-developer-mcp"],
      "environment": {
        "FIGMA_API_KEY": "你的_figma_personal_access_token"
      },
      "enabled": true,
      "timeout": 8000
    }
  }
}

获取 Figma Personal Access Token：

打开 www.figma.com/developer
点击「Personal access tokens」
点击「Create new token」，设置名称和过期日期
复制生成的 Token 填入上面

也可以不写死在 JSON 里，用系统环境变量传递：

{
  "mcp": {
    "figma-dev": {
      "type": "local",
      "command": ["npx", "-y", "figma-developer-mcp"],
      "environment": {
        "FIGMA_API_KEY": "${FIGMA_API_KEY}"
      },
      "enabled": true
    }
  }
}

然后终端启动前设置：

export FIGMA_API_KEY="你的_personal_access_token"
opencode

5.4 只启用/禁用（简化写法）

如果你已预先配置好 MCP server，只需临时开关：

{
  "mcp": {
    "figma": { "enabled": false }   // 暂时禁用
  }
}

5.5 验证连接

启动 OpenCode 后检查 MCP 状态：

# 开启 debug 日志查看连接详情
opencode -d

# 或在 TUI 中查看 logs

确认 Figma MCP Server 成功加载后，即可在对话中使用。

6. Cursor 接入 Figma MCP

💡 Cursor 是另一款流行的 AI Coding IDE，支持通过 mcp.json 配置文件接入 MCP Server。

6.1 配置文件位置

Cursor 的 MCP 配置放在项目根目录或全局配置目录的 mcp.json 中：

项目级配置： <项目根目录>/.cursor/mcp.json
全局配置： ~/.cursor/mcp.json（所有项目共享）
也可通过 Cursor Settings → MCP 界面图形化管理

6.2 接入 Figma 官方 MCP

Figma 官方 MCP Server 采用 Streamable HTTP 传输，配置非常简单：

// .cursor/mcp.json 或 ~/.cursor/mcp.json
{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

认证说明： 首次使用 Figma MCP 工具时，Cursor 会自动弹出浏览器引导你完成 OAuth 授权。无需手动配置 Client ID 或 Token。

如果通过自托管代理连接 Figma MCP（进阶场景），需要自定义认证：

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "auth": {
        "CLIENT_ID": "${env:FIGMA_OAUTH_CLIENT_ID}",
        "CLIENT_SECRET": "${env:FIGMA_OAUTH_CLIENT_SECRET}",
        "scopes": ["files:read", "design_deliverables:read"]
      }
    }
  }
}

自托管代理场景的 redirect URI 取决于你的代理配置。Cursor 原生 MCP 使用固定的 redirect URI cursor://anomaly.cursor-mcp/oauth/callback。

6.3 接入 figma-developer-mcp（Framelink MCP / stdio）

Framelink MCP for Figma 以本地 stdio 方式运行，Cursor 配置如下：

macOS / Linux：

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "${env:FIGMA_API_KEY}"
      }
    }
  }
}

Windows：

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "${env:FIGMA_API_KEY}"
      }
    }
  }
}

推荐使用 env 字段传递 API Key（而不是 --figma-api-key=YOUR-KEY 参数），避免敏感信息写死在配置文件中。

获取 Figma Personal Access Token：

打开 www.figma.com/developer
点击「Personal access tokens」
点击「Create new token」，设置名称和过期日期
复制生成的 Token

在终端设置环境变量后启动 Cursor：

# macOS / Linux
export FIGMA_API_KEY="你的_personal_access_token"
cursor

# Windows PowerShell
$env:FIGMA_API_KEY="你的_personal_access_token"
cursor

6.4 接入 TalkToFigma MCP（Cursor 专用，⭐6.7k stars）

Grab 团队的 cursor-talk-to-figma-mcp 是专为 Cursor 设计的 Figma MCP，支持读写双向操作：

前提条件：

安装 Bun 运行时
安装 Figma 桌面插件（在 Figma App → 插件设置中搜索 "TalkToFigma"）

配置：

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "${env:FIGMA_ACCESS_TOKEN}"
      }
    }
  }
}

获取 Figma Access Token：

打开 www.figma.com/developer
生成 Personal access token（与上方 Figma API Key 相同）

⚠️ TalkToFigma 需要 Figma 桌面插件配合使用，并保持 WebSocket 连接，配置复杂度较高。如无写入 Figma 的强需求，推荐优先使用官方 MCP 或 Framelink MCP。

6.5 Cursor Marketplace / 插件一键安装

Cursor 支持通过插件命令一键安装 Figma 官方 MCP：

在 Cursor 的 AI 聊天面板（Cmd+L）中输入：

/add-plugin figma

该插件包含：

Figma MCP Server 配置（自动完成）
Agent Skills（设计实现、Code Connect、Design System Rules）
资产处理规则

这是 Cursor 中最推荐的安装方式。

也可以手动通过 UI 安装：

打开 Cursor → Settings → MCP
点击 "Add MCP Server"
选择 "Figma" 官方插件
Cursor 会自动引导 OAuth 登录流程

6.6 验证连接

配置完成后，在 Cursor 中打开任意项目，按 Cmd+L 调出 AI 聊天面板，输入：

/mcp

查看已加载的 MCP Server 列表，确认 Figma 相关的 MCP Server 状态为 Connected。

也可以在 AI 聊天中直接测试：

请列出你当前可用的 MCP 工具，确认 Figma 相关工具是否正常加载。

7. VS Code 接入 Figma MCP

VS Code 通过 GitHub Copilot 的 MCP 功能支持连接 Figma 官方 MCP Server。需要启用 GitHub Copilot。

7.1 配置方式

使用快捷键 Cmd+Shift+P（macOS）或 Ctrl+Shift+P（Windows）打开命令面板，搜索 MCP: Add Server，选择 HTTP：

粘贴服务器 URL：https://mcp.figma.com/mcp
输入 Server ID：figma
选择作用域：全局（Global）或当前工作区（Workspace）

配置完成后会自动生成以下内容到 mcp.json：

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

VS Code 的 MCP 配置使用 servers 键（而非 mcpServers），注意与 Cursor 格式的差异。

7.2 使用方式

打开聊天工具栏：Cmd+Option+B（macOS）或 Ctrl+Alt+B（Windows）
切换到 Agent 模式
输入 #get_design_context 确认 Figma MCP 工具已加载
粘贴 Figma 链接开始生成代码

7.3 验证连接

#get_design_context

如果工具列表为空，重启 VS Code 重试。

8. 提示词工程：如何生成最接近设计的代码

接入了 Figma MCP 只是第一步。提示词的质量直接决定了生成代码的还原度。 以下是经过实测的最佳实践。

8.1 核心原则：给足上下文

AI 读 Figma 的能力受限于它能接收到的上下文量。好的提示词 = 精确的 URL + 明确的技术栈 + 组件复用指引 + 截图辅助。

8.2 推荐 Prompt 模板

基础版

请根据以下 Figma Frame 的设计生成前端代码：

Figma 链接：https://www.figma.com/file/xxx?node-id=1-234

要求：
- 技术栈：React + TypeScript + Tailwind CSS
- 使用 src/components/ui 中的现有组件
- 保持 Figma 中的颜色变量、间距、圆角
- 输出完整的组件代码，包含必要的 PropTypes/TypeScript 类型定义

完整版（高保真还原）

请分析以下 Figma Frame 并生成高保真前端代码：

📎 Figma 链接：https://www.figma.com/file/abc?node-id=5-678
📎 设计截图：[通过 export_node_as_image 工具附带]

【技术要求】
- 框架：Vue 3 + <script setup> + Tailwind CSS v3
- 组件路径：src/components/dashboard/
- 样式规范：使用 src/styles/tailwind.css 中的 design tokens
- 图标：使用 lucide-vue-next 库，根据 Figma 中的 icon name 匹配
- 响应式：mobile-first，breakpoints 遵循 Figma 中的 frame 尺寸

【还原要求】
1. 严格保持 Auto Layout 的间距和内边距
2. 所有颜色值必须匹配 Figma 中的 Design Token（优先使用 token 引用而非硬编码 hex）
3. 圆角、阴影、字体权重需与 Figma 一致
4. 图片资源使用占位图，注释中标注实际的 image URL
5. 交互状态（hover/active/focus/disabled）参照 Figma variants

【已知组件映射（Code Connect）】
- Button Primary → src/components/ui/ButtonPrimary.tsx
- Card Default → src/components/ui/Card.tsx
- Avatar → src/components/ui/UserAvatar.tsx

请直接输出完整可运行的代码。

8.3 关键技巧拆解

🔑 技巧 1：始终附上 Figma 链接 + 截图

不要只说："帮我做这个页面的代码"

要这样说：
"Figma 链接：https://www.figma.com/file/...?node-id=5-100"

原因：MCP Server 需要通过 URL 中的 node-id 定位具体元素。仅靠自然语言描述，AI 无法知道你指哪个 Frame。

🔑 技巧 2：指明组件复用策略

"使用我项目里的组件：src/components/ui/button.tsx 作为 Button"

这能让 AI 读取你实际的 UI 组件代码，确保生成的代码风格与现有项目一致，避免重复造轮子。这就是 Figma 官方 MCP 的 Code Connect 能力发挥的地方。

🔑 技巧 3：分步骤生成

对于复杂页面，拆分 Frame 逐个生成，而不是让 AI 一次性处理整个页面：

# 第一步：生成 Header 组件
# Paste Figma Header Frame 链接，指定输出 header.vue

# 第二步：生成 Sidebar 组件
# Paste Figma Sidebar Frame 链接

# 第三步：生成 Main Content
# 最后组装

# 第四步：生成 Footer

每次只给一个 Frame，AI 能捕获的细节远多于一锅端。

🔑 技巧 4：利用截图做视觉校准

当布局复杂时，让 MCP Server 先导出截图，再结合截图描述问题：

MCP Server 已经导出了这个 Frame 的 PNG 截图。
对比截图和当前代码，指出所有样式偏差。

🔑 技巧 5：指定 Design Token 的使用方式

"Figma 中使用的设计变量如下，请在代码中使用对应的 CSS Variables：
--color-primary: #3B82F6
--color-surface: #FFFFFF  
--spacing-sm: 8px
--spacing-md: 16px
--radius-md: 8px
"

如果你有 Figma 变量库，可以直接问 MCP：

"列出我 Figma 选择中使用了哪些 Design Token，包括变量名和值"

8.4 后端接口生成

除了前端代码，还可以让 AI 基于 Figma 的数据结构和字段命名生成后端接口：

根据 Figma Frame 中的数据字段，推测需要的前后端 API 接口：
1. 列出所有数据字段及其数据类型
2. 生成 RESTful API 路径设计
3. 输出 OpenAPI/Swagger 规范的 JSON schema
4. 提供 mock 数据示例

9. 实战流程演示

假设你要将一个 Figma Dashboard 页面转为 Vue 3 代码：

Step 1：安装配置

# Claude Code
claude plugin install figma@claude-plugins-official

# Cursor（推荐）
# 在 AI 聊天中输入 /add-plugin figma

# 或在 .cursor/mcp.json / opencode.json 中手动配置 MCP Server

Step 2：打开终端，进入项目目录

cd ~/projects/my-dashboard
claude        # 或 opencode / cursor

Step 3：粘贴 Figma 链接

https://www.figma.com/design/xxx/dashboard?node-id=12-345

Step 4：给出 Prompt

分析这个 Figma Frame，生成 Vue 3 前端代码。
技术栈：Nuxt 3 + Tailwind CSS
组件存放在 components/dashboard/
使用 src/assets/css/design-tokens.css 中的变量

Step 5：迭代优化

对比截图，右侧按钮的 padding 偏大，需要减少到 12px 8px
颜色用了 #1E293B 但 Figma 里应该是 slate-800 (#1E293B)，确认一下
缺少 hover 状态，补上

Step 6：生成后端接口

基于这个页面的数据结构，生成 API 接口设计和 Swagger schema。
字段命名使用驼峰式，返回类型标注清楚 nullable 和非 nullable。

10. 常见问题与避坑

Q1：Starter 用户每月只有 6 次 tool call，怎么办？

A：对于免费用户，figma-developer-mcp（stdio 方式）完全无限制，是最佳替代方案。如果必须用官方 MCP，可以将所有设计查询打包为一个 prompt，减少 tool call 次数。

Q2：Figma 设计稿非常大，context 超长怎么压缩？

A：

使用 get_metadata 先看 XML 概览，判断哪些节点确实需要
用 export_node_as_image 截图代替全量 DOM 结构
优先针对选中的 Frame 查询，不要 query 整个 page

Q3：生成的代码样式偏差大怎么办？

A：这是最常见的问题。根因和对策：

Token 溢出导致细节丢失 → 拆小 Frame，分块生成
未指明组件复用 → 告诉 AI 使用项目中已有的组件
缺少设计系统上下文 → 先让 MCP 获取 Design Token 列表，再注入到后续 prompt
截图 + diff 反馈 → 让 AI 对比截图逐项修正

Q4：OpenCode 是否支持所有 MCP 传输类型？

A： OpenCode（Crush）对 MCP 的支持程度取决于版本。建议优先使用 stdio 方式（兼容性最好），HTTP 方式需确认版本 >= 最新 release 以支持 Streamable HTTP。

Q5：如何处理 Figma 中的动态组件变体？

A：让 MCP Server 导出该组件的所有 variant 信息，并在 prompt 中明确说明：

这个 Button 组件有 4 个 variant（default, primary, danger, disabled）。
请全部生成，每个 variant 一个独立的 .vue 文件。

Q6：MCP Server 连接失败怎么办？

A：

检查网络连通性：curl -v https://mcp.figma.com/mcp
检查 Token 是否过期（个人访问令牌）
Claude Code 内执行 /mcp 查看详细日志
OpenCode 使用 -d 参数开启 debug 模式
Cursor 使用 Settings → MCP 查看各 Server 连接状态
VS Code 重启后重试

Q7：Cursor 中 MCP Server 显示已连接但工具不可用？

A：检查 mcp.json 语法是否正确，env 字段中的 ${env:VAR_NAME} 引用是否存在（大小写敏感）。Cursor 使用 mcpServers 键（注意不是 servers）。尝试重启 Cursor 并确认环境变量在 Cursor 启动前已设置。

Q8：TalkToFigma MCP 提示 WebSocket 连接失败？

A：确保 Figma 桌面插件已安装并处于登录状态。TalkToFigma 需要 Figma 桌面端保持运行且已授权。也可尝试重启 Figma 应用后重新连接。

Q9：VS Code 中 MCP Server 未显示？

A：确保 GitHub Copilot 已启用。VS Code 的 MCP 功能依赖 GitHub Copilot。使用 Cmd+Shift+P → MCP: Add Server 重新配置，然后切换到 Agent 模式。

11. 总结

要点	说明
为什么做	消除设计与开发之间的「翻译损耗」
用什么 MCP	Pro 用户选官方 MCP；免费用户选 figma-developer-mcp（Framelink）
Claude Code 怎么装	一条插件命令 `claude plugin install figma@claude-plugins-official`
OpenCode 怎么装	改 JSON 配置文件 `~/.config/opencode/opencode.json`
Cursor 怎么装	`/add-plugin figma` 一键安装，或手动编辑 `.cursor/mcp.json`
VS Code 怎么装	命令面板 `MCP: Add Server` → HTTP → `https://mcp.figma.com/mcp`
怎么用好	Figma URL + 截图 + 技术栈约束 + 组件复用 + 分块生成
效果上限	配合好的提示词和代码复用策略，单 Frame 可达 90%+ 还原度

附录：参考资料

Figma 官方 MCP 文档：github.com/figma/mcp-s…
Figma Developer API：www.figma.com/developers/…
Figma 官方 MCP 开发者文档：developers.figma.com/docs/figma-…
Claude Code MCP 文档：code.claude.com/docs/en/mcp
Claude Code 插件博客：claude.com/blog/claude…
Cursor MCP 文档：docs.cursor.com/context/mod…
VS Code MCP 文档：code.visualstudio.com/docs/copilo…
Framelink MCP for Figma（原 figma-developer-mcp）：github.com/GLips/Figma…
cursor-talk-to-figma-mcp：github.com/grab/cursor…
Model Context Protocol 官网：modelcontextprotocol.io
Framelink 官方文档：www.framelink.ai/docs/quicks…

本文最后更新：2026-04-28