起因 #
和朋友玩起了 24 点游戏。但是玩的单机版，几个人要抢着手机输入。朋友问，能不能做一个？我觉得这行啊！倒不是说非得自己写，毕竟这种游戏市面上应该有联机对战的版本吧。最主要的原因是简单搜了下小程序没搜到，正好最近有补课 AI 的计划就这么决定了。
游戏 #
游戏规则不复杂：
- 随机抽四张牌
- 数值范围是 1-13
- 允许的运算规则为加减乘除
- 牌不可以重复使用
- 谁先算出 24 谁获胜。
简单的规则是这些，不过其实这里是有坑的，后文再说。
目标 #
要做一个什么呢？
- 是个联机对战版的 24 点，可以供朋友们线下娱乐。
- 可用的资源是我的小水管服务器。当然也可以上 Saas，但是本期的主题是 Vibe Coding，所以有啥用啥吧。
- 最简单的方案就是个网站了，其他的都要额外学习架构和技术方案。
怎么做呢？
- 首先是 Vibe Coding，其实说白了就是指使 AI 写代码。
- 既然都 Vibe 了，我就希望我不要关注具体的代码实现，只用关注游戏本身和架构选择。
有了大方向，接下来要指使 AI 干活了。
依旧牛马 #
根据过往使用 AI 编程的经验，AI 并不清楚你真实的需求是什么：
- 游戏逻辑是什么样？如何对战的，用户有什么操作。
- 美术风格是什么样的？轻松的，刺激的，还是硬核的。
- 业务指标是什么是什么？有多少人同时游玩，小水管服务器能撑住多少，稳定性要求是什么样的。
- 你对各种细节的要求：动效，边界情况处理，界面和独属于你的各种信仰和偏好
于是乎第一个想法是，我来出完整的产品文档、美术设计。但是，我只想要一个游戏啊，这些细碎的东西不想写。那于是：我可不可以当老板，让 AI 来细化我的需求？可以。那就先实现一个单机版吧.
我是甲方 #
我给 AI 说：
我将制作一个游戏，算 24 点。单人游戏，请你策划一个完整的产品文档写在 game.md 中
我将制作一个游戏，算 24 点。单人游戏，请你策划一个完整的产品文档写在 game.md 中
于是 AI 给了我一个企业级策划，甚至上线方案和预期用户转化都有了。果然甲方是慵懒的，得做出来才能够知道想要啥。于是，我得把那些所有我设想的游戏方式都讲出来：
移除积分和其他复杂系统，只保留单局游戏内容。
用户不需要输入表达式，而是直接通过按钮计算，实时显示结果并替换到已经使用过的数字按钮上。
移除积分和其他复杂系统，只保留单局游戏内容。
用户不需要输入表达式，而是直接通过按钮计算，实时显示结果并替换到已经使用过的数字按钮上。
然后差不多了,输出了差不多可用且符合预期的游玩方式的文档。好了，接下来看技术方案。
当前场景为 <10 用户，带宽 1Mbps，写技术方案到 tech.md。要求 js 技术栈。尤其考虑网络引起的加载速度问题。
当前场景为 <10 用户，带宽 1Mbps，写技术方案到 tech.md。要求 js 技术栈。尤其考虑网络引起的加载速度问题。
AI:
- JS 技术栈（Vanilla JS + Vite，后端可选 Node.js/Express）
- 低并发（<10 用户）下的低成本部署
- 重点覆盖 1Mbps 弱网加载优化：首屏资源预算、分包、缓存、压缩、请求数控制、预取策略
- 给出可验收的性能指标（TTI、首包体积、单次计算反馈）与 2 周落地里程碑
- JS 技术栈（Vanilla JS + Vite，后端可选 Node.js/Express）
- 低并发（<10 用户）下的低成本部署
- 重点覆盖 1Mbps 弱网加载优化：首屏资源预算、分包、缓存、压缩、请求数控制、预取策略
- 给出可验收的性能指标（TTI、首包体积、单次计算反馈）与 2 周落地里程碑
看似一切正常，于是我让 AI 在不考虑美术风格的情况下实现
无尽的细节 #
游戏，或者说任何软件，能用和好用和有趣之间是天壤之别的。现在的代码也只是能用而已。接下来开始了和 AI 的无尽拉扯：
- 开发需要，请在开发环境直接显示答案。
- 参考 game.md 4.3 和 5.1 的变更更改页面
- 生成一份美术风格描述到 art.md。风格简约现代温馨，使用柔和大色块方案给用户带来轻松的氛围。交互自然而非像表单一样死板。
- 界面元素使用自解释方案，不要指望用户看文字，要设计的自己就能让用户理解。继续修改 art.md
- 四个数字按钮占据绝对主要的屏幕位置。成田字格分布。
- 相应的，运算符按钮也变大，是次要视觉区
- 删了和移动了一些按钮，你整理下 main.js
- 所有的panel 不带背景，所有元素不带边框，要大块纯色简洁。
- ......
- 开发需要，请在开发环境直接显示答案。
- 参考 game.md 4.3 和 5.1 的变更更改页面
- 生成一份美术风格描述到 art.md。风格简约现代温馨，使用柔和大色块方案给用户带来轻松的氛围。交互自然而非像表单一样死板。
- 界面元素使用自解释方案，不要指望用户看文字，要设计的自己就能让用户理解。继续修改 art.md
- 四个数字按钮占据绝对主要的屏幕位置。成田字格分布。
- 相应的，运算符按钮也变大，是次要视觉区
- 删了和移动了一些按钮，你整理下 main.js
- 所有的panel 不带背景，所有元素不带边框，要大块纯色简洁。
- ......
我甚至直接改起了代码——有说话的功夫，直接改代码，让 AI 根据我的代码读懂我要改什么，然后完善细节。这不就是甲方么，人是真的懒啊！
经历了无数轮掰扯后，完成了。在之后添加了多人模式时，我试图将自己的需求描述更清楚：如何对战，界面长什么样子。但收效甚微，总有写自己觉得理所当然但其实并不如此的地方：
- 进入房间后长什么样子？
- 对战结束后什么样子？
- 房主退出游戏了怎么办？
- 排名如何显示？
- 有人先做完了，他的界面应该显示什么？
- …
似乎复杂度不仅来自和 AI 的交流，还来自事物本身的复杂。
总结 #
做一个游戏的传统流程：
我有一个点子 > 实现核心 demo > 细化玩法、交互和美术细节 > 确定技术方案 > 实现 > 继续细化和迭代
AI 能帮助我们的是什么呢？
- 在核心玩法确定后，生成一个随机细节的游戏产品文档
- 根据玩法和技术需求确定方案
- 根据方案实现，甚至还可以接管 CI/CD
AI 不能帮我们的是什么？
- 玩法的选择，一个游戏好不好玩 AI 是不知道的，游戏是给人玩的，AI 只能给你出点子
- 细节的选择，或者说，品味，AI 是不能猜的，你得明确告诉他
- 考虑边界在何处停止，AI 并不知道你要打造何种精致程度的游戏
可以看到，AI 擅长干活，擅长出点子，但：
- 它永远无法代替你的决策（你究竟在乎什么，想要什么）
- 也无法代替你与 AI 沟通（你怎么把你想要的清晰表达出来，并通过某种方式让 AI 听懂）
所以后两者在很大程度上决定了 AI 的使用效果
未来 #
以后怎么办呢？
- 我怎么确定那些繁琐的细节？
- 我怎么向 AI 描述我想象中的模糊的感觉？
目前还没有明确的答案，但明确的是，就算没有 AI 这些东西也是需要被解决的。