基础篇学完了，现在动真格的。实战篇第一个任务：不写一行代码，用一句话做出一个能用的网页。你会走完一次完整的"提需求、看结果、提意见、再改"，顺便掌握做任何小工具都用得上的套路。我们做一个番茄钟——专注 25 分钟、休息 5 分钟的小计时器。
- 不写代码，一句话做网页
$ mkdir pomodoro && cd pomodoro $ claude > 帮我做一个番茄钟网页，只用一个 index.html…… ✓ 创建了 index.html $ open index.html
建文件夹、说需求、打开看
- 提需求
- 看效果
- 挑毛病
- 再改
每轮只提一两个具体问题
- 你是产品经理，AI 是工程师
先选个工具
- Claude 订阅
用 Claude Code。桌面 App 或终端都行（第 13 讲装过了）。它会直接在你的文件夹里创建文件。
- ChatGPT 账号
用 Codex。ChatGPT 桌面 App 里的 Codex 或命令行版（第 14 讲）。
- 什么都不想装
直接在网页版聊天里做。Claude、ChatGPT 的网页版都能把网页代码直接写出来并预览。缺点是改起来要来回复制，做大一点的东西还是推荐上面两个。
下面以 Claude Code 为例，用 Codex 的话把 claude 换成 codex 就行。
一句话，和一段话
"做个番茄钟"也能做出东西，但大概率不是你想要的样子。花一分钟把需求说清楚，能省半小时来回改：
一句话
帮我做个番茄钟网页。
它会按自己的理解做：样式随机、功能可能多也可能少，你还得一轮轮补。
一段话
帮我做一个番茄钟网页，只用一个 index.html 文件，不依赖任何外部库。功能：25 分钟专注、5 分钟休息，自动切换；有开始、暂停、重置三个按钮；倒计时结束时播放提示音，并在浏览器标签上显示剩余时间。风格：深色背景，中间一个大号数字，简洁。做完告诉我怎么打开。
文件怎么组织、要哪些功能、长什么样、做完干什么，全说了。第一版就很接近。
这段话其实就是第 04 讲的公式：任务、背景、约束、格式。存下这个模板，以后做任何小网页都能套：
帮我做一个【网页是干什么的】，只用一个 index.html 文件，不依赖外部库。 功能： 1. 【功能一】 2. 【功能二】 3. 【功能三】 风格：【颜色、布局、参考哪个网站的感觉】。 手机上也要能正常用。 做完告诉我怎么打开，并说明你做了哪些假设。
动手
# ① 建一个空文件夹，进去，启动 $ mkdir pomodoro $ cd pomodoro $ claude # ② 把上面那段需求粘进去 > 帮我做一个番茄钟网页，只用一个 index.html 文件…… ✓ 创建了 index.html：计时、三个按钮、提示音、标签页倒计时 ✓ 打开方式：在文件夹里双击 index.html，或在终端运行 open index.html # ③ 另开一个终端窗口，在浏览器里打开看看 $ open index.html
Windows 上用 start index.html，或者直接在文件夹里双击。
三轮改到满意
第一版出来，打开玩一玩，挑毛病。每轮只提一两个具体问题（第 07 讲）：
你数字太小了，手机上看不清，放大到占屏幕宽度的一半左右；按钮也大一点，方便手指点。
AI改好了：数字用相对屏幕宽度的字号，按钮加高到 48 像素，手机上测过不会挤在一起。
你加一个功能：右下角显示今天已经完成了几个番茄，刷新页面也不要丢。
AI加好了，完成数存在浏览器本地，每天零点自动清零。
你提示音太刺耳，换成柔和一点的，其他不动。
AI换成了一个渐弱的短音，只改了声音那几行。
坏了怎么办
点按钮没反应、页面一片空白，是最常见的情况。别自己瞎猜，把"现场"交给它：
- 说清现象：你做了什么、期望什么、实际发生了什么。
- 带上报错：浏览器里按
F12（Mac 是Option + Command + I）打开开发者工具，点"Console / 控制台"，把红色的报错整段复制给它。 - 让它先找原因再改：说一句"先告诉我原因，再改"，比直接让它乱试强。
你点了"开始"按钮，倒计时没动。下面哪种反馈最可能一次修好？
- "不能用，修一下"
- "你写的代码有 bug"
- "点开始后数字不动，控制台报错：Uncaught TypeError: Cannot read properties of null。先告诉我原因再改"
- 重新开一个对话，让它从头再做一个
现象加报错原文，它几乎能直接定位到哪一行。从头再做一个，大概率换一个新 bug。
存档和分享
- 存档：满意了就让它"用 git 初始化这个文件夹，并提交一次"。以后改坏了随时能退回来。不会用 git 的话，至少把文件夹复制一份。
- 发给朋友：单个 HTML 文件可以直接发；想要一个网址，可以用 Netlify、Vercel、GitHub Pages 这类免费的静态网页托管，让 AI 一步步带你操作。
课后动手
- 用需求模板，做出番茄钟（或者你自己想要的任何小工具）。
- 至少改三轮，每轮只提一两个具体问题。
- 故意让它出一次错，用"现象 + 报错原文"的方式让它修好。
- 让它用 git 提交一次存档。
做网页不靠会写代码，靠会说清楚、会挑毛病。你是产品经理，AI 是工程师。