Build：让 AI 做出第一版

本节目标

让课程项目骨架先跑起来，然后给 AI 一个范围明确的任务，拿到第一批可见结果：

• 启动课程项目，在浏览器打开页面。
• 用 SPEC.md 指挥 AI 实现：新增、列表、查看。
• 学会先看 AI 的计划，再让它动手。

本节交付：一个能运行的应用 + 一篇你自己标题和正文的新笔记。

课前先知道：看懂程序的最小结构

暂时不需要读懂所有代码，先认识三个概念：

• 页面：用户能看见和操作的东西。
• 状态：当前笔记列表、正在看的笔记。
• 本地存储：刷新后仍能找到笔记数据。

本项目用 localStorage 把数据留在当前浏览器。它不是数据库，也不会自动同步到别的设备；清理浏览器数据、隐私模式都可能影响它。所以本阶段只承诺：同一浏览器里的本地保存。

记住一件事：软件有多个环节，「页面上出现文字」不等于「数据保存成功」。

跟着做：先让项目跑起来

1. 打开课程提供的项目骨架。
2. 按项目 README 安装依赖、运行启动命令。
3. 在浏览器按终端提示的地址打开页面。

这时它还是一个空骨架——不是已经完成的笔记本。功能从这个模块开始，是你和 AI 一起做出来的。

环境卡住时：记录准确的报错信息，向老师领取统一的中途恢复版本继续；同时如实标注哪些检查是自己完成的。

跟着做：给 AI 一个明确的任务

给 AI 的不是一句「帮我做个笔记本」。用上一节冻结的 SPEC：

1. 先读：让 AI 阅读项目根目录的 SPEC.md。
2. 只做 V0：新增、列表/查看、编辑、删除、本地保存。
3. 先说明：修改哪些文件、每项功能如何验收。
4. 再实现：完成后报告做过和没做过的验证。

可以直接使用这个任务模板：

请阅读项目根目录的 SPEC.md。只实现其中 V0 的范围：
一个个人笔记本的新增、列表/查看、编辑、删除，以及使用
localStorage 的本地保存。使用项目现有技术栈和文件结构。
先概括将修改哪些文件、每项功能如何验收，再实施。
不要开发 SPEC 中的后续功能，也不要引入新数据库和额外框架。
完成后报告实际运行/验证结果，以及未验证的项目。

看 AI 的计划：先检查三个问题

AI 给出计划后、动手修改前，先检查：

• 修改的内容，是否与 V0 需求有关？
• 是否偷偷加了登录、数据库或 AI API？
• 完成后，准备怎样证明它有效？

要求 AI 解释计划，不等于必须接受它的计划。发现它把未来模块一并做了，就要求它回到 V0 范围、撤销越界改动。

跟着做：第一次运行

1. 新建一篇笔记：用你自己的标题和正文。
2. 保存：在列表中看到这篇笔记。
3. 点击：读到完整正文。

本节先拿到「新增 + 列表 / 查看」的可见结果。编辑、删除和持久化的完整验收，下一节集中补足。

不要求这一节就理解生成的每一行代码。

检查结果

做到这些，就可以进入下一节：

• 页面能启动并正常打开。
• 没有笔记时有明确提示。
• 新增后列表出现新笔记。
• 点击后能看到对应正文。

常见问题

AI 一次性做了太多东西——检查它的修改说明，要求它撤销 V0 范围之外的改动（登录、数据库、AI 接口）。

改了很多轮越来越乱——查看 Git Diff 确认实际改了什么；必要时回退到最近能运行的版本，重新用一句更明确的需求开始。

太快做完了——在 V0 范围内打磨：改善空状态提示、删除确认的文案。不增加新功能。

下一节

界面能操作了，但数据真的可靠吗？进入 C203 · 验证 CRUD。