
1. Cursor 里让 AI 读懂 Figma 设计稿到底卡在哪如果你做前端大概率遇到过这种场景设计同学在 Figma 里画好一版页面甩给你一个链接然后你对着截图一行行还原间距、色值、圆角。更麻烦的是当你把 Figma 链接丢给 Cursor 里的 AI它要么读不到内容要么只能靠你口述「左边那个卡片大概 16px 内边距」。问题不在于模型不够聪明而在于 Cursor 默认拿不到 Figma 的设计数据。Figma MCPModel Context Protocol就是来解决这件事的。MCP 是一套让 AI 工具连接外部数据源的协议你可以把它理解成给 Cursor 装了一个「插件接口」通过它 Cursor 能直接调用 Figma 的 API把设计稿的图层结构、文本内容、颜色变量、布局参数读成结构化数据。这样你在 Cursor 里说「按这个 Figma 稿生成 React 组件」AI 拿到的是真实的节点信息而不是猜的。这套配置适合谁主要是三类人一是前端工程师需要把设计稿快速转成代码二是独立开发者自己兼设计想让 AI 帮忙还原视觉三是设计协作场景里需要频繁对齐设计规范的团队。核心检索词就是 Cursor、Figma、MCP、配置、JSON本文会把从 JSON 配置到设计稿读取验证的完整路径讲清楚。需要提前说明的是Figma MCP 本身只是一个「读取通道」它负责把设计数据喂给 Cursor 里的模型。而模型调用这一层你可以选择直连各家官方也可以走统一通道复用同一个 Key。后面我会给出把 endpoint 改到 TaoToken 统一通道的具体做法这样你在 Cursor 里配置一次模型和 MCP 都能用同一套凭证管理省得每个工具单独维护 Key。在动手之前先确认三件事第一你的 Cursor 版本要支持 MCP目前较新的版本都在设置里有 MCP 入口第二你需要一个 Figma 的 Personal Access Token也就是那串figd_开头的密钥第三本机要有 Node.js 环境因为 Figma MCP 服务是通过npx拉起的。这三点齐了后面的配置就是复制粘贴的事。我见过很多人卡在第一步不是配置写错而是根本没意识到 MCP 服务是一个「本地进程」Cursor 启动时会去执行你写的 command。所以 JSON 里的 command、args 必须是你系统里真实能跑通的命令。Windows 和 macOS 在这块差异明显下面会分开说。2. TaoToken 前置准备一把 Key 打通模型与 MCP 通道在写 MCP 配置之前先把「模型调用」这一层的前置准备好否则你 MCP 配通了Cursor 里的 AI 却因为额度或鉴权问题用不了排查起来会互相干扰。这里我建议用 TaoToken 统一通道来管理模型调用原因是它把多家模型的接入收敛成一个 Base URL 加一把 Key你在 Cursor、Cline、Codex 这些工具里可以复用同一套凭证不用每个工具单独去官网申请。先说清楚 TaoToken 是什么它是一个模型调用的统一接入层提供兼容 OpenAI 风格的 API 端点。你能用它调用对话模型、代码模型也能配合 Coding Plan 做长期编码任务。对本文场景来说它的价值在于——当你在 Cursor 里既要用 MCP 读 Figma又要让模型生成代码时模型这一侧的 Base URL 和 Key 只需要配一次。前置准备分三步。第一步拿到 API Key。访问 API Keys 管理页https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite登录后创建一个新的 Key复制保存。这个 Key 后面会同时用在 Cursor 的模型配置里。注意 Key 只在创建时完整显示一次丢了就重新建一个。第二步确认 Base URL。TaoToken 的 API 端点是https://taotoken.net/api注意这里不加任何查询参数就是干净的 API 根路径。你在 Cursor 的模型设置里填 Base URL 时用这个OpenAI 兼容模式下它会自动拼接/v1/chat/completions这类路径。第三步选一个 Model ID。如果你主要做前端代码生成可以选代码能力强的模型如果还要兼顾设计稿理解后的文案处理选通用对话模型也行。Model ID 的完整列表在接入文档里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite里面有各模型的标识符和适用场景说明。记下你要用的那个 ID比如常见的对话模型标识。这里有个容易混淆的点MCP 的 Figma 服务和模型调用是两条独立的链路。Figma MCP 用的是 Figma 自己的figd_Token走的是 Figma API而模型调用用的是 TaoToken 的 Key走的是taotoken.net/api。两者不要搞混也不要把 Figma Token 填到模型配置里。我在排障章节会专门讲这个错误。如果你打算长期在 Cursor 里做 Agent 式编码可以了解一下 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite它针对持续性的编码会话做了额度优化比按次调用更适合「让 AI 反复读设计稿、改组件」这种高频场景。前置准备好之后下面进入真正的 MCP JSON 配置。3. 可复制的 Figma MCP JSON 配置Windows / macOS这一节是全文的核心操作。Cursor 的 MCP 配置本质是一个 JSON 文件里面声明了要启动哪些 MCP 服务、用什么命令启动、传什么参数。Figma 官方生态里有一个社区维护的figma-developer-mcp包通过npx就能拉起不需要你手动 clone 仓库。先看 Windows 的配置。Windows 下npx不能直接作为 command必须通过cmd /c包一层这是很多人第一次配置失败的原因。完整片段如下{ mcpServers: { Framelink Figma MCP: { command: cmd, args: [ /c, npx, -y, figma-developer-mcp, --figma-api-keyfigd_你的FigmaToken, --stdio ] } } }macOS 和 Linux 下不需要cmd /c直接调用npx即可{ mcpServers: { Framelink Figma MCP: { command: npx, args: [ -y, figma-developer-mcp, --figma-api-keyfigd_你的FigmaToken, --stdio ] } } }几个参数逐个解释。command是要执行的程序Windows 用cmdmacOS 用npx。args是参数数组/c告诉 cmd 执行后面的命令-y让 npx 自动确认安装figma-developer-mcp是包名--figma-api-key后面接你的 Figma Token--stdio表示用标准输入输出通信这是 MCP 的传输方式。关于 Figma Token 的获取登录 Figma 后进入 Settings找到 Personal Access Tokens创建一个新的 Token权限至少要有读取文件内容的权限。创建后复制那串figd_开头的字符串替换上面配置里的占位符。注意 Token 是敏感信息不要提交到 Git 仓库也不要在公开场合贴出来。配置文件的路径Cursor 里通常在用户目录下的.cursor文件夹具体入口在 Cursor 设置的 MCP 面板里点击「Add new MCP server」或直接编辑配置文件。如果你用的是较新版本设置里会有明确的 MCP 配置区域把上面的 JSON 粘进去保存即可。现在说怎么把模型 endpoint 改到 TaoToken 统一通道。MCP 配置本身不涉及模型 endpoint模型配置在 Cursor 的 Models 设置里。你需要把 OpenAI 兼容的 Base URL 填成https://taotoken.net/apiAPI Key 填你在 TaoToken 创建的 KeyModel ID 填你选定的模型标识。这样 Cursor 里的 AI 请求就走 TaoToken 通道而 Figma MCP 依然走 Figma 官方 API两条链路各司其职。如果你用的是 Cline 或 Codex 这类工具配置逻辑类似都是 Base URL Key Model ID 三件套。Codex 的auth.json里也是填这三项Cline 的 MCP 设置里同样。记住这个三件套结构换工具时迁移成本很低。配置保存后Cursor 会尝试启动这个 MCP 服务。如果启动成功MCP 面板里会显示绿色的运行状态如果失败通常是命令路径问题或 Token 无效。下一节讲怎么验证。4. 验证请求用一次设计稿读取确认连通配置写完不代表能用必须做一次真实的读取验证。这一步的目的是确认三件事MCP 服务进程起来了、Figma Token 有权限、Cursor 能把设计数据传给模型。验证方法很简单。先在 Figma 里打开任意一个设计稿复制它的文件链接。链接格式通常是https://www.figma.com/file/xxxxx/名称或者新版是https://www.figma.com/design/xxxxx/名称。复制整个 URL。然后回到 Cursor打开一个对话窗口输入类似这样的请求「读取这个 Figma 设计稿 https://www.figma.com/design/xxxxx/名称告诉我里面有哪些主要图层和文本内容」。发送后观察 Cursor 的行为。如果连通正常你会看到 Cursor 调用 MCP 工具的过程界面上会显示它正在执行figma-developer-mcp相关的工具调用然后返回设计稿的节点信息比如图层名称、文本内容、颜色值等。这就说明整条链路通了。如果 MCP 服务没起来Cursor 会提示找不到工具或者工具调用直接失败。这时候先去看 MCP 面板的状态确认服务是否在运行。如果显示红色或错误点开看具体报错。再进一步你可以让它做更具体的任务比如「把这个设计稿里的按钮组件转成 Tailwind CSS 代码」。这时候模型会先通过 MCP 读取按钮节点的样式数据再生成代码。如果生成的代码里色值、圆角、间距和设计稿一致说明数据读取是准确的。这里有个细节值得注意Figma MCP 返回的是结构化节点数据不是图片。所以模型拿到的是「这个矩形宽 120 高 40填充色 #3B82F6圆角 8」这样的信息而不是一张截图。这也是它比截图识别更可靠的原因。验证通过后你可以把这个流程固化成习惯每次拿到新设计稿先在 Cursor 里让 AI 读一遍确认能读到再开始生成代码。这样避免中途发现读不到又回头排查配置。如果你在验证时发现模型侧报错比如 401 或额度问题那大概率是 TaoToken 的 Key 或 Base URL 配错了和 MCP 无关。分开排查能省很多时间。5. 常见报错排查401、local proxy failed、reading choices配置过程中有几类报错特别高频我按真实遇到的顺序列出来对照着排查。第一类是401 Unauthorized。这个报错可能来自两个地方。如果出现在 MCP 工具调用时说明 Figma Token 无效或权限不足。检查你的figd_Token 是否复制完整有没有多余空格以及创建时是否勾选了文件读取权限。如果出现在模型对话时说明 TaoToken 的 Key 有问题检查 Key 是否填对、是否过期、Base URL 是否是https://taotoken.net/api。第二类是local proxy failed或类似的本地代理失败提示。这通常不是网络代理问题而是 MCP 服务进程启动失败。常见原因是npx找不到或者 Node.js 没装。在终端里手动跑一遍npx -y figma-developer-mcp --help看能不能正常输出帮助信息。如果终端里都跑不通Cursor 里更跑不通。Windows 用户特别注意cmd /c有没有漏掉。第三类是reading choices相关的报错比如Cannot read properties of undefined (reading choices)。这个报错一般出现在模型响应解析阶段说明返回的数据结构不符合预期。常见原因是 Base URL 填错了比如多加了/v1或者少了路径导致请求打到了错误的端点。确认 Base URL 就是https://taotoken.net/api不要自己拼路径。另一个可能是 Model ID 填了一个不存在的模型检查接入文档里的标识符。第四类是 OAuth 相关报错。如果你在配置过程中看到 OAuth 字样通常是因为某些 MCP 服务需要走 OAuth 授权流程但 Figma 这个figma-developer-mcp用的是 API Key 模式不需要 OAuth。如果你误配了需要 OAuth 的服务检查 JSON 里的包名是不是写成了别的。确保是figma-developer-mcp。第五类是 MCP 服务显示运行但工具调用无响应。这种情况多半是--stdio参数没加或者加了别的传输参数导致通信方式不匹配。确认 args 里最后是--stdio。排查时有个通用方法把 MCP 配置里的命令复制到终端手动执行看输出。终端能跑通Cursor 里基本也能跑通终端报错就按终端报错去解决。这样能把「Cursor 配置问题」和「命令本身问题」分开。另外提醒一点Figma Token 和 TaoToken Key 是两套独立凭证不要交叉填写。我见过有人把 Figma Token 填到模型配置里然后一直报 401排查半天才发现是填错了地方。6. 把通道固定下来一次配置长期复用配置跑通之后建议把整套设置固定成你的标准工作流。具体做法是MCP 配置里的 Figma Token 用一个专门创建的 Token不要和别的用途混用模型侧统一走 TaoToken 通道Base URL 固定为https://taotoken.net/apiKey 存在安全的地方。这样做的收益是以后你换 Cursor 版本、换机器、或者同时用 Cline、Codex 等工具时只需要迁移这一套配置。三件套 Base URL、Key、Model ID 在哪都是这三项MCP 那边就是那段 JSON。迁移成本极低。如果你想让 AI 直接对话验证模型通道是否正常可以用模型对话页面https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite发一条测试消息确认 Key 和通道没问题再回到 Cursor 里配 MCP。这样分层验证出问题时定位更快。长期做编码和 Agent 任务的话Coding Plan 那套额度模型更适合高频读取设计稿、反复改组件的场景。你可以先按本文的配置跑通再根据实际调用量决定要不要切过去。最后留一个实用技巧把 Figma 设计稿的读取请求写成一段固定 prompt存在 Cursor 的常用指令里。比如「读取以下 Figma 链接的节点结构输出图层树和样式变量然后按 React Tailwind 生成组件」。每次新稿子来了改一下链接就能复用比每次重新描述需求快得多。这套流程跑顺之后设计稿到代码的链路基本就自动化了。