要用 AI 做学习工网页最容易低估的反而是需求拆得不够细。一开始我以为不过是把单词卡、口算题丢给 AI让它吐一个 HTML 页面出来就算完事。真跑过几轮之后发现一套稳定的做法要从“需求描述 → 提示词 → 代码生成 → 本地验证 → 数据批量替换”走完整才能做到真正拿来即用。这篇就当记录一次完整的实践过程。标题写“纯炫耀不卖课”确实没有卖课计划也不是在推销模板只是把当前跑通的一套方法拆开讲清楚。如果你正好也想给自家孩子、自己备考、或者给学生做一点轻量学习小工具下面这些内容可以直接照着试。1. 核心能力速览先用一张表把“用 AI 做学习小网页”这件事的关键属性列清楚。能力项说明项目类型AI 辅助开发的学习工具网页集合技术栈HTML CSS JavaScript纯静态页面无后端启动方式浏览器直接打开本地 .html 文件或部署为静态网站主要功能单词记忆卡片、口算练习、选择题自测、错题回顾、学习打卡硬件门槛几乎为零普通电脑和手机均可访问运行成本0 元静态页面不依赖服务器可以离线使用是否支持接口 API默认不需要。如需 AI 实时出题要自己接入模型服务接口是否支持批量任务支持。让 AI 一次生成多套题目或通过脚本批量注入数据适合场景个人学习、教学演示、轻量级知识自测、小范围分享从这张表能看出这个方向的定位不是做一个“产品级应用”而是用最低成本验证一个学习想法能不能跑通。我曾经试过在这个流程里引入 Vue 组件、引入后端数据库结果为了一个只能自己用的错题本反而花了大量时间处理环境问题。后来把技术栈砍到只剩浏览器原生能力整个项目反而稳定很多。2. 学习网页能覆盖哪些实际场景这类纯静态学习网页能覆盖的场景比多数人预想的要宽。这里列一部分实际做过的类型。2.1 背单词与记忆卡片最常见的类型。把单词数据放在数组里页面每次渲染一张卡片点击翻转显示释义支持上一张、下一张、随机复习。这个场景的技术复杂度很低但对交互体验要求高。卡片翻转动画、按钮位置、手机端触控区域都会影响实际使用。我做过的一个词卡页面初始需求只是“看单词想释义”后来逐步加了“标记生词”“只看生词”“乱序复习”三个功能。每次新增需求都回到 AI 对话框用自然语言描述让 AI 修改代码基本没有手写过复杂逻辑。2.2 数学口算与专项练习口算页面适合低年级学生。页面随机生成两位数的加减法输入答案后立即判断对错底部显示正确率。这个场景对 AI 生成能力几乎没有挑战重点在于出题范围控制。提示词里要明确写明“两位数以内”“不出现负数”“结果不超过 100”否则 AI 生成的题目经常超出范围。2.3 选择题与知识点自测这个场景更接近考试模式。一组题目每题四个选项选中后立即反馈对错最后统计得分。这类页面需要的数据结构比单词卡复杂一点需要保存题目、选项、正确答案、解析四个字段。如果让 AI 一次性生成 20 道完整题目经常出现选项重复或者正确答案漏标的情况所以更稳妥的做法是先让 AI 生成一个通用的题目渲染框架再用 JSON 数据填充题目内容。2.4 错题回顾与学习记录错题本页面不一定要连接数据库。用浏览器自带的 localStorage 就能保存错题数据页面关闭再打开记录仍然存在。这个方案虽然没有云端同步但对单机使用场景已经足够。我在做错题本时发现一个问题浏览器存储一旦清掉缓存错题记录也会消失。可以考虑增加一个导出功能把错题数据导出成 JSON 文件或者复制成文本保存。2.5 边界在哪里这套方式也有明显边界。它是纯静态页面没有账号系统没有多人协作没有云端同步不适合做需要教师批改、学习进度上报、班级管理的完整教学系统。另外如果学习内容需要动态更新比如每天从服务端拉取最新题库也超出了纯 HTML 的适用范围。内容层面还有一个必须提醒的边界不要用 AI 直接生成盗版教材、盗版题库也不要拿未经授权的图片、音频、视频做学习素材。学习工具本身没问题但素材来源必须合规。3. 环境准备与前置条件这个流程对环境和硬件的要求已经压到了最低。3.1 操作系统与浏览器Windows、macOS、Linux 都可以。浏览器建议用 Chrome 或 Edge因为它们的开发者工具比较完善调试页面问题时更方便。手机端用系统自带浏览器基本也能打开不过要留意布局是否适配。3.2 AI 工具需要一个可以生成代码的对话式 AI 网页端目前主流的大模型对话工具基本都有免费额度生成几百行的单文件 HTML 不是问题。这类任务关键是提示词写清楚而不是模型参数调多高。不需要本地部署大模型普通配置电脑完全够用。3.3 编辑器做简单修改也可以用自带记事本但强烈建议装一个 VS Code。原因不只是写代码方便而是 VS Code 右下角会显示编码格式能避免文件用 GBK 编码保存导致中文乱码的问题。3.4 可选本地服务器严格来说纯 HTML 文件双击就能打开不需要服务器。但如果页面里用到 fetch 加载本地 JSON 文件浏览器会限制本地文件访问这时需要一个简单的静态服务器。可以用 VS Code 的 Live Server 插件也可以在项目目录下运行# Python 3 自带静态服务器在当前目录启动 python -m http.server 8080然后在浏览器访问http://localhost:8080。后面做数据批量注入时会用到这个方式。4. 从一句话到学习网页的完整流程整个流程可以分为五个步骤需求描述、提示词撰写、代码生成、本地保存、验证迭代。4.1 先明确需求这步会被很多人跳过但恰恰最影响结果。不要直接对 AI 说“帮我做一个背单词网页”而是先自己回答几个问题这份学习工具是给谁用的在电脑上打开还是手机上打开学习内容是从哪里来的固定数据还是动态生成需要记录学习结果吗回答完这四个问题需求基本就清楚了。4.2 写提示词提示词要具体到页面布局、交互逻辑、数据位置。下面是一个可复用的模板你是一个前端开发工程师。请写一个单文件 HTML 页面功能是“单词速记卡片”。 需求如下 1. 页面标题为“四级高频词卡片”。 2. 每张卡片显示英文单词、音标。 3. 点击卡片可以翻转背面显示中文释义和例句。 4. 页面底部有“上一张”“下一张”“随机复习”按钮。 5. 所有单词存放在一个名为 wordList 的数组里方便我后续替换数据。 6. 样式要求卡片在页面居中按钮明显手机端可以正常点击。 7. 一次输出完整 HTML 代码不要输出解释。 单词数据 [ { word: abandon, phonetic: /əˈbændən/, meaning: 放弃抛弃, example: Never abandon your dream. } ]这段提示词里最关键的有三点指定单文件、指定数据位置、要求完整输出。把数据单独放在数组里后续替换成 100 个单词都非常快。4.3 生成与保存AI 输出代码后不要直接全选复制到 Word 里。正确做法是新建文件文件名用英文或数字比如word-card.html编码选 UTF-8把代码粘贴进去保存。文件后缀必须是.html不是.txt。双击文件浏览器打开页面正常渲染说明第一步成功。4.4 验证与迭代页面能打开只是开始要达到真正能用还要逐项验证单词数据是否完整、翻卡是否正常、按钮是否有效、手机端是否错位。如果发现问题直接复制报错信息回到 AI 对话框要求它修改。迭代速度非常快因为问题大多集中在局部逻辑。4.5 一个完整的单词卡片示例下面这段代码是一个最小可用的单词卡片页面是我用 AI 辅助调过两轮之后的版本可以直接复制运行。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title四级高频词卡片/title style body { font-family: system-ui, sans-serif; max-width: 640px; margin: 0 auto; padding: 24px; background: #f7f8fa; text-align: center; } .card { min-height: 260px; background: #ffffff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 24px; cursor: pointer; transition: transform 0.2s ease; padding: 20px; user-select: none; } .card.flipped { transform: rotateY(180deg); } .word { font-size: 32px; font-weight: 700; } .phonetic { color: #777; font-size: 16px; margin-top: 8px; } .meaning { font-size: 22px; margin-top: 16px; color: #333; } .example { font-size: 14px; color: #888; margin-top: 12px; } .btn-group button { font-size: 16px; padding: 10px 20px; margin: 6px; border: none; border-radius: 8px; background: #3b82f6; color: #fff; cursor: pointer; } .btn-group button:nth-child(2) { background: #10b981; } .btn-group button:nth-child(3) { background: #f59e0b; } #index { color: #999; font-size: 14px; margin-bottom: 12px; } /style /head body h2四级高频词卡片/h2 div idindex1 / 1/div div classcard idcard div classword idwordabandon/div div classphonetic idphonetic/əˈbændən//div div classmeaning idmeaning styledisplay:none;放弃抛弃/div div classexample idexample styledisplay:none;Never abandon your dream./div /div div classbtn-group button onclickprevCard()上一张/button button onclicknextCard()下一张/button button onclickshuffle()随机复习/button /div script const wordList [ { word: abandon, phonetic: /əˈbændən/, meaning: 放弃抛弃, example: Never abandon your dream. }, { word: ability, phonetic: /əˈbɪləti/, meaning: 能力, example: She has the ability to lead. }, { word: absorb, phonetic: /əbˈzɔːb/, meaning: 吸收吸引, example: Plants absorb water from the soil. } ]; let current 0; let flipped false; const card document.getElementById(card); const wordEl document.getElementById(word); const phoneticEl document.getElementById(phonetic); const meaningEl document.getElementById(meaning); const exampleEl document.getElementById(example); const indexEl document.getElementById(index); function render() { const item wordList[current]; wordEl.textContent item.word; phoneticEl.textContent item.phonetic; meaningEl.textContent item.meaning; exampleEl.textContent item.example; meaningEl.style.display none; exampleEl.style.display none; flipped false; card.classList.remove(flipped); indexEl.textContent (current 1) / wordList.length; } function flip() { flipped !flipped; meaningEl.style.display flipped ? block : none; exampleEl.style.display flipped ? block : none; card.classList.toggle(flipped, flipped); } function nextCard() { current (current 1) % wordList.length; render(); } function prevCard() { current (current - 1 wordList.length) % wordList.length; render(); } function shuffle() { current Math.floor(Math.random() * wordList.length); render(); } card.addEventListener(click, flip); render(); /script /body /html把wordList里的数据换成自己的单词这个页面就能直接变成一份词汇复习工具。AI 生成的代码可能会在细节上有出入但整体逻辑基本一致。5. 四类典型学习网页的生成与验证用前面这套流程可以快速生成不同类型的学习页面。每个类型都按“生成提示词 → 运行页面 → 判断是否成功 → 处理异常”的路径验证。5.1 单词记忆卡片测试目的是确认单词展示、卡片翻转、翻页按钮正常。输入素材是 10 到 20 个单词的数据数组。操作步骤是双击打开 HTML依次点击上一张、下一张、翻卡、随机复习。判断标准很直观单词与释义是否对应、翻卡动画是否生效、是否会出现单词越界。常见失败原因是 AI 生成的数组格式错误多了一个逗号或者引号不全页面直接白屏。处理方式是把控制台报错信息复制给 AI让它修复。5.2 数学口算练习给 AI 的提示词示例写一个单文件网页功能是“两位数加减法口算练习”。 每次随机生成一题数字范围在 10 到 99 之间答案为非负整数。 页面顶部显示当前题目下方是输入框和“提交答案”按钮。 提交后立刻显示对错并更新正确率和做题数。 每题做完自动生成下一题不需要手动点击下一题。 一次输出完整 HTML。这个页面的成功标准是连续做 20 题不会出现负数结果正确率计算准确提交空值时不会报错。最容易踩的坑是 AI 生成负数答案因为提示词没写“答案非负整数”所以在提示词里加限制条件是必须的。5.3 选择题自测选择题页面适合准备考试类场景。提示词里要明确给出题目数据结构题目数据用数组存储每个对象包含 question: 题目标题 options: 四个选项组成的数组 answer: 正确答案的索引从 0 开始 explanation: 答案解析 页面显示题目和四个选项按钮点击选项后高亮正确答案错误选项标红展示解析。 底部有“下一题”和“结束测验”按钮结束页显示得分与正确率。验证时用一组 5 到 10 题的数据人为把某题答案改成错误值确认页面是否能正确判断。这里要特别留意正确答案索引是否从 0 开始AI 偶尔会生成从 1 开始但下标又按 0 读取的逻辑导致判断错位。5.4 错题回顾错题页面我的做法是把错题数据保存在 localStorage 里用 AI 生成两个按钮“加入错题本”和“导出错题记录”。导出功能可以手动复制文本也可以生成一个可下载的文本文件后者体验更好一点。验证方法是做错一道题加入错题本刷新页面确认记录还在。如果记录丢失优先检查浏览器是否禁用了 localStorage或者代码里把数据存储到了 sessionStorage 而不是 localStorage这两者只在页面会话时长上有区别刷新后结果完全不同。6. 批量生成题目与数据注入单个页面做好之后下一步要考虑的是怎么批量生成题目数据。6.1 让 AI 一次生成多套数据对话式 AI 的上下文长度有限一次塞 500 道题很容易让输出截断。更稳定的做法是分批生成比如每次 20 道分 5 批。提示词可以这样写继续生成下一批 20 道题数据结构与上一批保持一致题目不要与之前重复。每次生成完把数据追加到同一个数组里这样可以拼接出一套百题规模的题库。6.2 用 JSON 数据驱动页面更工程化的方案是把题目数据单独抽到一个data.js文件页面用script srcdata.js/script引入。这样做的好处是页面逻辑和数据完全分离以后更新题目不需要动页面代码。例如单词页面里把wordList这个数组放到word-data.js文件里window.wordList [ { word: abandon, phonetic: /əˈbændən/, meaning: 放弃抛弃, example: Never abandon your dream. } ];页面内部不再定义数组而是读取window.wordList。更新单词时只改数据文件页面不动大大降低误操作概率。6.3 用脚本批量转换现有题库如果手里已经有一份 Excel 或 CSV 格式的题库可以让 AI 写一个转换脚本把表格数据变成 JSON 数组。这里给一个通用思路详细脚本需要根据实际表格格式调整import csv import json # 按实际文件路径调整 with open(words.csv, r, encodingutf-8) as f: reader csv.DictReader(f) words [] for row in reader: words.append({ word: row[word], phonetic: row[phonetic], meaning: row[meaning], example: row[example] }) with open(word-data.js, w, encodingutf-8) as f: f.write(window.wordList ) f.write(json.dumps(words, ensure_asciiFalse, indent2)) f.write(;)运行后生成的word-data.js可以直接被页面引入。注意 CSV 文件里的列名要和row[word]对应否则会报 KeyError。6.4 是否需要真正接入 API这些学习页面默认不需要 API。但如果想把 AI 实时出题能力直接集成进页面比如每次都生成不同题目那就要接模型服务商的接口。这里有两个建议不要直接在纯前端页面里暴露 API Key跨域和安全性都不好处理。如果一定要接入用后端服务转发请求前端只调用自己的后端接口。对个人学习场景来说先离线做好几十道题已经足够真没必要把大模型接到每个小页面里。7. 资源占用与性能观察这套方案的资源占用几乎可以忽略。单文件 HTML 一般在几 KB 到几十 KB浏览器打开后的内存占用很低老旧电脑和低端手机都能流畅运行。真正影响体验的其实是两个环节一是 AI 生成代码的等待时间二是页面内图片和外部依赖的加载时间。如果页面引入了外部 CDN 的字体、图标库或框架文件加载速度会明显变慢而且离线时无法使用。所以我的做法是尽量让页面自给自足不依赖任何外部资源。观察性能的方法很简单打开浏览器开发者工具在 Performance 面板点击 Record然后操作页面几秒钟查看是否有长时间占用的任务。静态页面一般不会出现明显卡顿如果出现多半是循环逻辑写得太差比如遍历一个超大数组时每次都操作 DOM。遇到这种情况把代码片段发给 AI 优化即可。如果打算部署到公网可以选择 GitHub Pages、Gitee Pages、Cloudflare Pages 这类静态托管服务上传一个 HTML 文件就能生成访问链接。个人使用不需要买服务器。8. 常见问题与排查方法问题现象可能原因排查方式解决方案双击 HTML 后页面空白文件后缀不是 .html或代码不完整检查文件名后缀和浏览器控制台报错新建 .html 文件重新粘贴完整代码中文显示乱码文件保存编码不是 UTF-8用编辑器查看右下角编码格式另存为 UTF-8 编码单词翻不了卡JS 语法错误或事件绑定问题打开控制台看报错信息将报错信息发给 AI 修复按钮点击后没反应按钮函数未定义或拼写不一致检查 onclick 是否和 JS 函数名一致统一函数名手机上布局错乱没有加 viewport 标签查看 head 里是否有 meta viewport加上 viewport 并调整 CSS 宽度localStorage 数据丢失浏览器清理缓存或改用隐私模式检查代码里用的是 localStorage 还是 sessionStorage统一使用 localStorage并提醒用户不要清缓存AI 生成的题目答案有误提示词没有约束数据规则抽查题目的正确性在提示词里加上“必须保证答案正确”关键数据人工复核本地打开时加载不了本地 JSON浏览器安全策略限制无法直接用 file 协议加载改用本地静态服务器或把数据写到 data.js 里页面能打开但没样式CSS 被 AI 放在错误位置或未保存完整检查 head 中是否有 style 标签重新生成代码部署到托管平台后 404文件路径或文件夹名错误检查仓库文件名是否为 index.html将入口页面命名为 index.html这些问题的共性特征是大部分都能通过浏览器控制台找到线索。看到红色报错不要慌复制报错信息回传给 AI它通常能指出问题代码的位置。9. 最佳实践与使用建议9.1 提示词做成模板同一类页面可以用固定模板减少每次描述成本。模板要包含技术栈、页面功能、交互逻辑、数据结构、输出格式要求。用模板生成的页面代码风格统一后续迭代也更方便。9.2 保持一个可运行的最小版本每完成一个功能就把当前能跑通的版本保存一份不要在一个版本上无限叠加功能。保存方式可以是单独文件夹也可以在文件名加版本号。这样做的好处是即使后续改崩了随时可以回退到一个稳定版本。9.3 数据与页面逻辑分离把学习数据抽到独立文件里页面只负责展示和交互。这是整套流程中最值得坚持的一条。数据分离后更新题目、调整知识点都不需要碰页面逻辑改出错的风险小很多。9.4 隐私与合规使用 AI 生成学习内容时注意不要上传包含个人身份信息的学生名单、考试成绩等敏感数据。如果必须上传先做脱敏处理。内容本身也要注意版权不要直接把别人的付费课程、试卷、教材原文丢给 AI 生成更不要做成网页后对外传播。学习工具可以辅助记忆和理解但内容的合法来源始终要守住。9.5 生成后必须人工复核AI 生成的内容并不是 100% 正确尤其是理科题目的答案、概念解释、例题解法。建议生成后全部过一遍或者至少抽样检查。给学习工具用答案错了会造成误导这个责任不能全部甩给 AI。9.6 控制功能范围一次只做一个核心功能。做一个口算工具就先别急着加历史记录、排行榜、多人对战。每加一个功能AI 生成的代码复杂度都会上升表面看是效率变低实际是 bug 排查成本变高。把单一功能做稳定比同时堆五六个功能更有价值。9.7 离线优先学习工具很可能要在没有网络的环境里使用比如自习室、考场周边。尽量把页面做成单文件、无外部依赖这样收藏到手机里也能随时打开。依赖 CDN 的页面一旦断网就会退化为白屏得不偿失。10. 总结与下一步这套“用 AI 做学习小网页”的流程最值得尝试的点是它把学习工具的开发门槛降到了极低不用配置环境不用学框架有一台普通电脑和浏览器就能开始。建议第一次验证时从最基础的单词卡片做起跑通“生成 → 修改 → 运行”这三步你就会发现后续所有学习页面都是同一个套路。最容易踩的坑集中在三个地方一是提示词没写清楚数据结构和操作逻辑生成结果反复返工二是直接把 AI 输出保存到 Word 或记事本导致编码和格式问题三是数据没有与页面逻辑分离后期改题都要动代码。把这三件事在第一次就用对后面的项目会顺畅很多。后续想继续深化可以把多个小页面整合成一套个人学习工具集或者把数据文件统一到一个目录配合脚本做批量更新。如果哪天对本地数据同步产生了需求再考虑加一个轻量后端也不迟。绝大部分个人学习场景纯静态页面已经足够。