从一个小问题开始

核心方法

“帮我做一个应用”可以得到很多代码，却不一定得到能用的产品。原型的起点是一个范围明确的问题、一个能够走完的流程，以及一组可观察的验收条件。本课程会完整制作「下一本」阅读清单：记录想读的书、标记已读、删除记录，并在刷新后保留结果。

这是一个使用 HTML、CSS 和原生 JavaScript 的静态教学项目。它不需要安装前端框架，也没有登录、云端同步或真实数据库。课程资料包提供完整源代码和运行说明，你可以先运行成品，再按课时理解并修改。学习重点是知道自己交付了什么，而不是把生成代码的速度当作开发能力。

本课的成果

一页需求说明、明确的功能边界和一份验收清单。你将用这些条件判断后面的代码是否满足目标。原型可以很小，但必须真实完成承诺的事情。

案例拆解

第一步：把大想法缩成一个使用场景

原始想法：“我想做一个 AI 阅读平台，有推荐、社交、排行榜和自动书评。”它包含多个独立系统，任何一个都需要新的资料、接口和判断规则。

缩小后：“我在浏览网页时看到想读的书，希望先记住书名；读完后可以标记，再次打开时还能看到。”这一句足以指导第一个原型，而且不用先接入外部 AI API。AI 在这门课中帮助你开发，产品本身可以先不包含模型功能。

第二步：写清楚做什么、不承诺什么

产品：下一本 · 阅读清单
使用者：希望在一个浏览器中记录待读书目的个人
核心流程：输入书名 → 加入清单 → 标记已读 → 刷新后仍可看到
必要功能：新增、切换已读、删除、读取和保存本机记录
输入规则：去除首尾空格后 1–80 个 Unicode 码点，最多 100 本
重复规则：允许相同书名，用不同 ID 区分，删除互不影响
数据边界：仅当前浏览器、当前网站来源保存，不跨设备同步
失败处理：无效输入不新增；保存失败明确提示；损坏数据不覆盖
暂不实现：登录、多人协作、AI 推荐、支付、共享书单

这里用“Unicode 码点”定义长度，便于和代码一致。它不总等于人眼看到的字符数量：组合表情可能由多个码点组成。实际产品可以另行选择按字素计数，但文案、实现和测试必须采用同一口径。

第三步：把需求变成可以演示的条件

A01 输入“我的第一本书”，提交后列表出现同名记录。
A02 输入仅空格的内容，显示错误，列表数量不变。
A03 将一本书勾选为已读，计数更新；刷新后状态仍然保留。
A04 删除其中一本书，不影响其他书；刷新后不会重新出现。
A05 浏览器无法保存时，不显示“已保存”，也不应用本次修改。
A06 手机上没有横向溢出，使用键盘能新增和勾选一本书。

它们是行为描述，不要求你使用某个具体函数，因此能真正验证结果。仅检查源码中有没有 localStorage 这个单词，无法证明刷新后数据仍然正确。

第四步：确认哪些内容属于下一阶段

如果你希望朋友打开同一个链接后看到你的书单，就需要共享数据方案、服务器接口和访问权限设计。当前静态原型只共享应用，每个浏览器保存自己的数据。这个差别要在开发前说明，不能等用户发现不同设备看不到记录时再解释。

提示词与使用说明

请评审下面的阅读清单需求，暂时不要写代码。
依次输出：核心使用流程、可能有歧义的规则、最小可实现范围、
正常与异常场景的验收条件。
只使用 HTML、CSS、原生 JavaScript 和浏览器本地存储。
不要自行加入登录、付费服务、外部 API 或构建工具。
如果某项需求无法仅靠这些技术完成，请说明原因并列出待决策项。

[粘贴本课需求说明与 A01–A06]

独立练习

先把答案写进本课笔记，再展开解析。以下人物、活动和数据均为教学用的虚构材料；练习记录请填写你实际完成的过程。

给定材料

用户说：我想做一个很厉害的阅读平台。
现实约束：一个人、一个下午、已有 HTML/CSS/JS 基础；先在本机运行。

你的任务

缩小为一个核心流程，写清输入、状态变化、成功提示与失败行为。列三项这版明确不做的功能。

完成后，对照参考解析

可定为：输入书名→添加列表→标记已读→刷新保留。空书名不添加；保存失败时明确提示。第一版不做账号、云同步、公开共享。验收不是“界面高级”，而是新增一条后刷新仍可见、已读状态保留、非法输入不破坏原记录。范围越小，越容易知道 AI 写出的代码是否真的完成任务。

验收与迁移

对照自己的成果逐项检查。未达到的项目，写明缺什么、怎样补；这些标准用于自查，不会自动标记课时完成。

有一个可从头到尾操作的主流程
至少一个失败状态与反馈
本机保存没有被描述为云同步

带回自己的场景

把想法写成“当用户做 X，应看到 Y；若 Z 失败，应当 W”，然后再让 AI 写代码。

延伸资料

浏览器存储的使用与限制 ↗。资料用于核对方法和技术边界，案例与练习由 Nextory 编写。