实操了《AI 闯关小程序》，完结撒花 🎉

跟着 《Python 全栈 | AI 闯关学习小程序项目教程》实操，从想法到能在微信开发者工具里跑起来，整个项目主要通过 ChatGPT 和 Codex 协作完成。

我负责明确需求、选择方案、实际体验和反馈问题，再让 AI 逐步实现、测试和修复。

一、需求文档和方案设计

最开始用 ChatGPT 做深度调研，整理需求文档和方案设计。

实话说，AI 写得确实全面：用户流程、异常情况、数据保存、题目质量、成本控制，很多我一开始没想到的细节都补进去了。代价是，方案也容易越写越大，做个小项目，项目有点过度复杂。

这一阶段最大的收获，是先确定最小闭环：输入材料 → 生成题目 → 答题 → 查看解析与总结 → 返回复习。

把这条流程跑通，再逐步增加能力，开发时就更容易判断哪些需求该先做。

二、UI 设计 - AI 出稿

界面设计也主要交给 AI。参考了 Figma 社区的一些 UI 案例，再让 AI 结合产品需求生成设计稿、调整页面。

最终选择了紫黄配色、卡片布局和带一点漫画感的插画。希望学习过程轻松一点，让人愿意点进去完成几道题。

三、OpenSpec 管理增量需求，逐步接入联网搜索和 Rag 知识库

开发过程中使用 OpenSpec 组织功能变更，把需求、方案和待完成任务写清楚，再让 AI 按步骤实现，方便检查有没有遗漏。

前端使用 Taro、React 和 TypeScript，后端使用 Python、FastAPI，数据保存在 MySQL 中，文字生成接入 DeepSeek。

在基础出题之外，又增加了两种学习入口：

• 联网学习：输入主题或公开网页网址，通过 Tavily Search 搜索和获取资料，再据此生成题目。
• 私有知识库：上传 PDF、Word 或 Markdown 文档，通过 RAG 检索相关内容，再生成关卡。

上传自己的文档，建立私有知识库，再生成学习关卡。

四、AI 生图

为了让英语词汇、历史、地理、动植物等内容更直观，我接入了阿里云百炼的 qwen-image-3.0 生图模型，以及腾讯云 COS 对象存储。

登录用户可以在普通学习入口手动开启“生成图片”，首次生成的 5 道题会尝试各配一张图。图片生成后存入 COS，答题、解析和历史回看都能展示。

这个功能也踩到了真实接口的限流问题。后来调整为按间隔平滑提交请求，同时允许已提交的任务并发生成，并增加每人每天默认 20 张的额度限制。生图失败时，文字题仍然正常返回。

为题目配上相关图片，让学习内容更直观。

五、测试与联调：代码通过，还要自己走一遍

开发时让 AI 先补测试，再实现和修复功能；之后还会在微信开发者工具里实际走流程。

例如，输入“英语水果词汇”时，曾出现资料已经找到、题目却未通过校验的问题。继续排查才发现，网页引用里的空白字符差异，以及给模型的修正反馈不够具体，都会影响生成结果。修复后，又重新验证了完整流程。

六、部署上线过了一遍教程

目前已完成主要功能开发和本地联调，发布上线的教程也过了一遍。不过还没有准备正式域名，所以暂时没有完成正式部署和微信审核发布。

这个项目让我完整经历了一次 AI 辅助开发：需求分析、方案设计、UI、前后端、外部服务、测试，再到问题排查。

AI 确实加快了动手的速度，也让我能尝试原本不熟悉的环节。但需求取舍、体验判断和结果验收，仍然需要自己参与。

的确能感受到AI的强大，从最开始的需求文档到UI设计到代码开发以及bug修复，遇到任何问题都直接和AI沟通就可以完成迭代和修复。