本文记录了使用 Next.js、Prisma 和 PostgreSQL 技术栈，结合 AI 工具 Deepseek 和 VS Code 插件 Rojo Code，开发历史角色谜题生成器的全过程。从需求讨论、UI/UX 设计到前后端实现，AI 在开发中发挥了关键作用，并通过 wiki 和 LLM API 实现了智能问答功能。

💻 项目采用 Next.js 框架构建前端，Prisma 作为 ORM 连接 PostgreSQL 数据库，通过 Cloudflare 和 Vercel 实现国内访问加速和应用部署，Neon 提供云端 PostgreSQL 支持。

🤖 AI 在开发中全程参与，使用 VS Code 插件 Rojo Code 和 Deepseek 进行预设 prompt 的交互，包括需求文档、UI/UX 设计稿生成及前后端逻辑实现，大幅提升开发效率。

🔗 后端通过对接 wiki API 和 LLM API 实现了基于检索增强生成（RAG）的智能问答功能，用户输入问题后系统能自动匹配历史知识库并生成相关谜题。

💡 开发过程中，AI 不仅负责代码生成，还参与了 bug 修复和优化，如通过预设角色扮演 prompt（如开发者、设计师）来指导不同阶段的 AI 输出，确保结果符合预期。

💰 项目成本控制在极低水平，Deepseek 订阅费用仅为 5 元，展现了 AI 工具在降低开发门槛方面的潜力，适合快速原型开发和小型项目实践。

线上地址： https://history-echoes.umiko.moe/

项目地址： https://github.com/umitsurumi/history-echoes

---

起因是国庆期间和朋友玩的历史角色猜谜游戏，感觉这东西很适合让 AI 来生成谜题。但鉴于自己是个瓜皮 java ，所以也正好拿来作为 vibe code 的一次实践。

vibe code 的流程上大致是这样的：

叙述大致需求，并与 AI 讨论，明确细节和技术栈，形成具体文档。使用 1 形成的文档，与 AI 讨论，整理为 UI/UX 的文档。AI 以 UI/UX 设计稿实现前端页面（ mock 后端数据）。后端表结构设计和测试数据初始化，并更新技术文档。AI 实现后端逻辑和前后端的对接，移除先前的 mock 数据。对接 wiki api 和 LLM api ，实现 rag 流程。bug 修复和优化。

技术栈是 nextjs + prisma + postgresql ，部署通过 cloudflare （国内访问加速） + vercel （应用部署） + neon （ pg 云数据库） 解决的。

大体上的 code 工作都是 AI 完成的，使用的是 vscode + roo code 插件 + deepseek 。和 AI 的讨论就是用的可以预设 prompt 的客户端，比如 UI/UX 和需求确定的时候使用不同的角色扮演 prompt 。

不得不说 deepseek 是真便宜，搞下来才花了 5 块钱，不过这个小游戏本来也不复杂就是了。