用 Claude Code / Codex 从零搭一个项目
一份可以照着做的实战记录：用 AI 编程助手从零搭一个小网站，怎么提需求、怎么拆任务、踩过哪些坑。
装好 Codex 或 Claude Code 之后，很多人第一反应是「然后呢」。这篇不讲概念，就带你用 AI 编程助手从零到能跑，搭一个真实的小项目，把每一步该说什么话、该怎么检查都写清楚。
我们要搭的是一个待办清单网站（Todo List）：能添加任务、勾选完成、删除任务，刷新后数据还在。麻雀虽小，需求、拆分、调试、样式这几件事都会经历一遍，学会了换成别的项目也是一样的套路。
下面的对话示例以 Claude Code 为主（运行 claude 进入），Codex 用法几乎一样（运行 codex 进入），把命令换一下即可。
一、先想清楚，再动手
最容易翻车的做法，是装完工具直接甩一句「帮我做个待办网站」。AI 会给你一堆东西，但很可能不是你要的，技术栈也未必合你意。
动手前，先自己回答三个问题：
- 用什么技术做？ 不懂就让 AI 推荐，但要定下来。比如「用纯 HTML + CSS + JavaScript，不要框架」，或者「用 React」。定死技术栈，AI 才不会每次都换花样。
- 要哪些功能？ 列成一句句能验收的话。「能添加任务 / 能勾选完成 / 能删除 / 数据存在浏览器里刷新不丢」。
- 先做哪个？ 别指望一句话全做完，从最小能跑的版本开始。
把这三点想清楚，后面对 AI 说的每句话都会更准。
二、建项目目录，进入 AI
先建一个空文件夹，然后在这个目录里启动 AI 助手：
mkdir todo-app
cd todo-app
claude关键：一定要先进到项目目录再运行
claude或codex。AI 是以「当前目录」为工作范围的，进错目录它就会去改别的地方的文件。
三、第一轮：让它先出最小能跑的版本
进入交互界面后，第一句话不要贪多。像这样提：
我想做一个待办清单网站。技术栈用纯 HTML + CSS + JavaScript，不要用任何框架。这一轮只要最基础的功能：一个输入框加一个「添加」按钮，输入文字点添加后，任务显示在下面的列表里。先把这个跑起来，样式简单能看就行，数据存储和删除功能下一轮再说。
这段话好在哪：定了技术栈、圈定了这一轮的范围、明确说了别的功能以后再做。AI 就不会一次塞给你一大堆看不懂的东西。
它会创建 index.html 之类的文件。生成后，先自己看一眼再运行：
- 用浏览器直接打开
index.html，看能不能添加任务。 - 打开文件扫一眼结构，就算看不懂全部，也能大致知道它写了什么。
能添加任务，第一轮就算过了。先让它能跑，再让它变好——这是核心节奏。
四、一次只加一个功能
基础版跑通后，接着一轮只加一件事，加完就验证。
第二轮：加「勾选完成」和「删除」。
现在给每个任务前面加一个复选框，勾上表示完成，完成的任务文字加删除线。再给每个任务后面加一个「删除」按钮，点了就把这条任务移除。只改这两点，不要动其它已经好的功能。
那句「不要动其它已经好的功能」很重要——它能明显减少 AI 顺手改坏别处的概率。
改完，再自己验证：勾选有没有删除线、删除按不按得掉。没问题了才进下一轮。
第三轮：加数据持久化。
现在让任务数据保存在浏览器的 localStorage 里，这样刷新页面后任务不会丢。添加、勾选、删除之后都要同步更新 localStorage。同样，别动其它功能。
验证方法：加几条任务、勾一个、刷新页面，看数据还在不在、勾选状态对不对。
为什么要一轮一个功能？因为出问题时你能立刻知道是哪一步搞坏的。如果一次让它加五个功能，最后页面白屏，你根本不知道错在哪。小步走、每步验证，是和 AI 协作最省事的方式。
五、卡住 / 报错了怎么办
一定会遇到「它改完页面反而坏了」或者「报错看不懂」的情况。别慌，也别自己硬改，把现象原样告诉它：
点删除按钮后，整个列表都消失了，控制台报错：
Cannot read properties of null。请找出原因并修好，改完告诉我你改了哪里。
给 AI 排错，关键是信息要具体：
- 把报错原文贴给它（浏览器按 F12 打开控制台能看到红色报错）。
- 说清楚你做了什么操作才出的错（「点删除后」）。
- 说清楚期望的正确表现是什么。
信息越具体，它修得越准。反过来，只说一句「坏了，修一下」，它只能靠猜。
如果它改了一版还是不对，可以让它换思路：
这样改还是不行，问题依旧。别在原来的基础上补丁了，重新想一个更简单的实现方式。
六、样式和收尾
功能都对了，最后再让它美化。样式这种主观的东西，给参考、给形容词比空说「好看点」有用得多：
现在美化一下页面。整体走简洁风格：居中卡片布局，浅灰背景，圆角，输入框和按钮大一点方便点击，完成的任务颜色变浅。配色别太花，两三种颜色就够。
如果你有喜欢的网站，也可以直接说「参考 XX 那种极简风格」。
七、贯穿全程的几个习惯
把这几条记住，换任何项目都通用：
- 先定技术栈，别让 AI 每轮换一套。
- 一轮只做一件事，做完立刻验证，好了再往下。
- 每次都加一句「别动其它已经好的功能」，减少误伤。
- 报错就贴原文 + 说清操作，别让它猜。
- 自己至少扫一眼它改了什么，不要闭眼全盘接受。
- 让它说清楚它改了哪里（提示里加一句「改完告诉我你改了什么」），方便你回看。
八、下一步
这个 Todo 项目跑通后，你已经把「提需求 → 拆任务 → 验证 → 排错 → 美化」这套流程走了一遍。换成博客、计算器、小工具，套路完全一样。
想更进一步、让 AI 更少犯错，可以接着看 写好 Prompt：与 AI 协作的实用技巧。