用 GUI IDE 接 Figma MCP（VS Code / Cursor 版）
1. 概念：客户端的 “Figma skill” 是什么
skill（Agent Skill） = Figma 官方写好的”操作手册”包，随 Figma 插件/扩展一起装，教 agent 正确写画布。装 skill 不是单独步骤——插件把 MCP server 配置 + Agent Skills 打包带进来。完整解释见 figma-mcp-cli.md 第 1 节与 ../../ai-agent-guide/skills.md。
2. 适用客户端
以 VS Code（需启用 GitHub Copilot） / Cursor 为例。两者都在 MCP 设置里加 Figma server。
3. 连接 Remote MCP（推荐）
- 打开命令面板：
Cmd/Ctrl + Shift + P - 搜
MCP: Open User Configuration（Cursor 用对应 MCP 设置入口） - 在
mcp.json粘贴（保存即触发授权）：
{
"inputs": [],
"servers": {
"figma": {
"url": "https://mcp.figma.com/mcp",
"type": "http"
}
}
}- 保存后出现 Start 按钮 → 点它走 Figma 账号 OAuth 授权（Allow access）。
- 授权完，Figma MCP 显示 running。
VS Code 官方要求启用 GitHub Copilot 才用 Figma MCP。
4. 连接 Desktop 版（备选）
Figma 桌面端 Dev Mode 开启 MCP、复制 http://127.0.0.1:3845/mcp，然后：
- 命令面板搜
Add server→ 选HTTP→ 粘贴该 URL → server id 填figma→ 确认。
5. 装 Figma 插件/扩展（含 skill）
在客户端插件市场装 Figma 官方扩展（VS Code Marketplace / Cursor 对应入口）。这个扩展把 MCP server 配置 + Agent Skills 一起带进来——装完 skill 就位，agent 写画布更规范。
skill 与 MCP server 打包在一起，不用单独再装。若客户端有 “Skills” 面板，可在其中确认 Figma skill 已启用（Cursor 装 Figma plugin 即包含；VS Code 侧确认 Figma 扩展/Skills 已启用）。
6. 验证
- VS Code：
MCP: Open User Configuration里 figma 显示 running，或状态栏 MCP 图标可见。 - Cursor：Settings → MCP 里 figma 显示 connected / 绿灯。
7. 常见误区
❌ “GUI 里也要跑 npx @figma/mcp-server” → 旧方式已废弃；GUI 用 mcp.json 指向 Remote 地址或装官方扩展即可。
❌ “装了 MCP 没装 skill 也行” → 写画布能调，但装 skill（随扩展）更可靠规范。
❌ “VS Code 不用 Copilot 也能用” → 官方要求启用 GitHub Copilot 才用 Figma MCP。
❌ “mcp.json 里 URL 随便填” → 必须是 https://mcp.figma.com/mcp（Remote）或本地 3845 地址（Desktop）。
8. 延伸阅读
figma-mcp-cli.md— 终端 CLI（Claude Code）版同款配置figma-mcp.md— Figma MCP 能力总览（读/写、原理）../../ai-agent-guide/mcp.md— MCP 协议与发现机制../../ai-agent-guide/skills.md— skill 通用概念