从一句想法，到一个能验收的小原型。

把范围缩到一次可以验证

适合掌握基础 HTML、CSS 和 JavaScript 的开发者或正在学习原型实现的产品人。本练习制作「个人阅读清单」：添加书名、标记已读、按状态筛选。先不接账号、支付或公共数据库。

写清输入、状态和边界 · 20 分钟

• 输入：书名，1–80 个字符。纯空白不能提交。
• 状态：未读、已读。筛选为全部、未读、已读。
• 保存：只保存在当前浏览器；清除本地数据会丢失。
• 异常：存储不可用时显示提示，不能假装保存成功。
• 可用性：键盘可操作，手机页面不横向溢出。

一次实现一个完整动作 · 40 分钟

请基于以下验收条件，用原生 HTML、CSS 和 JavaScript 实现阅读清单原型。先描述文件结构、数据格式和失败场景，再实现添加与显示。用户输入必须作为文本显示，不允许作为 HTML 执行。不引入外部服务、密钥、账号或统计脚本。解释如何本地运行，以及哪些部分仍需要人工测试。完成一个可验证的步骤后，再实现标记与筛选。

不要把一大段生成代码直接当作完成。先读输入处理、存储和 DOM 更新，再运行它。理解不了的片段要缩小并解释。

用验收表推动修改 · 40 分钟

• 添加合法书名后，只出现一条记录，输入框清空。
• 空白或超长输入被拦截，并显示可理解的原因。
• 输入包含尖括号的文本，页面依然只显示文字。
• 标记为已读后，筛选结果与数量同步更新。
• 刷新后记录仍在；存储失败时有明确提示。
• 在窄屏和仅使用键盘时完成同一流程。

把每次失败写成「操作—预期—实际结果」，连同相关代码交给 AI 修复。改完重走受影响流程，避免只验证新按钮。

交付一个可以接手的作品 · 20 分钟

提供源代码、运行方式、功能边界和验收记录。真实上线前，再检查依赖、权限、数据保护和部署配置。不要把原型中没有做的能力写进产品介绍。

继续深入

在「从想法到原型」课程中保存作品链接或附件，并记录一次你亲自发现、定位和修复的问题。能解释实现与取舍，比堆积功能更有价值。