项目笔记｜用 TRAE 实现离谱游戏需求的开发实录：从 Figma 到 H5 的 AI Agent 工作流

1. 从 Figma 到 H5一个离谱游戏需求是怎么被 TRAE 拆开的先把这个需求说清楚把「合成大西瓜」和「Flappy Bird」缝在一起前 300 分玩合成到分后转场变成一只开飞机的西瓜进入横版飞行躲避。听起来像段子但它其实是一个非常适合拿来练 AI Agent 工作流的项目——因为它同时踩中了三个难点状态机切换、两套物理逻辑、以及从设计稿到可运行 H5 的还原度验证。我这次用的工具链是 TRAE 作为主 IDEAI Agent 负责代码生成与重构MCP 负责把 Figma 设计稿的图层信息喂给 Agent最后产出纯 H5 可玩 Demo。整条链路里真正决定成败的不是「让 AI 写多少代码」而是你有没有把需求拆成 Agent 能消化的粒度以及有没有一个稳定的 MCP 配置骨架让设计稿信息可被结构化读取。这篇文章会交付三样东西一份可复制的 MCP 配置骨架、一套 Agent 提示词模板、以及在 TRAE 内验证需求还原度的具体操作步骤。适合已经会用 TRAE 基础对话、但还没把 MCP 和 Agent 串成完整工作流的开发者。如果你只是想让 AI 帮你写个贪吃蛇这篇可能有点重但如果你想做的是「多关卡、跨玩法、带设计稿还原」的项目下面的流程可以直接抄。2. TaoToken 前置给 Agent 一个稳定的模型入口在讲 MCP 配置之前得先解决一个容易被忽略的问题Agent 工作流里模型调用是高频的尤其是 Figma 解析阶段一次设计稿可能触发十几轮对话。如果模型入口不稳定整个链路会断在「等响应」上。我自己的做法是把模型调用统一走 TaoToken 的 API 入口这样在 TRAE 的 Agent 配置里只需要维护一个 base_url 和 key不用在多个供应商之间来回切。TaoToken 在这里的角色是「模型网关」——它不替代 TRAE也不替代你的编辑器只是让 Agent 背后的模型调用有一个统一出口。具体来说你需要先拿到 API Key。进入控制台后创建 key然后把它填到 TRAE 的模型配置里。如果你用的是 Claude 系列的模型来做代码生成TaoToken 的 ClaudeCodeAnthropic 接入方式可以直接对接配置项和官方 Anthropic 格式一致改 base_url 即可。这里有个细节Agent 工作流里我建议把「设计稿解析」和「代码生成」分成两个模型配置。解析阶段用理解能力强的模型生成阶段用代码能力强的模型。TaoToken 的好处是这两类模型可以在同一个 key 下切换不用重新申请。注意API Key 不要写进前端代码或提交到仓库。TRAE 的配置文件建议加进 .gitignore或者用环境变量注入。如果你还没建 key可以先到 API Keys 页面创建一个后面第 3 节的 MCP 配置会直接用到这个 key。3. 可复制配置MCP 骨架 Agent 提示词模板3.1 MCP 配置骨架TRAE 里的 MCP 配置本质是一个 JSON 文件声明你要连接哪些外部服务。Figma 的 MCP 需要你提供 Figma 的 access token 和 file key。下面是我实测可用的骨架把占位符替换成你自己的值即可{ mcpServers: { figma: { command: npx, args: [ -y, figma/mcp-server ], env: { FIGMA_ACCESS_TOKEN: your_figma_token, FIGMA_FILE_KEY: your_file_key } }, taotoken: { command: npx, args: [ -y, taotoken/mcp-bridge ], env: { TAOTOKEN_API_KEY: your_taotoken_key, TAOTOKEN_BASE_URL: https://taotoken.net/api } } } }两个 server 的分工figma 负责把设计稿的图层树、颜色、间距、字体信息拉成结构化数据taotoken 负责把 Agent 的模型调用统一走网关。注意 base_url 这里用的是 API 地址不带任何查询参数。配置完成后在 TRAE 里重载 MCP如果看到两个 server 都显示 connected说明链路通了。如果 figma 显示 failed九成是 token 权限问题——Figma 的 access token 需要勾选 file_read 权限。3.2 Agent 提示词模板MCP 通了之后Agent 的提示词决定了它能不能把设计稿信息正确映射成代码。我踩过的坑是一开始直接说「根据 Figma 设计稿生成 H5 游戏」Agent 会给你一个能跑但和设计稿差十万八千里的东西。后来改成结构化提示词还原度明显提升。模板如下分三段[角色] 你是一个 H5 游戏开发 Agent负责把 Figma 设计稿还原成可运行的 Canvas 游戏。 你只能使用原生 JavaScript Canvas API不引入任何游戏引擎。 [输入] Figma 文件 key: {file_key} 目标画板: {frame_name} 设计稿包含以下状态: 合成阶段 UI、转场动画、飞行阶段 UI [输出要求] 1. 先生成状态机骨架定义 states {merge, transition, fly} 2. 每个状态独立成一个模块文件通过事件总线通信 3. 颜色、圆角、间距必须从 Figma 图层数据中读取不允许硬编码 4. 生成后输出一份「还原度自检清单」逐项对照设计稿关键在第三段要求 Agent 输出自检清单。这一步会逼着它去读 Figma 的图层数据而不是凭感觉写样式。实测下来加了自检清单后颜色偏差从肉眼可见降到基本一致。3.3 状态机骨架代码Agent 生成的核心结构大概长这样你可以拿这个作为验收基准// state-machine.js const States { MERGE: merge, TRANSITION: transition, FLY: fly }; class GameStateMachine { constructor() { this.current States.MERGE; this.score 0; this.listeners {}; } on(event, cb) { this.listeners[event] this.listeners[event] || []; this.listeners[event].push(cb); } emit(event, payload) { (this.listeners[event] || []).forEach(cb cb(payload)); } addScore(delta) { this.score delta; if (this.current States.MERGE this.score 300) { this.switchTo(States.TRANSITION); } } switchTo(next) { const prev this.current; this.current next; this.emit(state:change, { prev, next, score: this.score }); } }这个骨架的好处是合成逻辑和飞行逻辑完全解耦转场只负责动画不碰游戏规则。Agent 后续要改任何一个玩法都不会影响另一个。4. 验证请求在 TRAE 内跑通还原度检查配置写完不等于链路通了。你需要一个可复现的验证步骤确认 Figma 数据真的被 Agent 读到了。第一步在 TRAE 的 Agent 对话里发一条探测请求请读取 Figma 文件 {file_key} 中 {frame_name} 画板的顶层图层 列出每个图层的 name、type、fills 颜色值不要生成代码。如果 MCP 配置正确你会看到 Agent 返回一个图层列表颜色值是类似 #FF6B6B 的十六进制。如果返回的是「无法访问」或空列表回到第 3.1 节检查 token 和 file key。第二步让 Agent 生成一个最小还原页面基于上一步的图层数据生成一个 index.html 只还原 {frame_name} 的静态布局不实现游戏逻辑。 要求所有颜色和间距从图层数据读取输出时附上对照表。第三步在浏览器打开生成的 index.html用取色器抽查三个元素的颜色和 Figma 里的值对比。我实测的容差是 ±2 的 RGB 偏差超过这个值说明 Agent 在硬编码需要回到提示词里强调「不允许硬编码」。第四步验证状态切换。在控制台手动触发// 在浏览器控制台执行 gameState.addScore(300); // 预期输出: state:change { prev: merge, next: transition, score: 300 }如果事件正确触发说明状态机骨架可用。这一步过了再让 Agent 填充两个玩法的具体逻辑。提示验证阶段建议把模型切到响应快的配置。如果你在 TaoToken 里配了多个模型可以在模型对话页面先测一下哪个模型对 Figma 图层数据的理解更准再填回 TRAE。5. 本篇常见错排查5.1 MCP server 显示 connected 但 Agent 读不到 Figma 数据最常见的原因是 file key 填错了。Figma 的 file key 是 URL 里 /file/ 后面那串不是文件名。另一个原因是 access token 权限不足需要在 Figma 账号设置里重新生成勾选 file_read。5.2 Agent 生成的代码颜色和设计稿对不上九成是提示词里没强调「从图层数据读取」。Agent 默认会用自己的审美补全颜色。解决办法是在提示词里加一句「如果图层数据中没有对应颜色必须报错而不是猜测」。这句话很关键它把 Agent 从「创作模式」拉回「还原模式」。5.3 状态切换时游戏卡死通常是转场动画的回调没有正确触发状态切换。检查 transition 模块里是否在动画结束后调用了 switchTo(States.FLY)。如果用的是 requestAnimationFrame注意不要在动画中途重复触发 switchTo。5.4 API 调用返回 401检查 TaoToken 的 key 是否填到了正确的位置。TRAE 的 MCP 配置里key 是放在 env 字段下的不是放在 args 里。另外确认 base_url 写的是 https://taotoken.net/api不要多加路径。5.5 生成的 H5 在移动端触摸无响应Canvas 的触摸事件需要单独绑定 touchstart/touchmoveAgent 默认只生成鼠标事件。在提示词里加一句「同时绑定 mouse 和 touch 事件」即可。6. 把链路固化下来比单次跑通更重要这个项目跑完我最大的感受是TRAE MCP Agent 这套组合真正的价值不在于「一次生成一个游戏」而在于你把配置骨架和提示词模板固化下来之后下一个离谱需求可以直接复用。Figma 解析、状态机骨架、还原度自检这三段换成任何「多状态 H5 交互」的项目都能套。如果你打算长期做这类 Agent 编码工作流建议把模型调用统一走 Coding Plan这样在 TRAE 里频繁切换模型做解析和生成时不用每次重新配 key。接入文档里有完整的 base_url 和参数说明照着填就行。最后留一个实用技巧每次 Agent 生成完代码让它输出一份「本次使用的 Figma 图层 ID 列表」。下次设计稿更新你只需要对比这个列表就能知道哪些代码需要重新生成不用全量重跑。这个习惯能省掉大量重复对话。