第2章：你的第一个 Vibe Coding

这一章你要解决的问题

上一章，你已经看过一个“旅行打包清单”的演示，知道 Vibe Coding 不是许愿，而是：

说清楚需求 -> 让 AI 生成 -> 打开运行 -> 自己检查 -> 小步修改

这一章，我们不再继续讲概念，而是换一个新项目，亲手做出第一个能运行的小东西。

你会完整走一轮 Vibe Coding：

说清楚需求 -> 让 AI 生成 -> 打开运行 -> 提修改意见 -> 再检查

这一章不要求你安装编程环境，也不要求你会写代码。

你只需要准备：

• 一个浏览器。
• 一个可以使用的 AI 编程工具账号。
• 30 分钟不被打断的时间。

推荐工具：

• Bolt.new
• Replit
• Lovable

如果你不知道选哪个，先用 Bolt.new 或 Replit。它们都适合快速体验。

---

2.1 今天要做什么？

我们先做一个最简单的项目：

番茄钟网页。

它的功能很简单：

• 页面上显示 25:00 倒计时。
• 有“开始”“暂停”“重置”三个按钮。
• 点击开始后，时间每秒减少。
• 点击暂停后，时间停止。
• 点击重置后，回到 25:00。
• 页面适合手机和电脑浏览。

为什么选番茄钟？

因为它足够简单，但又不是纯静态页面。你可以明显看到按钮、状态、倒计时这些交互效果。

这比“做一个个人主页”更适合体验 AI 写功能。

---

2.2 第一步：复用上一章的原则

很多新手第一次会这样写：

帮我做一个番茄钟网页。

这句话不是不能用，但它会让 AI 猜太多。

AI 可能会自己猜：

• 用什么技术？
• 要不要保存记录？
• 要不要登录？
• 页面什么风格？
• 手机端要不要适配？
• 倒计时结束后要不要提醒？

上一章你已经看到：你给的信息越少，AI 猜的越多。

所以这一章我们直接复用那条规则：

不要让 AI 猜你的核心需求。

---

2.3 复制这段提示词

打开你选择的工具，新建一个项目，然后输入下面这段提示词。

请帮我做一个简单的番茄钟网页。

目标用户：
刚开始学习时间管理的人。

功能要求：
1. 页面显示一个 25:00 的倒计时。
2. 有三个按钮：开始、暂停、重置。
3. 点击开始后，倒计时每秒减少。
4. 点击暂停后，倒计时停止。
5. 点击重置后，倒计时回到 25:00。
6. 倒计时结束后，显示“时间到，休息一下”。

界面要求：
1. 页面简洁，适合手机和电脑浏览。
2. 使用深色背景。
3. 倒计时数字要大一点。
4. 按钮要清楚，不要太花哨。

技术要求：
1. 做成一个可以直接运行的网页。
2. 不需要登录。
3. 不需要数据库。
4. 不需要后端。

请先生成最小可运行版本，不要添加额外功能。

注意最后一句：

请先生成最小可运行版本，不要添加额外功能。

这句话很重要。

新手最容易让 AI 一次做太多，结果项目变复杂，出错也不知道从哪里查。

---

2.4 等 AI 生成后，先做 5 步检查

AI 生成完后，不要急着美化，也不要急着加功能。

先检查它到底能不能用。

检查 1：页面能不能打开？

点击工具里的预览按钮。

如果页面打不开，先不要继续提新需求。

当然很多线上工具直接就是预览状态了, 所以只要看观察有没有异常就行。 如果无法正常显示。

你可以直接问 AI：

页面没有正常打开。请先检查运行错误，只修复启动问题，不要改动功能和样式。

检查 2：倒计时是不是 25:00？

打开页面后，看第一眼。

你应该看到类似：

25:00

如果一开始不是 25:00，就让 AI 修。

页面初始时间应该显示 25:00。请修复这个问题，不要添加新功能。

检查 3：开始按钮能不能动？

点击“开始”。

你应该看到：

25:00 -> 24:59 -> 24:58

如果时间不动，说明核心功能没有完成。

你可以说：

点击开始后，倒计时没有每秒减少。请只修复开始按钮和倒计时逻辑。

检查 4：暂停按钮能不能停？

点击“暂停”。

时间应该停住。

如果还在继续减少，你可以说：

点击暂停后，倒计时仍然继续。请修复暂停逻辑，确保暂停后时间不再变化。

检查 5：重置按钮能不能回到 25:00？

点击“重置”。

时间应该回到：

25:00

如果没有回到 25:00，你可以说：

点击重置后，时间应该回到 25:00，并且倒计时停止。请修复这个行为。

---

2.5 第一次迭代：让它更好用一点

当核心功能都正常后，再做小改动。

不要一次加很多功能。

先加一个很小的改动：

请在倒计时结束时播放一个简单提示音。如果浏览器不允许自动播放声音，就至少显示明显的文字提醒。不要添加其他功能。

生成后继续检查：

• 倒计时还能不能开始？
• 暂停有没有坏？
• 重置有没有坏？
• 结束提示有没有出现？

注意：

每加一个功能，都要重新检查旧功能。

因为 AI 很可能为了加新功能，把旧功能改坏。

---

2.6 第二次迭代：让它更像一个产品

接下来我们加一点界面反馈。

输入：

请优化界面状态：
1. 未开始时，开始按钮可用，暂停按钮弱化显示。
2. 运行中时，开始按钮弱化显示，暂停按钮可用。
3. 暂停时，开始按钮显示“继续”。
4. 保持整体简洁，不要改变核心逻辑。

这段提示词的重点是：

不要改变核心逻辑。

你要经常提醒 AI：这次只改哪里，不要顺手大改。

---

2.7 如果 AI 把项目改坏了怎么办？

新手第一次遇到这种情况很常见：

刚才还能运行，加了一个小功能后反而坏了。

不要慌，也不要连续乱试。

先用这个提示词：

刚才的修改导致项目不能正常运行。
请先总结你最近一次修改了哪些文件、哪些逻辑。
然后只修复导致报错的问题，不要添加新功能，不要重构。

如果修了一次还不行，再问：

请根据当前错误信息，列出最可能的 3 个原因。
先不要改代码，先告诉我你准备怎么排查。

如果连续修 3 次还不行，先停止。

这一章你可能还没有学 Git，所以暂时只能使用工具自带的历史记录、撤销功能或重新生成。

从第5章开始，我们会用 Git 正式解决“改坏了怎么回退”的问题。

---

2.8 你刚刚到底做了什么？

你刚才并不是“让 AI 自动做完一切”。

你实际完成了这些工作：

步骤	谁负责
决定做番茄钟	你
写清楚功能要求	你
生成代码	AI
打开页面检查	你
发现问题并描述	你
修改代码	AI
判断能不能继续	你

这就是 Vibe Coding 的基本分工。

AI 负责大量执行。

你负责方向、判断和验收。

---

2.9 小白版验收清单

以后每次 AI 写完一个功能，你都可以照这个清单检查。

功能验收清单：

1. 页面能打开吗？
2. 核心按钮能点吗？
3. 点完之后结果对吗？
4. 乱点几次会坏吗？
5. 刷新页面后表现正常吗？
6. 手机尺寸下能看吗？
7. 有没有红色报错？
8. AI 有没有顺手加我没要求的功能？

如果有任何一项不对，先修它。

不要在有明显 bug 的时候继续加功能。

---

2.10 常见问题

问题一：AI 生成的页面很丑怎么办？

先别急着改。

新手优先级是：

功能正确 > 数据安全 > 能回退 > 界面好看

等功能稳定后，再美化。

问题二：我看不懂它生成了哪些文件怎么办？

直接问：

请用中文解释这个项目的文件结构。
每个文件是做什么的？
我作为新手应该重点看哪 2 个文件？

问题三：我可以让它一次做一个完整 App 吗？

不建议。

新手应该先做最小版本。

比如番茄钟项目，第一版只做：

• 倒计时
• 开始
• 暂停
• 重置

不要第一版就做：

• 登录
• 数据统计
• 云同步
• 排行榜
• 付费会员
• 手机 App

问题四：我应该用中文还是英文提示词？

都可以。

如果你是 0 基础中文用户，先用中文。重点不是语言，而是需求是否清楚。

清楚的中文，通常比模糊的英文更好。

---

2.11 本章作业

请你完成一个番茄钟 Demo，并做到下面 4 件事：

1. 页面能打开。
2. 开始、暂停、重置都能正常工作。
3. 倒计时结束后有提示。
4. 让 AI 用中文解释项目文件结构。

最后，把 AI 的解释保存下来。

下一章我们会学习“提示词工程”，也就是如何稳定地让 AI 输出更接近你想要的结果。

你会发现：好的提示词不是一句神奇咒语，而是把需求说清楚的能力。