不写代码,也能用AI给娃做生字学习工具

大家好呀，我是大鹏。我正在挑战用AI解决100个真实问题～

这次做一个给孩子学生字的小工具：能看笔顺、练写字，还能打印练习题。

以下这个问题是很多家长都会遇到的：

孩子放学回来，家长问一句“今天学了哪些生字”，这句话很轻松。

难的是下一句：这些字，怎么带他学。

笔顺怎么讲，词语怎么解释，孩子会读了是不是就会用了，最后还得找几道对应的题、准备一张能写的练字纸。一晚上的辅导，常常要在课本、手机和练习册之间来回切换。

这次做的“每日一练”就是从这个场景长出来的：输入孩子当天学的生字，先带着看、读、理解，再安排练字和检测。应用分成“辅导端”和“测练端”，都面向家长在家带孩子学习。辅导端承担讲解和引导，测练端让孩子动笔，家长对照答案检查掌握情况。

这一整条流程录下来是这样的：

 

每日一练：选当天生字、字卡讲解、笔顺演示到打印预览

不过在做这个案例之前，我想先说一个我自己用 AI 工具时最容易忽略的问题：项目做完了，文件到底放在哪里？下次要改，又从哪儿接着做？

之前用的工具没有独立的“工作空间”模块，很多人习惯打开对话就直接提需求，等页面、图片和修改版本多起来，才发现文件不好找，也分不清哪个是最终版。

 

从对话界面进入“工作空间”

“工作空间”可以先理解成一个项目专用的工作台：原始资料、制作要求、过程文件和最终成果，都围绕同一个项目放在一起。要接着改的时候，也能翻回之前的文件和约定。

这一步花不了几分钟，省下的却是找文件、重复交代需求、误改旧版本的麻烦。后面做教程的时候，第一步就是把它配好。

 

项目材料和成果集中保存

一、痛点分析：知道孩子学了什么，不等于知道怎么辅导

先看一个具体场景。

孩子今天学了“秋、雨、果、实”，回家想复习一遍。最容易想到的方式是“读一遍，再写几遍”。但孩子写错一笔，你该怎么演示？他能认出这个字，却组不出词，又该怎么引导？

家长的下一反应通常是：查笔顺、找词语和例句、翻练习册看看有没有刚好的题。材料散在几个地方，找到之后还得判断难度和练习量合不合适。

还有一个更容易被忽略的点：

辅导结束如果能出几道对应的小题，家长才容易看清卡在哪一环——是读音没记住，是词语不理解，还是字形容易混。

所以这个案例要回答的是：能不能围绕当天的生字，把“家长怎么带着学”和“孩子怎么动手练”接在一条线上？

 

跟着学过之后还需要动手练习

二、需求分析：一个辅导过程，拆成两个入口

有了这个问题，先别急着让 AI 写页面。按使用过程拆开，需求自然就分成“辅导端”和“测练端”：家长负责组织和引导，孩子参与学习、完成练习。

辅导端： 家长带孩子看笔顺、读词句，通过写作片段和看图猜字帮助理解，也可以手动补充词语。

测练端： 提供田字格和巩固题，孩子动笔练习，家长对照独立答案检查，不会的内容再回辅导端复习。

生字输入： 支持手动输入和复制粘贴，两个入口共用同一批生字；后续可以按需增加文件或图片识别，核对后再用。

 

两个入口共用生字，测练后可返回复习

界面风格： 这次选的是“森林小课堂”，浅色背景配绿色、蓝色和少量橙色，清爽易读。具体色值都写在后面的提示词里，想复刻同款风格可以直接用。

这次使用的模型是 GLM5.3。除了用文字描述需求，还可以把参考界面或者有问题的页面截图发给它，直接讨论布局、字号和遮挡问题。视觉理解负责看懂图片中的信息；笔顺是否正确、页面按钮是否真的能用，仍然要分别检查。

开工前先把这四件事配好：

 

在纳米Work里配好工作空间、模型、技能和思考深度

三、制作教程：先把第一版做出来，再按使用场景打磨

下面按照操作顺序来。提示词里的项目路径和年级，替换成自己的即可。

第一步：建好项目目录，把需求一次说清

先在电脑上建立一个专用文件夹，例如：D:\教学工具。

打开纳米Work，在选择工作目录这里选择刚创建的文件夹“D盘下的教学工具”。确定完路径和大框架后，就可以把具体内容提交给纳米Work生成，提示词在下方。有一点要注意：一定要让纳米Work和你对齐需求，这样才能更大程度保证产出效果符合预期，确保没有理解错需求内容：

我们要做一个面向家庭辅导的小学语文“每日一练”HTML应用，包含“辅导端”和“测练端”。流程是进入页面有两个tab，可以跳转，首先是辅导端，选择今日学习内容，然后测练端根据辅导端内容生成具体练习内容。辅导端：1. 将小学人教版1-6年级的生字按照课后要求，以年级上下册区分开，并且按照课文题目进行选择，或者支持用户输入当天生字，支持手动输入和粘贴，允许核对、修改。2. 页面展示生字，2字一行，点击进去是一整个页面提供笔顺演示，底部支持分步查看和循环播放，下一个字等功能。使用有来源的笔顺数据，不要自行猜测；缺少数据时明确提示。3. 每字配3个适龄词语和3个例句，并允许家长手动补充词语。4. 提供简短写作片段，自然用到其中2—3个生字即可，不强行凑齐；附写作提示和仿写任务。5. 提供看图猜字，先显示线索，点击后揭晓答案。先用“秋、雨、果、实”完成一轮演示。测练端：沿用辅导端已经确认的生字，不重复输入，也不切换成另一批内容。保留返回辅导端复习的入口。“检测练习”提供田字格，每字默认练5遍，并提供8—12道适龄习题，题型包括拼音、组词、填空、连线。供家长核对的参考答案与孩子作答的题目分开，打印时答案另页。增加适合A4的打印样式，隐藏导航与操作按钮，避免田字格和同一道题被跨页切断。说明保存PDF的方法，并保留现有辅导端的可用功能。颜色设计搭配可以使用蓝绿色，活泼一点，整体有模块区分感，名字为“语文-每日一练”和我对齐需求后开始动工！

 

粘贴需求提示词，选定工作目录

选择工作空间后，后续想迭代更新或者修改，直接在对应的文件夹下找到该html即可。

在过程中，它会比较慢，因为这里接入了人教版1-6年级全册的课文题目以及对应课后的生字词，抽取后会自动校验，降低返工率，可以在思考内容看到：

 

思考过程里能看到数据抽取与校验的结论

第二步：对齐需求

基本数据库建立后，会出现对齐需求的部分，按需选择即可。如果选项没有合适的，或者多个选项其实都符合，那就在“其他”那里把内容填写进去：

 

第一轮需求对齐：先把实现重点收住

 

练习量的对齐：每天写多少遍、做几道题

 

生字模块与笔顺数据来源的对齐

第三步：打开实际页面，用截图提出具体修改

第一版完成后，先找到项目里的 html 文件。经过实践，我发现有时候内置浏览器或者打开到外部浏览器，可能会发生渲染问题。这个问题也很好避免和解决：找到对应的路径，直接打开文件即可。

然后按家长带孩子“确认生字—辅导复习—动笔测练—核对回看”的顺序走一遍，哪里不顺就记录下来。第一版属于 demo，框架出来再继续优化和修改，可以看出，要改的地方还不少：

 

第一版：两字一行的字卡，字号偏小、卡片有遮挡

比如把文字太小、卡片遮挡、打印分页不合理的地方圈出来，再说明希望改成什么样。不同模型每次生成的都不一样，有很大的随机性，所以同一个提示词出来的效果页面也会有差别，大家别急，慢慢优化调试就行。这部分我的提示词是：

修改以下问题：请作为产品经理和前端工程师，帮我设计一个小学 1~6 年级生字学习 App 的改版方案。流程应该是：先在辅导端根据年级和课文选择生字，或者用户自己输入生字，然后可以点击某个生字具体学习。页面要求：首页按“年级 → 课文 → 生字”三级选择；好词好句用卡片式一行一行展示；生字模块一行 2~3 列，大小统一；拼音和笔顺建议使用本地字典或开源库匹配；笔顺页上方动画、下方分解，同一页紧凑展示。

这里跟大家分享一下笔画这件事。让模型直接生成笔顺动画基本不太可能，我自己也试过好多次。更靠谱的路子是用现成的开源项目，直接下载到本地使用，分享两个我实际用过的：

笔顺动画组件 Hanzi Writer支持自动播放、逐笔展示、田字格背景。https://hanziwriter.org/docs.html

配套笔顺 JSON 数据可下载到本地，支持离线使用。https://github.com/chanind/hanzi-writer-data

亲测有效，本地核对下来覆盖了 3779 个已标注笔顺的汉字：

 

接上开源笔顺组件后，本地确认覆盖范围

 

笔顺组件接入配套本地数据

使用开源项目并针对部分模块内容修改后的辅导端：按“选年级 → 选上下册 → 选生字或添加新的生字 → 生成学习内容”走，整个流程使用起来非常丝滑：

 

辅导端的选字流程：年级、上下册、生字逐级选择

字卡、字号和打印排版也一起调了一遍，最后所有内容都能正常打印，结构和大小都合适。

四、结果展示：家长带着学，孩子动手练

1. 辅导端：围绕当天生字展开讲解

首页选择或输入当天生字，进入学习页面。笔顺、词语、例句和写作片段围绕这批字展开，家长可以根据孩子的理解情况逐项讲解，不必急着一次看完。

笔顺模块里，除了完整播放，还保留了“下一步”和循环播放。讲到哪一笔，就停在哪一笔；需要强调的地方，可以再演示一遍。

词语模块里，每个生字配上词语和例句，同时保留手动补充的位置。孩子想到一个合适的词，家长就能加进去，也可以结合家里的物品、当天的经历，帮助孩子理解词语。

 

辅导端：从字卡、笔顺演示到词语和例句

2. 测练端：围绕刚学过的生字，练一练、查一查

完成辅导后，进入测练端，围绕同一批生字安排练字和检测。家长可以先让孩子独立完成，再对照答案检查；有不熟悉的内容，就返回辅导端重新看一看。

这个案例的练字设置为每字5遍，习题控制在5—8道，围绕拼音、组词、填空、连线等形式展开。

提示词里我一开始写的是 8—12 道，最后落在 5—8 道——题目多少要看年级和当天状态，不是越多越好。

屏幕上适合浏览的页面，打印出来不一定合适，所以打印稿需要单独处理：去掉导航和按钮，保留清楚的题目与书写空间，参考答案另页放置。家长拿到后能直接看懂，孩子拿到后有地方写，这才算把最后一步接上。

 

测练端：田字格练字、检测题与 A4 打印预览

五、收尾：换一批生字验证，再决定要不要分享

最后，换一批生字，检查词语、例句、习题和答案是否一起更新；再试一次手机浏览和A4打印，确认没有内容溢出、遮挡或答案混入题目的情况，没问题的话就基本可用。后续有新模块，还在这个文件上继续优化就行。

那能不能分享给别人用？可以的，因为笔画和文字都是离线保存的，这一点我也证实过：整份工具大概 31MB，把 index.html 发给对方，双击就能打开，不用装环境，也不用联网。

 

确认整份工具的离线属性和文件大小

 

工具可以离线带走

在右上角点箭头的地方有个分享按钮，点击后打开“通过链接可访问内容”按钮，发送链接或者二维码，别人就可以使用，功能都是一样的。

 

打开分享开关，通过链接或二维码分发

最后说一个体会。

AI 能很快搭出页面，但页面能不能帮家长完成一次真实的日常辅导，是另一件事。像笔顺这种没有数据就很难演示的部分尤其明显——这次不是让模型把笔画“画”出来，而是接一份现成的数据进去。

同样的思路可以放到数学的加减法测练、英语的单词和发音上，区别只在于数据从哪里来、练习题怎么出。现在这份工具里已经装好了人教版 1—6 年级 12 册的生字，换个年级、换个单元，选字就能开始。