🛠️ 零基础用 Claude Code 做出第一个小程序 · 第 1 周:从零到第一个上线的网页

用 Claude Code 做第一个网页:待办清单实战(零基础)

说目标,别说步骤;先看效果,再看代码

一句话先懂 · TL;DR

一条指令怎么写才能让 Claude Code 一次做对:目标、验收标准、约束三段式。做完怎么验收、怎么小步迭代、什么时候该重来。附完整指令模板。

一条指令的三段式

新手最常见的指令是「帮我做个待办清单」。它能做,但做出来八成不是你想的样子,然后你改十轮。

好的指令分三段:目标(做什么给谁用)、验收标准(做成什么样算完成)、约束(不许用什么、必须用什么)。

做一个待办清单网页,给我自己在手机浏览器上用。

验收标准:
1. 能输入一条待办并回车添加
2. 点一下能标记完成,完成的划掉
3. 刷新页面后数据还在(用浏览器本地存储)
4. 手机竖屏下按钮够大、不用横向滚动

约束:只用一个 index.html,不引入任何框架和外部库;界面简洁,浅色背景。
💡验收标准写成能一条条打勾的句子。「好看一点」打不了勾,「手机上不用横向滚动」打得了。

验收顺序:先看效果,再看代码

它做完会说「已完成,打开 index.html 查看」。这时不要先去读代码,你看不懂也不需要看懂。先做三件事:

1. 在浏览器打开,照着验收标准一条条试
2. 用手机打开同一个文件(或缩小浏览器窗口)看竖屏效果。
3. 把没过的那条原话发回给它:「第 3 条没过:刷新后待办没了」。

🔆你是甲方,不是审稿人。甲方验收看的是「能不能用」,不是「代码写得美不美」。

小步迭代:一次只改一件事

验收全过之后,你一定会想加东西:删除、分类、提醒、深色模式……

规矩只有一条:一次只提一个改动,做完验收,再提下一个。 一次提五个,它可能做对四个、做坏一个,你分不清是哪个改动弄坏的,回滚也回滚不干净。

✅ 给每条待办加一个删除按钮,点击后从列表和本地存储里都移除。其他功能不要动。

❌ 加删除、加分类、加到期提醒、换成深色、再把字体换个好看的。

自测 · 学完检查一下

想真正动手做题、记进度、攒连胜?到互动课里练。

下面四条指令里,哪一条最可能让 Claude Code 一次做出你要的东西?

答案:做一个读书打卡页:我自己用。验收:能加书名、能记今天读了几页、刷新不丢。约束:单个 html 文件,不用框架

只有第一条同时有目标、可打勾的验收标准和约束。「好看专业」打不了勾,「像微信读书」范围大到做不完,「越多越好」等于把决定权扔给它,然后你为它的决定改十轮。

「界面要好看一点」这条验收标准的问题在哪?

答案:它没法打勾,你和 AI 对「好看」的理解不同,做完必然扯皮

验收标准的唯一要求是可判定。把「好看」换成可判定的:「浅色背景、正文字号不小于 16px、按钮高度不小于 44px」,AI 就能做对,你也能验收。

Claude Code 说做完了。小周打开一看,第 2 条「点一下标记完成」不生效。他最该发回去的是哪句话?

答案:「验收第 2 条没过:点击待办后没有划掉,也没有任何变化」

把没过的验收项和你看到的现象原话发回去,它就能定位。「重做」丢掉了已经做对的部分;猜行号是你在替它干活;趁机加需求会把一个没修完的问题变成三个。

判断:待办清单验收通过后,小夏一次性发了「加删除、加分类、加提醒、改深色模式」四个需求,让 AI 一起做,这样最省时间。

答案:

看起来省了三次对话,实际上一旦某个功能坏了,四个改动搅在一起,你找不出是哪个引起的,回滚只能全部回滚。一次一个改动,每次验收通过再往下走,总时间反而更短。

加了「删除按钮」之后,原来的「标记完成」突然失效了。按本课的做法,下一步应该是?

答案:告诉它「加删除按钮后,标记完成失效了,请只修这个问题,别动其他功能」

因为你一次只改了一件事,所以能确定是删除按钮引起的,直接告诉它现象和范围就行。放弃功能、自己翻代码、从头重做,都是在用最贵的方式解决最小的问题。

想边练边学,而不只是读?

到互动课里答题、记进度、攒连胜——游客即可试学,无需注册。

进入互动课程 →

学点新东西,不错过更新

新课程、新功能、学习小技巧——偶尔一封,随时退订。