用 Agent 构建阅读清单应用
从明确需求、审阅计划到检查代码，通过一个小应用走完开发和验收流程。
资料核验 / 更新于 · 10 分钟阅读
练习目标
制作一个本地阅读清单：输入标题和网址，标记已读，筛选未读，删除条目，并通过浏览器存储保留刷新后的数据。这是本站设计的练习需求，不是官方示例的转载。预计练习 30–45 分钟，生成的实现会因项目而异。
前提：已完成安装入门。使用一个新的练习目录，或在已能正常运行的前端项目中建立独立分支。
1. 先让 Agent 提交计划
Antigravity 的实施计划 Artifact支持审阅方案和提交评论。是否等待审阅与当前策略有关，所以本次练习明确要求先暂停。
在当前工作区构建一个本地阅读清单。
用户可以添加标题和 http/https 网址、标记已读、筛选未读、删除条目。
使用 localStorage 保留数据。
复用已有技术栈；如果目录为空，先提出最小搭建方案。
不需要登录、服务端数据库、外部 API 或部署。
修改前列出涉及的文件和验收项目，等我审阅计划后再开始。
先打开计划再决定是否继续。官方截图使用 Flask 待办应用，本教程练习的是仅用浏览器存储的阅读清单。
官方示例截图（原图未修改） · 来源：Google Codelabs · CC BY 4.0 · 点击图片放大
把数据结构也写进计划
在讨论组件之前，让 Agent 先给出一个条目示例。本练习可以采用下面的原创示例：
{
"id": "example-item-1",
"title": "浏览器验收笔记",
"url": "https://example.com/notes",
"isRead": false
}排序或筛选后，条目的标识符应保持不变。若把界面行号当成条目身份，筛选后删除时可能删错数据。筛选只应改变显示的子集，持久化保存的集合仍应包含全部条目。
2. 确认范围和边界情况
检查计划是否同时覆盖输入表单和已保存的列表。要求拒绝空标题、去掉首尾空格、验证网址，并说明存储数据损坏时如何处理。
如果方案加入了账号系统或后端，直接评论：第一版只在浏览器保存数据。计划符合需求后，再让 Agent 开始实现。
把意见写成可执行的修改
比起“再简单一点”，可以直接提交以下评论：
表单、列表和存储逻辑都沿用现有前端技术栈。
拒绝只有空格的标题，以及没有 http 或 https 协议的网址。
每个条目使用稳定 ID，筛选不能覆盖保存的完整集合。
如果已存数据无法读取，请在计划中说明恢复行为。
更新计划，并列出哪些验收项目覆盖了这些决定。提交评论后，再读一遍修订后的计划；停留在输入框里的草稿不会引导下一步。小应用通常只需少量组件和存储逻辑，具体文件组织仍应遵循项目已有习惯，不必强行套用复杂目录。
3. 检查实际改动
重点阅读表单验证和数据保存的代码。新增依赖时，让 Agent 解释必要性。执行项目已有的构建或测试命令，并要求报告实际执行的命令、结果与失败信息。
构建成功只是其中一项检查，还不能证明“保存—筛选—刷新”这一整条流程可用。
任务列表有助于发现遗漏；“实现完成”的勾选还需要对应的操作验收来支持。
官方示例截图（原图未修改） · 来源：Google Codelabs · CC BY 4.0 · 点击图片放大
分开检查三类结果
- 代码变更： 是否符合约定范围，重点看输入验证、稳定 ID 和存储读写。
- 命令结果： 记录真实的构建或测试命令、退出状态与尚未解决的错误。
- 用户行为： 在浏览器执行下方流程，不能用任务列表全部打勾来替代。
存储不可用时，界面应明确提示，而不是让人以为数据已保存。对于已存数据损坏的情况，先选定并写明恢复方式，再在可丢弃的练习项目中验证。
4. 按场景验收
| 操作 | 预期结果 |
|---|---|
| 输入有效标题和网址 | 列表新增一个条目 |
| 提交空标题 | 显示清晰的错误提示 |
| 提交非 http(s) 网址 | 拒绝添加 |
| 标记已读后切到未读列表 | 该条目不再显示 |
| 刷新页面 | 条目及已读状态保留 |
| 两个条目中删除一个 | 只删除选中的条目 |
浏览器存储属于特定浏览器配置和站点地址。更换浏览器配置或端口后，列表可能显示为空；清除存储会移除数据。本练习没有账号同步功能。
用固定的两个条目重复验收
添加 Alpha 文章（https://example.com/alpha）和 Beta 文章（https://example.com/beta）。将 Alpha 标记已读，切到未读视图，此时应只看到 Beta。保持相同站点地址刷新，再回到全部列表，确认两个条目仍在且 Alpha 保持已读。接着从未读视图删除 Beta，最后确认全部列表中的 Alpha 仍然存在。
这组操作能发现简单“添加后删除”演示遗漏的问题。再试一次长标题、键盘提交和空列表状态。标题搜索、未读计数等扩展留到第二轮添加，便于定位每次改动带来的影响。
一次修复一个失败场景
把“输入内容、实际结果、预期结果”一起交给 Agent，要求最小修改。修复后重测该场景，再检查一个相邻流程。下一篇：浏览器验收。