用这个MCP，只给大模型一个figma链接就能直接导出图片，还能自动压缩上传？TaoToken 配置骨架与验证动作

1. 从 Figma 链接到可分发图片一个被低估的自动化缺口设计稿转图片这件事看起来简单做起来琐碎。产品经理在 Figma 里画好图标丢过来一个链接说「这几个图标导一下」你打开 Figma、选中图层、右键导出、选格式、调倍率、下载、压缩、传到 CDN、再把链接贴回代码——一套动作下来十几分钟没了。如果一次要处理二十个图标或者设计稿改了三版这个流程就会变成纯粹的体力消耗。MCPModel Context Protocol出现之后这件事有了新的解法。Figma Structured MCP 这个工具做的事情很直接你只给它一个 Figma 链接它自动完成导出、压缩、上传最后返回结构化的图片 URL 列表。大模型拿到这些 URL可以直接写进你的项目代码里。整个过程不需要你手动点任何一次导出按钮。这篇文章面向的是需要把设计稿快速转成可分发图片资源的开发者。我会给出 TaoToken 统一 Key/API 通道下的完整配置骨架包括config.toml和settings.json的可复制内容然后一步步演示从 Figma 链接输入到图片导出、压缩、上传的验证动作。每一步都可以复现出问题也能定位到具体环节。适合谁看正在用 Cursor、Claude Code 或其他支持 MCP 的客户端做开发手头有 Figma 设计稿需要频繁导出图片资源并且希望把「导出-压缩-上传」这条链路交给大模型自动完成的人。如果你只是偶尔导出一两张图手动操作可能更快但如果你每天都要处理设计稿资源这套流程值得花二十分钟搭起来。2. TaoToken 前置统一 Key 与 API 通道的配置骨架在配置 Figma Structured MCP 之前先把 TaoToken 的通道准备好。TaoToken 在这里的角色是统一的大模型 API 入口MCP 工具本身负责 Figma 交互但大模型调用需要走一个稳定的 API 通道。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 端点是 https://taotoken.net/api 。你需要先拿到 API Key。进入控制台创建密钥https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 在 API Keys 页面生成一个新的 Keyhttps://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。这个 Key 后面会写进 MCP 的配置里用于大模型调用。TaoToken 的接入文档在这里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有不同客户端的配置示例。如果你用的是 Claude Code可以参考 ClaudeCodeAnthropic 的接入方式https://taotoken.net/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentClaudeCodeAnthropicutm_campaignrewrite 。下面给出两个配置文件的骨架。第一个是config.toml用于定义 MCP 服务端的基本参数和 TaoToken 通道# config.toml - Figma Structured MCP 服务端配置 [mcp] name figma-structured version 0.1.0 mode stdio # 可选 stdio / http / sse [taotoken] api_base https://taotoken.net/api api_key sk-your-taotoken-key-here model claude-sonnet-4-20250514 # 按需替换 [figma] access_token your_figma_token_here export_format png export_scale 2.0 compression_quality 0.85 export_children true [storage] provider custom upload_url https://your-upload-server.com upload_key your_upload_key_here第二个是settings.json用于客户端以 Cursor 为例的 MCP 服务器注册{ mcpServers: { figma-structured: { command: uv, args: [ run, python, run.py, --mode, stdio ], env: { PATH: /path/to/figma-structured-mcp/.venv/bin:$PATH, PYTHONPATH: /path/to/figma-structured-mcp, FIGMA_ACCESS_TOKEN: your_figma_token_here, TAOTOKEN_API_KEY: sk-your-taotoken-key-here, TAOTOKEN_API_BASE: https://taotoken.net/api, STORAGE_PROVIDER: custom, CUSTOM_UPLOAD_URL: https://your-upload-server.com, CUSTOM_UPLOAD_KEY: your_upload_key_here } } } }注意FIGMA_ACCESS_TOKEN需要在 Figma 账户设置里生成路径是 Settings → Security → Personal access tokens。这个 token 只用于读取文件节点不要给写权限。配置里的export_children参数控制导出行为。设为true时指定节点下的所有直接子节点会作为独立图片导出适合图标集、素材组这类场景设为false时整个节点作为一张图导出适合 banner、卡片这类整体元素。3. 可复制配置从 Figma 链接提取参数并接入 MCP配置骨架有了接下来把 Figma 链接里的参数提取出来填进实际调用里。Figma 链接的格式通常是这样的https://www.figma.com/design/d5VnH9TP69zb3EyDejwv/My-Design?node-id1349-2219从中提取两个关键参数file_key是design/之后、/之前的部分即d5VnH9TP69zb3EyDejwvnode_ids是?node-id之后的部分即1349-2219。如果链接里有多个节点用逗号分隔。把这两个参数传给get_figma_images工具同时指定导出格式、缩放比例和压缩质量。下面是一个完整的调用示例你可以直接在支持 MCP 的客户端里让大模型执行{ tool: get_figma_images, arguments: { file_key: d5VnH9TP69zb3EyDejwv, node_ids: 1349-2219, format: png, scale: 2.0, compression_quality: 0.85, export_children: true } }参数说明用表格对照更清楚参数类型默认值说明file_keystr必填Figma 文件唯一标识从链接design/或file/后提取node_idsstr必填节点 ID多个用逗号分隔从?node-id后提取formatstrpng支持 jpg / png / svg / pdfscalefloat1.0缩放比例范围 0.01–4compression_qualityfloat0.85压缩质量仅 jpg/png 有效范围 0.0–1.0export_childrenbooltruetrue 导出子节点false 导出节点本身如果你用的是 HTTP 模式而不是 STDIO需要先启动服务# 启动 HTTP 模式端口 8070 uv run python run.py --mode http --port 8070 # 服务地址为 http://127.0.0.1:8070/mcp然后在客户端配置里把command换成url{ mcpServers: { figma-structured-mcp: { url: http://127.0.0.1:8070/mcp } } }SSE 模式的启动方式类似把--mode换成sse端口换成 8080客户端 URL 对应改成http://127.0.0.1:8080/sse。提示STDIO 模式适合本地开发客户端会自动拉起进程HTTP/SSE 模式适合服务端部署多个客户端可以共享同一个 MCP 服务。4. 验证请求从链接输入到图片 URL 返回的完整动作配置写好了现在跑一次完整验证。打开你的 MCP 客户端以 Cursor 为例在对话里输入这样一段话帮我从这个 Figma 链接导出图片并上传 https://www.figma.com/design/d5VnH9TP69zb3EyDejwv/My-Design?node-id1349-2219 导出格式用 png缩放 2 倍压缩质量 0.85导出所有子节点。大模型会解析链接提取file_key和node_ids然后调用get_figma_images工具。如果一切正常你会看到类似这样的返回{ successful_uploads: [ { name: icon-home.png, url: https://cdn.example.com/icon-home.png }, { name: icon-search.png, url: https://cdn.example.com/icon-search.png }, { name: icon-user.png, url: https://cdn.example.com/icon-user.png } ], failed_uploads: [] }拿到这些 URL 之后你可以直接让大模型把它们写进项目代码。比如把上面返回的图片 URL 写进 src/assets/icons.ts 导出一个对象key 用文件名去掉扩展名。大模型会生成类似这样的代码// src/assets/icons.ts export const icons { home: https://cdn.example.com/icon-home.png, search: https://cdn.example.com/icon-search.png, user: https://cdn.example.com/icon-user.png, } as const;整个链路走通了Figma 链接 → 参数提取 → 图片导出 → 压缩 → 上传 → URL 返回 → 写入代码。你只提供了一个链接和一句指令中间没有任何手动操作。如果返回的failed_uploads里有内容说明某些节点导出或上传失败了。错误信息会写在error字段里常见原因包括节点 ID 不存在、Figma token 权限不足、上传服务器返回 4xx 等。下一节会逐个排查。5. 本篇常见错排查导出失败、压缩异常、上传 4xx 的定位方法5.1 Figma token 无效或权限不足报错信息通常是403 Forbidden或Invalid token。检查.env文件里的FIGMA_ACCESS_TOKEN是否填写正确以及这个 token 是否有读取目标文件的权限。Figma 的 personal access token 默认有读取权限但如果文件在团队空间里且你的账号没有访问权限也会返回 403。确认你的 Figma 账号能正常打开这个文件。5.2 node_ids 格式错误Figma 链接里的node-id是1349-2219这种带连字符的格式但 Figma API 实际接受的 node ID 是1349:2219这种带冒号的格式。MCP 工具内部会做转换但如果你手动传参时写错了会报Node not found。检查你传入的node_ids是否和链接里的一致。5.3 压缩后图片模糊或体积反而变大compression_quality设得太低比如 0.3会导致图片明显模糊设得太高比如 1.0则压缩效果有限。实测下来PNG 格式在 0.8–0.9 之间比较平衡JPG 格式在 0.75–0.85 之间。另外如果原图是 SVG 矢量图压缩参数不生效因为 SVG 本身是文本格式压缩算法不同。5.4 上传返回 4xxfailed_uploads里的error字段会写明原因。常见的有401 UnauthorizedCUSTOM_UPLOAD_KEY不对检查上传服务器的鉴权配置。413 Payload Too Large图片体积超过上传服务器限制调低scale或compression_quality。404 Not FoundCUSTOM_UPLOAD_URL路径写错了确认上传接口的完整地址。5.5 MCP 服务启动失败如果客户端里看不到figma-structured这个 MCP 服务器先检查settings.json里的command和args路径是否正确。STDIO 模式下command建议用uv而不是python因为uv会自动处理虚拟环境。如果报ModuleNotFoundError在项目根目录执行uv sync --all-extras重新安装依赖。# 检查依赖是否完整 uv sync --all-extras # 手动测试 STDIO 模式是否能启动 uv run python run.py --mode stdio如果手动启动成功但客户端里不显示重启客户端或者检查客户端的 MCP 日志Cursor 在 Output 面板里选 MCP 可以看到详细日志。6. 把这条链路接进你的日常开发流Figma Structured MCP 的价值不在于单次导出而在于把「设计稿 → 图片资源 → 代码引用」这条链路自动化。你可以把它接进 CI 流程设计稿更新后触发一次 MCP 调用自动导出所有图标并上传然后生成一个 PR 更新代码里的 URL 引用。也可以在日常开发中让大模型直接处理设计稿链接你只需要在对话里说「把这个链接里的图标导出来放进项目」。如果你还没有配置 TaoToken 的 API Key可以从控制台创建一个https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。接入文档里有不同客户端的详细配置示例https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。如果你主要用 Claude Code 做开发可以参考 ClaudeCodeAnthropic 的接入方式https://taotoken.net/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentClaudeCodeAnthropicutm_campaignrewrite 。长期做编码和 Agent 开发的话Coding Plan 可能更适合你https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。如果只是想先验证模型对话效果可以从模型对话入口开始https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。最后留一个实用技巧把常用的 Figma 文件 key 和节点 ID 记在一个figma-assets.json里每次导出时让大模型读这个文件而不是每次从链接里手动提取。这样批量处理多个设计稿时效率会高很多。