我用AI编程，没敲1行代码，花3个小时给娃做了一个单词消消乐游戏

起因是这样的，因为我娃要备考KET，每天都要抱着词汇表背单词，过程非常痛苦不说，还总是背了就忘。我也下了一些背单词的软件，可不是趣味性不够强，就是词汇表的排列和老师要求的版本不一致，就决定自己用AI做一个背单词的小游戏。

没想到没用我敲一行代码，花了3个小时的时间就做好啦！先看看效果：

点击对应的中英文，卡片就会消去，上面的卡片会掉下来填补空缺，同时会有新的卡片像俄罗斯方块一样掉落“盖楼”。下面就像素级一步一步介绍一下项目流程以及心得，长文干货预警。

一、和kimi讨论需求背景

这个项目我选用的“程序员”是kimi k1.5，一开始的思路只有个大概，需求分三大块，选单词书->选游戏进度->开始游戏。我的原型长这样：

我承认，作为一个产品经理，这样的原型图确实多少有点自暴自弃了。。。其实本来是抱着试试看的态度发过去的，结果一看分析过程，真的是眼前一亮。

基本上完全get到了我的意思，而且我那一手的“草书”，也都看明白了。这是kimi多模态推理能力第一次惊艳我的地方，后面我还会反复callback。

然后我就更放心地把后面页面的“墨宝”传给了它。在这之前其实还做了一轮讨论，最后决定第一版先不涉及后端，所以放弃了pdf文件存储方式，决定用txt格式存单词书。

一个小tips：推理模型由于太过“聪明”，往往容易把事儿做到前面去，撸起袖子就要写代码，所以在需求讨论阶段需要不断地“踩刹车”，告诉它先不着急进行代码实现。

然后就是对齐需求，比如页面风格要小清新，需要保存游戏进度，以及粗糙版的游戏规则，让Kimi梳理出prd文档。这里的“对齐颗粒度”对于后续的开发非常重要！

二、讨论项目架构，定义页面之间的传参接口

整体感受是，即使是AI编程，项目架构这里还是非常重要，就像小说的大纲，有了它就不容易写崩盘。我是先让kimi出了一版，然后提出我的意见，它再调整，最后达成共识。

然后就是页面之间的传参。这一点其实也可以不管这么细，但是当做白盒的话，项目会更可控。

然后让kimi整理成了系统设计文档。

把prd和系统设计文档保留下来，在上下文很长的时候再传递给kimi一遍，能够保证生成代码的连贯性和一致性，提高代码质量。

三、写代码，开整

1、单词书选择页面

单词书选择页面是三个页面中最简单的，基本是一遍过，我也就让调整了一下卡片尺寸，像交互效果之类的都是模型自己能考虑到的。

预览功能非常方便，直接就是所见即所得的效果。

2、游戏进度选择页面

游戏进度选择页面相对复杂，要考虑到的问题第一是UI，第二是单词数据的加载，第三是进度存取。

这是前两个版本的UI，额。。。

然后我坐不住了，拿出产品经理的杀手锏，“抄竞品”：

然后就得到了这个：

嗯，眼睛舒服多了。

考虑到游戏进度的显示问题，“已通关”和“未通关”应该是不同的显示方式。So，你们的灵魂画手又上线了，要求在已通关的卡片右上角加个三角行label：

然后就得到了五花八门的错法。。。。

敲黑板，在调试的时候一定要用好多模态模型的特性，可以直接把有问题的地方截图，把问题圈出来直接拍在他脸上，就像这样：

咱就是说，如果让纯文本模型来改这个bug，我得用多少文字才能描述清楚这个问题？这种多了一个沟通维度的感觉，真的太舒爽了。

这是ok之后的样子：

表面上是游戏进度，实际上单词的掌握情况一目了然。

然后，我们把假数据换成真数据，同时加入进度存取逻辑。相对UI调试，这部分是AI更擅长的，所以过程比较丝滑。

实际上kimi k1.5的推理过程远比呈现出来的这些复杂和缜密，比如一次性加载整本单词书是否会对内存造成影响等等像边界问题、容错问题它都有考虑到了，甚至给出了一次性加载、分页加载等不同版本的解决方案。因为只是demo版，所以我们做了取舍。

3、游戏页面

3.1 游戏页面的沟通以及代码生成、迭代

还是一样的逻辑，先解决“有”的问题，再解决“有趣”和“好看”的问题；先用静态数据调试，然后再进行动态数据载入。

初版很普通，然后我让kimi和我一起做了一下脑暴，最后从趣味性和可行性方面，决定让上面的卡片可以自由“掉落”，填补下面卡片的空隙。

这部分会牵扯到碰撞检测相关的算法，它也是费了一番功夫，但最终还是成功帮我实现了。

然后我们就考虑继续加难度，借鉴俄罗斯方块的玩法，让新的单词卡片“掉落”。

这一部分的实现问题是最多的，会有奇奇怪怪的情况出现，比如新卡片堆叠在一起，比如掉落方向变成了从下向上。。。

这个地方真的修改和迭代了很多次，幸好Kimi的长上下文一致性比较好，没有丢失掉内容。

3.2 游戏结束规则和返回

游戏的结束规则，除了卡片“触顶”之外，我又加上了限时：规定时间内没有完成所有消去则游戏也算失败。通过制造紧迫感，让学习效率up up up！

所以我们又增加了倒计时卡片以及游戏成功、游戏失败的提示：

还有退出问题，要增加一个返回按钮，中途退出需要弹窗提示，像这样：

为了吸引小朋友，我们又考虑到了消去的视觉效果。kimi给我建议了一堆动画效果，但是语言描述起来太难理解，所以我要求它直接给我做一个demo把各种效果展示出来供我挑选，就像这样：

这里也是感觉非常贴心。

4、 三页联调，页面风格一致性调整

最后就是组装环节。要做的事情有三件：第一是页面之间的数据对接；第二是统一css样式表，让三个页面的风格一致起来；第三是按照一开始设计的项目结构对文件进行拆分（前面为了预览方便，把html、css和js都写在一个文件里了）。

这部分AI做起来很快。

然后就是按照项目结构建文件，拷代码。

这个过程基本上也都是一遍过。

激动的心颤抖的手，用户体验环节！

趣味性还不错，所以非常受欢迎，俩娃抢着玩，初版就硬控了娃一个下午，但凡玩过的关卡，基本上都记住了。

比起这种背法：

是不是香多了~~还收集了一波“用户反馈”，后面还会继续迭代。

四、写在最后

一些心得体会&tips：

1、如果你想得到一个完全符合你的业务流程的、可控的项目，软件开发的方法论和流程依然非常重要。

2、一旦AI进入反复找不出的bug泥潭，有两个解决办法：

1）帮忙“回滚”，回到最初出问题的版本，尝试换个方式描述问题，并要求AI重新思考解决办法。

2）换个视角，重新打开一个“干净”的对话窗口，让它帮忙看看。

总之就是尽量跳出“坏的”上下文。

3、一个程序员是不是够好，不仅仅体现在代码能力上，还有需求理解能力、架构设计能力、思维能力、沟通能力、调试能力等等一系列方面。所以kimi k1.5的多模态、推理能力和超长上下文，注定了它是一个好的程序员。

总之呢，每个AI有自己的性格、脾气和擅长的地方，一定要多试、多用。

上点价值：

我觉得AI编程的意义，不仅仅在于能够帮助程序员提效，更重要的是，它能大大拓展人的能力边界。

比如之前我们有一个项目需求，需要用到部分Qt代码，让没有这部分技术储备的程序员去做，学习成本就很高，也很痛苦，而现在有了AI，那都不是事儿了。

还有就是比如像我这种很多年都不写代码了的人，会有种我又可以了的感觉。

再有，就是0代码基础的人，完全从业务层进行描述，做个小工具、小游戏之类的，也不会有太大问题。

之前李诞说，“每个人都能讲五分钟脱口秀”，现在，每个人都能当几个小时程序员。

感谢这个AI时代。