用 AI 做学习小网页我最近试了不少今天把完整经验整理出来。起因是自己和家里人需要一些辅助学习的小工具比如背单词、整理错题、记录专注时间市面上的 App 要么功能太杂要么要收费要么数据格式不适合我们的用法。后来我发现用 AI 工具直接生成网页既能满足个性化需求又能把数据完全留在本地。这篇文章不卖课、不带货就是纯经验记录把我是怎么从零开始做这些页面、遇到哪些坑、怎么排查的都写清楚。如果你也想过“自己能不能做一个学习小工具”可以先看看我这条路线合不合适。1. 先想清楚这到底是在做什么事1.1 我做的不是产品是“能解决自己问题的页面”先交代清楚。我做的不是大型系统不是商业项目也不是能拿去融资的产品就是给身边人用的学习辅助网页。形态上基本都是单页面技术栈很朴素前端是 HTML、CSS、JavaScript数据存在浏览器的 localStorage 里没有后端没有数据库不需要安装环境双击一个 HTML 文件就能打开。我用 AI 工具来写这些页面的绝大部分代码。自己主要负责三件事说清楚需求、把报错信息搬给 AI、对生成结果做基本检查。这不是完全不懂代码的人也能复制的流程但也不是需要精通 Vue 和 React 才能做的项目。懂一点 HTML 和 JavaScript 的基本概念能读懂小段代码在干什么就已经足够了。我的目标也很明确页面能用、数据不丢、没有广告、不需要联网登录。至于界面是否精美、代码是否专业、性能是否最优这些都不在初期考虑范围内。先解决“能用”再谈“好用”。这个定位决定了后面所有技术选型和取舍也决定了整个过程可以控制在一个很轻的范围内不会越做越重。1.2 这件事适合谁不适合谁如果满足下面几个条件这篇文章值得看完你手头有具体的学习场景比如背单词、整理知识点、做复习提醒、错题复盘。你愿意花几分钟把需求描述成文字而不是希望 AI 自动读心。你能接受页面是“能用但不算精致”的而不是追求可以和商业产品媲美的交互体验。你只是想解决自己的问题不打算把它做成一个需要账号、支付、多人协作的系统。如果不满足这些条件更合理的做法是直接用现成工具。比如背单词可以用现成的词书软件做计划可以用日历工具并不需要亲手做一个网页。自己做小网页的收益在于数据在自己手里、功能可以按自己想要的方式调整、没有广告但对应的成本是你要花时间维护和迭代。这个账算清楚了后面才不会后悔。我做的三个典型页面是单词记忆卡片、错题知识点整理页、学习计时与专注统计。这三个覆盖了最常见的自学场景而且每一类都会遇到不同的 AI 编程问题。下面按实际落地顺序拆。2. 准备阶段工具、环境和第一次冒烟测试2.1 我用的 AI 工具组合现在能直接对话的 AI 工具很多我实际用过几类工具类型代表适合场景AI