参赛赛道：全链路开发实战 选题方向：从 0 到 1 全链路开发 话题：#TRAE双端融合
先看成品
一句话介绍这个游戏：你是一部文明史的话事人。面前摆着四格电量——能源、生态、知识、协作，桌上是 35 张从一万年前递过来的抉择卡。左滑，或者右滑，每一张都在给某些格子充电、从另一些格子放电。任何一格归零，文明冻死；任何一格充满到过载，文明烧死。
撑过 35 张牌，你就把人类送到了 I 型文明的门口。撑不过，你会得到一张这样的结算单——
整个项目从一个模糊的念头到一个可访问的线上作品，我全程没有离开过 TRAE。这篇文章完整复盘这个过程：需求怎么拆解、代码怎么生成、bug 怎么修、产品怎么上线。
需求拆解：三个互相打架的设计约束
先说这个项目为什么长这样。它源于 TRAE 的盲盒开发挑战赛：规则是随机锁定三个关键词——一个主题词、一个功能词、一个风格词——然后围绕它们做出一个作品。我抽到的三颗骰子是：
文明、电量表、北欧冷淡风。 也就是说，主题必须是文明，核心功能必须是电量表，视觉必须是北欧冷淡风。
宏大叙事、工业仪表、极简美学——这三个东西天然互相排斥。我的第一步不是写代码，而是把这个命题原样发给 TRAE，让它出方案：
它一口气给了四个：巨型文明仪表盘、万年时间线、文明体检问卷、技术电池墙。我挑了两个顺眼的先做出来看效果——能跑，排版精致，冷淡风的味道也对。
然后我盯着这两个页面看了十分钟，做了一个决定：全部推翻。
原因很直接：好看，但不好玩。你可以看，可以读，但你碰不到它。纯展示页没有任何让人记住的理由。我跟 TRAE 说的原话是：
「展示这种页面效果不好没亮点，交互性很差，能不能改成强交互的小游戏类的页面，关键词还是要紧扣。」
它给出的答案是 Reigns 式滑动决策——左滑右滑做抉择的卡牌机制。那一瞬间，三个拧巴的约束突然各就各位了：
- 文明，从展板上的文字变成 35 张牌。第一簇篝火、第一粒种子、第一台蒸汽机……每一张都是历史上真实发生过的两难：砍林开田，喂饱协作，掏空生态。
- 电量表，从装饰变成了命。四格电量是文明的资产负债表，而且过载和归零一样致命——文明的敌人从来不只是匮乏，还有失控。
- 北欧冷淡风负责反衬。纸灰、墨色、雾蓝，克制的细线。画面越冷，文明熄灭那一刻的红闪和震屏就越锋利。
回头复盘，这一步是整个项目最值钱的环节：需求拆解阶段多花的一小时，省掉了后面所有返工的犹豫。
开发：一次成型的游戏骨架
方向定了之后，TRAE 一次就把完整可玩的版本写了出来：单文件 HTML，零框架零构建，双击即玩。核心数据结构干净得像一张表格：
const DOM = [
{ k: "eng", cn: "能源", v: 50 },
{ k: "eco", cn: "生态", v: 55 },
{ k: "kno", cn: "知识", v: 45 },
{ k: "soc", cn: "协作", v: 50 },
];
// 每张牌：{ q, l, r, L:{域:±n}, R:{域:±n} }
// 8 种死亡结局，通关按卡尔达肖夫能级评分
拖拽交互、卡片飞出动画、电量条充放、纪元切换、死亡判定——全部可用。这里是 TRAE 的 Agent 模式最显威力的地方：它不是补全一行代码，而是理解「做一个游戏」这个目标后，把界面、逻辑、状态机、动画当成一个整体交付。
测试验证：AI 写的代码，也要过我的手指这一关
能跑不等于能玩。测试环节踩了三个真实的坑，每个都值得一提：
「卡牌拖不动了。」 最早的版本在手机上完全拖不动卡片。TRAE 排查后定位到 setPointerCapture 在部分浏览器直接抛异常，整个拖拽链路当场阵亡。修法是把 move/up 事件挂到 window 上、给 capture 套上 try/catch。问题不难，但只有真机才能暴露。
「AI 说代码有 bug，我说没有。」 我用浏览器自动化测试拖拽，合成事件怎么都滑不动，一度以为是代码 bug。人工把输入链路逐行核对后确认：代码是对的，是自动化工具和真实触摸事件之间的差异在骗人。这个坑让我记住：AI 可以帮你验证功能，但「手感」只能用手指投票。
「流光为什么时有时无？」 电量条有一道流光扫过的动画，时灵时不灵。我把现象描述给 TRAE，它反推出根因：background 简写属性把 backgroundImage 整个覆盖了。拆开赋值，问题解决。这种 CSS 层的幽灵 bug，靠肉眼翻代码可能要翻一晚上——把现象描述清楚，AI 的报错分析能力远超我的预期。
【截图：TRAE 定位拖拽 bug 的对话过程】
迭代打磨：三轮一句话需求，外加一次「自我否决」
能玩之后，是三轮一句话需求的迭代：
「太单调了。」 ——于是有了 7 张 AI 生成的配图，全部经过滤镜统一降饱和，保证冷淡画风不走样。
「动效太少了。」 ——于是有了随纪元变色的尘埃粒子、卡片的 3D 倾斜和视差、死亡时的红闪震屏，还有纪元切换时那块安静推开的幕布：
「新玩家进来是懵的。」 ——这一轮最能体现人机分工。TRAE 先做了遮罩式新手引导，我一看效果直接否了：整块卡片被白雾罩住，高亮位置还跑偏。换方案，改成「元素脉冲描边 + 浮动小气泡」的分步指引，第一步的气泡里甚至藏了一个滑动手势的小动画。
顺手还加了一个角色：右侧悬浮的电量精灵，一个圆滚滚的冷淡风小家伙。点它一下，它会根据你所在的纪元讲一条冷知识——蒸汽纪元时它会告诉你，1952 年伦敦一场大烟雾死了四千人，催生了人类第一部《清洁空气法案》。
【截图：电量精灵与知识点气泡】
【GIF/录屏：完整一局游戏的滑动操作】
交付：从本地文件到全世界可访问的链接
最后一步是部署。仓库建在 GitHub，游戏文件复制为 index.html，开启 Pages 后自动构建，得到了任何人可访问的地址：codeganhaoz.github.io/civilizatio…
唯一的插曲是 push 死活推不上去，报错显示连接的是 127.0.0.1。TRAE 用一条 git config --list --show-origin 揪出元凶：我的全局配置里残留着一条指向本地代理端口的 github.com 域名级配置——代理软件没开，请求全被发去了空气。清掉，推送成功。
至此链路完整闭合：需求拆解 → 代码生成 → 测试验证 → 迭代打磨 → 部署交付，全程一个工具、一个对话框。
复盘：这套全链路能力，到底好不好用
回到最实际的问题：用 TRAE 走完一个完整项目，体验到底如何？我的三个真实体感：
第一，它改变的不是写代码的速度，而是试错的成本。 推翻两个精致的展示页重做游戏版，搁以前我要犹豫很久——那毕竟是两份能跑的成品。但当重来的成本只是一轮对话时，「这个不够好」的判断就变得容易说出口。这次项目里最正确的决策，恰恰是一次推翻。
第二，Agent 模式的边界在于「目标感」。 只要我能把需求说成一句有明确目标的话——「改成强交互的小游戏」「动效太少」「新玩家是懵的」——它就能交出完整的东西。但目标本身的判断，比如「展示页没亮点」「遮罩引导不好看」，只能我来下。AI 把「做起来」的成本压到接近零，人的价值反而更集中在「做什么、什么算好」。
第三，全链路的意义是「不断档」。 方案、代码、修 bug、配图、部署、排查 git 配置——如果每个环节换一个工具，光是上下文切换就足以把这个小项目拖死。一个对话框里从头到尾做完，才是这个项目能在一个晚上跑通的真正原因。
三个互相打架的设计约束，最后变成了一部可以握在手里滑动的文明史。如果你手里也有一个「想了很久却总觉得麻烦」的念头——现在的工具链，可能真的够用了。
项目关键词：文明 × 电量表 × 北欧冷淡风 | 单文件 H5 · 无需构建 · 双击即玩
