1. Sunnyside Figma MCP 到底解决什么问题如果你正在用 React Tailwind 或 styled-components 做前端交付大概率遇到过这种场景设计稿在 Figma 里改了一版间距从 16px 变成 20px圆角从 8px 变成 12px你对着 Dev Mode 一个个抄数值抄完还要手动翻译成 Tailwind 的p-5、rounded-xl或者写成 styled-components 的模板字符串。一个页面十几个组件抄到第三个就开始怀疑人生。Sunnyside Figma MCP 就是冲着这个链路来的。它是一个基于 MCPModel Context Protocol协议的设计转代码服务核心能力是把 Figma 里的设计数据——包括像素级 CSS、设计令牌、图层结构——通过 MCP 工具暴露给 AI 编码助手让助手直接生成 React Tailwind、React CSS Modules 或 styled-components 代码。它提供两种数据通道一种是通过 Figma 插件桥接用 Figma 原生的getCSSAsync()提取保真度最高任何 Figma 计划都能用另一种是走 Figma REST API 无头访问适合没有插件交互的自动化场景。适合谁用三类人一是做设计系统落地的前端需要批量提取令牌和组件规范二是用 AI 助手写 React 组件的开发者想让助手直接读设计稿而不是靠截图猜三是团队里负责设计到代码交付链路的工程师想把 Figma 和代码仓库之间的手动翻译环节压缩掉。这篇要解决的核心问题是怎么用 TaoToken 的统一 Key 和 API 通道把 Sunnyside Figma MCP 的settings.json一次配好让 MCP 服务端能正常启动、能拉到 Figma 设计稿、能生成代码。我会给出可复制的配置骨架、连接参数、验证动作以及我踩过的几个坑。2. TaoToken 前置统一 Key 与 API 通道准备在配 MCP 之前先把 TaoToken 这边的通道准备好。Sunnyside Figma MCP 本身需要调用模型能力来生成代码而模型请求走 TaoToken 的统一入口这样你不需要在多个服务商之间来回切换 Key一个 Key 覆盖模型对话、代码生成这些场景。第一步拿到 API Key。打开 TaoToken 控制台的 API Keys 页面https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite创建一个新 Key复制出来。这个 Key 后面会写进 MCP 配置的env里作为模型请求的凭证。第二步确认 API 通道地址。TaoToken 的 API 端点是https://taotoken.net/api这个地址不加 UTM 参数直接作为base_url使用。注意区分官网首页带 UTM 用于跳转统计API 调用地址是干净的。第三步想清楚你的 MCP 传输方式。Sunnyside Figma MCP 支持 stdio、SSE、Streamable HTTP 三种。如果你要用 Figma 插件桥接推荐保真度最高选 SSE因为插件和 MCP 进程需要共享提取缓冲区如果你只是想让助手读设计稿生成代码、不需要插件交互stdio 就够了HTTP 适合你已经有一个常驻服务进程的情况。这里有个容易混淆的点TaoToken 的 Key 是给模型请求用的Figma 的FIGMA_API_KEY是给 Figma REST API 用的两者不是一回事。插件桥接模式下不需要 Figma API Key但如果你要用 REST API 工具比如get_figma_data、download_figma_images就得额外准备 Figma 个人访问令牌。我建议先把插件桥接跑通再按需加 REST API。提示TaoToken 的 Key 建议单独建一个用于 MCP 场景方便后续排查请求来源也避免和其他项目的 Key 混用。3. settings.json 可复制骨架与 MCP 连接参数这一节是核心直接给可复制的配置。不同客户端的settings.json路径不一样但结构大同小异核心是mcpServers这个对象。下面按传输方式分别给骨架。3.1 stdio 模式骨架适合纯代码生成stdio 模式下客户端负责拉起 MCP 进程配置里要写清楚启动命令、参数和env。把TAOTOKEN_API_KEY和FIGMA_API_KEY都放进env前者给模型请求用后者给 REST API 工具用如果不用 REST API 可以留空。{ mcpServers: { sunnyside-figma: { type: stdio, command: node, args: [ /absolute/path/to/sunnysideFigma-Context-MCP/dist/cli.js, --stdio ], env: { TAOTOKEN_API_KEY: sk-your-taotoken-key, TAOTOKEN_BASE_URL: https://taotoken.net/api, FIGMA_API_KEY: figd_your_figma_token, OUTPUT_FORMAT: json } } } }几个参数说明command用node前提是你本地 Node.js 版本 ≥ 18args里的路径必须是绝对路径相对路径在部分客户端里会解析失败TAOTOKEN_BASE_URL固定写https://taotoken.net/api不要带尾部斜杠OUTPUT_FORMAT控制输出格式json适合后续程序处理css适合直接看样式。3.2 SSE 模式骨架推荐用于 Figma 插件桥接SSE 模式下MCP 服务端是一个常驻进程插件通过 HTTP 把提取数据推给它客户端通过 SSE 端点订阅。这种模式插件和 MCP 进程共享提取缓冲区保真度最高。{ mcpServers: { sunnyside-figma: { type: sse, url: http://localhost:3333/sse, env: { TAOTOKEN_API_KEY: sk-your-taotoken-key, TAOTOKEN_BASE_URL: https://taotoken.net/api } } } }注意 SSE 模式下url指向的是/sse端点不是根路径。服务端要先启动再让客户端连。启动命令在项目根目录执行npm start默认监听 3333 端口SSE 端点是/sseStreamable HTTP 端点是/mcp。3.3 Streamable HTTP 模式骨架如果你已经有常驻服务或者想用 HTTP 方式接入配置如下{ mcpServers: { sunnyside-figma: { type: http, url: http://localhost:3333/mcp, env: { TAOTOKEN_API_KEY: sk-your-taotoken-key, TAOTOKEN_BASE_URL: https://taotoken.net/api } } } }HTTP 模式的端点是/mcp和 SSE 的/sse区分开。三种模式不要混用一个服务实例选一种传输方式就行。3.4 环境变量文件 .env除了settings.json项目根目录还需要一个.env文件服务端启动时会读。内容如下TAOTOKEN_API_KEYsk-your-taotoken-key TAOTOKEN_BASE_URLhttps://taotoken.net/api FIGMA_API_KEYfigd_your_figma_token PORT3333 OUTPUT_FORMATjson.env和settings.json里的env有重叠这是故意的settings.json的env是客户端拉起进程时注入的.env是你手动npm start时服务端自己读的。两种启动方式都要能跑通所以两边都写。4. 验证请求与成功结果配置写完不算完得验证。我一般分三步先看服务端启动日志再测 Figma 插件桥接最后让助手实际生成一个组件。4.1 启动日志检查在项目根目录执行npm install npm run build npm start正常启动后终端会输出监听信息类似MCP server running on http://localhost:3333 SSE endpoint: http://localhost:3333/sse Streamable HTTP endpoint: http://localhost:3333/mcp Output format: json如果看到端口被占用改.env里的PORT如果报Cannot find module说明npm run build没跑或者路径不对如果报 Node 版本错误升级到 18 以上。4.2 Figma 插件桥接测试打开 Figma Desktop进入 Plugins → Development → Import plugin from manifest选择项目里的figma-dev-plugin/manifest.json。然后在任意设计文件里选中一个框架运行插件点 Extract Dev Code。如果看到Data sent to MCP server successfully说明桥接通了。这时候服务端日志里应该能看到一条提取记录。如果插件报连接失败先确认服务端在跑、端口是 3333、SSE 端点没写错。插件桥接走的是 SSE不是 HTTPsettings.json里如果配的是http类型就连不上。4.3 生成组件验证桥接成功后在 AI 助手里发一条指令比如「从最新提取生成 React Tailwind 组件」。助手会调用get_tailwind_component工具返回类似这样的代码export default function Card() { return ( div classNameflex flex-col gap-4 rounded-xl bg-white p-5 shadow-sm h2 classNametext-lg font-semibold text-gray-900标题/h2 p classNametext-sm text-gray-500描述文本/p /div ); }看到实际代码返回说明整条链路通了Figma 插件提取 → MCP 服务端接收 → 助手调用工具 → 模型通过 TaoToken 通道生成代码。如果助手返回的是「无法找到工具」或者超时往下看排查部分。5. 本篇常见错排查5.1 助手找不到 MCP 工具最常见的原因是settings.json路径不对或者客户端没重启。改完配置后要完全退出客户端再打开不是关窗口。另外确认args里的cli.js路径是绝对路径Windows 下注意反斜杠转义。5.2 模型请求 401 或 403检查TAOTOKEN_API_KEY有没有写错、有没有多余空格。TAOTOKEN_BASE_URL必须是https://taotoken.net/api不要写成官网首页地址。如果 Key 是在控制台刚建的确认没有复制漏字符。5.3 Figma 插件连不上 SSE先确认服务端在跑curl http://localhost:3333/sse能看到事件流。如果连不上检查防火墙有没有拦 3333 端口。另外 SSE 模式下settings.json的type必须是sse写成http会走错端点。5.4 REST API 工具报权限错误get_figma_data、download_figma_images这些工具走 Figma REST API需要FIGMA_API_KEY而且要求文件在团队/项目下草稿文件不支持。如果你只在草稿里测试用插件桥接工具别用 REST API 工具。5.5 生成的 Tailwind 类名不对检查OUTPUT_FORMAT是不是json有些客户端对非 JSON 输出解析会出问题。另外 Tailwind 版本差异会导致类名不同v3 和 v4 的配置方式不一样确认你项目里的 Tailwind 版本和生成代码匹配。5.6 令牌变更模拟不生效simulate_token_change和apply_token_change是一对模拟完要 review 再 apply。如果模拟没反应确认插件里已经 Scan Entire Project令牌目录是空的模拟就没意义。6. 接入与后续动作配置跑通之后日常使用就是三步Figma 里改设计 → 插件 Extract Dev Code → 助手生成组件。设计系统审计的场景用get_plugin_project_overview加extract_design_tokens加track_design_system_health组合能出一份覆盖率报告。令牌变更前先用simulate_token_change预览影响确认安全再apply_token_change出问题rollback_token_change回滚。如果你还没建 TaoToken 的 Key去控制台建一个https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 有更细的参数说明。想先验证模型通道通不通可以用模型对话页面https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite发一条测试请求。如果你打算长期用 MCP 做编码和 Agent 任务Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite的额度模型更适合这种高频调用场景。最后说个实际经验插件桥接和 REST API 不要同时开容易在提取缓冲区上打架。我现在的做法是默认走插件桥接只有批量导出图片这种无头任务才临时切 REST API切完再切回来。这样配置稳定排查也简单。
