先规划，再动手
验证情况
- ✅ 已实测：作者用 Claude Code + DeepSeek 按本页步骤完整走了一遍，页面中标注"作者实测"的内容都来自这次运行（完整记录见 RUN-LOG.md）
- ⚠️ 未实测：Codex 的 Plan 模式流程，Codex 的写法依据官方文档
为什么要先规划
直接说"帮我做一个记账网页"，Agent 也能做出来，但经常会出现这些情况：
- 做出来的和你想的不一样，比如你想要"按月统计"，它做成了"全部汇总"；
- 一口气写了几百行代码，出了问题不知道从哪里改起；
- 中途才发现漏了某个功能，加进去要推翻重来。
先规划就是让 Agent 在动手之前，把"打算怎么做"写出来给你看。你确认没问题再开工。这一步花几分钟，能省下很多返工的时间。
第一步：把需求写清楚
一份好的需求，至少包含三部分：做什么、怎么算做完、有什么限制。
下面是小账本的需求，你可以直接复制使用：
我想做一个个人记账网页「小账本」。
## 功能
1. 记一笔：选择收入或支出，填写金额、分类、日期（默认今天）、备注（可不填）
- 支出分类：餐饮、交通、购物、娱乐、居住、其他
- 收入分类：工资、兼职、红包、其他
2. 本月汇总：显示当前月份的总收入、总支出、结余
3. 支出分类占比：用横条显示本月各分类支出的百分比，从高到低排列
4. 明细列表：按日期分组、新的在上面，每条可以删除（删除前要确认）
5. 切换月份：可以查看上个月、下个月
6. 数据保存在浏览器里，刷新页面不会丢失
## 验收标准
- 金额输入不合法（空、0、负数、字母、超过两位小数）时，提示错误，不添加记录
- 备注里输入 <b> 这样的字符，页面显示正常，不会变成粗体
- 手机宽度（375px）下没有横向滚动条
## 限制
- 遵守项目的 beginner-web 规范
- 先不要写代码，先给我一份实现计划需求不用一次写完美
想不到的地方，Agent 在规划时通常会提出来问你。你也可以先写个大概，让它帮你补全："这是我的初步想法，你看看还缺什么，帮我完善成一份需求"。
第二步：进入 Plan 模式，让 Agent 出方案
按 Shift + Tab 切换，直到底部显示 ⏸ plan mode on，
然后把上面的需求粘贴进去发送。
也可以直接输入：/plan 然后粘贴需求先输入 /plan 切换到 Plan 模式，
然后把上面的需求粘贴进去发送。在 Plan 模式下，Agent 只能读文件、不能修改任何东西。它会查看项目里的 AGENTS.md 和 Skill，思考之后给出一份计划。
作者实测，DeepSeek 在这一步想了 5 分半钟（11 轮，期间读了项目文件和 Skill），给出的计划概览如下：
## 「小账本」实现计划
怎么做：只用原生 HTML/CSS/JS，根目录三个文件——index.html（页面结构）、
style.css（样式）、app.js（逻辑），另外新建一个 PLAN.md 记录需求和进度。
数据存在浏览器 localStorage 里，刷新不丢、断网也能用。
页面布局（从上到下）：标题 → 月份切换器（‹ 上月 | 2026年9月 | 下月 ›）
→ 本月汇总三卡片（总收入/总支出/结余）→ 记一笔表单 → 支出分类占比横条 → 明细列表。
几个关键设计：
- 金额用「整数分」存储（12.34 元存 1234），从根上避免 0.1+0.2 这类浮点误差
- 一个「当前月份」状态同时驱动汇总、占比、明细三块，切月时一起刷新
- 金额校验用正则 /^\d+(\.\d{1,2})?$/ + 大于 0 判断，空、0、负数、字母、
超两位小数全部挡住，错误提示显示在表单下方
- 备注等用户输入一律用 textContent 渲染，<b> 会原样显示成文字，不会变粗体
- 375px 防横向滚动：容器限宽、overflow-x: hidden 兜底、长文本自动换行
分 4 个阶段做，每完成一个阶段我会自查、更新 PLAN.md、并告诉你双击 index.html 怎么查看效果：
1. 页面骨架（能看到完整版面）
2. 核心记账闭环（能记账、看汇总明细、删除、刷新不丢）
3. 占比图 + 月份切换（六项功能全部完成）
4. 验收收尾（逐条跑你的 3 条验收标准 + beginner-web 检查清单）
确认后我就从阶段 1 开始动手；如果你想调整（比如页面布局顺序、删除确认的方式），现在告诉我。注意看它是怎么回应需求的：
- 三条验收标准，每一条都在"关键设计"里有对应的做法（金额校验、
textContent、375px）； - 它主动提了一个你可能没想到的问题：用"分"存金额，避免
0.1 + 0.2 = 0.30000000000000004这种小数误差； - 每个阶段结束时，都有一个能在浏览器里看到的成果。
你拿到的计划细节会不一样，但一份好计划都应该有这几个特点。
第三步：审核方案
拿到计划后，不要直接点"开始"。花两分钟对照检查：
| 检查项 | 看什么 |
|---|---|
| 功能有没有漏 | 需求里的 6 个功能，计划里都有吗？ |
| 有没有多做 | 有没有加你不需要的东西（比如登录、云同步）？ |
| 技术选择对不对 | 是不是只用了 HTML/CSS/JS，没有引入框架和依赖？ |
| 分阶段合理吗 | 每个阶段做完都能在浏览器里看到效果吗？ |
| 它提的问题 | 认真回答，这些往往是你没想到的地方 |
有需要调整的地方，直接说。作者实测时只补充了一个分类，并让它顺便把计划存下来（下一步会讲为什么）：
计划可以，按这个来。另外，支出分类里再加一个「学习」。
先把最终的计划保存到 PLAN.md，每个阶段用复选框列出要做的事，完成一项就把它勾上。然后提交一次。
这一步先不要写代码。如果计划问题比较多，就来回改一两轮，直到你满意为止，再让它保存。
第四步：把计划保存下来
计划只存在于对话里，关掉就没了。所以上面那段话的后半部分，是让 Agent 把它写进 PLAN.md 文件：
完成。这一步做了两件事：
1. PLAN.md 已保存到项目根目录，内容就是刚才批准的最终计划，其中支出分类已加上「学习」
（餐饮、交通、购物、娱乐、学习、居住、其他）。每个阶段下的每一项都有复选框 - [ ]，
以后每完成一项我就把它勾成 - [x]。
2. 已提交到 Git，最新提交是 6a55bf7 文档：新增小账本开发计划 PLAN.md，
改动只有 PLAN.md 一个新文件，没有夹带任何代码。打开 PLAN.md 看一眼，里面有需求、验收标准、技术要点，以及四个阶段的任务清单：
### 阶段 1：页面骨架
- [ ] 写 index.html 全部结构（标题、月份切换器、汇总卡片、记账表单、占比图、明细列表）
- [ ] 写 style.css 基础样式（移动优先布局、桌面居中加宽、汇总/占比/明细静态占位）
- [ ] 自查：双击 index.html 能看到完整版面作者这次运行最终的 PLAN.md（所有项都已勾上，还有每个阶段的进度记录）在 examples/xiaozhangben/PLAN.md。
PLAN.md 的好处
- 对话太长需要
/clear重新开始时，让 Agent "先读一下 PLAN.md" 就能接着干； - 换一个工具（比如从 Claude Code 换到 Codex）也能无缝接手；
- 你自己也能随时看到进度。
第五步：批准计划，开始执行
计划确认后，Claude Code 会询问是否开始执行。
选择"开始执行、但修改文件前仍然问我"之类的选项，
这样每一步修改你都能看到。
也可以按 Shift + Tab 退出 Plan 模式，然后说：
"按 PLAN.md 做阶段 1。做完停下来，告诉我怎么验收。"按 Shift + Tab 或再次输入 /plan 退出 Plan 模式，然后说：
"按 PLAN.md 做阶段 1。做完停下来，告诉我怎么验收。"让它"做完一个阶段就停下来"
这句话很重要。如果不说，Agent 可能会一口气把四个阶段全做完，出了问题很难定位。一次一个阶段，检查通过、提交之后，再开始下一个。
下一步：一步步实现