【由浅入深玩转HTML课件 · 一】想上课玩个单词小游戏?跟 AI 说三句话就行

    很多老师已经在日常教学中在用AI辅助备课，制作HTML格式的课件。不夸张地说，老师们已经在不知不觉中解锁了Vibe Coding！

关于HTML课件

可以理解成"用浏览器打开的 PPT"——双击就能放映，上课直接投影，不会像 PPT 那样换个电脑就字体乱、格式错。

另外PPT 做常规演示很好用，但翻卡、答题、小游戏、积分比赛这类灵活的双向课堂互动环节，HTML 才做得到。

这种 "能玩" 的课件，最适合用在课堂导入和课中随堂练习：上课开场启用闯关活动，课堂瞬间热起来；课中开展自测练习，教师能够立刻摸清学生的掌握情况。

HTML 课件不只在课上能用——课后布置练习、统一收集作业、批改结果，它也能一手包办。这些课后环节，后续文章会专门分享

什么是Vibe Coding？

Vibe = 感觉 → Vibe Coding = 凭感觉编程。

一句话概括：Vibe Coding就是和AI聊天，让AI了解你的需求，帮你写/改代码。

例如：

- "做一个单词卡，正面德语、背面中文，点一下能翻"

- "要卡通一点、字大一点，投影到黑板上看得清"

VibeCoding教师实战流程

剩下的代码，AI 来写。

你只负责最后验收：能不能用？好不好用？上课顺不顺手？

就这么简单。你不用会任何编程语言，会"描述感觉"就行。

Vibe Coding能做什么？

对小语种老师来说，我们常会遇到现实困境：市面上适配小语种教学的现成工具非常少。

但借助Vibe Coding，我们可以把这个困境转化成专属优势——没有现成工具，那就自己定制开发，产出完全贴合自己课堂需求的独家教学小工具。

每一个，都是二十分钟就能做出来的小工具。

Vibe Coding的无限可能

给大家举个栗子：

这是一个我用Vibe Coding做的德语冠词选择小游戏（HTML）

包括规则卡、结果页、速查表、历史、错题重练、班级模式等

主页样式 包括模式选择等

阴阳中性速查表

练习页面

而这一切，我没有写一行代码。

我会把源文件附在文尾，欢迎老

师们试用~