前言:
上一篇介绍了微信小游戏，匠心千游的发展历程。目前匠心千游已经完成了第一期的 30 个小游戏，并且微信登录顺利地接入了我的后端 rust 服务。这为未来的发展打下了很好的基础。
本篇来基于 从 0 开始 ，用一个真实的案例向大家分享一下 AI 编程的经验。对于匠心系列的产品，有什么建议或者问题，可以在 JiangXinHub 中留言，未来发展良好的话，也会考虑在这里开源。
最近在继续扩充匠心千游中的游戏，也就是本文的主角：一笔画
| 主界面 | 一笔画游戏 |
|---|---|
 |
 |
下面新建一个文件夹，一起开始吧：
一、开发之前的准备
当你有了一个想法，千万别直冲冲地让AI去写代码，俗话说 凡事预则立，不预则废。做任何事情，事先有周密的计划与准备，才更有可能实现；如果没有预先的筹划与准备，很可能做着做着废弃了。
1.用 AI 代码编辑器打开
用什么 AI ?
关于 AI 代码编辑器，现在市面上有很多，比如 Trae、Cursor、Kiro、Claude Code等。它们都有一定的免费试用额度，但一般都不够支持完整开发一个项目。所以我也没有全部试过，也就不贸然推荐。只要你能找到一款能编写代码的 IDE 就行了，是在找不到，也可以用 通义灵码 试试。
现在我默认你已经有了一款 AI 代码编辑器。我目前使用的是下面这款，在 VSCode 中以插件的形式使用:
2.需求分析
无论是 AI 写代码还是人写代码，我们要把想法落地，就应该将它视为一个完整的项目。在项目的初始阶段，我们有必要进行详细的需求分析，包括产品的设计、核心的逻辑、以及开发过程中的计划清单。当然这些也可以和AI进行沟通，和他一起来探讨整个项目来为你设计出方案。
第一: 对齐颗粒度
因为你脑子里的想法，AI 可能无法准确明白。所以你需要在对话中，对齐 AI 和你想法的颗粒度。比如可以让它先写个 readme.md ，看一下是否符合你的预期。如果不合理，你可以继续和他讨论，让它继续修改。
我希望实现一笔画微信小游戏项目，请先写一个 readme，介绍一下该项目。
此时 AI 会为你创建并生成 Readme.md 的文档。这里主要查看一下他是否理解了你的需求，看游戏规则是否和你想的一样。
3.设计文档
设计文档是产品一个产品开发过程的总纲领，它阐述了产品的定位和功能模块。以及产品的原型
为我在 doc 文件夹下创建产品的设计文档 design.md ，详细分析产品 UI 界面和功能设计细节。
AI 可能会给出在 markdown 里给你一些简单的界面结构，看一下是否符合你的预期。对不合理的地方及时修正。
如果 markdown 里的这种设计图图感觉很不直观，你也可以直接命令它，通过 html 给出设计的原型图：
根据设计文档，通过 html 给出各界面的原型图，界面设计尺寸 375x812 ， 我希望所有的界面在一个网页里。
注意，我并不希望你把这个 html 视为编码阶段。它只是 AI 给你的原型图，让你可视化地感知你的需求想法。打开对应的 html 就可以看到原型图：
想对界面有什么修改的，也可以直接通过语言描述，让 AI 修改界面原型：
修改主页面我只需要开始游戏和选择关卡两个按钮，去掉成就和设置；选择关卡界面不用简单，中等、困难按钮。
二、根据原型创建项目
微信小游戏的项目需要微信开发者工具来打开运行。可以在官方网址下载
| 选择小游戏 | 打开刚才的目录 |
|---|---|
 |
 |
1. 生成项目
为了让大家有所见即所得的体验感，这里先让 AI 根据原型图，创建一个 微信小游戏 项目：
非常棒，根据html 的原型，为我设计微信小游戏项目。注意微信小游戏，不是微信小程序，它不支持 wxss、app.js 需要 game.json
这里就要考验各家 AI 的代码能力了，如果打开后有什么错误，都可以复制到 AI 编程工具里让它自行修改。比如我这里有个 ReferenceError: global is not defined 的编译异常，可以把它给 AI 让它自己修改：
然后并不困难地，它实现了第一版的微信小游戏。从创建项目到跑起来，耗时不超过 10 分钟。虽然界面上看起来比较 low，但毕竟这是一次生成的，可以谅解。我们还可以继续命令它优化界面。
如果你是第一次接触编程，或者微信小程序。强烈建议你通过预览，用手机扫描二维码真实体验一下。这种所见即所得的体验，可以激励你更有兴致继续完善项目：
| 游戏界面 | 完成界面 | 关卡选项 |
|---|---|---|
 |
 |
 |
3. 优化界面
然后根据界面上的缺陷，可以说出来让 AI 一点点修改，下面是过程中我的一些表述，大家可以参考一下：
- 主界面和关卡界面
优化主界面，游戏logo 在盒子里居中，盒子要带圆角。开始游戏使用圆角矩形，关卡选择要蓝色圆角加边线。下方文字改为 "当前已通过: 第 x 关"
游戏界面中，将操作按钮和时间都放在顶部作为 HUD ,操作按钮放在 HUD 第二栏，HUD 上边距 20 避免状态栏遮挡; 关闭按钮改成黑色叉号
| 主界面 | 游戏界面 |
|---|---|
 |
 |
- 游戏界面和胜利界面
选择关卡也参考游戏界面的 HUD，避免顶部状态栏遮挡，也通过叉号返回。关卡列表条目使用圆角矩形.
成功的界面太丑了，要圆角，而且面板要正确包裹按钮。
| 关卡界面 | 胜利界面 |
|---|---|
|
 |
到这里，我们就得到了一个看起来还行的一笔画小游戏。全部过程中只通过语言表达，没有写一行代码。你也可以继续通过自然语言继续拓展功能，比如关卡的本地存储、提示、游戏关卡的设计等。都可以通过聊天的形式让 AI 帮你完成，完善一下，你也可以将小游戏上架哦 ~
有了 AI 的加持，可以让你的想法快速落地。这样即使你是一个什么都不懂的小白。也可以通过和 AI 交流，开发出自己的一款微信小游戏或微信小程序，甚至是应用程序。目前 AI 编程的发展仅仅不到两年，就达到了这种能力，确实令人叹服。
在不远的将来，并不缺乏实现想法的手段。缺乏的是想法本身。
对于匠心千游而言，我还通过 AI 为一笔画设计了 关卡编辑器，作为关卡数据来源。这个编辑器也是和 AI 沟通完成的，没有手写写任何代码，效果我是非常满意的。
四、开发文档
最后需要强调一点，AI 的价值在于他是一个了解项目，并且孜孜不倦输出的劳动力。如果你希望把自己的想法，长久维护，逐步迭代。请一定要多让 AI 在完成某个阶段都复盘一下当前项目结构，即使记录开发文档。因为会话中的上下文信息是有限的。
俗话说，好记性不如烂笔头。脑子记不住的东西，请一定要用 "纸" 记下来，对于 AI 来说，它的值就是 markdown 文件。你可以将核心技术点记录下来，一方面可以让项目发展过程中留下开发记录，另一方面可以让 AI 读取这些文件快速了解项目信息。比如现在你比较满意这个第一版：
现在已经发布了 v0.0.1 版本，请在 doc 文件夹中，对当前项目和重要的代码细节进行复盘，书写 v0.0.1的开发文档。
到这里，基于 AI 开发一个简单的小游戏就搞定了，虽然比较简单，但从中也可以学到一些和 AI 沟通的技巧。千万别再无脑让它直接敲代码了，各种文档维护起来，才能保证项目的稳步发展 ~
5、尾声
如果你也想做点什么，不妨从一个小想法开始试试； 如果你曾经也热爱过这些经典小游戏，欢迎你体验并分享《匠心千游》。感谢看到这里的你。愿你也在 AI 的浪潮中，找到属于自己的风帆~
如果你有其他的想法和建议，都欢迎在评论区留言。更多文章和视频知识资讯，大家可以关注我的公众号、掘金和 B 站 。对 AI 编程感兴趣的，或者喜欢匠心千游的朋友，欢迎加入 匠心千游 QQ 交流群: 1046304516