在 Cursor 中搭建 MCP 服务，把 Figma 设计稿转成可运行代码的完整配置

1. 为什么要在 Cursor 里搭一个 Figma MCP 服务先说清楚这件事到底解决什么问题。Figma 设计稿转代码不是新话题早几年就有 D2C 插件原理是用固定规则解析 Figma 的节点数据再套模板生成代码。这类方案准确率不低但灵活性差你想让它生成 Vue 它只会 React你想用 Tailwind 它给你写死 CSS类名还是.frame-1234这种没法维护的东西。MCP 是 Model Context Protocol 的缩写你可以把它理解成给大模型装的一个「工具插座」。大模型本身不能访问你的 Figma 文件但你可以写一个本地服务注册几个工具方法比如「读取 Figma 节点」「下载 Figma 图片」然后在 Cursor 的 Composer Agent 模式里把 Figma 链接贴进去模型会自己判断该调用哪个工具、传什么参数拿到节点数据后转成 UI 代码。Figma-Context-MCP 这个库就是干这个的当前版本注册了两个工具get_figma_data和download_figma_images。前者拉取文件节点树并精简样式信息后者把设计稿里的图标、图片下载到本地。相比纯规则方案AI 方案的优势是你可以用 prompt 约束输出格式——React、Vue、HTML 都行Tailwind、CSS Module 也行生成的类名还有语义。适合谁前端开发者、独立开发者、需要频繁把设计稿落地成页面的同学。如果你已经在用 Cursor这套流程大概十分钟能跑通。下面我从服务端配置讲到 Cursor 侧连接再到一次完整的 Figma 转代码验证最后把 endpoint 改到 TaoToken 统一 Key 通道方便你集中管理模型调用。2. 前置准备Figma Token、Node 环境与 TaoToken Key 通道2.1 克隆 Figma-Context-MCP 并装依赖先把服务端代码拉下来。这个库是 Node 项目需要 Node 18 以上。git clone https://github.com/GLips/Figma-Context-MCP.git cd Figma-Context-MCP npm i装完依赖后先别急着启动还差一个 Figma Token。2.2 创建 Figma Personal Access Token打开 Figma进入账号设置找到 Security 标签页往下拉到 Personal access tokens点生成。权限至少给到 File content 的只读因为工具要调用 Figma API 读取节点数据。生成后复制这串 token它只显示一次。在项目根目录建一个.env文件写入FIGMA_API_KEY你的_figma_token注意不要把这个文件提交到 git.env里是明文密钥。2.3 为什么要把 endpoint 改到 TaoTokenFigma-Context-MCP 本身只负责读 Figma 数据它不调用大模型。真正调用大模型的是 Cursor 的 Agent。但如果你后续想在这个链路里接入自己的模型通道或者想让 Cursor 走统一的 Key 管理就需要一个兼容 OpenAI 协议的 endpoint。TaoToken 提供的就是这样一个统一 Key 通道Base URL 是https://taotoken.net/api兼容 OpenAI 的/v1/chat/completions格式。你可以在 TaoToken 控制台创建一个 API Key然后在 Cursor 的模型配置里把 Base URL 指过去。这样做的实际好处是Figma 转代码这类任务往往要跑很多次统一通道方便看用量、换模型、做成本控制。先去 TaoToken 控制台拿 Keyhttps://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentconsole创建后复制 Key形如sk-xxxx。这个 Key 后面在 Cursor 的模型设置里会用到。如果你还没决定用哪个模型可以先在模型对话页面试一下https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentmodel_chat2.4 启动 MCP 服务回到项目目录启动开发模式npm run dev默认会监听一个本地端口通常是 3000 或库内配置的端口终端会打印出 SSE 服务地址类似http://localhost:3000/sse。这个地址就是待会要填进 Cursor 的 server url。保持这个终端不要关MCP 服务需要一直运行。3. 可复制配置MCP 服务端片段与 Cursor 连接参数3.1 服务端工具注册片段Figma-Context-MCP 内部依赖modelcontextprotocol/sdk这个库来注册工具。核心逻辑长这样你可以对照理解它到底暴露了什么import { McpServer } from modelcontextprotocol/sdk/server/mcp.js; import { z } from zod; const server new McpServer({ name: figma-context-mcp, version: 0.1.0, }); server.tool( get_figma_data, 获取 Figma 文件节点数据, { fileKey: z.string(), nodeId: z.string().optional(), depth: z.number().optional(), }, async ({ fileKey, nodeId, depth }) { // 调用 Figma API精简节点样式后返回 const data await fetchFigmaNodes(fileKey, nodeId, depth); return { content: [{ type: text, text: JSON.stringify(data) }] }; } ); server.tool( download_figma_images, 下载 Figma 图片到本地, { fileKey: z.string(), nodeId: z.string(), localPath: z.string(), }, async ({ fileKey, nodeId, localPath }) { // 下载图片并写入 localPath return { content: [{ type: text, text: downloaded }] }; } );fileKey和nodeId都来自你复制的 Figma 链接。链接形如https://www.figma.com/file/ABC123/xxx?node-id12-345其中ABC123是 fileKey12-345是 nodeId。工具入参定义和 Function Calling 是一个思路模型根据对话内容决定传什么。3.2 Cursor 侧 MCP 连接配置打开 Cursor 设置找到 MCP Servers点添加。填写字段值Namefigma-context自定义TypesseServer URLhttp://localhost:3000/sse保存后 Cursor 会去连这个 SSE 地址连上后你能在 MCP 面板看到两个工具get_figma_data和download_figma_images。如果只看到一个或者显示红色说明服务没起来或者端口不对回到终端确认npm run dev还在跑。3.3 把模型 endpoint 指向 TaoTokenCursor 的模型设置里如果你要用自定义通道填三件套{ baseUrl: https://taotoken.net/api, apiKey: sk-你的_taotoken_key, modelId: 你选择的模型ID }Base URL 用https://taotoken.net/api不要加 UTM 参数那是给网页链接用的。API Key 从控制台拿Model ID 填你在 TaoToken 支持的模型名。这样 Cursor 的 Agent 调用模型时就走统一通道了。如果你更习惯用配置文件的方式管理Cursor 的 settings 里也可以直接写 JSON。路径和字段名以你当前 Cursor 版本为准核心就是 baseUrl、apiKey、model 三项对齐。4. 验证请求一次完整的 Figma 转代码动作4.1 复制 Figma 图层链接在 Figma 里选中你要转的图层右键选 Copy link to selection。这个链接里带了 node-id是工具定位节点的关键。4.2 在 Composer Agent 模式发起请求打开 Cursor 的 Composer切到 Agent 模式把 Figma 链接贴进去加上约束 prompt。比如请帮我用这个 figma 链接获取 figma ui 元素并从元素数据转成代码。要求 1. 转成 React 代码 2. 使用 tailwind css 3. 如果有图标则下载到 src/assets 文件夹下使用 import Icon from /assets/icon.svg 路径引用 4. 对于表格相关组件 Form Input Select Checkbox Switch Button使用 antd 组件发送后Cursor 会弹出工具调用确认先执行get_figma_data拉节点数据。如果设计稿里有头像、图标会再弹一次download_figma_images继续执行。两次工具跑完模型拿到精简后的节点树开始生成代码。4.3 看工具返回数据确认节点名这一步很关键。在工具返回的节点数据里你能看到每个图层的name字段。如果你在 Figma 里把某个图层命名为Antd Input返回数据里 name 就是Antd Input模型据此推断该用 antd 的 Input 组件而不是用 div 加样式模拟。实测下来对于 Table 这种复杂组件在 UI 最外层图层标记成Antd Table模型就不会把整个表格样式写出来而是引用 antd 的 Table 组件并配上 dataSource 和 columns 数据。这比纯 D2C 插件智能的地方在于它能理解「这个视觉元素对应哪个组件库的组件」。4.4 检查生成结果生成完成后看代码。渐变色处理偶尔会有偏差这是 AI 方案的常见问题因为节点数据里的渐变信息被精简过。但类名有语义、组件引用正确这两点是规则方案做不到的。如果发现某个元素该用组件库却生成了 div回到 Figma 把图层名改清楚重新跑一遍流程即可。5. 本篇常见错排查401、local proxy failed 与 OAuth 报错5.1 Figma API 返回 401报错长这样Error: Request failed with status code 401 {status:401,err:Invalid token}原因基本是.env里的FIGMA_API_KEY不对或者没加载。检查三点token 有没有复制完整、.env文件在项目根目录、改完.env后有没有重启npm run dev。环境变量是启动时读的不重启不生效。5.2 Cursor 显示 local proxy failedMCP error: local proxy failed to connect这个通常是 MCP 服务没起来或者端口被占。先在浏览器或 curl 访问http://localhost:3000/sse看有没有响应。如果没有回终端看npm run dev的日志。如果端口冲突改库里的端口配置再重启同时更新 Cursor 里的 Server URL。5.3 模型返回 reading choices 相关错误TypeError: Cannot read properties of undefined (reading choices)这是模型通道返回格式不对。如果你把 endpoint 指到了 TaoToken确认 Base URL 是https://taotoken.net/api且路径拼接正确一般是/v1/chat/completions。如果用的是自定义模型 ID确认这个 ID 在 TaoToken 支持列表里。Key 无效也会导致返回体里没有 choices 字段。5.4 OAuth 相关报错OAuth token exchange failed如果你在 Cursor 里同时配了官方登录和自定义 Key可能会冲突。检查是不是有多个认证来源。用 TaoToken 统一 Key 通道时确保 Cursor 的模型认证走的是 API Key 而不是 OAuth 流程。清理掉旧的登录态再试。5.5 工具调用不弹确认有时候贴了链接但模型不调用工具直接开始瞎写代码。这通常是 prompt 里没明确要求「获取 figma 元素」。把上面那段约束 prompt 完整贴上明确说「用这个 figma 链接获取 figma ui 元素」模型才会触发工具调用。6. 把链路固定下来Key 管理、文档与长期编码跑通一次之后建议把几个东西固定下来避免每次重新配。第一Figma Token 和 TaoToken Key 分开管理。Figma Token 放项目.envTaoToken Key 放 Cursor 的模型配置或系统环境变量不要混在一个文件里。第二prompt 模板存成 snippetCursor 支持自定义指令把那段 antd 约束存进去下次直接调用。如果你要长期做 Figma 转代码这类任务可以考虑 Coding Plan统一管理模型调用和用量https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentcoding_planAPI Key 管理入口在这里方便你创建和轮换 Keyhttps://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentapi_keys接入文档在这里里面有 Base URL、鉴权方式和各语言示例https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentdoc如果你用 Claude Code 做类似的事情Anthropic 兼容通道的配置在这里https://taotoken.net/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentclaudecode最后说个实际踩过的坑MCP 服务跑在本地Cursor 每次重启后如果服务没起来工具会显示不可用。建议把npm run dev放到一个常驻终端或者用 pm2 之类的进程管理工具托管。另外 Figma 节点数据量大的时候get_figma_data返回会很长模型上下文可能吃紧这时候在 prompt 里限制 depth 参数只拉需要的层级能明显减少 token 消耗。