在本篇文章中，我将分享如何使用 AI 编程助手 Trae，从零构建一个旨在帮助初学者练习打字的网页小游戏 —— 《快乐打地鼠》。这是一次实践性极强的项目探索，我将详细介绍整个过程的工具选型、AI交互提示设计（Prompt Engineering）、架构搭建、踩坑经历以及最后的反思总结。
🧰 开发工具与环境
为了保证前后端开发效率与体验，本项目计划采用如下技术栈：
- 前端：React 19 + TypeScript
- 后端：ASP.NET Core 9.0
- 数据库：PostgreSQL
- 开发辅助工具：
- Trae（AI 编程协作工具，建议使用付费版本，每月 600 次请求）
- Node.js（JS开发运行环境）
- .NET Core SDK 9（后端框架）
- Visual Studio 2022 Community（偶尔手动调试比较方便）
- 科学上网
注：为什么我用Trae IDE，主要是因为便宜，外加可以用Claude模型编程。
💡 项目构思：AI Prompt设计
初始目标是制作一款面向打字初学者的训练游戏，给我们家小学生练习打字玩。
我在 Trae 中输入如下 Prompt，让 AI 协助进行系统性的功能与架构设计：
原始 Prompt：
打字游戏为“快乐打地鼠”网页版，主要目的为帮助打字初学者学习练习打字
1. 用户注册、登录、忘记密码、重置密码
2. 打地鼠游戏，游戏关卡，用户积分，用户等级
3. 地鼠字母，用户敲击键盘字母，敲对后字母有被击中效果，然后积分增加，积分增加到一定点后用户等级升级
4. 每个关卡难度逐步增加，地鼠的数量和速度均增加
5. 用户排行榜
6. 前端：React 19 + Typescript技术栈
7. 后端：Asp.net Core 9.0技术栈
8. 数据库：PostgreSQL
帮我详细设计游戏功能，并进行前后端的架构设计（目录和文件结构、数据库表等，先不写具体的实现代码），并输出到Readme.md文件中，作为后续具体代码实现的参考。
大概需要几分钟，就帮我生成了一个很完整的设计文档，包含业务设计和架构设计，见Github Readme内容：wcsee/Happy-Mole-Typing
有了架构设计之后，就让AI帮我创建项目文件结构了，这里先不让AI生成具体的代码实现，因为工程量和代码量比较大而且时间太久，容易混乱和出错，最好一个功能一个功能来。毕竟，每一步我还是要检查一下生成的是否合理，才好继续下一步。
Prompt:
根据readme.md中的功能和架构设计，帮我创建前、后端的项目工程文件、目录和文件，暂不用具体实现代码功能。这里，虽然在Trae里要操作（Accept All）很多次，但总的只算一个request，这个过程因为要创建很多文件和初始代码，所以整体需要不少时间。
估计是文件太多，时间较久，仅帮我创建了前端的项目文件，没有继续后端的项目文件创建。稍微改下前面的prompt，让AI帮我继续创建项目文件。
Prompt
根据readme.md中的功能和架构设计，帮我创建前、后端的项目工程文件、目录和文件，暂不用具体实现代码功能。如果已经创建了，就检查是否合理，并进行更新。如果没有创建，就按合理的方式创建。虽然没让AI帮我生成具体的代码，但是它还是生成了部分实现代码，导致整体时间很长，最后编译也发生了很多错误。不过AI会持续的帮忙在编译和fix错误。
经历了很久的fix，AI还是无法完全检查和fix所有的编译错误，而且会误判没有错误但实际有很多编译错误。这个时候还是需要人工介入查看和修改。这也是为什么我在开始的时候想让AI先不要生成具体的代码，可以它不听话。
如果AI误判没有错误，但实际编译有错误，就把编译错误信息直接贴给AI，这也检查和fix基本比较准确。
花费了3个多小时，才把前后端的编译报错fix完，前端给我做了好几个页面，表面上看还是很专业的。
但是前端的地鼠就是显示不出来，后面又搞了2,3个小时还没fix掉，决定放弃了，重新弄个简单版本的《打地鼠》，先做前端再逐步增加功能。这个比较全面的版本，等等AI再强大一点再让它整。
🧪 编译与调试：AI能力与人工验证的协作
虽然我一再强调“不要生成实现代码”，但 Trae 还是默认补充了一些逻辑，导致项目结构超出预期，编译阶段错误频出。以下是我遇到的典型问题：
- AI误判代码无误：有时 AI 报告无错误，但编译时仍然失败。
- 依赖混乱：前后端依赖未完全安装，导致构建失败。
- 逻辑冲突：部分前端组件逻辑与生成目录结构不匹配。
解决策略如下：
- 将编译错误信息直接贴给 AI，请它协助修复；
- 每一步都进行人工校验与调整；
- 拆解功能开发，避免一次生成过多代码造成混乱。
最终，我花费了 3 个多小时才让前后端项目成功编译。但即便如此，游戏页面仍无法成功渲染“地鼠”，排查近 2-3 小时后决定放弃，转向一个 极简版 MVP 版本。
🧠 经验总结：AI编程的利与弊
通过本次实战，我对使用 AI 辅助开发有了更深刻的理解：
✅ 优势：
- 快速生成架构设计、数据库模型、目录结构；
- 提供高效的参考代码与命名规范；
- 遇到 bug 时能快速定位并尝试修复。
❌ 限制：
- 在大体量项目中容易“自作主张”生成过多代码；
- 编译阶段错误可能被 AI 错误忽略；
- 无法完全代替人工调试和业务理解。
🔧 建议：
- 控制每次Prompt的任务粒度：“一次只做一件事”；
- 优先生成结构，不直接生成逻辑代码；
- 多利用 AI 做“参谋”而非“代工”；
- 人工检查始终是最后保障。
📌 简单版《打地鼠》
齐全版本太费时间了，我家小学生今天放学就要玩，来不及了，就先弄个简单版的吧。下面是我的Prompt：
prompt
帮我使用react 19 + typescript，做一个打地鼠的小游戏，练习打字的小游戏，使用create react app创建默认生成的是打单词的游戏，对小学生有点难了，我稍微优化了一下：
prompt
总共100等级，前10个等级为字母练习，后面等级为由简到难的单词练习总共不到10分钟，就完成了一个可玩的《打地鼠游戏》，在线玩：《快乐打地鼠》
还有很多功能会持续优化和添加，Github代码库：wcsee/typing-game
📎 参考资源
- Trae AI 编程工具：https://trae.ai
- React 19 文档：https://react.dev
- ASP.NET Core 9（预览）文档：https://learn.microsoft.com
- PostgreSQL 官网：https://www.postgresql.org
总结
最后，再提醒一下：尽量避免一下让AI创建很多代码，不然就像我前面一样，步子有点大，扯到了。