夜雨聆风上周五晚上，儿子拿着英语课本让我帮他听写单词。
我看了看，Home, fruit, absorb... 二年级下学期的词汇表，大概50个。
我说行，我念你写。
念到第8个的时候，儿子突然抬头："爸爸，你念的absorb跟老师念的不一样啊。"
我愣了一下。赶紧打开手机查了一下——我念的是"呃b索b"，标准发音是"额b骚b"，重音在第二个音节。差了十万八千里（老脸一红）。
后面又连着错了两个。
儿子直接说："爸爸你别念了，你发音不准，我跟着你学就学歪了。"
好吧，被一个二年级的小学生嫌弃了。
我的英语四六级水平，阅读凑合，发音真不行。让孩子跟着我学，越学越偏。
去搜了一圈背单词App，广告满天飞，功能一堆用不上的，要充值VIP才能好好用。我就想要一个简单的——能导入单词、能看、能拼、能听标准发音，怎么就这么难找。
这个时候，我突然计上心头，打开电脑，开始让AI出手～做一个背单词脱机工具。
先说说我的感受再继续看AI是怎么干活的：
这个东西做出来之后，我自己都意外——不是因为技术有多牛，而是因为以前因为各种原因没空或没精力去做的事，现在在AI的加持下，任何人都可以实现需求个性化定制，不求人。
你不需要会写代码。你只需要把你的需求说清楚，AI帮你拆解、帮你写、帮你调。你要做的只是确认"这个功能对不对"和"这个体验舒不舒服"。
我把整个过程记录下来。如果你也有类似的需求——给孩子、给自己、给任何人做一个定制化的学习工具——可以直接复用。
第1轮：提需求，AI出计划
我跟AI说：
"新创建一个项目文件，帮我做一个网页版的背单词工具，纯前端，支持手动录入单词，能看记忆卡片，能听发音，能做拼写测试，拼错的自动进错题本多练几遍，数据存在本地。你先说一下你的计划，我确认后你再开始写代码实现。"
AI给了个计划：
技术选型：纯前端单文件HTML+CSS+JS，零依赖。数据全存localStorage。发音用浏览器内置Web Speech API。
功能模块（4个Tab页）：
数据存储结构：[vocab_words, wrong_book, test_history, settings]
UI：干净现代，移动端友好，暗色/亮色可切换
文件结构：一个index.html搞定。
我仔细检查了下，没什么问题，然后说"可以"。下面Ai就开始写代码了。
第2轮：字太小了
第一版出来，功能是对的，但整体显示上面字体和布局太小。
对于一个二年级的孩子，都不怎么会用电脑的人来说，很不友好。
所以我直接给AI说："文字和模块太小了，给小孩子用的。"
AI改了一堆CSS参数：
卡片尺寸从420×260改到560×380 英文单词字号从2.5rem改到4rem 按钮字号全部上调 基础字号提到18px 配色换成浅蓝紫 按钮加了悬停动画
改完效果好了很多，孩子盯着屏幕看不会太费劲了（主要是保护孩子视力）。
第3轮：加测试记录
5分钟不到就开发好了，然后我觉得每次测试完应该有个记录。做了多少题、对了多少、错了多少、用了多久——这些记下来，这样就算我们不在家，孩子做作业情况怎么样，我们也能及时掌握。
然后我又给AI说："每一次的拼写测试都生成一个记录，多少个单词、对了多少个、错了多少个、正确率以及测试时间都记下来，方便后面查看。"
然后AI就加了个testHistory数组，每次测试结束自动保存：时间、模式（看释义/听音）、总数、正确数、错误数、正确率、用时。最多保留最近100条记录。拼写测试页面下方多了一个历史记录表格，正确率高的标绿，低的标红。
这个功能加得很顺，没什么反复。
第4轮：易掌握功能
这个时候我作为一个万恶的产品经理（平时就很讨厌产品经理😂）想到了另一个需求：有些单词已经很熟了，但每次测试还是会抽到。太浪费时间。
考虑到这里，我直接给AI说："再加一个功能，如果一个单词在拼写测试的两个模式下分别连续正确10次，就会被标记为'易掌握'，以后测试都不会再出现，单词本里面要显示目前已掌握单词的数量。"
AI不厌其烦，然后加了wordMastery追踪：
每个单词记录两个连续正确次数：看释义拼写(seeStreak)和听音拼写(hearStreak) 测试时自动过滤已掌握单词，不会再出现 单词列表顶部显示"⭐已掌握 X个"，已掌握的单词金色标记 支持手动取消掌握标记
注意这里的设计：必须两种模式各对10次才算真正掌握。光看释义能拼对不算，光听音能拼对也不算——两条腿都得走。
第5轮：批量导入的全角竖线Bug
我拿儿子课本后面的单词表测试批量导入。我从教材配套资源里导出的格式是这样的：
hello / hi｜喂；你好（打招呼）｜int.｜Hello, I'm Tom.（你好，我是汤姆。）good morning｜早上好｜短语｜Good morning, teacher!（早上好，老师！）
四列：单词（含近义词）｜释义｜词性｜例句。用竖线分隔。
结果一直报错。
我自己不想去排查BUG，直接安排AI："批量导入总是报错，我输入的格式如下："把格式贴给了AI。
AI查了一小会儿后，定位到的问题是：我用的分隔符是全角竖线｜（U+FF5C），代码里写的是按半角|分割。中文输入法经常会自动切成全角，这种坑防不胜防。
不用我再吩咐，AI直接改了一行代码：分割前先replace(/｜/g,'|')，把全角竖线统一转成半角，两种分隔符都兼容。
改完之后导入正常了。
这种细节，不用的时候根本想不到。自己写代码的话，可能光debug就要半小时。
第6轮：卡片自动发音
记忆卡片本来要点一下才发音。我想着切换卡片的时候自动读多好，而且不只读单词，连例句一起读。（万恶的产品经理思维又来了）
我对AI说："优化：在卡片模式下，在保持现在播放语音的方式下，增加自动播放语音功能，切换新的一个单词卡片也自动播放。同时播放的内容不仅限于单词本身，还要包括例句（如果有的话）。"
AI也真听话😊加了个speakCard()函数：
单词后有例句时，读的内容是"单词. 例句" 例句朗读前会自动过滤掉中文翻译部分（括号里的中文和所有中文字符），只读英文 卡片渲染后300毫秒自动触发 切换卡片自动触发
效果很好。儿子现在翻开卡片就自动听到发音，不用手动点了。
第7轮：读完单词后还在念什么？
第二天儿子跟我说："爸，它读完单词和例句之后，后面还在念叨什么呢？"
我去听了一下，确实有问题。读完单词和例句之后，后面还有一段奇怪的声音。（这个之前真没发现）
我说好办，让我重新召唤AI出来改BUG："有问题，读完单词和例句后后面还在朗读什么呢？"
AI查了一下，定位到原因：虽然第6轮加了过滤中文的逻辑，但有些例句的中文翻译不在括号里，是直接写在后面的。比如"Hello, I'm Tom. （你好，我是汤姆。）"——括号过滤没覆盖到这种情况。浏览器TTS读到中文字符，会发出奇怪的混读声音。
然后AI直接把正则加强了一下：除了过滤括号内容，还额外过滤所有中文字符范围（\u4e00-\u9fff）和中文标点符号范围（\u3000-\u303f、\uff00-\uffef）。这样不管中文翻译是什么格式，都会被清掉。
改完之后正常了。
这种bug，一层一层剥。跟AI说一句现象，它就帮你追到底。
第8轮：跨电脑使用
因为我自己平时在家用电脑的场景也挺多的，所以就想把这个工具拷到家里另一台电脑上给儿子用。
我本着不懂代码的心态问AI："我想拿这个去别的电脑上用，需要拷贝哪些文件？"
AI干脆的说道：只需拷贝一个文件——index.html。项目目录下还有open.js和package.json，但那只是开发辅助脚本，运行时不需要。到别的电脑直接双击打开就能用，零依赖。
我试了一下，果然可以。一个HTML文件，放在哪台电脑都能用。
第9轮：发音音色不一样
拷到另一台电脑之后，我发现发音的音色变了。一台电脑上是个温柔的女声，这一台听起来明显不同，而且发音也不清晰。
我又去问Ai："为什么两个电脑发音发出来的音色不一样？在哪里能设置？"
AI解释：代码里只设了lang='en-US'，没有指定具体语音，浏览器会自己选。Mac系统默认是Samantha，Windows默认是Zira，所以音色不同。
AI说可以在浏览器控制台执行speechSynthesis.getVoices()查看所有可选语音，或者在代码里通过voice属性指定具体用哪个。
我想了想，先不改了。两台电脑音色不同不影响使用，只要能听清楚就行。
结果后来发现，不止是音色不同——Mac上的效果还有问题。
第10轮：Mac上声音嘶哑
我把HTML文件拷到Mac上给儿子用。结果一打开，发音像个嘶哑的人在说话，完全没法听。
我这次生气的给AI说："我的是Mac电脑，播出来的声音就像一个嘶哑的人在说话一样，这是怎么回事？"
AI先是给我道歉一番（大家好像猜到我用的是哪个AI工具了🤭），然后查了一下，定位到原因：Mac上speechSynthesis.getVoices()是异步加载的。页面加载完就开始朗读，但语音列表还没加载好，浏览器就随便抓了一个质量很差的默认语音来用。
AI给了修复方案：
改完之后，Mac上的发音正常了，是标准的Samantha女声，清晰好听。
这种跨平台的坑，不踩一次根本不知道。代码在Windows上跑得好好的，到了Mac上就翻车。
最终功能
来回改了10轮，最终的工具长这样：
单词录入：支持单个手动录入（单词+释义+词性+例句）+ 批量导入（兼容半角/全角竖线分隔符）+ 搜索过滤
记忆卡片：3D翻转效果，自动朗读单词+例句（自动过滤中文），大字体护眼，支持键盘左右箭头翻页
拼写测试：两种模式——看释义拼写 / 听音拼写。自动记录测试历史（最多100条），显示用时、正确率，错题详情一目了然
错题本：拼错的自动收集，可设置连续正确几次后自动移除（默认3次，可调）。支持"只练错题"模式
易掌握追踪：两种测试模式各连续正确10次，自动标记为已掌握，测试不再出现。单词列表显示已掌握数量
其他：暗色/亮色主题切换、Mac/Windows语音兼容、移动端适配
整个工具是一个单独的HTML文件。零依赖，不需要装任何东西，双击就能打开，拷到任何电脑都能用。
回到开头说的那个观点
这个东西技术含量不高。一个前端工程师可能觉得这有什么好写的。
但我想说的是——以前因为各种原因，我们没空或者没精力去做这种事。
我知道需要一个工具，但我手头有项目要赶、有需求要对、有会要开。花半天时间从零写一个背单词App？说实话性价比不高。市面上的App凑合能用，虽然不够好。
现在不一样了。
我把需求跟AI说清楚，它帮我拆功能、写代码、调样式、修bug。我要做的就是确认"这个功能对不对"和"这个体验好不好"。
10轮迭代，从字太小到全角竖线bug，从中文被朗读到Mac声音嘶哑——每一轮都是我发现一个问题，说一句，AI就去改。整个过程就像跟一个程序员搭档结对编程，你负责提需求、做判断，它负责写代码、查bug。
5分钟出原型，半小时调整细节，一个小时后孩子就能用。
这件事的意义不在于"省了多少钱"或者"技术多牛"。而在于——你终于可以把脑子里那些"如果有就好了"的想法，变成真实可用的东西。
孩子的背单词工具、自己的记账表格、项目的数据看板、团队的日报模板……这些事以前要么花钱找人做，要么忍着用不完美的现成工具，要么干脆算了。
现在不需要了。
这不是未来的事。这是今天就能做到的事。
我儿子现在每天晚上自己打开那个网页，背20个单词，做一轮拼写测试。他不知道这些代码是怎么来的，他只知道"这是我爸给我做的"。
这就够了。
如果你也想做一个类似的工具，我把完整代码整理了一下。公众号回复"背单词"获取完整HTML文件，直接保存就能用。
觉得有用的话，点个「在看」。
我是老傅，一个用AI给自己打工的程序员。每周分享AI工具实测、转型心得和行业观察。关注我，少走弯路。
