📖 这是我的「Vibe Coding实战营」学习笔记，记录从零开发一个 AI 项目的全过程。上一篇我们搞定了 PRD，今天进入技术设计环节。
🤔为什么需要技术设计？
很多新手开发者拿到需求就直接开敲，结果写到一半发现：
提前画好图纸再动工，比边写边试效率高 10 倍。
🛠️技术选型：适合的才是最好的
这次我做的是一个小型单页应用，技术栈选型如下：
前端：React + TypeScript + Vite
为什么选这套？
样式用 Tailwind CSS，不用在 CSS 文件里来回切，开发速度快很多。
状态管理就用原生 React Hooks 足够了——小项目真的不需要上 Redux 之类的重型库，useState + useContext 搞定一切。
AI API：我选择 DeepSeek
对比了几家，最终选 DeepSeek 几个原因：
- 便宜：token 价格真的很香，个人开发者做小项目压力很小
- 够用：我们这个场景只需要让 AI 回答"是/否/无关"，根本用不着 GPT-4 级别的大模型
- 稳定：开放平台用着挺稳定，注册申请 API Key 流程简单
💡 小项目启示：能用便宜的解决问题，就不用贵的。把钱花在刀刃上。
📁 项目结构：清晰比"高级"重要
我规划的目录结构很直白：
src/├── components/ # 复用组件├── pages/ # 页面├── data/ # 静态数据├── App.tsx└── main.tsx
每个文件只做一件事：
一开始就分好类，后面加功能不会乱成一锅粥。
🧩 数据模型：先想清楚"存什么"
核心就两个模型：
1️⃣ Story（海龟汤故事）
2️⃣ Message（对话消息）
就这么简单，不需要搞复杂。满足需求即可，不要过度设计。
🎮 核心流程：把逻辑写在纸上
整个游戏流程其实很清晰：
玩家选故事 → 显示汤面玩家提问 → AI 判断 → AI 回答是/否/无关重复提问回答 → 直到猜对或放弃最后公布汤底 → 可以再来一局
把这个流程写下来，写代码的时候就是按步骤拼积木。
🔐 Prompt 设计：AI 当主持人，规矩要讲好
这里很关键——你得告诉 AI 到底要怎么做，不能模棱两可。
我设计的Prompt核心点：
- 给它角色：你是海龟汤游戏主持人
- 给它素材：告诉我当前的汤面和汤底
- 给它规则：只能回答"是""否""无关"三种，不能多说一个字
- 给它约束：严格按汤底判断，不能透露谜底
💡 设计 Prompt 就像制定游戏规则，规则说不清楚，玩家就会玩歪。
（完整提示词就不对外公开啦，这是项目核心😉）
✅ 今日小结
技术设计不是写论文，不用搞多么复杂。 你只要想清楚这几件事：
- 用什么技术栈——选你熟悉的，满足需求的。当然也可以让AI来推荐最佳实践
- 代码怎么放
- 存什么数据
- ——提前定义好数据模型流程怎么走——把用户操作步骤画出来
想清楚这些再开工，写代码就是流水线工作。
明天就要开始写代码了，敬请期待！
