夜雨聆风
6月22日，我参加了 International Summit on the Use of AI in Language Learning and Teaching 2026（AIinLT2026），并分享了一个我最近一直在探索的主题：
这次分享的核心案例，是我设计的一个互动式 “汉字拼图”网站。
为什么我要做“汉字拼图”游戏？
在非华语学习者的课堂中，汉字学习一直是一个难点。很多学生习惯了拼音文字系统，面对汉字时，很难直接建立“形、音、义”之间的联系。
汉字不是简单的字母拼读，而是需要同时处理笔画、部件、结构、读音和意义。对初学者来说，这其实是一种很高的认知负荷。
能不能把汉字从“被动观看和反复抄写的对象”，变成学生可以拖动、拼接、比较和探索的学习材料？
“汉字拼图”的想法就是从这里来的。
学生不只是看一个完整的字，而是把汉字拆成不同的部件，通过拖拽、组合、判断和反馈，重新拼成正确的汉字。
在游戏过程中，学生观察的是：
这个字由哪些部分组成？
这些部件应该放在哪里？
左右结构、上下结构、包围结构有什么不同？
部件和意义之间有没有关系？
这就是我想做“汉字拼图”的原因：让汉字学习从被动识记，转向互动、探索和创造。
PPT 版“汉字拼图”
其实在做网页游戏之前，我最早尝试的是 PPT 版汉字拼图游戏。
因为 PPT 是老师最熟悉的工具，不需要编程，也不需要复杂的软件。只要把汉字拆成几个部件，再设置拖拽、动画、点击反馈，就可以在课堂上做出一个简单的互动游戏。
比如，老师可以把一个汉字拆成几个“拼图碎片”，让学生把正确的部件拖到正确位置。学生答对后加分，答错后扣分；也可以设置小组竞赛，让学生在有限时间内完成拼字任务。这个PPT游戏刚出来的时候也受到很多老师欢迎（感恩！）
这种 PPT 游戏确实能让课堂更活跃。学生不再只是低头抄写，而是会讨论、猜测、尝试、纠错。尤其是小组对战的时候，课堂气氛会明显变好。
图 2：最早的 PPT 版汉字拼图活动
每一个字都要手动拆分。
每一个部件都要手动排版。
每一个反馈都要单独设置。
如果想做成闯关、计分、排行榜，PPT 就会越来越复杂。
更重要的是，PPT 本身很难自动记录学生的学习数据，也很难实现更复杂的即时反馈。也就是说，PPT 适合作为课堂活动工具，但如果老师想长期积累资源、不断迭代活动，效率还是不够高。
Vibe Coding 出现以后，老师做网页游戏的门槛降低了
这几年生成式 AI 的发展，让我看到一个新的可能：不会编程的语言老师，也可以通过自然语言和 AI 协作，做出可运行的网页小游戏。
这就是现在大家常说的 Vibe Coding。
简单来说，Vibe Coding 不是要求老师从零开始学代码，而是让老师用自己的教学语言，把需求说清楚，再让 AI 帮助生成代码、调整界面、优化功能。
我要教什么？学生是谁？课堂目标是什么？
游戏规则是什么？答对答错如何反馈？
页面风格要怎样？最后希望生成什么形式？
教师提出教学目标AI 生成技术原型课堂反馈推动持续迭代
我是怎么把“汉字拼图”做成网站的？
先用 ChatGPT 整理教学想法
我通常会先用语音输入，把自己脑子里的想法直接说给 ChatGPT。
ChatGPT 可以帮我把它整理成更完整的开发提示词，包括教学对象、学习目标、游戏机制、页面布局、交互规则、反馈方式、技术要求和输出格式。
用 Google Stitch/ Gemini 美化 UI 设计
有了游戏逻辑以后，下一步就是界面设计。很多老师做出来的网页不好看，不是因为想法不好，而是因为缺少 UI 设计能力。
Stitch 的作用不是直接完成最终网站，而是帮助我把页面变得更直观、更美观。它可以提供布局、配色、按钮样式和视觉结构。包括我之前分享的“拼音大冒险”也是让Stitch帮我设计的UI。
交给 Claude Code、Gemini 或 Google AI Studio 生成网站
接下来，我会把完整提示词和 UI 设计要求发给代码工具。可以用的工具包括 Claude Code、Gemini、Google AI Studio、ChatGPT / Codex。
这些工具可以根据提示词生成 HTML、CSS 和 JavaScript 代码，也就是说，它可以直接帮我做出一个可以运行的网页版本。
部署到 Vercel，变成真正可以打开的网站
当网页游戏基本完成后，就可以把它部署到 Vercel。部署之后，它就不只是一个本地文件，而是一个真正可以通过链接打开的网站。老师可以把链接发给学生，也可以在课堂上投屏使用。
拖拽是否顺畅？拼图能不能自动判断正误？
发音按钮能不能正常播放？计分规则是否合理？
页面在电脑和手机上是否都能打开？课堂投屏时字体够不够大？
然后继续把问题反馈给 AI：按钮太小就放大，拼图碎片不好拖就优化交互，答错反馈太生硬就改得更鼓励学生，也可以加入小组对战模式、排行榜，或者把字库换成 HSK1 级汉字。
这就是 Vibe Coding 的核心：
不是一次生成，而是边试边改。
从被动识字到互动学习
这次在 AIinLT2026 的分享，对我来说也是一次阶段性总结。
从最早的 PPT 汉字游戏，到现在尝试用 Vibe Coding 做网页游戏，我越来越清楚地看到一个方向：
技术不是壁垒，创意才是。
同时，现场的老师们也给我提供了未来设计的方向，比如如何在后台监控学生的成果，如何把学生的学习轨迹可视化。这些也是未来燕麦努力的方向，也希望有兴趣的老师们可以联系燕麦，一起探讨～
筹备
「中文教师 Vibe Coding 互动工具制作课」
燕麦最近也在筹备「中文教师 Vibe Coding 互动工具制作课」如果您也想学习如何从一个课堂想法出发，借助 AI 做出自己的互动网页工具，可以加入课程等待名单。
这门课不会把大家变成程序员。它更想解决的是：
如何把中文教师的教学经验、课堂创意和真实问题，转化成一个可以投屏、可以互动、可以反复使用的网页工具。
感兴趣的老师可以加小助手微信：Yinglongfeiya999
未来，我也希望继续探索：
当中文教师不再只是使用现成工具，而是能够参与设计自己的课堂工具时，中文课堂会发生什么新的变化？
如果你也对这件事感兴趣，欢迎和我一起慢慢把它做出来。
