1. 为什么前端团队需要 talk to figma MCP设计稿到代码的链路断点在哪设计稿交付到代码仓库这一步很多前端团队都卡在同一个地方设计师在 Figma 里画好了组件标注了间距、圆角、色值开发同学打开设计稿一边量一边写 CSS遇到改版还要重新对一遍。这个过程里最耗时的不是写代码本身而是「读设计稿」这个动作——把视觉信息翻译成结构化的组件代码。Figma MCPModel Context Protocol解决的就是这个翻译问题。它让 Cursor 这类 AI 编辑器能够直接读取 Figma 文件里的节点树拿到图层名称、位置、尺寸、填充色、字体、圆角这些属性然后由模型生成对应的 React/Vue 组件代码。你不需要手动截图、不需要复制标注直接在 Cursor 对话框里说「把 Frame 里的卡片组件生成代码」它就能拉取节点数据并输出可运行的 JSX。这套链路适合谁我观察下来有三类人收益最明显。第一类是独立开发者或小团队没有专门的设计系统设计稿和代码之间靠人肉对齐MCP 能省掉大量重复劳动。第二类是中大型前端团队里负责组件库的同学需要把 Figma 里的设计规范批量转成代码组件。第三类是做外包或接私活的人客户给 Figma 链接你要快速出可交互的页面原型MCP 能把这个周期从半天压缩到几十分钟。但这里有个前提Figma MCP 不是「一键生成整个项目」的魔法。它擅长的是把单个 Frame 或 Component 转成结构清晰的组件代码复杂交互逻辑、状态管理、路由这些还是得你自己写。把它理解成一个「设计稿读取器 代码草稿生成器」更准确。我实测下来整条链路的关键节点有三个Figma 侧的插件要能读到当前打开的页面节点MCP 服务要能把节点数据传给 CursorCursor 侧的模型要能理解节点结构并生成代码。这三个环节任何一个断了你看到的报错都不一样。下面我会按「环境准备 → 配置 → 验证 → 排障」的顺序把每个环节的可复制操作写清楚。在开始之前你需要准备的东西一个 Figma 账号免费版够用、Cursor 编辑器、Node.js 环境建议 18、以及一个能访问 npm 的网络环境。Figma API Key 的获取方式我会在配置章节里写不需要提前准备。另外说明一点Figma MCP 的社区实现有好几个版本我用的这个是基于cursor-talk-to-figma-mcp这个开源项目的方案它的特点是走 WebSocket 通道Figma 插件和本地 MCP 服务之间通过 channel 通信。这个方案在 Windows 和 macOS 上都能跑但 Windows 环境下有几个坑我会单独标出来。2. TaoToken 前置准备给 Cursor 配一个稳定的模型入口Cursor 本身支持自定义模型接入但如果你直接用官方默认的模型通道在频繁调用 MCP 工具、读取 Figma 节点数据这种场景下响应速度和稳定性会有波动。我的做法是给 Cursor 配一个独立的模型入口把 MCP 相关的对话流量走这个通道这样即使默认通道拥堵设计稿转代码的流程也不会被卡住。TaoToken 在这里的角色是提供一个兼容 OpenAI 接口规范的模型调用入口。你不需要改 Cursor 的底层逻辑只需要在 Cursor 的设置里把 Base URL 和 API Key 填进去然后在模型列表里选一个适合代码生成的模型 ID。对于 Figma MCP 这种需要理解节点树、生成结构化代码的场景我建议选 Claude 系列的模型它在长上下文和代码结构理解上表现更稳。具体操作路径打开 TaoToken 官网注册后在控制台创建一个 API Key。这个 Key 的格式是sk-开头的一串字符复制下来备用。然后在 Cursor 里按CtrlShiftPWindows或CmdShiftPmacOS打开命令面板输入Cursor Settings找到Models选项卡在OpenAI API Key区域填入你的 Key在Override OpenAI Base URL区域填入https://taotoken.net/api。注意这里不要加 UTM 参数直接填 API 地址就行。填完之后在模型列表里添加一个自定义模型Model ID 填claude-sonnet-4-20250514或你账号里可用的 Claude 模型 ID。保存后Cursor 的对话就会走这个通道。这里有个细节Cursor 的 MCP 工具调用和普通对话是共用模型配置的。也就是说当你在 Cursor 里让模型去调用 Figma MCP 读取节点时这个请求也会走你配置的 Base URL。所以如果你发现 MCP 调用超时先检查一下模型通道是否正常。你可以先在 Cursor 对话框里发一句「你好」确认模型能正常回复再继续后面的 MCP 配置。如果你还没有 API Key可以先去控制台创建一个。创建时注意权限范围MCP 场景只需要基础的模型调用权限不需要开额外的管理权限。Key 创建后只显示一次记得保存到安全的地方。对于长期做设计稿转代码的团队我建议单独建一个 Key 专门给 Cursor 用这样在控制台里能看到这个 Key 的调用量和消耗情况方便做成本核算。如果只是个人试用用默认 Key 就行。3. 可复制配置Figma MCP 服务与 Cursor 的完整接入片段这一章是整篇的核心我会把 Figma MCP 服务的配置、Cursor 侧的 MCP 声明、以及 Figma 插件的加载步骤全部写成可复制的片段。你按顺序操作每一步都有对应的文件路径和内容。3.1 克隆项目与安装 bun 运行时首先把 MCP 服务端的代码拉到本地。打开终端Windows 用 PowerShell 或 Git Bash执行git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git cd cursor-talk-to-figma-mcp如果你没有 git 环境也可以直接在 GitHub 页面点Code→Download ZIP解压后用 Cursor 打开这个文件夹。这个项目依赖bun作为运行时。在项目根目录执行npm install -g bun安装完成后验证一下bun -v能打印出版本号比如1.1.x就说明安装成功。Windows 环境下如果提示bun不是内部命令检查一下 npm 全局 bin 目录是否在 PATH 里。通常 npm 全局安装的包会在C:\Users\你的用户名\AppData\Roaming\npm下把这个路径加到系统环境变量 PATH 里重启终端即可。3.2 创建 Cursor MCP 配置文件在项目根目录新建文件夹.cursor在里面新建文件mcp.json。文件内容如下{ mcpServers: { TalkToFigma: { command: npx, args: [ cursor-talk-to-figma-mcplatest, --figma-api-key你的FigmaToken ] } } }把你的FigmaToken替换成真实的 Figma API Token。获取方式登录 Figma 网页版点击右上角头像 →Settings→Security→Generate new token。创建时勾选File content和File metadata读取权限即可不需要写权限。生成的 Token 是一串figd_开头的字符复制后填入上面的--figma-api-key后面。注意这个mcp.json文件的位置很关键。它必须放在你当前用 Cursor 打开的项目根目录下的.cursor文件夹里。如果你打开的是cursor-talk-to-figma-mcp这个项目本身那就放在这个项目的.cursor/mcp.json。如果你是在自己的业务项目里用 MCP那就在业务项目根目录建.cursor/mcp.json但command和args保持不变因为 MCP 服务是全局安装的。3.3 启动 WebSocket 服务Figma 插件和 MCP 服务之间通过 WebSocket 通信。在项目根目录执行bun socket看到类似WebSocket server running on port 3055的输出就说明启动成功。这个终端窗口不要关闭它需要一直运行着。如果你关掉它Figma 插件和 Cursor 之间的通道就断了。Windows 环境下如果提示端口被占用可以换一个端口。在bun socket命令后面加--port 3056同时要确保 Figma 插件里配置的端口一致。不过默认的 3055 一般不会冲突除非你本地有其他服务占用了。3.4 在 Cursor 中启用 MCP Server回到 Cursor打开设置CtrlShiftP→Cursor Settings找到MCP选项卡。你应该能看到TalkToFigma这个 server 已经出现在列表里因为 Cursor 会自动读取项目根目录的.cursor/mcp.json。如果没看到点击Add new MCP server手动填入Name:TalkToFigmaType:commandCommand:npx cursor-talk-to-figma-mcplatest --figma-api-key你的FigmaToken保存后MCP server 的状态应该变成绿色圆点。如果显示红色或黄色点击刷新按钮或者检查bun socket是否还在运行。3.5 加载 Figma 插件打开 Figma 桌面端网页版也可以但桌面端更稳定进入你要读取的设计稿页面。点击顶部菜单Actions→Plugins widgets→Import from manifest。在弹出的文件选择框里找到你克隆下来的项目目录进入src/cursor_mcp_plugin/选择manifest.json文件。加载成功后在 Figma 的插件列表里就能看到Cursor MCP Plugin。点击运行这个插件会弹出一个窗口里面显示一个channel值比如5westeyy。这个 channel 值每次启动都会变复制它。注意这个弹窗不能关闭关闭就会断联。你可以把它拖到屏幕角落但保持打开状态。3.6 Cursor 侧发起对话在 Cursor 里打开 Chat 面板CtrlL或CmdL确保模式是Agent模式模型选 Claude 4 系列。输入talktofigma channel:5westeyy把5westeyy替换成你刚才复制的 channel 值。发送后如果配置正确Cursor 会返回连接成功的提示。这时候你就可以让模型去读取 Figma 节点了比如读取当前选中的 Frame生成 React 组件代码模型会通过 MCP 调用 Figma 插件拉取节点数据然后输出组件代码。4. 验证请求一次端到端的设计稿转代码实测配置完成后怎么确认整条链路真的通了我建议用一个最小化的设计稿做验证不要一上来就拿复杂页面测试否则报错了你分不清是配置问题还是节点结构问题。4.1 准备一个测试 Frame在 Figma 里新建一个页面画一个简单的卡片组件一个矩形作为背景里面放一个文本图层写「Hello」再加一个圆形作为头像占位。给这个 Frame 命名为TestCard。选中这个 Frame保持选中状态。4.2 在 Cursor 里发起读取请求在 Cursor Chat 面板Agent 模式输入talktofigma channel:你的channel值 读取当前选中的 Frame输出它的节点结构如果连接正常模型会返回类似这样的节点数据{ name: TestCard, type: FRAME, children: [ { name: Background, type: RECTANGLE, fills: [{type: SOLID, color: {r: 1, g: 1, b: 1}}] }, { name: Avatar, type: ELLIPSE, absoluteBoundingBox: {width: 40, height: 40} }, { name: Label, type: TEXT, characters: Hello } ] }看到这个结构说明 Figma 插件成功读取了节点MCP 服务成功传输了数据Cursor 成功解析了内容。三个环节都通了。4.3 生成组件代码接着输入根据上面的节点结构生成一个 React 函数组件使用 Tailwind CSS 做样式模型会输出类似这样的代码export default function TestCard() { return ( div classNamebg-white rounded-lg p-4 flex items-center gap-3 shadow-sm div classNamew-10 h-10 rounded-full bg-gray-200 / span classNametext-sm text-gray-800Hello/span /div ); }把这段代码复制到你的项目里运行npm run dev在浏览器里看到渲染结果。如果样式和设计稿基本一致说明整条链路验证通过。4.4 验证成功的关键指标我总结下来一次成功的端到端验证要满足三个条件第一Cursor 返回的节点数据里包含你在 Figma 里设置的图层名称和属性值第二生成的代码里能看到对应的结构比如flex、rounded、gap这些样式第三代码在本地运行后视觉上和设计稿没有明显偏差。如果只满足前两条第三条不满足通常是模型对 Tailwind 类名的映射不准确你可以手动调整或者在 prompt 里指定具体的样式规范。如果第一条就不满足说明 MCP 链路有问题往下看排障章节。5. 常见报错排查401、local proxy failed、reading choices 怎么解这一章我按真实遇到的报错来写每个报错给出原因和解决步骤。你对照自己的终端输出和 Cursor 提示来定位。5.1 Figma API 返回 401 Unauthorized报错原文通常是Error: Request failed with status code 401原因Figma API Token 无效或权限不足。检查三个地方第一mcp.json里的--figma-api-key后面的值是否完整复制有没有多余空格第二Token 是否过期Figma 的 Token 默认长期有效但如果你手动 revoke 过就需要重新生成第三Token 的权限是否勾选了File content读取权限只勾File metadata是不够的。解决重新生成一个 Token确保勾选File content和File metadata替换mcp.json里的值重启bun socket和 Cursor。5.2 local proxy failed 或 connection refused报错原文local proxy failed: connect ECONNREFUSED 127.0.0.1:3055原因WebSocket 服务没有启动或者端口不对。bun socket命令必须在项目根目录运行而且终端窗口不能关闭。如果你换了端口Figma 插件里的端口配置也要同步改。解决重新执行bun socket确认输出里有WebSocket server running on port 3055。然后在 Figma 插件弹窗里检查 channel 值是否和 Cursor 里输入的一致。channel 值每次重启都会变所以每次都要重新复制。5.3 reading choices 报错报错原文Cannot read properties of undefined (reading choices)原因这个报错通常出现在模型通道返回异常时。Cursor 在调用 MCP 工具后会把结果传给模型做二次处理如果模型通道返回的格式不符合 OpenAI 规范就会报这个错。常见于 Base URL 配置错误或 API Key 无效。解决检查 Cursor 设置里的Override OpenAI Base URL是否填的是https://taotoken.net/api注意不要有多余的斜杠或路径。API Key 是否以sk-开头且没有过期。你可以先在 Cursor 里发一句普通对话确认模型通道正常再试 MCP 调用。5.4 OAuth 相关报错报错原文OAuth token exchange failed原因这个报错一般和 Figma 账号的登录状态有关。如果你在 Figma 网页版和桌面端之间切换或者 Token 是在另一个账号下生成的就会出现 OAuth 校验失败。解决确保 Figma 桌面端登录的账号和生成 Token 的账号是同一个。如果用的是团队账号确认 Token 有权限访问目标文件。重新登录 Figma 桌面端重新生成 Token替换配置。5.5 节点读取为空现象Cursor 返回的节点数据是空数组或者提示No nodes found。原因Figma 插件没有选中任何 Frame或者选中的是 Group 而不是 Frame。MCP 插件只能读取 Frame 或 Component 节点Group 需要先转成 Frame。解决在 Figma 里选中一个 Frame图层面板里图标是井号#的那个确保它处于选中状态再在 Cursor 里发起读取请求。5.6 配置三件套检查清单如果你用的是 Cline MCP 或 Codex 的auth.json方案配置逻辑类似但文件路径不同。Cline 的 MCP 配置在settings.json里Codex 的在auth.json里。不管哪种方案核心三件套是Base URLhttps://taotoken.net/api、API Keysk-开头、Model IDClaude 系列。这三个值填错任何一个都会导致 MCP 调用失败。对于 Claude Code 用户如果你想把 Figma MCP 接入 Claude Code 的终端环境需要在~/.claude/settings.json里配置 MCP serverBase URL 和 Key 的填法和 Cursor 一致。配置完成后在 Claude Code 里用/mcp命令查看 server 状态。6. 把设计交付落到代码仓库的长期用法配置跑通只是第一步真正让这套链路产生价值的是把它变成团队日常流程的一部分。我自己的做法是在业务项目根目录维护一个.cursor/mcp.json把 Figma Token 放在环境变量里而不是硬编码在文件中这样团队成员拉取代码后只需要设置自己的 Token 就能用。具体操作在mcp.json里把--figma-api-key后面的值改成${env:FIGMA_API_KEY}然后在系统环境变量里设置FIGMA_API_KEY。这样 Token 不会进 git 仓库避免泄露。对于组件库场景你可以让模型在生成代码时遵循团队的命名规范。在 prompt 里加一句「组件名用 PascalCase样式用 Tailwind导出用 default export」模型输出的代码就能直接进代码仓库减少二次修改。如果你需要频繁做设计稿转代码可以考虑把常用的 prompt 存成 Cursor 的 snippet或者写一个简单的 shell 脚本一键启动bun socket并打开 Cursor。这样每次开始工作只需要跑一个命令。对于需要长期跑 Agent 任务的团队比如批量把 Figma 页面转成代码可以考虑用 Coding Plan 来管理模型调用配额避免按次计费带来的成本波动。具体可以在控制台里查看套餐详情。最后提醒一点Figma MCP 读取的是设计稿的静态结构它不会理解交互逻辑和业务规则。生成的代码是起点不是终点。把它当成一个「高级代码补全」来用你的预期就不会跑偏。