1. 从 Figma 节点到 Flutter Widget链路到底卡在哪如果你已经在做 Flutter 项目并且想让 AI 直接按 Figma 设计稿生成 UI 代码大概率会遇到三个卡点设计稿数据太杂、模型拿不到稳定的图片资源、以及每次生成都要重新贴一遍 API Key。我试过把 Figma 链接直接丢给 Cursor结果它要么把整页 JSON 塞进上下文导致响应变慢要么生成的 Widget 里图片路径全是占位符根本跑不起来。这篇是「AI 生成 Flutter UI 代码实践」的第二篇聚焦一件事在 Cursor 里通过 MCP 接入 Figma 设计稿同时把模型调用统一收敛到 TaoToken 的 Key/API 通道最后完成一次从 Figma 节点到可运行 Flutter Widget 的验证。适合已经有 Flutter 工程、想让 AI 按设计稿产出规范代码的开发者。整套流程跑通后你只需要在 Cursor 里选中 Figma 节点AI 就能读取简化后的设计数据、下载切图、按项目规则生成 Widget并且所有模型请求都走同一个 Key。先说结论MCP 负责把 Figma 的原始数据“翻译”成模型能理解的精简结构TaoToken 负责把模型调用统一成一个入口。两者配合Cursor 里的对话才能真正落到“生成可运行代码”这件事上而不是停留在“看起来像那么回事”。2. TaoToken 前置统一 Key 与 API 通道在配置 MCP 之前先把模型调用通道准备好。TaoToken 的作用是让你用一个 Key 访问多个模型Cursor 里不需要为每个模型单独配环境变量。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aic_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。操作路径很直接进入控制台创建 API Key然后在 Cursor 的模型配置里把 Base URL 指向 TaoToken 的 API 地址Key 填刚创建的那串。这样 Cursor 在调用模型时请求会先到 TaoToken再由它路由到具体模型。对于本篇场景你只需要保证 Cursor 能正常发起对话请求即可MCP 部分不直接依赖 Key但生成代码时的模型推理走的是这条通道。如果你后续要做长期编码或 Agent 任务可以在 Coding Plan 页面查看适合持续调用的方案如果只是想先验证模型对话是否通模型对话入口可以直接测试。接入文档里有各客户端的 Base URL 填写示例照着改就行。注意API Key 不要写进项目仓库建议放在 Cursor 的用户级配置或系统环境变量里。团队协作时每人用自己的 Key避免额度混用。3. 可复制配置Cursor MCP Figma TaoToken这一节给出可直接复制的配置骨架。Cursor 的 MCP 配置一般放在用户目录下的.cursor/mcp.json如果你用的是项目级配置也可以放在项目根目录的.cursor/下。下面是一个 Figma MCP 的配置示例重点是command、args和env三块。{ mcpServers: { figma-context: { command: npx, args: [ -y, figma-context-mcplatest ], env: { FIGMA_API_KEY: 你的_FIGMA_PERSONAL_ACCESS_TOKEN } } } }Figma 的 Personal Access Token 在 Figma 账号设置里生成权限至少要有读取文件和导出图片的权限。配置完成后重启 Cursor在 MCP 面板里应该能看到figma-context处于可用状态。接下来是 TaoToken 在 Cursor 里的模型配置。打开 Cursor 设置里的 Models 页面把 OpenAI Base URL 改成https://taotoken.net/apiAPI Key 填 TaoToken 控制台创建的那串。如果你用的是兼容 OpenAI 协议的模型这样配置后 Cursor 的对话请求就会走 TaoToken。{ openai.baseUrl: https://taotoken.net/api, openai.apiKey: 你的_TAOTOKEN_API_KEY }两套配置的分工要清楚MCP 负责“取设计数据”TaoToken 负责“调模型”。它们互不干扰但缺一不可。只配 MCP 不配模型通道Cursor 没法推理只配模型通道不配 MCPAI 拿不到 Figma 的结构化数据。3.1 项目规则文件让生成结果可复用MCP 给的是数据生成成什么样还得靠规则约束。在项目根目录建.cursor/rules/flutter-ui.mdc把目录规范、命名约定、颜色和文字样式引用方式写进去。下面是一段可直接用的规则骨架--- description: Flutter UI 生成规则 globs: lib/**/*.dart alwaysApply: true --- - 页面放在 lib/screen/ 下按功能分组 - 可复用组件放在 lib/widget/ - 颜色统一引用 Colours 类中的常量如 Colours.white - 文字样式统一引用 TextStyles 类中的常量如 TextStyles.textBold14 - 图片引用使用 Assets 类中的常量 - 文件命名使用 snake_case类命名使用 PascalCase - 新增图片或路由后执行 flutter packages pub run build_runner build --delete-conflicting-outputs把规则文件设置成 Always 生效这样每次对话都会带上这些约束。实测下来加了规则之后 AI 生成的代码会主动去Colours和TextStyles里找常量而不是每次硬编码颜色值。4. 验证请求从 Figma 节点到 Flutter Widget配置完成后做一次完整验证。打开 Figma 文件选中一个具体的节点比如一个卡片组件复制它的 node-id。然后在 Cursor 对话里输入类似这样的请求请读取 Figma 文件 fileKey 为 xxxxx 的节点 12:345 按照项目规则生成对应的 Flutter Widget 图片节点按 icon_ 和 image_ 前缀下载到 assets/images/ 下。Cursor 会先通过 MCP 调用 Figma API拿到简化后的节点数据。这里的关键是简化层原始 JSON 可能有 200 多 KB简化后通常只剩十几 KB模型能更快抓住布局、颜色、文字样式这些核心信息。如果节点里有icon_或image_命名的子节点MCP 会把这些节点标记为图片类型并触发下载流程。下载完成后你会在assets/images/下看到对应的 PNG 文件。接着 AI 会按规则生成 Widget把图片引用写成Assets.images.iconBack.image()这种形式。生成结果里背景色、圆角、阴影、字号、字重这些属性应该都能对上设计稿。如果第一次生成有偏差直接在对话里指出具体问题比如“间距不对卡片内边距应该是 16”AI 会基于已有上下文修改不需要重新贴设计稿。验证成功的标志有三个Widget 能直接放进项目跑起来、图片路径真实存在、颜色和文字样式引用的是项目里的常量而不是硬编码。三个都满足说明 MCP 到 TaoToken 这条链路已经通了。5. 本篇常见错排查第一个高频问题是 MCP 面板里 Figma 服务显示红色。多数情况是FIGMA_API_KEY没填对或者 Token 权限不够。检查 Token 是否勾选了文件读取权限以及mcp.json里的 JSON 格式有没有多余逗号。改完配置后一定要重启 CursorMCP 服务不会热加载。第二个问题是模型请求报 401 或 404。这通常是 TaoToken 的 Base URL 或 Key 填错。Base URL 应该是https://taotoken.net/api不要多加/v1或结尾斜杠。Key 复制时注意不要带空格。如果用的是兼容 OpenAI 的客户端确认模型名称填的是 TaoToken 支持的模型标识。第三个问题是图片下载失败或路径不对。MCP 下载图片时需要模型给出节点 ID 和目标路径部分模型在这块不稳定可能给相对路径或带转义的 Windows 路径。解决办法是在规则文件里明确写死资源目录比如“所有图片下载到项目根目录下的 assets/images/”减少模型自由发挥的空间。第四个问题是生成的代码没有复用项目常量。检查.cursor/rules/下的规则文件是否设置成 Always以及globs是否覆盖了目标文件。如果规则没生效AI 会按自己的习惯生成颜色和文字样式就容易散落在各个文件里。第五个问题是build_runner执行后报冲突。这是生成代码和已有文件冲突导致的加上--delete-conflicting-outputs参数即可。建议把这条命令写进规则文件让 AI 在新增资源后自动执行。6. 把 Key 和设计稿都收进一条链路整套流程跑下来最省心的地方在于Figma 数据由 MCP 自动简化模型调用由 TaoToken 统一接管你只需要在 Cursor 里描述需求。对于长期做 Flutter 项目的团队建议把 API Key 管理放在 TaoToken 控制台接入文档里有各客户端的配置示例照着改 Base URL 就行。如果只是先验证模型能不能按设计稿生成代码模型对话入口可以直接试要做持续编码或 Agent 任务Coding Plan 更适合长期调用。后面如果 MCP 的简化策略或 Cursor 的规则机制有更新我会继续同步。有在跑这条链路的可以把遇到的节点 ID 解析问题或图片下载问题记下来多数都能通过规则约束和重试解决。