一句话结论：别「学」Vibe Coding，直接「做一个」——为你正在上的某一节课做一个网页课件。做完，你就会了。
这个任务怎么玩
你不需要先懂 HTML。流程是：
- 挑一节课：从下面「全学科任务卡」里找到你的学科，或照着样子换成你自己要上的课；
- 备材料：把这一课的文字、图片、音频、视频放进一个文件夹（10 分钟）；
- 跟七步走：把话术一句句发给 WorkBuddy（五课毕业的你可以直接开工），每一步只改一个东西；
- 验收：网页能在浏览器打开、手机上不乱，这节课的专属课件就诞生了。
做完你就解锁了：喂材料、下需求、看效果、逐步迭代——这就是 Vibe Coding 的全部。后面的 HTML 解题、触发词 都是它的变招。
开始前
- 已完成 WorkBuddy 手把手五课（会用拖文件、发话术、验收）；
- 扫一眼 什么是 HTML 课件 和 触发词速查表 的「常用组合」一栏。
第 0 步：备材料（10 分钟，一次性）
不想自己收集？15 个学科材料包已备好，扫码即得 →（含文字素材、示意图、音频、现成话术）
自己收集的话，在桌面建文件夹（名字用英文，别带空格）：
my-lesson-site/
├── materials/ ← 你收集的所有材料扔这里
│ ├── text.txt （课文/知识点文字，从教材复制出来）
│ ├── 图片1.jpg 图片2.png
│ ├── recite.mp3 （朗诵/示范音频，可选）
│ └── demo.mp4 （实验/示范视频，可选）
材料哪里找（都免费）：
| 类型 | 来源 |
|---|---|
| 教材原文、课件、练习 | 国家中小学智慧教育平台（免费，官方） |
| 课文朗诵、课文配套音频 | 教材配套音频、智慧教育平台课程资源 |
| 实验视频、示范视频 | 自己录（手机就行）；B 站找到的用「嵌入」方式，不下载 |
| 图片 | 教材插图翻拍、自己拍、让 AI 生成占位图 |
注意：版权提醒：这些课件用于校内课堂教学没问题；不要挂到公网售卖或传播。
七步迭代法（核心，全部是打字级）
以下话术直接抄，把「」里的换成你的内容。每一步只改一个东西——改完刷新浏览器看效果，满意再进行下一步。
第 1 步：让 AI 出方案（先别写代码）
把 my-lesson-site 文件夹拖进 WorkBuddy 输入框，发送：
你是一位经验丰富的「学科」老师兼网页设计师。
我想为「年级 + 课名」这节课做一个网页课件，请先读 materials 文件夹里的材料，
然后给我 3 个课件结构方案（每个方案列出页面板块和互动点），先别写代码。
验收：它给出 3 个方案。挑一个，回复「用方案 2」。
第 2 步：生成第一版（只有骨架和文字）
按方案 2 生成单文件 index.html：
- 只做结构和文字，图片先用灰色占位图
- 风格简洁、适合教室投屏（大字号、高对比度）
- 保存到 my-lesson-site 文件夹
验收：双击打开 index.html，能看到完整结构。
第 3 步：换上真文字
把第 X 部分的正文替换为 materials/text.txt 里的原文，
保留小标题和分段，重点句子加粗。
验收：对照教材，一字不差。
第 4 步：放图片
有图：把图片拖进 my-lesson-site/images/ 文件夹，然后：
在「实验装置」板块下方插入 images/图片1.jpg，
16:9 比例、圆角、下方配图注「图1：××装置示意图」。
没图：
这一板块先用占位图（16:9，浅灰底，中间写板块名），我之后自己换。
验收：图片显示正常、不变形。
第 5 步：加音视频（可选）
在「诵读」板块加一个音频播放器，播放 materials/recite.mp3，
显示标题，样式和整体一致。
视频用嵌入（不下载）：
在这个板块嵌入这个视频：<粘贴 B 站视频的嵌入代码>
验收：点播放有声音/画面。注意：媒体文件名别用中文和空格。
第 6 步：加动画或互动（点睛之笔）
万能句式：「给 XX 加交互：用户可以 ___，然后页面 ___」
给「凸透镜成像」板块加交互：拖动滑块改变物距，
透镜另一侧的像的位置和大小实时变化，并标注当前是放大/缩小、正立/倒立。
验收：自己玩两分钟，参数变化是否符合学科事实——这一步必须由你这个老师把关。
第 7 步：手机检查 + 收尾
做两件事：
1. 检查手机宽度（375px）下的排版，修复图文重叠、按钮太小的问题
2. 检查全部错别字和链接
只报告问题清单，等我确认后再改。
确认后回一句「修复全部问题」。
全学科任务卡（15 科全覆盖）
每行就是一个现成的任务。话术模板 = 上面的七步，「任务示例」替换第 1 步里的课名和互动点即可。
| 学科 | 任务示例（就做这一节课的） | 互动点子 | 必备材料 |
|---|---|---|---|
| 语文 | 《岳阳楼记》情景诵读课件 | 逐句显示、名句点击填空、朗诵音频 | 课文原文、朗诵音频 |
| 数学 | 一元一次方程·行程相遇问题演示 | 滑块调速度，两车实时运动相遇 | 题目、示意图 |
| 英语 | Unit 词汇学习站 | 单词卡点开看释义、配图、跟读音频按钮 | 词汇表、单词音频 |
| 物理 | 凸透镜成像规律交互实验 | 滑块调物距，像实时变化 | 成像规律表、装置图 |
| 化学 | 实验室制取氧气流程页 | 步骤逐步点亮、错误操作红叉警告 | 实验步骤、装置图、安全要点 |
| 生物 | 细胞结构图解 | 点结构显名称与功能 | 细胞图、功能表 |
| 科学 | 水循环动画页 | 点击蒸发/凝结/降水看过程动画 | 知识点文字、示意图 |
| 地理 | 季风气候形成动画 | 切换冬/夏季看风向变化 | 气温降水数据、地图 |
| 历史 | 丝绸之路互动长卷 | 时间轴拖动、路线地图点亮城市 | 年表、路线图 |
| 道德与法治 | 校园情境选择器 | 情境二选一，展示不同后果 | 情境案例文字 |
| 音乐 | 《欢乐颂》节奏训练页 | ABC 记谱渲染五线谱、点击播放 | 乐谱、音频 |
| 美术 | 名画配色提取画廊 | 点色块复制色值、名画轮播 | 名画图片、色值表 |
| 体育与健康 | 立定跳远要领+计数器 | 动作分解图逐步显示、计数器 | 动作要领文字、分解图 |
| 信息科技 | Python 变量可视化演示 | 输入代码看变量盒子实时变化 | 知识点、示例代码 |
| 劳动 | 番茄炒蛋安全烹饪卡 | 步骤勾选、内置计时器 | 菜谱步骤、安全要点 |
通用话术骨架（任何学科通用，替换「」部分）：
你是一位「学科」老师。用 HTML + CSS + JavaScript
为「年级 + 课名」做一个交互式课件：
- 核心互动：「你选的互动点子」
- 单文件、手机电脑都能用、适合投屏
输出 html 版本给我即可。
三个学科的完整示范
语文 · 《静夜思》一年级：
你是一位小学语文老师。做一个《静夜思》诵读课件：
1. 大字显示全诗，点击某句播放对应朗诵（音频在 materials/ 下）
2. 「诗意」按钮切换白话文解释
3. 配一个简单的月光窗前背景动画
单文件 HTML，大字号适合一年级投屏。
数学 · 一元一次方程七年级：
你是一位初中数学老师。做一个「行程相遇问题」交互课件：
滑块调甲乙两人速度（3-8 米/秒），画布上两人相向运动，
相遇时自动标出时间和地点，并显示方程的列法。
附 3 道由易到难的变式题（答案折叠，点击展开）。
英语 · 七年级食物词汇：
你是一位初中英语老师。做一个 Unit 6 Food 词汇学习站：
单词卡片（图 + 英文 + 音标），点击播放发音（音频在 materials/），
配一个「图词配对」小游戏：拖动单词到对应图片，对了变绿错了抖动。
完成标准（打勾领徽章）
- 课件在你教的班上真实用过一次
- 至少经历 3 轮迭代（文字、图片、互动各算一轮）
- 手机上打开不乱
- （加分）加入了自己学科的音频或视频
完成后你就已经「入门 Vibe Coding」了。想继续升级：学 触发词 让课件更专业 → 看 实战案例 学固化技能 → 走 学习路线图 下一站。