1. 为什么要在 Cursor 里接 Figma MCP 做原型图生成前端和设计协作里最耗时的环节往往不是写代码而是「把设计稿翻译成能跑的东西」。设计给一张 Figma 原型图前端要手动量间距、抄颜色、猜组件层级再一行行搭出页面骨架。一个中等复杂度的页面光还原结构就得小半天。Cursor 集成 Figma MCP 想解决的正是这件事让 AI 直接读取 Figma 文件里的节点树理解框架、组件、文本和布局然后生成可运行的原型代码。Figma MCP 是什么简单说它是一个把 Figma 设计文件暴露成「AI 可读结构」的服务端。MCP 全称 Model Context Protocol是一套让 AI 工具调用外部数据源的协议。Cursor 作为客户端通过 MCP 连上 Figma 服务端后就能拿到设计稿的节点信息而不是靠截图去猜。适合谁用前端工程师、全栈开发者、独立开发者以及需要快速把设计稿变成可交互 Demo 的产品和设计同学。我试过用传统方式让 AI「看图写代码」结果经常是布局错位、颜色偏差、组件识别不准。换成 MCP 读取结构化节点后生成的原型图代码明显更贴近设计意图。这篇就按「配置 MCP 服务端 → Cursor 接入 → Base URL 指向 TaoToken → 用一张原型图验证」的链路把每一步写清楚你照着做就能跑通一次原型图生成。核心检索词先明确Cursor 集成 Figma MCP 实现原型图生成本质是让 Cursor 通过 MCP 协议读取 Figma 设计稿再借助大模型生成可运行的前端原型代码。整条链路里模型调用这一环可以统一走 TaoToken 的 APIBase URL 改一处即可省去多平台 Key 管理的麻烦。2. 前置准备Figma Token、MCP 服务端与 TaoToken 接入动手前先把三样东西备齐Figma 的访问令牌、一个能跑的 MCP 服务端、以及模型调用的入口。前两个是读设计稿的前提第三个决定生成质量。Figma 这边你需要一个 Personal Access Token。进入 Figma 账户设置找到 Personal access tokens生成一个只读权限的 token 即可读设计稿不需要写权限。同时记下目标文件的 fileId它在 Figma 文件链接里形如https://www.figma.com/file/fileId/xxx中间那段就是。再确认你要读取的顶层 Frame 的节点 ID右键图层选 Copy link链接里node-id后面的值就是。MCP 服务端负责把 Figma 的 REST 数据转成 MCP 工具。社区里有现成的 Figma MCP 实现核心逻辑是调用 Figma 的/v1/files/:key和/v1/files/:key/nodes接口把节点树整理成 AI 能理解的 JSON。你可以本地起一个 Node 服务也可以直接用支持 MCP 的托管服务。本地起的好处是可控坏处是要自己维护托管的好处是省事但要注意数据边界。模型调用这一环我建议统一走 TaoToken。原因很直接Cursor 里同时配 Figma MCP 和模型 API 时如果模型入口分散在多个平台Key 管理和额度排查会很乱。TaoToken 提供统一的 API 入口Base URL 指向https://taotoken.net/api模型 ID 按需选Cursor 和 MCP 服务端都能复用同一个 Key。这样你排障时只需要盯一个地方。需要提前拿好的东西清单Figma Personal Access Token、Figma fileId、目标 Frame 的 nodeId、TaoToken 的 API Key。TaoToken 的 Key 在控制台创建地址是https://taotoken.net/console创建后复制保存后面配置里要用。模型 ID 可以先选一个擅长代码生成的比如 Claude 系列或 GPT 系列具体在模型对话页能看到可用列表。注意Figma token 和 TaoToken 的 Key 都不要写进会提交到 Git 的文件里用环境变量或本地.env管理。下面配置片段里我用process.env读取你照着放就行。3. 可复制配置MCP 服务端与 Cursor 的 settings 片段这一节是全文最需要照抄的部分。配置分两块MCP 服务端的启动配置以及 Cursor 里指向该服务端并接入 TaoToken 的设置。路径和字段名我按实际能跑通的写法给你替换成自己的值即可。先看 MCP 服务端的配置。新建一个目录初始化项目后安装依赖然后写一个mcp-server.js。核心是把 Figma 节点读取封装成 MCP 工具同时把模型调用指向 TaoToken。下面这段可以直接复制注意替换FIGMA_TOKEN、FIGMA_FILE_ID和TAOTOKEN_API_KEY// mcp-server.js import { Server } from modelcontextprotocol/sdk/server/index.js; import { StdioServerTransport } from modelcontextprotocol/sdk/server/stdio.js; import axios from axios; const FIGMA_TOKEN process.env.FIGMA_TOKEN; const FIGMA_FILE_ID process.env.FIGMA_FILE_ID; const TAOTOKEN_API_KEY process.env.TAOTOKEN_API_KEY; // 模型调用统一走 TaoTokenBase URL 只在这里写一次 const modelClient axios.create({ baseURL: https://taotoken.net/api, headers: { Authorization: Bearer ${TAOTOKEN_API_KEY}, Content-Type: application/json, }, }); const figmaClient axios.create({ baseURL: https://api.figma.com/v1, headers: { X-Figma-Token: FIGMA_TOKEN }, }); const server new Server( { name: figma-mcp, version: 1.0.0 }, { capabilities: { tools: {} } } ); // 工具一读取指定 Frame 的节点树 server.setRequestHandler(tools/list, async () ({ tools: [ { name: get_figma_frame, description: 读取 Figma 指定 Frame 的节点结构, inputSchema: { type: object, properties: { nodeId: { type: string } }, required: [nodeId], }, }, { name: generate_prototype, description: 根据节点结构生成原型代码, inputSchema: { type: object, properties: { nodeId: { type: string } }, required: [nodeId], }, }, ], })); server.setRequestHandler(tools/call, async (request) { const { name, arguments: args } request.params; if (name get_figma_frame) { const res await figmaClient.get( /files/${FIGMA_FILE_ID}/nodes?ids${args.nodeId} ); return { content: [{ type: text, text: JSON.stringify(res.data) }] }; } if (name generate_prototype) { const nodeRes await figmaClient.get( /files/${FIGMA_FILE_ID}/nodes?ids${args.nodeId} ); const nodeJson JSON.stringify(nodeRes.data).slice(0, 12000); const completion await modelClient.post(/v1/chat/completions, { model: claude-3-5-sonnet, messages: [ { role: system, content: 你是前端专家根据 Figma 节点 JSON 生成可运行的 HTMLTailwind 原型保持布局层级和文本一致。, }, { role: user, content: nodeJson }, ], max_tokens: 4096, temperature: 0.3, }); return { content: [ { type: text, text: completion.data.choices[0].message.content }, ], }; } throw new Error(未知工具: ${name}); }); const transport new StdioServerTransport(); await server.connect(transport);这段代码里有两个关键点。第一modelClient的baseURL写死为https://taotoken.net/api模型调用全部走这里换模型只改model字段。第二Figma 节点 JSON 可能很大我做了slice(0, 12000)截断避免超出上下文。实际用的时候如果节点多可以只取目标 Frame 的子节点。接着是 Cursor 侧的配置。Cursor 的 MCP 配置放在用户目录下的~/.cursor/mcp.jsonWindows 是%USERPROFILE%\.cursor\mcp.json。内容如下把路径换成你本地mcp-server.js的绝对路径{ mcpServers: { figma-mcp: { command: node, args: [/absolute/path/to/mcp-server.js], env: { FIGMA_TOKEN: your_figma_token, FIGMA_FILE_ID: your_file_id, TAOTOKEN_API_KEY: your_taotoken_key } } } }如果你更习惯用 TOML 管理Cursor 也支持在项目里放.cursor/mcp.toml等价写法[mcp_servers.figma-mcp] command node args [/absolute/path/to/mcp-server.js] [mcp_servers.figma-mcp.env] FIGMA_TOKEN your_figma_token FIGMA_FILE_ID your_file_id TAOTOKEN_API_KEY your_taotoken_key配置里三件套必须齐全Base URL在服务端代码里指向 TaoToken、KeyTAOTOKEN_API_KEY、Model IDclaude-3-5-sonnet或你选的模型。这三样缺一个生成环节就会失败。保存后重启 Cursor在设置里能看到figma-mcp处于已连接状态。4. 验证请求用一张 Figma 原型图跑通生成配置完不验证等于没配。这一节用一张真实的 Figma 原型图走一遍从读取到生成的完整流程你能看到每一步的实际返回。先在 Figma 里准备一张简单的原型图。建议包含一个外层 Frame、一个标题文本、两三个卡片组件、一个按钮。层级不要太深方便观察。选中外层 Frame右键 Copy link从链接里取出node-id比如12:345。这个值就是后面要传给 MCP 工具的nodeId。回到 Cursor打开 Chat 面板切到 Agent 模式确认工具列表里能看到get_figma_frame和generate_prototype。先调第一个工具验证读取请调用 get_figma_framenodeId 为 12:345返回节点结构摘要正常情况下Cursor 会返回一段 JSON里面能看到document、children、type、name、characters等字段。如果返回里能看到你设计的文本内容和组件名说明 Figma 读取链路通了。这一步的常见现象是返回内容被截断属于正常因为节点树可能很大。接着调第二个工具生成原型请调用 generate_prototypenodeId 为 12:345生成 HTML 原型这时 MCP 服务端会先读节点再把节点 JSON 发给 TaoToken 的模型接口最后把模型返回的代码作为工具结果返回。你会看到一段完整的 HTML包含 Tailwind 类名、布局结构和文本内容。把这段代码保存为prototype.html浏览器打开就能看到和 Figma 设计稿结构接近的可交互原型。验证成功的标志有三个一是返回的 HTML 里文本和 Figma 里一致二是布局层级外层容器、卡片排列和设计稿对应三是按钮、卡片这些元素有对应的 DOM 结构。如果文本对但布局乱多半是节点 JSON 截断导致模型丢了层级信息可以缩小 Frame 范围重试。实测下来一张包含标题、三张卡片、一个按钮的原型图从调用到生成大约十几秒生成的 HTML 基本能直接跑。模型选代码能力强的布局还原度会更高。这一步跑通后你就有了一个可复用的原型图生成链路换 fileId 和 nodeId 就能处理别的设计稿。5. 常见报错排查401、local proxy failed 与 reading choices配置和验证过程中报错基本集中在几个固定位置。这一节按真实报错对照排查你遇到时直接对号入座。401 Unauthorized。这个最常见出现在两个地方。一是 Figma 侧说明FIGMA_TOKEN无效或过期去 Figma 重新生成 token确认复制时没有多余空格。二是 TaoToken 侧说明TAOTOKEN_API_KEY不对去控制台https://taotoken.net/api-keys重新创建注意 Key 只在创建时显示一次。排查方法单独用 curl 测一下模型接口能返回就说明 Key 没问题。curl https://taotoken.net/api/v1/chat/completions \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -H Content-Type: application/json \ -d {model:claude-3-5-sonnet,messages:[{role:user,content:hi}]}local proxy failed。这个报错通常出现在 Cursor 启动 MCP 服务端时说明 Cursor 没能拉起node进程。检查三处mcp.json里args的路径是不是绝对路径且文件存在本机node是否在 PATH 里用node -v确认env里的变量名和服务端代码里process.env读的是否一致。路径里如果有空格用引号包起来。reading choices。这个报错来自模型返回解析典型原因是completion.data.choices为 undefined。根因一般是 TaoToken 返回了错误结构比如模型 ID 写错、请求体格式不对或者额度不足。先确认model字段是可用模型 ID再确认请求路径是/v1/chat/completions。如果返回体里有error字段按里面的 message 排查。加一行日志打印completion.data能快速定位。OAuth 相关报错。如果你用的是需要 OAuth 的 MCP 托管服务可能出现 token 刷新失败。本地自建服务端不涉及这个问题。若确实遇到检查 OAuth 回调地址和 client 配置或者干脆换成本地 stdio 方式省去 OAuth 环节。组件 ID 无效 / 节点读取为空。Figma 的 nodeId 格式是数字:数字从链接里取的时候注意 URL 编码%3A要还原成:。另外确认 token 对该文件有读权限团队文件可能需要额外授权。排查顺序建议先确认 Figma token 能读到文件再确认 TaoToken Key 能调通模型最后看 MCP 服务端日志。三段各自独立验证比一上来就查整条链路高效得多。Cursor 的 MCP 日志在输出面板里能看服务端的console.error也会打到那里。6. 把链路用起来从单张原型图到日常协作跑通一次之后真正有价值的是把它变成日常流程。我的做法是把 fileId 和常用 nodeId 记在一个本地配置里每次换设计稿只改这两个值。MCP 服务端不用重启Cursor 里重新调用工具即可。这样设计和前端协作时设计稿一更新前端直接让 Cursor 读最新节点生成原型省去手动还原的环节。模型选择上代码生成任务建议用擅长结构化输出的模型。TaoToken 的模型对话页可以对比不同模型对同一段节点 JSON 的生成效果选还原度高的固定下来。生成的原型代码建议再过一遍重点看响应式断点和交互状态AI 生成的布局在窄屏下偶尔会挤手动调一下 Tailwind 的断点类就行。如果你要长期做这类原型生成甚至接进 CI 流程可以考虑 Coding Plan把模型调用额度固定下来避免按次调用时额度波动影响批量任务。入口在https://taotoken.net/coding-plan。日常单次验证用模型对话就够地址是https://taotoken.net/models。接入文档在https://taotoken.net/doc里面有各语言 SDK 的调用示例需要换语言实现 MCP 服务端时可以参考。最后提醒一句MCP 服务端读的是 Figma 的节点数据不要把生产数据库或敏感配置接进 MCP 工具里。原型生成场景只读设计稿权限给到只读就够。把这条链路跑顺设计和前端之间的「翻译」成本能降一大截剩下的时间留给真正的交互逻辑和业务代码。