尧图网页设计 
最近用 AI 做了几个帮助学习的小网页纯粹是个人兴趣不打算卖课也不搞知识付费。如果你也想知道怎么让 AI 帮你快速做出一个能用的学习工具这篇文章可以完整还原我的思路和过程。整篇文章会围绕一个核心不依赖后端、不做复杂架构用 AI 生成纯前端的单文件网页。每个案例都是可以直接双击打开的 HTML 文件代码完整可复制适合学生、教师、技术爱好者参考。你不需要先精通 JavaScript只要能描述清楚需求再跟着文章把代码跑起来就行。1. 为什么用 AI 做学习小网页1.1 这类网页解决了什么问题学习过程中的很多需求其实都很轻量。比如背单词需要闪卡复习需要随机测验做计划需要拆解任务。这些需求完全可以用一个简单网页实现不需要安装 App不需要注册账号也不需要复杂的服务器。传统写法的痛点在于大多数人并不熟悉前端开发。即使熟悉为一个几十行的功能去搭一套工程化项目也是杀鸡用牛刀。AI 辅助开发的价值就在这里你负责描述问题和验收结果AI 负责把页面结构、样式、交互逻辑一次生成出来。我做这类网页时通常只用一个原则能用单文件 HTML 完成的绝不拆项目。这样维护成本低文件也好分享发到网盘、聊天窗口、或者群里别人下载下来就能用。1.2 为什么选择纯前端单文件纯前端单文件的好处很明显不需要安装依赖浏览器直接打开。不依赖后端接口数据放在页面内或本地存储里。不会因为服务器到期、接口变更而失效。代码量可控方便阅读和修改。对于学习工具来说这个方案足够稳定。你背单词、做测验、生成计划这些功能对实时数据同步没有要求。本地保存足够满足需求。2. 环境准备与 AI 工具选择2.1 开发环境这类学习网页对环境要求非常低。我的开发环境如下操作系统Windows / macOS / Linux 均可浏览器任意现代浏览器推荐 Chrome 或 Edge编辑器VS Code普通文本编辑器也可以本地运行方式双击 HTML 文件或者在目录下执行python -m http.server 8080然后浏览器访问http://localhost:8080查看效果。如果你不清楚版本对应关系不需要担心。文章中用的都是 HTML5、CSS3、原生 JavaScript没有任何第三方框架。版本需要根据你的项目实际情况调整本文示例以常见环境为例重点演示配置思路和实现方法。2.2 AI 辅助工具的选型目前市面上的主流 AI 对话工具例如 DeepSeek、豆包、元宝、Kimi、通义千问等都能胜任“生成学习网页”这种任务。选择哪一款完全看个人使用习惯。我更建议选择支持联网检索且可以免费使用的工具方便在生成代码时补充一些最新语法知识。不过对本文的案例而言这些 AI 工具的基础文本生成能力已经足够不需要额外配置任何插件或 API Key。如果你想把 AI 能力集成到自己的项目里就应该去查阅对应平台的开放平台文档申请 API Key并处理好费用和权限控制。本文不展开讲集成问题只讲如何用对话式 AI 辅助开发。2.3 把需求描述清楚的 Prompt 方法AI 能不能一次生成符合预期的网页很大程度上取决于 Prompt 是否清晰。我常用的模板是请帮我生成一个完整的 HTML 文件功能如下 1. 页面用途... 2. 用户操作方式... 3. 页面展示内容... 4. 交互逻辑... 5. 数据存储方式本地存储 / 不存储 6. 样式要求简洁、居中、适合手机和电脑 请使用 HTML CSS JavaScript所有代码放在同一个 HTML 文件中。越具体的描述生成结果越接近预期。比如你说“做一个背单词工具”AI 只能自由发挥但如果你说“做一个单词闪卡页面正面显示英文单词点击卡片翻面显示中文释义下方有认识和不认识两个按钮点击后自动切换下一张卡片”效果就会好很多。这就是用 AI 做学习网页的核心思路把模糊想法拆成清晰需求再让 AI 生成代码最后自己运行验证并迭代。3. 核心思路从需求到网页的实现路径3.1 拆解需求每次动手之前先回答三个问题问题示例用户是谁学生正在背英语单词核心操作是什么看英文想中文再点击卡片验证结果如何展示标记认识/不认识到最后显示掌握率把这些信息写下来就可以转成 Prompt 给 AI。3.2 生成与验证AI 生成代码之后不要只是“看看”。强烈建议立刻把代码保存为.html文件然后在浏览器里打开。首次运行经常会有小问题例如按钮点击无效、样式错位、逻辑判断写反。这时候直接把浏览器控制台里的报错复制给 AI让它根据报错信息修复。这一步就是“验证闭环”。代码运行后点击按钮没有反应控制台报错Uncaught TypeError: Cannot read properties of null 请修复。AI 通常能顺着报错快速定位问题。3.3 迭代优化核心功能跑通之后再优化细节。迭代方向一般有这几类视觉优化调整颜色、字体、间距让页面更舒服。交互反馈点击后增加动画、音效或文字提示。数据持久化用 localStorage 保存学习记录刷新页面不丢失。扩展内容增加导入导出词库、切换学习模式等功能。每一轮迭代都可以继续用 AI 完成。我把这种工作方式总结为AI 负责实现你负责验收和确定方向。4. 完整实战三个学习小网页下面分享我实际做出来的三个小页面。它们之间没有依赖关系你可以单独复制运行。4.1 单词闪卡记忆页第一个页面解决背单词的场景卡片正面显示英文单词点击卡片翻面显示中文释义。底部两个按钮分别标记“认识”和“不认识”切换下一张卡片最后统计本次学习掌握率。Prompt 示例生成一个单词闪卡记忆页面功能如下 1. 页面居中显示一张卡片卡片正面显示英文单词背面显示中文释义。 2. 点击卡片后卡片翻转显示背面。 3. 卡片下方有“认识”和“不认识”两个按钮。 4. 点击按钮后自动切换到下一个单词。 5. 统计本轮学习正确率并在全部单词结束后显示。 6. 内置一个简单的单词数组至少包含 10 个单词。 7. 页面样式简洁、配色柔和适合长时间学习使用。 用单个 HTML 文件实现。完整代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title单词闪卡记忆页/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: PingFang SC, Microsoft YaHei, sans-serif; background: #f0f4f8; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { width: 90%; max-width: 480px; text-align: center; } h1 { font-size: 24px; color: #333; margin-bottom: 20px; } .card-wrapper { perspective: 1000px; margin-bottom: 24px; cursor: pointer; } .card { position: relative; width: 100%; height: 260px; transform-style: preserve-3d; transition: transform 0.5s; } .card.flipped { transform: rotateY(180deg); } .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; border-radius: 16px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); font-size: 30px; font-weight: 600; } .card-front { background: #ffffff; color: #1e293b; } .card-back { background: #2563eb; color: #ffffff; transform: rotateY(180deg); } .buttons { display: flex; gap: 16px; justify-content: center; margin-bottom: 20px; } .btn { border: none; padding: 12px 24px; border-radius: 10px; font-size: 16px; color: #fff; cursor: pointer; transition: opacity 0.2s; } .btn-know { background: #16a34a; } .btn-unknown { background: #dc2626; } .btn:hover { opacity: 0.85; } .progress { color: #64748b; font-size: 14px; } .result { display: none; background: #ffffff; border-radius: 16px; padding: 32px 20px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06); } .result h2 { font-size: 20px; color: #333; margin-bottom: 12px; } .result p { color: #64748b; font-size: 16px; } .btn-reset { margin-top: 20px; background: #2563eb; } /style /head body div classcontainer h1单词闪卡/h1 div classcard-wrapper idcardWrapper div classcard idcard div classcard-face card-front idfrontTextapple/div div classcard-face card-back idbackText苹果/div /div /div div classbuttons button classbtn btn-unknown idunknownBtn不认识/button button classbtn btn-know idknowBtn认识/button /div div classprogress idprogressText1 / 10/div div classresult idresultBox h2本次学习完成/h2 p idresultText正确率0%/p button classbtn btn-reset idresetBtn再学一轮/button /div /div script const wordList [ { en: apple, zh: 苹果 }, { en: book, zh: 书本 }, { en: computer, zh: 计算机 }, { en: dog, zh: 狗 }, { en: education, zh: 教育 }, { en: family, zh: 家庭 }, { en: garden, zh: 花园 }, { en: health, zh: 健康 }, { en: internet, zh: 互联网 }, { en: journey, zh: 旅行 } ]; let currentIndex 0; let knownCount 0; const cardWrapper document.getElementById(cardWrapper); const card document.getElementById(card); const frontText document.getElementById(frontText); const backText document.getElementById(backText); const knowBtn document.getElementById(knowBtn); const unknownBtn document.getElementById(unknownBtn); const progressText document.getElementById(progressText); const resultBox document.getElementById(resultBox); const resultText document.getElementById(resultText); const resetBtn document.getElementById(resetBtn); function loadWord() { const word wordList[currentIndex]; frontText.textContent word.en; backText.textContent word.zh; card.classList.remove(flipped); progressText.textContent (currentIndex 1) / wordList.length; } function finishStudy() { document.querySelector(.card-wrapper).style.display none; document.querySelector(.buttons).style.display none; progressText.style.display none; resultBox.style.display block; const rate Math.round((knownCount / wordList.length) * 100); resultText.textContent 正确率 rate %; } cardWrapper.addEventListener(click, function () { card.classList.toggle(flipped); }); knowBtn.addEventListener(click, function () { knownCount; currentIndex; if (currentIndex wordList.length) { finishStudy(); return; } loadWord(); }); unknownBtn.addEventListener(click, function () { currentIndex; if (currentIndex wordList.length) { finishStudy(); return; } loadWord(); }); resetBtn.addEventListener(click, function () { currentIndex 0; knownCount 0; document.querySelector(.card-wrapper).style.display block; document.querySelector(.buttons).style.display flex; progressText.style.display block; resultBox.style.display none; loadWord(); }); loadWord(); /script /body /html运行后点击卡片区域即可翻面。按钮切换单词全部完成后显示正确率。这个页面主要解释几个关键点backface-visibility: hidden和transform: rotateY(180deg)实现了翻卡片的 3D 效果。JavaScript 维护currentIndex和knownCount两个状态控制展示顺序和最终统计。“认识”按钮会累加正确数“不认识”按钮只切换下一张不计入正确数。后续可以让 AI 增加词库导入功能比如从文本框中粘贴单词列表或者接入本地存储。4.2 随机测验工具第二个页面用于日常测验。我从题库中随机抽题用户选择答案后立刻判断对错并记录总分。Prompt 示例生成一个随机测验页面功能如下 1. 内置一个 JavaScript 数组作为选择题题库每道题包含题目、四个选项、正确答案。 2. 每次从题库中随机抽取 5 道题。 3. 用户点击选项后高亮显示正确或错误。 4. 答完所有题目后显示得分和正确率。 5. 提供“重新测验”按钮。 6. 页面设计干净适合学习使用。 用单个 HTML 文件实现。完整代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title随机测验工具/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: PingFang SC, Microsoft YaHei, sans-serif; background: #f8fafc; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { width: 90%; max-width: 560px; background: #fff; border-radius: 16px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); padding: 28px; } h1 { font-size: 22px; color: #1e293b; margin-bottom: 16px; } .question { font-size: 18px; color: #334155; margin-bottom: 20px; line-height: 1.6; } .option-list { list-style: none; margin-bottom: 20px; } .option-item { border: 2px solid #e2e8f0; border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s; font-size: 15px; color: #334155; } .option-item:hover { border-color: #2563eb; background: #eff6ff; } .option-item.correct { border-color: #16a34a; background: #f0fdf4; color: #166534; } .option-item.wrong { border-color: #dc2626; background: #fef2f2; color: #991b1b; } .info-bar { display: flex; justify-content: space-between; align-items: center; color: #64748b; font-size: 14px; margin-bottom: 16px; } .btn { border: none; background: #2563eb; color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; cursor: pointer; } .btn:hover { opacity: 0.9; } .result { display: none; text-align: center; padding: 24px 0; } .result h2 { font-size: 24px; color: #1e293b; } .result p { font-size: 16px; color: #64748b; margin: 12px 0 20px; } /style /head body div classcontainer h1随机测验/h1 div classinfo-bar span idquestionNum第 1 题 / 共 5 题/span span idscoreText得分0/span /div div classquestion idquestion/div ul classoption-list idoptionList/ul button classbtn idnextBtn styledisplay: none;下一题/button div classresult idresultBox h2测验完成/h2 p idresultText/p button classbtn idresetBtn重新测验/button /div /div script const quizBank [ { question: 下列哪个不是编程语言, options: [Python, JavaScript, HTML, C], answer: 2 }, { question: HTTP 状态码 404 表示什么, options: [服务不可用, 找到页面, 授权失败, 页面不存在], answer: 3 }, { question: JavaScript 中哪个关键字用于声明常量, options: [var, let, const, static], answer: 2 }, { question: CSS 中哪个属性用于改变文字颜色, options: [font-size, text-color, color, background], answer: 2 }, { question: 下列哪种数据结构适合保存键值对, options: [数组, 对象, 链表, 栈], answer: 1 } ]; let selectedQuestions []; let currentIndex 0; let score 0; let answered false; const questionEl document.getElementById(question); const optionListEl document.getElementById(optionList); const questionNumEl document.getElementById(questionNum); const scoreTextEl document.getElementById(scoreText); const nextBtn document.getElementById(nextBtn); const resultBox document.getElementById(resultBox); const resultText document.getElementById(resultText); const resetBtn document.getElementById(resetBtn); function shuffle(arr) { const copy [...arr]; for (let i copy.length - 1; i 0; i--) { const j Math.floor(Math.random() * (i 1)); [copy[i], copy[j]] [copy[j], copy[i]]; } return copy; } function startQuiz() { selectedQuestions shuffle(quizBank).slice(0, 5); currentIndex 0; score 0; answered false; resultBox.style.display none; nextBtn.style.display none; document.querySelector(.info-bar).style.display flex; document.querySelector(.question).style.display block; optionListEl.style.display block; renderQuestion(); } function renderQuestion() { const q selectedQuestions[currentIndex]; questionEl.textContent q.question; optionListEl.innerHTML ; questionNumEl.textContent 第 (currentIndex 1) 题 / 共 selectedQuestions.length 题; scoreTextEl.textContent 得分 score; answered false; nextBtn.style.display none; q.options.forEach(function (text, index) { const li document.createElement(li); li.className option-item; li.textContent text; li.addEventListener(click, function () { if (answered) { return; } answered true; const options optionListEl.children; Array.from(options).forEach(function (item, i) { item.classList.remove(correct, wrong); if (i q.answer) { item.classList.add(correct); } else if (i index) { item.classList.add(wrong); } }); if (index q.answer) { score; } scoreTextEl.textContent 得分 score; if (currentIndex selectedQuestions.length - 1) { nextBtn.style.display inline-block; } else { setTimeout(showResult, 600); } }); optionListEl.appendChild(li); }); } function showResult() { document.querySelector(.info-bar).style.display none; document.querySelector(.question).style.display none; optionListEl.style.display none; nextBtn.style.display none; resultBox.style.display block; const rate Math.round((score / selectedQuestions.length) * 100); resultText.textContent 答对 score 题正确率 rate %; } nextBtn.addEventListener(click, function () { currentIndex; renderQuestion(); }); resetBtn.addEventListener(click, function () { startQuiz(); }); startQuiz(); /script /body /html在这个页面里AI 帮我处理了很多细节shuffle函数随机打乱题库避免每次测验顺序一致。选项点击后会先高亮正确答案再把用户选错的项标红这种反馈比只提示“对或错”更直观。所有状态用answered标记管理防止重复点击同一道题计分。如果你想换一门科目只需要改动quizBank数组中的题目内容即可。4.3 学习计划生成器第三个页面用来拆解学习计划。用户输入学习主题、每天可用时长、总天数页面自动按天生成任务清单。Prompt 示例生成一个学习计划生成器页面包含以下功能 1. 输入学习主题、每天可用学习时间小时、学习总天数。 2. 点击生成按钮后按照时间拆分学习阶段输出每一天的学习计划。 3. 计划采用列表展示并标记第几天。 4. 页面不依赖后端。 5. 样式清晰适合移动端阅读。 用单个 HTML 文件实现。完整代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title学习计划生成器/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: PingFang SC, Microsoft YaHei, sans-serif; background: #f1f5f9; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .container { width: 100%; max-width: 640px; background: #ffffff; border-radius: 16px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); padding: 28px; } h1 { font-size: 22px; color: #1e293b; margin-bottom: 20px; } .form-item { margin-bottom: 16px; } label { display: block; font-size: 14px; color: #475569; margin-bottom: 6px; } input[typetext], input[typenumber] { width: 100%; padding: 10px 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; outline: none; transition: border-color 0.2s; } input:focus { border-color: #2563eb; } .btn { border: none; background: #2563eb; color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 15px; cursor: pointer; width: 100%; transition: opacity 0.2s; } .btn:hover { opacity: 0.9; } .plan-list { margin-top: 24px; border-top: 1px solid #e2e8f0; padding-top: 16px; } .plan-day { background: #f8fafc; border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; } .plan-day h3 { font-size: 15px; color: #2563eb; margin-bottom: 6px; } .plan-day p { font-size: 14px; color: #475569; line-height: 1.6; } .tips { font-size: 13px; color: #94a3b8; margin-top: 16px; } /style /head body div classcontainer h1学习计划生成器/h1 div classform-item label fortopic学习主题/label input typetext idtopic placeholder例如Python 基础语法 / /div div classform-item label forhours每天可用学习时间小时/label input typenumber idhours min0.5 max12 step0.5 value2 / /div div classform-item label fordays学习总天数/label input typenumber iddays min1 max90 value7 / /div button classbtn idgenerateBtn生成学习计划/button div classplan-list idplanList/div div classtips提示每天先复习前一天内容再学习新内容效果会更好。/div /div script document.getElementById(generateBtn).addEventListener(click, function () { const topic document.getElementById(topic).value.trim(); const hours parseFloat(document.getElementById(hours).value); const days parseInt(document.getElementById(days).value, 10); if (!topic) { alert(请输入学习主题); return; } if (isNaN(hours) || hours 0) { alert(请填写有效的每日学习时长); return; } if (isNaN(days) || days 0) { alert(请填写有效的学习天数); return; } const planList document.getElementById(planList); planList.innerHTML ; const totalStudyHours hours * days; const basicHours hours * 0.6; const reviewHours hours * 0.2; const practiceHours hours * 0.2; for (let i 1; i days; i) { const div document.createElement(div); div.className plan-day; const title document.createElement(h3); title.textContent 第 i 天; const content document.createElement(p); if (i 1) { content.textContent 主题学习 topic 的入门概念。 预计 basicHours.toFixed(1) 小时用于理解新知识 practiceHours.toFixed(1) 小时用于做练习和整理笔记。; } else { content.textContent 主题推进 topic 的学习进度。 先用 reviewHours.toFixed(1) 小时复习前一天内容 再用 basicHours.toFixed(1) 小时学习新知识 最后用 practiceHours.toFixed(1) 小时完成实践任务。; } div.appendChild(title); div.appendChild(content); planList.appendChild(div); } }); /script /body /html这个页面比较简单但很实用。它展示了一个重要思路AI 生成的页面未必复杂关键是它能按照你的输入参数实时生成内容。这里的计划拆分逻辑是第一天以理解概念为主。后续每天复习旧知识、学习新知识、实践练习三部分。时间占比分别设为 60%、20%、20%。如果你有更好的学习方法和时间分配策略可以让 AI 修改basicHours、reviewHours、practiceHours的数值或者增加单独的休息日逻辑。4.4 如何把学习网页分享出去这几个网页都是单文件 HTML分享方式非常灵活直接发送.html文件别人用浏览器打开即可。将文件放到网盘或聊天工具适合团队内部共享。部署到静态托管平台例如 GitHub Pages、Gitee Pages、云开发静态托管等。静态部署时需要记住如果页面里有自定义域名、回调地址等配置需要按照托管平台的规则修改。对本地学习工具来说直接分享文件是最简单的方式。5. 常见问题与排查思路AI 生成网页时经常遇到几个问题。我把自己的排查思路整理成表格问题现象常见原因解决思路中文显示乱码HTML 缺少meta charsetUTF-8检查 head 区域是否声明 UTF-8 编码点击按钮没有反应JavaScript 报错或事件绑定失败打开浏览器控制台把报错信息发给 AI 修复页面样式全没了CSS 选择器写错或类名不一致检查class和 JS 中querySelector是否一致刷新后学习记录丢失没有使用 localStorage让 AI 增加本地存储功能在手机上排版混乱缺少 viewport 设置确认meta nameviewport是否存在按钮文字显示了但无法点击元素被其他层遮挡使用开发者工具检查元素的层级关系如果遇到控制台报错最快的处理方式是复制完整报错信息然后发给 AI页面加载后控制台报错内容是xxxxx 请分析原因并给出修复后的完整 HTML 文件代码。大多数情况下AI 可以直接给出修复结果。你只需要把修复后的代码替换到原文件中再验证一遍。6. 最佳实践与工程建议虽然这些只是学习小网页但工程上的严谨习惯还是值得保留。6.1 需求优先级比代码更重要做工具前先明确自己要解决什么问题。为了做一个“好看但没用”的页面会浪费大量时间。我通常先确认核心操作是什么用户拿到这个页面后第一步做什么只有把这两个问题想明白后面的开发才会顺畅。6.2 每次只改一处保留可回滚版本AI 生成代码后不要一次性提出一大堆修改需求。建议每次只提一个改动点例如“把按钮改成绿色”验证通过后再继续下一个改动。改动前把当前可用版本复制一份避免 AI 改挂之后无法回退。6.3 学习工具可以多利用本地存储对学习类网页localStorage 是一个很实用的能力。它可以保存单词学习进度、答题历史、计划内容。善用本地存储会让工具在关闭浏览器后依然保留用户数据。下面这段代码是 localStorage 的典型用法// 保存数据 localStorage.setItem(wordLevel, 50); // 读取数据 const level localStorage.getItem(wordLevel) || 0; // 删除数据 localStorage.removeItem(wordLevel);当你需要让 AI 增加数据保存功能时只要在需求里加一句“使用 localStorage 保存进度刷新页面后恢复”它就能自动实现。6.4 注意安全边界纯前端网页有它的安全边界。不要在页面里存放密码、API Key、个人敏感信息。如果学习工具涉及用户数据收集一定要明确告知用户数据只保存在本地不会上传到服务器。涉及认证、权限、队列等生产环境功能时一定要在测试环境验证并遵循最小权限原则。6.5 保持代码可维护性即使是 AI 生成的代码也应该保持结构清晰。代码里要有注释、变量命名要可读。我会在需求中要求 AI“给关键代码添加中文注释”这样以后修改的时候不用重新推理。7. 总结与继续优化的方向这篇文章分享了三个完整的学习辅助网页单词闪卡记忆页、随机测验工具、学习计划生成器。它们覆盖了学习过程中最典型的几个场景记忆、检测、规划。每个页面都来自 AI 辅助生成实现成本低但使用价值很高。如果你想继续深入可以从这些方向入手给单词闪卡增加词库导入导出功能让它支持任意语言的单词。给测验工具增加按知识点分类的题库并实现错题记录。给学习计划生成器增加导出为 Markdown 或文本的功能。尝试把多个工具合并成一个导航首页方便统一使用。学习一下 HTML5 的本地数据库 IndexedDB处理更大规模的学习数据。在学习过程中AI 能帮你省去很多重复工作但它不能替代你的判断。你要负责确认功能是否符合预期、数据是否正确、内容是否合规。把 AI 当成一个高效的编程伙伴而不是完全依赖它。如果你也想做出类似的学习小网页建议直接复制文章里的代码先跑通一个然后从你最常用的学习场景入手让 AI 帮你做一个真正属于你的小工具。 AI辅助开发：三个纯前端学习小网页实战
最近用 AI 做了几个帮助学习的小网页纯粹是个人兴趣不打算卖课也不搞知识付费。如果你也想知道怎么让 AI 帮你快速做出一个能用的学习工具这篇文章可以完整还原我的思路和过程。整篇文章会围绕一个核心不依赖后端、不做复杂架构用 AI 生成纯前端的单文件网页。每个案例都是可以直接双击打开的 HTML 文件代码完整可复制适合学生、教师、技术爱好者参考。你不需要先精通 JavaScript只要能描述清楚需求再跟着文章把代码跑起来就行。1. 为什么用 AI 做学习小网页1.1 这类网页解决了什么问题学习过程中的很多需求其实都很轻量。比如背单词需要闪卡复习需要随机测验做计划需要拆解任务。这些需求完全可以用一个简单网页实现不需要安装 App不需要注册账号也不需要复杂的服务器。传统写法的痛点在于大多数人并不熟悉前端开发。即使熟悉为一个几十行的功能去搭一套工程化项目也是杀鸡用牛刀。AI 辅助开发的价值就在这里你负责描述问题和验收结果AI 负责把页面结构、样式、交互逻辑一次生成出来。我做这类网页时通常只用一个原则能用单文件 HTML 完成的绝不拆项目。这样维护成本低文件也好分享发到网盘、聊天窗口、或者群里别人下载下来就能用。1.2 为什么选择纯前端单文件纯前端单文件的好处很明显不需要安装依赖浏览器直接打开。不依赖后端接口数据放在页面内或本地存储里。不会因为服务器到期、接口变更而失效。代码量可控方便阅读和修改。对于学习工具来说这个方案足够稳定。你背单词、做测验、生成计划这些功能对实时数据同步没有要求。本地保存足够满足需求。2. 环境准备与 AI 工具选择2.1 开发环境这类学习网页对环境要求非常低。我的开发环境如下操作系统Windows / macOS / Linux 均可浏览器任意现代浏览器推荐 Chrome 或 Edge编辑器VS Code普通文本编辑器也可以本地运行方式双击 HTML 文件或者在目录下执行python -m http.server 8080然后浏览器访问http://localhost:8080查看效果。如果你不清楚版本对应关系不需要担心。文章中用的都是 HTML5、CSS3、原生 JavaScript没有任何第三方框架。版本需要根据你的项目实际情况调整本文示例以常见环境为例重点演示配置思路和实现方法。2.2 AI 辅助工具的选型目前市面上的主流 AI 对话工具例如 DeepSeek、豆包、元宝、Kimi、通义千问等都能胜任“生成学习网页”这种任务。选择哪一款完全看个人使用习惯。我更建议选择支持联网检索且可以免费使用的工具方便在生成代码时补充一些最新语法知识。不过对本文的案例而言这些 AI 工具的基础文本生成能力已经足够不需要额外配置任何插件或 API Key。如果你想把 AI 能力集成到自己的项目里就应该去查阅对应平台的开放平台文档申请 API Key并处理好费用和权限控制。本文不展开讲集成问题只讲如何用对话式 AI 辅助开发。2.3 把需求描述清楚的 Prompt 方法AI 能不能一次生成符合预期的网页很大程度上取决于 Prompt 是否清晰。我常用的模板是请帮我生成一个完整的 HTML 文件功能如下 1. 页面用途... 2. 用户操作方式... 3. 页面展示内容... 4. 交互逻辑... 5. 数据存储方式本地存储 / 不存储 6. 样式要求简洁、居中、适合手机和电脑 请使用 HTML CSS JavaScript所有代码放在同一个 HTML 文件中。越具体的描述生成结果越接近预期。比如你说“做一个背单词工具”AI 只能自由发挥但如果你说“做一个单词闪卡页面正面显示英文单词点击卡片翻面显示中文释义下方有认识和不认识两个按钮点击后自动切换下一张卡片”效果就会好很多。这就是用 AI 做学习网页的核心思路把模糊想法拆成清晰需求再让 AI 生成代码最后自己运行验证并迭代。3. 核心思路从需求到网页的实现路径3.1 拆解需求每次动手之前先回答三个问题问题示例用户是谁学生正在背英语单词核心操作是什么看英文想中文再点击卡片验证结果如何展示标记认识/不认识到最后显示掌握率把这些信息写下来就可以转成 Prompt 给 AI。3.2 生成与验证AI 生成代码之后不要只是“看看”。强烈建议立刻把代码保存为.html文件然后在浏览器里打开。首次运行经常会有小问题例如按钮点击无效、样式错位、逻辑判断写反。这时候直接把浏览器控制台里的报错复制给 AI让它根据报错信息修复。这一步就是“验证闭环”。代码运行后点击按钮没有反应控制台报错Uncaught TypeError: Cannot read properties of null 请修复。AI 通常能顺着报错快速定位问题。3.3 迭代优化核心功能跑通之后再优化细节。迭代方向一般有这几类视觉优化调整颜色、字体、间距让页面更舒服。交互反馈点击后增加动画、音效或文字提示。数据持久化用 localStorage 保存学习记录刷新页面不丢失。扩展内容增加导入导出词库、切换学习模式等功能。每一轮迭代都可以继续用 AI 完成。我把这种工作方式总结为AI 负责实现你负责验收和确定方向。4. 完整实战三个学习小网页下面分享我实际做出来的三个小页面。它们之间没有依赖关系你可以单独复制运行。4.1 单词闪卡记忆页第一个页面解决背单词的场景卡片正面显示英文单词点击卡片翻面显示中文释义。底部两个按钮分别标记“认识”和“不认识”切换下一张卡片最后统计本次学习掌握率。Prompt 示例生成一个单词闪卡记忆页面功能如下 1. 页面居中显示一张卡片卡片正面显示英文单词背面显示中文释义。 2. 点击卡片后卡片翻转显示背面。 3. 卡片下方有“认识”和“不认识”两个按钮。 4. 点击按钮后自动切换到下一个单词。 5. 统计本轮学习正确率并在全部单词结束后显示。 6. 内置一个简单的单词数组至少包含 10 个单词。 7. 页面样式简洁、配色柔和适合长时间学习使用。 用单个 HTML 文件实现。完整代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title单词闪卡记忆页/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: PingFang SC, Microsoft YaHei, sans-serif; background: #f0f4f8; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { width: 90%; max-width: 480px; text-align: center; } h1 { font-size: 24px; color: #333; margin-bottom: 20px; } .card-wrapper { perspective: 1000px; margin-bottom: 24px; cursor: pointer; } .card { position: relative; width: 100%; height: 260px; transform-style: preserve-3d; transition: transform 0.5s; } .card.flipped { transform: rotateY(180deg); } .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; border-radius: 16px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); font-size: 30px; font-weight: 600; } .card-front { background: #ffffff; color: #1e293b; } .card-back { background: #2563eb; color: #ffffff; transform: rotateY(180deg); } .buttons { display: flex; gap: 16px; justify-content: center; margin-bottom: 20px; } .btn { border: none; padding: 12px 24px; border-radius: 10px; font-size: 16px; color: #fff; cursor: pointer; transition: opacity 0.2s; } .btn-know { background: #16a34a; } .btn-unknown { background: #dc2626; } .btn:hover { opacity: 0.85; } .progress { color: #64748b; font-size: 14px; } .result { display: none; background: #ffffff; border-radius: 16px; padding: 32px 20px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06); } .result h2 { font-size: 20px; color: #333; margin-bottom: 12px; } .result p { color: #64748b; font-size: 16px; } .btn-reset { margin-top: 20px; background: #2563eb; } /style /head body div classcontainer h1单词闪卡/h1 div classcard-wrapper idcardWrapper div classcard idcard div classcard-face card-front idfrontTextapple/div div classcard-face card-back idbackText苹果/div /div /div div classbuttons button classbtn btn-unknown idunknownBtn不认识/button button classbtn btn-know idknowBtn认识/button /div div classprogress idprogressText1 / 10/div div classresult idresultBox h2本次学习完成/h2 p idresultText正确率0%/p button classbtn btn-reset idresetBtn再学一轮/button /div /div script const wordList [ { en: apple, zh: 苹果 }, { en: book, zh: 书本 }, { en: computer, zh: 计算机 }, { en: dog, zh: 狗 }, { en: education, zh: 教育 }, { en: family, zh: 家庭 }, { en: garden, zh: 花园 }, { en: health, zh: 健康 }, { en: internet, zh: 互联网 }, { en: journey, zh: 旅行 } ]; let currentIndex 0; let knownCount 0; const cardWrapper document.getElementById(cardWrapper); const card document.getElementById(card); const frontText document.getElementById(frontText); const backText document.getElementById(backText); const knowBtn document.getElementById(knowBtn); const unknownBtn document.getElementById(unknownBtn); const progressText document.getElementById(progressText); const resultBox document.getElementById(resultBox); const resultText document.getElementById(resultText); const resetBtn document.getElementById(resetBtn); function loadWord() { const word wordList[currentIndex]; frontText.textContent word.en; backText.textContent word.zh; card.classList.remove(flipped); progressText.textContent (currentIndex 1) / wordList.length; } function finishStudy() { document.querySelector(.card-wrapper).style.display none; document.querySelector(.buttons).style.display none; progressText.style.display none; resultBox.style.display block; const rate Math.round((knownCount / wordList.length) * 100); resultText.textContent 正确率 rate %; } cardWrapper.addEventListener(click, function () { card.classList.toggle(flipped); }); knowBtn.addEventListener(click, function () { knownCount; currentIndex; if (currentIndex wordList.length) { finishStudy(); return; } loadWord(); }); unknownBtn.addEventListener(click, function () { currentIndex; if (currentIndex wordList.length) { finishStudy(); return; } loadWord(); }); resetBtn.addEventListener(click, function () { currentIndex 0; knownCount 0; document.querySelector(.card-wrapper).style.display block; document.querySelector(.buttons).style.display flex; progressText.style.display block; resultBox.style.display none; loadWord(); }); loadWord(); /script /body /html运行后点击卡片区域即可翻面。按钮切换单词全部完成后显示正确率。这个页面主要解释几个关键点backface-visibility: hidden和transform: rotateY(180deg)实现了翻卡片的 3D 效果。JavaScript 维护currentIndex和knownCount两个状态控制展示顺序和最终统计。“认识”按钮会累加正确数“不认识”按钮只切换下一张不计入正确数。后续可以让 AI 增加词库导入功能比如从文本框中粘贴单词列表或者接入本地存储。4.2 随机测验工具第二个页面用于日常测验。我从题库中随机抽题用户选择答案后立刻判断对错并记录总分。Prompt 示例生成一个随机测验页面功能如下 1. 内置一个 JavaScript 数组作为选择题题库每道题包含题目、四个选项、正确答案。 2. 每次从题库中随机抽取 5 道题。 3. 用户点击选项后高亮显示正确或错误。 4. 答完所有题目后显示得分和正确率。 5. 提供“重新测验”按钮。 6. 页面设计干净适合学习使用。 用单个 HTML 文件实现。完整代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title随机测验工具/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: PingFang SC, Microsoft YaHei, sans-serif; background: #f8fafc; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { width: 90%; max-width: 560px; background: #fff; border-radius: 16px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); padding: 28px; } h1 { font-size: 22px; color: #1e293b; margin-bottom: 16px; } .question { font-size: 18px; color: #334155; margin-bottom: 20px; line-height: 1.6; } .option-list { list-style: none; margin-bottom: 20px; } .option-item { border: 2px solid #e2e8f0; border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s; font-size: 15px; color: #334155; } .option-item:hover { border-color: #2563eb; background: #eff6ff; } .option-item.correct { border-color: #16a34a; background: #f0fdf4; color: #166534; } .option-item.wrong { border-color: #dc2626; background: #fef2f2; color: #991b1b; } .info-bar { display: flex; justify-content: space-between; align-items: center; color: #64748b; font-size: 14px; margin-bottom: 16px; } .btn { border: none; background: #2563eb; color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; cursor: pointer; } .btn:hover { opacity: 0.9; } .result { display: none; text-align: center; padding: 24px 0; } .result h2 { font-size: 24px; color: #1e293b; } .result p { font-size: 16px; color: #64748b; margin: 12px 0 20px; } /style /head body div classcontainer h1随机测验/h1 div classinfo-bar span idquestionNum第 1 题 / 共 5 题/span span idscoreText得分0/span /div div classquestion idquestion/div ul classoption-list idoptionList/ul button classbtn idnextBtn styledisplay: none;下一题/button div classresult idresultBox h2测验完成/h2 p idresultText/p button classbtn idresetBtn重新测验/button /div /div script const quizBank [ { question: 下列哪个不是编程语言, options: [Python, JavaScript, HTML, C], answer: 2 }, { question: HTTP 状态码 404 表示什么, options: [服务不可用, 找到页面, 授权失败, 页面不存在], answer: 3 }, { question: JavaScript 中哪个关键字用于声明常量, options: [var, let, const, static], answer: 2 }, { question: CSS 中哪个属性用于改变文字颜色, options: [font-size, text-color, color, background], answer: 2 }, { question: 下列哪种数据结构适合保存键值对, options: [数组, 对象, 链表, 栈], answer: 1 } ]; let selectedQuestions []; let currentIndex 0; let score 0; let answered false; const questionEl document.getElementById(question); const optionListEl document.getElementById(optionList); const questionNumEl document.getElementById(questionNum); const scoreTextEl document.getElementById(scoreText); const nextBtn document.getElementById(nextBtn); const resultBox document.getElementById(resultBox); const resultText document.getElementById(resultText); const resetBtn document.getElementById(resetBtn); function shuffle(arr) { const copy [...arr]; for (let i copy.length - 1; i 0; i--) { const j Math.floor(Math.random() * (i 1)); [copy[i], copy[j]] [copy[j], copy[i]]; } return copy; } function startQuiz() { selectedQuestions shuffle(quizBank).slice(0, 5); currentIndex 0; score 0; answered false; resultBox.style.display none; nextBtn.style.display none; document.querySelector(.info-bar).style.display flex; document.querySelector(.question).style.display block; optionListEl.style.display block; renderQuestion(); } function renderQuestion() { const q selectedQuestions[currentIndex]; questionEl.textContent q.question; optionListEl.innerHTML ; questionNumEl.textContent 第 (currentIndex 1) 题 / 共 selectedQuestions.length 题; scoreTextEl.textContent 得分 score; answered false; nextBtn.style.display none; q.options.forEach(function (text, index) { const li document.createElement(li); li.className option-item; li.textContent text; li.addEventListener(click, function () { if (answered) { return; } answered true; const options optionListEl.children; Array.from(options).forEach(function (item, i) { item.classList.remove(correct, wrong); if (i q.answer) { item.classList.add(correct); } else if (i index) { item.classList.add(wrong); } }); if (index q.answer) { score; } scoreTextEl.textContent 得分 score; if (currentIndex selectedQuestions.length - 1) { nextBtn.style.display inline-block; } else { setTimeout(showResult, 600); } }); optionListEl.appendChild(li); }); } function showResult() { document.querySelector(.info-bar).style.display none; document.querySelector(.question).style.display none; optionListEl.style.display none; nextBtn.style.display none; resultBox.style.display block; const rate Math.round((score / selectedQuestions.length) * 100); resultText.textContent 答对 score 题正确率 rate %; } nextBtn.addEventListener(click, function () { currentIndex; renderQuestion(); }); resetBtn.addEventListener(click, function () { startQuiz(); }); startQuiz(); /script /body /html在这个页面里AI 帮我处理了很多细节shuffle函数随机打乱题库避免每次测验顺序一致。选项点击后会先高亮正确答案再把用户选错的项标红这种反馈比只提示“对或错”更直观。所有状态用answered标记管理防止重复点击同一道题计分。如果你想换一门科目只需要改动quizBank数组中的题目内容即可。4.3 学习计划生成器第三个页面用来拆解学习计划。用户输入学习主题、每天可用时长、总天数页面自动按天生成任务清单。Prompt 示例生成一个学习计划生成器页面包含以下功能 1. 输入学习主题、每天可用学习时间小时、学习总天数。 2. 点击生成按钮后按照时间拆分学习阶段输出每一天的学习计划。 3. 计划采用列表展示并标记第几天。 4. 页面不依赖后端。 5. 样式清晰适合移动端阅读。 用单个 HTML 文件实现。完整代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title学习计划生成器/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: PingFang SC, Microsoft YaHei, sans-serif; background: #f1f5f9; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .container { width: 100%; max-width: 640px; background: #ffffff; border-radius: 16px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); padding: 28px; } h1 { font-size: 22px; color: #1e293b; margin-bottom: 20px; } .form-item { margin-bottom: 16px; } label { display: block; font-size: 14px; color: #475569; margin-bottom: 6px; } input[typetext], input[typenumber] { width: 100%; padding: 10px 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; outline: none; transition: border-color 0.2s; } input:focus { border-color: #2563eb; } .btn { border: none; background: #2563eb; color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 15px; cursor: pointer; width: 100%; transition: opacity 0.2s; } .btn:hover { opacity: 0.9; } .plan-list { margin-top: 24px; border-top: 1px solid #e2e8f0; padding-top: 16px; } .plan-day { background: #f8fafc; border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; } .plan-day h3 { font-size: 15px; color: #2563eb; margin-bottom: 6px; } .plan-day p { font-size: 14px; color: #475569; line-height: 1.6; } .tips { font-size: 13px; color: #94a3b8; margin-top: 16px; } /style /head body div classcontainer h1学习计划生成器/h1 div classform-item label fortopic学习主题/label input typetext idtopic placeholder例如Python 基础语法 / /div div classform-item label forhours每天可用学习时间小时/label input typenumber idhours min0.5 max12 step0.5 value2 / /div div classform-item label fordays学习总天数/label input typenumber iddays min1 max90 value7 / /div button classbtn idgenerateBtn生成学习计划/button div classplan-list idplanList/div div classtips提示每天先复习前一天内容再学习新内容效果会更好。/div /div script document.getElementById(generateBtn).addEventListener(click, function () { const topic document.getElementById(topic).value.trim(); const hours parseFloat(document.getElementById(hours).value); const days parseInt(document.getElementById(days).value, 10); if (!topic) { alert(请输入学习主题); return; } if (isNaN(hours) || hours 0) { alert(请填写有效的每日学习时长); return; } if (isNaN(days) || days 0) { alert(请填写有效的学习天数); return; } const planList document.getElementById(planList); planList.innerHTML ; const totalStudyHours hours * days; const basicHours hours * 0.6; const reviewHours hours * 0.2; const practiceHours hours * 0.2; for (let i 1; i days; i) { const div document.createElement(div); div.className plan-day; const title document.createElement(h3); title.textContent 第 i 天; const content document.createElement(p); if (i 1) { content.textContent 主题学习 topic 的入门概念。 预计 basicHours.toFixed(1) 小时用于理解新知识 practiceHours.toFixed(1) 小时用于做练习和整理笔记。; } else { content.textContent 主题推进 topic 的学习进度。 先用 reviewHours.toFixed(1) 小时复习前一天内容 再用 basicHours.toFixed(1) 小时学习新知识 最后用 practiceHours.toFixed(1) 小时完成实践任务。; } div.appendChild(title); div.appendChild(content); planList.appendChild(div); } }); /script /body /html这个页面比较简单但很实用。它展示了一个重要思路AI 生成的页面未必复杂关键是它能按照你的输入参数实时生成内容。这里的计划拆分逻辑是第一天以理解概念为主。后续每天复习旧知识、学习新知识、实践练习三部分。时间占比分别设为 60%、20%、20%。如果你有更好的学习方法和时间分配策略可以让 AI 修改basicHours、reviewHours、practiceHours的数值或者增加单独的休息日逻辑。4.4 如何把学习网页分享出去这几个网页都是单文件 HTML分享方式非常灵活直接发送.html文件别人用浏览器打开即可。将文件放到网盘或聊天工具适合团队内部共享。部署到静态托管平台例如 GitHub Pages、Gitee Pages、云开发静态托管等。静态部署时需要记住如果页面里有自定义域名、回调地址等配置需要按照托管平台的规则修改。对本地学习工具来说直接分享文件是最简单的方式。5. 常见问题与排查思路AI 生成网页时经常遇到几个问题。我把自己的排查思路整理成表格问题现象常见原因解决思路中文显示乱码HTML 缺少meta charsetUTF-8检查 head 区域是否声明 UTF-8 编码点击按钮没有反应JavaScript 报错或事件绑定失败打开浏览器控制台把报错信息发给 AI 修复页面样式全没了CSS 选择器写错或类名不一致检查class和 JS 中querySelector是否一致刷新后学习记录丢失没有使用 localStorage让 AI 增加本地存储功能在手机上排版混乱缺少 viewport 设置确认meta nameviewport是否存在按钮文字显示了但无法点击元素被其他层遮挡使用开发者工具检查元素的层级关系如果遇到控制台报错最快的处理方式是复制完整报错信息然后发给 AI页面加载后控制台报错内容是xxxxx 请分析原因并给出修复后的完整 HTML 文件代码。大多数情况下AI 可以直接给出修复结果。你只需要把修复后的代码替换到原文件中再验证一遍。6. 最佳实践与工程建议虽然这些只是学习小网页但工程上的严谨习惯还是值得保留。6.1 需求优先级比代码更重要做工具前先明确自己要解决什么问题。为了做一个“好看但没用”的页面会浪费大量时间。我通常先确认核心操作是什么用户拿到这个页面后第一步做什么只有把这两个问题想明白后面的开发才会顺畅。6.2 每次只改一处保留可回滚版本AI 生成代码后不要一次性提出一大堆修改需求。建议每次只提一个改动点例如“把按钮改成绿色”验证通过后再继续下一个改动。改动前把当前可用版本复制一份避免 AI 改挂之后无法回退。6.3 学习工具可以多利用本地存储对学习类网页localStorage 是一个很实用的能力。它可以保存单词学习进度、答题历史、计划内容。善用本地存储会让工具在关闭浏览器后依然保留用户数据。下面这段代码是 localStorage 的典型用法// 保存数据 localStorage.setItem(wordLevel, 50); // 读取数据 const level localStorage.getItem(wordLevel) || 0; // 删除数据 localStorage.removeItem(wordLevel);当你需要让 AI 增加数据保存功能时只要在需求里加一句“使用 localStorage 保存进度刷新页面后恢复”它就能自动实现。6.4 注意安全边界纯前端网页有它的安全边界。不要在页面里存放密码、API Key、个人敏感信息。如果学习工具涉及用户数据收集一定要明确告知用户数据只保存在本地不会上传到服务器。涉及认证、权限、队列等生产环境功能时一定要在测试环境验证并遵循最小权限原则。6.5 保持代码可维护性即使是 AI 生成的代码也应该保持结构清晰。代码里要有注释、变量命名要可读。我会在需求中要求 AI“给关键代码添加中文注释”这样以后修改的时候不用重新推理。7. 总结与继续优化的方向这篇文章分享了三个完整的学习辅助网页单词闪卡记忆页、随机测验工具、学习计划生成器。它们覆盖了学习过程中最典型的几个场景记忆、检测、规划。每个页面都来自 AI 辅助生成实现成本低但使用价值很高。如果你想继续深入可以从这些方向入手给单词闪卡增加词库导入导出功能让它支持任意语言的单词。给测验工具增加按知识点分类的题库并实现错题记录。给学习计划生成器增加导出为 Markdown 或文本的功能。尝试把多个工具合并成一个导航首页方便统一使用。学习一下 HTML5 的本地数据库 IndexedDB处理更大规模的学习数据。在学习过程中AI 能帮你省去很多重复工作但它不能替代你的判断。你要负责确认功能是否符合预期、数据是否正确、内容是否合规。把 AI 当成一个高效的编程伙伴而不是完全依赖它。如果你也想做出类似的学习小网页建议直接复制文章里的代码先跑通一个然后从你最常用的学习场景入手让 AI 帮你做一个真正属于你的小工具。