1. 设计评审为什么总在“看起来差不多”上翻车设计评审最消耗人的环节往往不是设计师改稿而是前端把页面跑出来之后大家发现“设计稿说一套页面又是另一套”。间距差 4px、字号漏了一个状态、组件变量没对上评审会上看着都像小问题落到联调里就是一串返工。我试过把 Figma 链接直接丢给前端同事结果对方打开设计稿手动看尺寸、颜色、圆角、阴影再回代码里一点点调。页面跑起来后再截图丢群里比对。这个流程能用但很累尤其是组件状态多、页面层级深、变量命名复杂的时候前端很容易只拿到“视觉结果”拿不到设计上下文。Figma MCP 解决的就是这层上下文问题。它让支持 MCP 的编辑器或代码工具读取 Figma 里的 frame、layer、变量、组件、布局信息再把这些信息带到实现环节里。这里别误会MCP 不是替你一键交付页面它更像一个懂 Figma 的上下文入口把设计稿里那些原本要人工翻看的信息交给开发工具读取和整理。本文要跑的链路分成四个角色Figma 桌面端打开本地设计上下文服务MCP 客户端VS Code、Cursor、Claude Code读取设计上下文前端本地服务跑出评审页面cpolar 把本地前端页面临时映射成公网地址发给评审同学访问。同时用 TaoToken 统一管理模型调用凭证避免每个工具各配一套 Key。这条链路适合谁适合需要频繁做设计评审、远程联调的前端团队尤其是设计师和前端不在同一地点、需要异步验收的场景。如果你只是自己在办公室局域网里看页面cpolar 这一步可以先不做只要涉及异地评审、远程联调、手机端验收临时公网链接就很省事。先把边界说清楚Figma MCP 的本地地址是http://127.0.0.1:3845/mcp它只在本机使用。远程同事打开的是前端评审页面不是 MCP 服务地址。cpolar 这里只负责暴露前端本地页面或评审入口不暴露 Figma token不暴露 MCP 服务本身也不把内部接口直接丢到公网。2. TaoToken 前置统一 Key 与 API 通道管理在跑 Figma MCP 之前先把模型调用的凭证问题解决掉。因为这条链路里MCP 客户端本身可能不直接调模型但你在编辑器里让 AI 读取设计上下文、生成代码、整理差异时背后是要走模型 API 的。如果每个工具各配一套 Key管理起来很乱换工具就要重新配一遍。TaoToken 在这里的角色是统一 Key 和 API 通道管理。你可以把它理解成一个凭证中转层编辑器、MCP 客户端、脚本工具都指向同一个 Base URL用同一个 Key模型 ID 按需切换。这样做的直接好处是换编辑器不用重新申请 Key团队协作时也不用把多套凭证散落在各人机器上。先拿到 Key。打开 TaoToken 控制台进入 API Keys 页面创建一个新 Key。建议按用途命名比如figma-review-dev方便后面排查是哪个环境在用。创建后把 Key 复制出来只显示一次丢了就重新生成。拿到 Key 之后记下两个地址Base URL 是https://taotoken.net/api模型对话入口在https://taotoken.net/api下的对话页。如果你用的是 Claude Code 这类工具需要的是 Anthropic 兼容通道地址同样走 TaoToken 的 API 入口具体路径在接入文档里有说明。这里要强调一点TaoToken 不是让你绕过什么它是把模型调用的凭证和通道统一起来。你原本怎么调模型现在还是怎么调只是 Base URL 和 Key 换成一个统一入口。对于 Figma MCP 这条链路来说它的价值在于当你在 VS Code、Cursor、Claude Code 之间切换时模型凭证不用跟着换。配置的时候三个要素必须齐全Base URL、Key、Model ID。缺一个都会报错。Base URL 填https://taotoken.net/apiKey 填你刚创建的那串Model ID 按你实际要用的模型填。如果你不确定 Model ID 怎么写先去模型对话页面确认一下可用模型列表再回来填。对于长期做编码和 Agent 任务的团队可以考虑 Coding Plan它更适合高频调用场景。如果只是临时跑一次设计评审链路按量用 API 就行。接入文档里有完整的参数说明和示例遇到 401 或者模型找不到的报错先回去核对这三要素。3. 可复制配置Figma MCP 编辑器 TaoToken这一节把配置片段全部给出来你直接复制改路径就行。先确认 Figma 桌面端已经打开设计文件并且进入了 Dev Mode。Figma desktop MCP server 的启用路径安装并打开 Figma desktop app登录账号打开一个 Figma Design 文件在底部工具栏切到 Dev Mode也可以按 Shift D在 Inspect 面板里的 MCP server 区域点击 Enable desktop MCP server。底部出现 server 已启用并正在运行的提示后再去配置编辑器。这里别急着关 Figmadesktop MCP server 是依托 Figma 桌面端运行的Figma 退出后本地 MCP 地址就读不到设计上下文了。VS Code 走 HTTP MCP 配置。打开命令面板搜索MCP: Add Server类型选 HTTP地址填http://127.0.0.1:3845/mcpServer ID 可以填figma-desktop。配置完成后mcp.json里会出现类似内容{ servers: { figma-desktop: { type: http, url: http://127.0.0.1:3845/mcp } } }做完后切到 Agent 模式在聊天输入框里输入#get_design_context。如果工具列表没有出来先检查 Figma 桌面端是否还开着再重启 VS Code。Cursor 里打开 Settings进入 Cursor Settings找到 MCP 标签添加全局 MCP server填入{ mcpServers: { figma-desktop: { url: http://127.0.0.1:3845/mcp } } }保存后看 MCP 页面里的连接状态。这里最容易填错的是端口必须是 3845路径是/mcp不要写成项目的前端端口。Claude Code 可以直接用官方命令添加 HTTP MCP serverclaude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp claude mcp listclaude mcp list能看到figma-desktop后再回到 Figma 选中目标 frame让客户端读取当前选区或设计链接。如果命令执行后连不上先看三个点Figma desktop app 是否开启、Dev Mode 是否打开、MCP server 是否处于 enabled 状态。接下来是 TaoToken 的配置。如果你在 Claude Code 里用 Anthropic 兼容通道需要配置settings.json或者对应的环境变量。Base URL 填https://taotoken.net/apiKey 填你创建的那串Model ID 按实际模型填。如果你用的是 Codex 类工具auth.json里同样要写全三件套Base URL、Key、Model ID。Cline MCP 场景下也是在 MCP 配置里把模型通道指向 TaoToken 的 API 入口。这里给一个通用的配置对照表方便你核对配置项填写内容说明Base URLhttps://taotoken.net/api统一 API 入口API Key控制台创建的 Key按用途命名Model ID实际使用的模型标识在模型对话页确认Figma MCP URLhttp://127.0.0.1:3845/mcp仅本机使用配置完成后回到编辑器里让 MCP 客户端读取设计上下文。这里可以给客户端一段更具体的提示词别只说“帮我实现这个页面”读取当前 Figma 选中的 frame整理出颜色、字体、间距、圆角、组件层级和交互状态。 只生成前端实现需要的信息不写回 Figma 画布。 基于当前项目的 React TypeScript 结构实现页面并列出需要人工核对的设计差异。这段提示有两个好处一是限定只读设计上下文二是让工具输出可核对项。评审时最有用的不是“代码生成了”而是知道哪些地方已经对齐哪些地方需要人眼复核。4. 验证请求从本地页面到 cpolar 远程联调配置写完接下来验证整条链路能不能跑通。先用 Vite 起一个最小 React 页面已有项目的同学直接进入项目目录执行启动命令就行。新建测试项目npm create vitelatest figma-review-demo -- --template react-ts cd figma-review-demo npm install npm run dev -- --host 0.0.0.0Vite 默认会监听 5173。终端里看到本地地址后在浏览器打开http://127.0.0.1:5173。再用命令确认页面有响应curl -I http://127.0.0.1:5173返回里有HTTP/1.1 200 OK或HTTP/1.1 304 Not Modified说明本地页面已经能访问。这一步不是为了测试而测试而是先把“前端页面能本地访问”确认掉。后面 cpolar 只负责转发如果本地 5173 都打不开公网地址也打不开。本地页面跑起来后再开一个终端启动 cpolar HTTP 隧道。目标端口就是 Vite 的 5173cpolar http 5173命令启动后终端会输出公网访问地址。把https://开头的地址发给评审同学对方就能打开你本机的前端页面。如果你习惯用 Web UI也可以打开 cpolar 本地管理页面http://127.0.0.1:9200在 Web UI 里新建 HTTP 隧道时配置按这个填隧道名称figma-review协议http本地地址5173域名类型随机域名地区按页面可选项填写。创建成功后到“状态 → 在线隧道列表”查看公网地址。这里有个很实用的提醒评审链接只给需要参与的人评审结束就停掉终端里的 cpolar 进程。免费随机公网地址会在 24 小时内变化用它做临时联调入口正好。外网验收的时候把 cpolar 的公网地址发出去之前自己先用手机流量打开一次不要只在本机浏览器里看。验收按这几项走手机关闭 Wi-Fi使用移动网络访问 cpolar 的https://地址页面能正常加载首屏样式和 Figma frame 对得上交互状态能触发比如 hover、弹窗、表单错误提示刷新页面后还能访问控制台没有接口跨域报错。如果手机打不开先不要怀疑 Figma MCP。按链路排查本地http://127.0.0.1:5173是否能打开Vite 是否还在运行cpolar 终端是否还在运行公网地址是否复制完整尤其是https://前缀页面接口是否依赖内网地址。这里的核心验收结果很明确远程同事打开的是前端页面不需要登录你的 Figma也不需要拿到你的 MCP 配置。5. 常见报错排查401、local proxy failed、reading choices、OAuth链路跑起来之后最容易卡在几个固定报错上。这一节按真实报错来对照排查。401 Unauthorized这个报错基本都出在 TaoToken 配置上。先核对三要素Base URL 是不是https://taotoken.net/apiKey 是不是复制完整有没有多余空格Model ID 是不是当前可用的。如果 Key 刚创建确认没有过期或者被禁用。Claude Code 场景下检查settings.json里的环境变量有没有生效Codex 场景下检查auth.json里的字段名有没有写错。401 不是 MCP 的问题是模型通道的凭证问题。local proxy failed这个报错通常出现在 MCP 客户端连接 Figma desktop server 的时候。先确认 Figma 桌面端还开着Dev Mode 还在MCP server 还是 enabled 状态。然后核对地址是不是http://127.0.0.1:3845/mcp端口 3845 和路径/mcp都不能错。如果 Figma 重启过MCP server 需要重新启用。编辑器侧刷新 MCP server 后仍然报错就重启 Figma desktop app 和编辑器。reading choices 相关报错这类报错一般出现在模型返回结果解析阶段。如果你用的是 TaoToken 统一通道先确认 Model ID 和实际调用的模型匹配。有些模型返回格式和客户端预期不一致会报 reading choices 之类的解析错误。解决办法是换一个兼容性更好的 Model ID或者在客户端里调整返回格式配置。如果是在 Claude Code 里出现检查 Anthropic 兼容通道的配置是否正确。OAuth 相关报错如果你在 MCP 客户端里看到 OAuth 报错先确认这个 MCP server 是不是需要 OAuth 认证。Figma desktop MCP server 走的是本地 HTTP不需要 OAuth。如果你接的是其他远程 MCP server才需要处理 OAuth 流程。这里不要混淆本地 3845 端口的 Figma MCP 不需要 OAuth报 OAuth 错误说明你连错了地址或者客户端配置里混入了其他 server 的认证信息。MCP 工具列表为空先检查 Figma desktop app 是否打开再检查是否进入 Dev Mode并确认 MCP server 已经 enabled。编辑器侧刷新 MCP server 后仍然为空就重启 Figma desktop app 和编辑器。3845 端口和/mcp路径要逐字核对。读到的不是目标 frame选区读取时Figma 里必须选中具体 frame 或 layer。多人协作时设计师和前端先约定 frame 名称避免读到外层页面或临时分组。链接读取时复制 frame 或 layer 的链接不要只复制文件首页链接。客户端需要从链接里拿到 node-id。cpolar 公网地址能打开但页面样式不对这类问题通常在前端侧。先看浏览器控制台确认静态资源有没有 404接口有没有跨域错误。如果页面使用了本机绝对地址例如http://127.0.0.1:3000/api远端浏览器访问时会指向对方自己的电脑。评审页面里要使用可访问的测试接口地址或者把数据 mock 到前端。评审时要不要暴露 Figma MCP 服务不要。MCP server 是给本机 MCP 客户端读取设计上下文的不是给评审同学直接访问的网页。远程评审只暴露前端页面。设计上下文读取、代码生成、差异整理都留在开发者本机完成。安全边界再强调一次本地 MCP 地址http://127.0.0.1:3845/mcp只给本机编辑器使用不拿它做公网映射。cpolar 映射的对象只选前端页面端口例如 5173、3000、8080。页面里不要打印 Figma token、MCP 响应原文、内部接口密钥也不要把.env内容输出到浏览器。如果页面要调用后端接口给评审准备一个最小权限的测试环境。评审结束后做三件事停止 cpolar 隧道进程下线临时测试账号或收回访问权限删除页面里用于调试的日志输出。6. 把设计上下文、远程入口和模型凭证各归其位这条链路跑通之后你会发现它真正的价值不在于某个工具多强而在于把三件事分清楚了Figma MCP 管设计上下文cpolar 管临时访问入口TaoToken 管模型调用凭证。各干各的互不越界。关键步骤可以压缩成三件事在 Figma Dev Mode 里启用 desktop MCP server地址固定为http://127.0.0.1:3845/mcp在 VS Code、Cursor 或 Claude Code 里接入这个 HTTP MCP server围绕选区或 frame 链接读取设计上下文前端页面本地跑在 5173 后用cpolar http 5173临时生成公网评审链接。模型调用凭证统一走 TaoTokenBase URL 填https://taotoken.net/apiKey 和 Model ID 按实际配置。如果你在排障阶段卡住了先去 TaoToken 的接入文档核对三要素再去 API Keys 页面确认 Key 状态。如果你要验证模型通道是否正常可以直接在模型对话页面发一条测试消息。如果团队长期做编码和 Agent 任务Coding Plan 更适合高频场景。这套方式的价值不在于炫技而是把“看设计稿、写页面、远程验收”放到一条清晰链路里。评审时就少很多来回截图和口头描述前端也不用在多个工具之间反复切换凭证。链路跑顺了设计评审的焦点才能回到设计本身。