Vibe Coding 第一课：用一句话生成你的第一个应用

本文是《Vibe Coding 实战系列》第 3 篇。

因为是实践类型，所以我就写的像流水账一些了。

番茄钟

本文中，我选择番茄钟来作为我们的 Vibe Coding 的目标，原因是：

1. 小型且完整：能在一个文件里跑完，不依赖数据库、不依赖登录等能力。

2. 有动态效果：纯静态页面会有点太无聊，要有动起来的感觉，做完看着会感觉不一样。

3. 有作用：做完之后我们能真的用起来，而不是又一个 demo。

   满足这三条的，最典型的就是番茄钟，一个 25 分钟倒计时的小工具，用来辅助专注工作的工具。

   在满足上面这些原因的同时，还有就是逻辑足够简单，AI 能一次就做好，甚至可以搞其他功能，你可以在本文之后，实现你自己的想法。

   番茄工作法：专注 25 分钟 → 休息 5 分钟 → 循环。

描述需求

我们现在 Vibe Coding 的第一步，不是想架构、不是查文档、不是写骨架，而是先用一句话把我们想要的东西说清楚：

我需要做一个番茄钟网页，单文件 HTML。需要实现的功能有：

1. 25 分钟专注倒计时，5 分钟休息倒计时，二者可以切换。
2. 有开始、暂停、重置按钮。
3. 倒计时用一个圆环进度条显示，中间显示剩余时间。
4. 配色浅色背景+蓝色主色。
5. 底部统计今日完成的番茄数和总专注分钟。
6. 数据需要持久化存在本地，方便后续我进行查阅

我们在这里实际上就是把需求说清楚，我也没有写一个非常好的 Prompt ，只是描述了我们的功能。

先梳理一下这段话的信息：

我们在一开始把这些要素讲清楚了，AI 就有了完整的执行边界。

对应到我们之前文章说的那句话：不需要你懂代码，但需要你懂需求。

AI 输出

大概花了我 5 分钟左右的等待时间，工具输出了我们第一版文件。

我用的工具是记忆了我的偏好并且自动去调用了相关的 skill （如页面设计 skill），这些技能好用，但是也很耗时，所以导致我这一个 Prompt 花费了 5 分钟才执行出结果，并且基本上已经是很完善的功能了。

生成的单文件 HTML 代码挺长的，因为不是非常难实现，也不是很复杂的功能，所以我没有逐行阅读 AI 写的代码，而是直接就开启了下一步验收，这正是 Vibe Coding 区别于传统编码的地方（前面的文章说了，代码可以不看，结果不能不验）。

如果你想学习代码的话，可以重点关注一下这个核心代码，然后看不懂就让 AI解释，说实话， AI 写的代码，有一些地方是值得参考学习的。

验收

项目运行起来了，但是功能可能未必正确。因为Vibe Coding 只是让我们将写代码的工作下放给 AI 了，但是判断 AI 写的对不对，这还是我们的工作，AI 是不能代劳的。

用浏览器打开这个 HTML 文件之后，我看到了如图这样的页面（挺漂亮的，我都不想分享出来了哈哈），每个人的结果可能都不同，我这个是有我的博客的风格的：

我根据我们之前的 Prompt ，简单写了一组验收清单，对照着过了一遍，就和测试一样，在页面上点来点去的，那么到目前为止的流程就是：我提需求，AI 执行，我看结果。

上面这 7 个验收点全部通过之后，这就是一个能用的小应用了，而不是 toy demo。

如果验收下来存在问题或者有功能不符合预期，我们就需要继续迭代。

改进

基础的测试 case 都已经通过了，但是我们在计时的时候发现休息/专注这个 tab 可以切换，并且切换之后会出现时间的重置，这显然是不符合预期的，继续让 AI 修改：

倒计时进行中的时候，禁止切换专注/休息 tab，只有当计时暂停或停止的时候，允许切换。并且只要没有启动计时，切换 tab 前后的倒计时状态都不发生变化。

1 分钟之后，AI 完成了代码修改，我重新访问页面在专注计时下点击启动，tab 被禁用了。

一句话，一个改动，1 分钟，你不需要打开代码编辑器，不需要找到要改的那一行，不需要担心改错地方，你只需要说清楚你要什么变化，AI 替你执行，这就是 Vibe Coding 的迭代模式。

再举一个迭代例子。假设我还想要，完成一个番茄的时候，弹一个提示。

再追加一句：

完成一个番茄时，就采用 message 的方式，在页面上展示【完成一个番茄！】的文字提示，持续 3 秒后自动消失。

30 秒后，AI 加好了。完成时，页面出现了一行小字【完成一个番茄！】，3 秒后淡出。

两次迭代，加起来不到 2 分钟。如果用传统编码，这两次改动至少要 10 分钟左右，找代码、改逻辑、调样式、测一遍。Vibe Coding 把这 10 分钟压到了 1 分钟，我们测一遍也很快。

复盘

复盘一下刚才这 10 分钟里发生了什么。

第一阶段：提需求（~1 分钟）

• 我用一句话把类型、约束、功能、交互、视觉、配色、数据这些信息说清楚了

• 这一分钟里面，我想清楚了这个应用要做些什么。

  第二阶段：AI 生成（~5 分钟）

• AI 把自然语言翻译成代码。

• 这一步我不参与代码阅读、审核。

  第三阶段：验收（~5 分钟）

• 根据写的测试 case 进行验收。

• 这是 Vibe Coding 中，人的价值的体现，即判断力在这里体现。

  第四阶段：迭代（~2分钟）

• 用两句话追加两个功能，花了 2 分钟。

  整个流程下来，我没有写一行代码，也没有读一行代码。我做的是：提需求、验收、迭代。这就是 Vibe Coding 的完整循环。

  这个循环越转越快，就是 Vibe Coding 的效率密码。

下一篇预告

这一篇我们通过 Vibe Coding 的方式，做出了一个能用的应用。但你可能会问：我现在提的需求很简单，AI 一次能做对。如果需求复杂一点呢？

下一篇我们就来解决这个问题：

《Vibe Coding 实战②：提问的艺术——怎么把模糊的想法说成 AI 能懂的需求》

我会尽可能的讲清楚，我们要怎么把脑子里那团模糊的【我想要个 XX】，拆解成 AI 能听懂、能执行、能做对的需求。要记住，把我们的想法说清楚，这才是我们在 Vibe Coding 中最重要的能力。