企业官网建设流程全解析

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_source=taotoken_aic_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_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-mcp@latest" ], "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/api，API Key 填 TaoToken 控制台创建的那串。如果你用的是兼容 OpenAI 协议的模型，这样配置后 Cursor 的对话请求就会走 TaoToken。

{ "openai.baseUrl": "https://taotoken.net/api", "openai.apiKey": "你的_TAOTOKEN_API_KEY" }

两套配置的分工要清楚：MCP 负责“取设计数据”，TaoToken 负责“调模型”。它们互不干扰，但缺一不可。只配 MCP 不配模型通道，Cursor 没法推理；只配模型通道不配 MCP，AI 拿不到 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 格式有没有多余逗号。改完配置后一定要重启 Cursor，MCP 服务不会热加载。

第二个问题是模型请求报 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 解析问题或图片下载问题记下来，多数都能通过规则约束和重试解决。