第一个项目：用对话做一个番茄钟

装好了工具，该做点真东西了。这一课我们做一个番茄钟网页：25 分钟专注、5 分钟休息，能开始、暂停、重置，时间到了提醒你。

选它有几个原因：需求你一句话就能说清；只要浏览器就能运行，不需要服务器和数据库；对错一眼能看出来；而且里面藏着几个新手一定会遇到的小坑，正好练习处理。

整个过程分成五步：建文件夹、说需求并看计划、在浏览器里验收、处理问题、小步提出修改，其中穿插着让它自己验证。每一步我都给你准备了可以直接复制的提示词。

第 0 步：准备一个空文件夹

在终端里（上一课教过怎么打开），创建一个文件夹并进入，然后启动 Claude Code。macOS、Linux 和 Windows PowerShell 都能这样做：

$ mkdir pomodoro
$ cd pomodoro
$ claude

建议放在容易找到的位置，比如桌面或「文档」文件夹里，等会儿你要在文件管理器里找到它。

关于权限模式：这是你第一次让它创建文件，所以它会请求许可（手动模式下）。你看到 Write 或创建 index.html 这样的提示，选允许即可。如果觉得每次都问太烦，可以按 Shift + Tab 切到「接受编辑」模式，它会自动通过文件编辑，但命令仍会问你。我建议这一课全程保持在手动或接受编辑，看清它做的每件事。

第 1 步：说需求，但先别让它写代码

新手最常见的错误是一句「帮我做个番茄钟」就让它开工。它会默默做很多决定：用什么框架、加不加登录、界面长什么样。做出来的未必是你要的，你还得从一堆你没打算要的东西里找问题。

更好的方式：把需求说清楚，同时明确说「先别写代码，先给计划」。 还有个技巧：连续按 Shift + Tab 直到状态栏显示 plan mode，这是官方的「计划模式」，它只读不改，直到你批准计划。

它会返回一份计划，大致像这样：

> （提示词 1）
⏺ 计划如下：
  文件：index.html（结构）、style.css（样式）、app.js（计时逻辑）
  计时：记录「应结束的时间点」，每 250ms 刷新一次显示剩余时间
  声音：用浏览器内置的 Web Audio 生成一声提示音，不需要音频文件
  需要你确认：
  1. 专注结束后是否自动开始休息的倒计时？
  2. 休息结束后是否自动开始下一轮专注？
  验证：按清单逐项点击；把专注时间临时改成 5 秒观察切换和声音

怎么审阅一份计划

不用看懂每个技术名词，核对这四点就够：

1. 范围：有没有加你没要的东西（登录、数据库、统计图表）？有就让它删掉。
2. 技术栈：和你的要求一致吗（这次是不用框架、不装依赖）？
3. 它的疑问：它列的「需要你确认」是不是真问题？回答它，别回一句「随便」。
4. 验证方式：它有没有说清楚怎么验证？没有的话，要求补上。

对上面这份计划，我会这样回复：

注意最后那一段：我们要求它自己验证。 这是和智能体协作的核心习惯，第 5 课会专门讲。

第 2 步：在浏览器里打开

它做完后，打开方式有三种，选最顺手的：

• 在文件管理器里找到 pomodoro 文件夹，双击 index.html；
• 或者让它帮你打开：对它说「帮我在浏览器里打开 index.html」，它会执行对应系统的打开命令（macOS 是 open，Windows 是 start，Linux 是 xdg-open），可能会再次请求你的许可；
• 把文件拖进浏览器窗口。

验收清单

别只看一眼「有个数字在走」就算通过。按下面这张表逐项点一遍：

时间到这一项不可能真等 25 分钟。让它帮你临时把时长改短来测试：

测完别忘了让它改回 25 和 5。这个「临时改值再还原」的动作，也是一种验证手段。

第 3 步：出问题怎么办

多半会遇到下面这些情形，解法都很机械。

页面一片空白，或按钮点了没反应。 打开浏览器的开发者工具：在 Chrome 或 Edge 里按 F12（macOS 上是 Option + Command + I），切到 Console（控制台）标签，红色文字就是报错。把它原样复制给智能体：

声音不响。 浏览器要求用户先和页面互动（比如点过按钮），才允许播放声音。如果你点过「开始」声音仍不响，检查电脑是否静音，再把现象告诉它。

切到别的标签页再回来，倒计时不准了。 这是一个经典问题：浏览器会降低后台标签页里定时器的触发频率。如果代码是「每秒减一」，切走后就会变慢。可靠的做法是记录「应该结束的时间点」，每次刷新时用它减去当前时间。我们在第 1 步的计划里已经看到它这样设计，如果你的版本不是这样，就是一个很好的修改要求：

中文显示成乱码。 让它检查 index.html 开头有没有声明 UTF-8 编码。

第 4 步：小步提出修改

做完基础版，试着再加一两个功能，一次只提一个：

• 「加一个设置区，可以修改专注和休息的分钟数」；
• 「完成一个专注就累计一个番茄，在页面上显示今天完成了几个」；
• 「用更醒目的颜色区分专注和休息」。

每提一个，都做三件事：看它说改了什么、在浏览器里点一遍、确认没把已有功能弄坏。如果它改坏了，别急着在原地反复修补：按 Esc 打断，连按两次 Esc 或输入 /rewind 就能把代码退回去（细节见第 6 课）。

本课学到了什么

回头看这几步，你其实练了四个动作：

1. 说清要求：目标、限制、怎样算完成（第 5 课系统讲）；
2. 审阅计划：在花钱花时间写代码之前，先把方向对齐；
3. 带证据地验收：自己点一遍清单，让它也拿出验证；
4. 出错就收集信息再交回去：别只说「坏了」，要给报错、现象、你做了什么。

现在你的文件夹里有三个文件。下一步先别急着继续加功能，在第 6 课里我们会给它加上 git，让你每一步都有存档。

动手试一试