一句话结论：网页 = HTML（骨架，内容是什么）+ CSS（皮肤，长什么样）+ JS（动作，能做什么）。你不需要会写——只需要看得懂「哪段管哪块」，然后让 AI 去改。
为什么要解剖它
很多老师学了很久 Vibe Coding 还是心里没底，因为「AI 给了我一堆代码，我看不懂，不知道它写没写对」。这一课把你之前用过的一个真实课件页打开给你看：代码和页面长在同一张图上，一一对应。
看懂的标准不是「会写」，而是：看到页面上的一个东西，能猜到它在代码里大概是哪几行。有这个能力，你就敢放心地指挥 AI 了。
三件套，各管一件事
| 三件套 | 管什么 | 课件里的例子 |
|---|---|---|
| HTML | 骨架：页面有哪些内容 | 「A 层基础巩固」这个板块、5 道题的列表 |
| CSS | 皮肤：颜色、大小、间距 | 必做标签是金色的、答案折叠的虚线框 |
| JS（JavaScript） | 动作：点一下会发生什么 | 点「展开答案」显示参考答案 |
记忆法：HTML 是有什么，CSS 是长什么样，JS 是会动。
傻瓜实验：改一行字，亲眼看页面变化（5 分钟）
不用装任何软件，用你电脑自带的文本编辑器：
- 从 分层作业课件 页面把它的网页文件要过来（或让 WorkBuddy 用一句话术生成一个新的：
做一个标题为「测试页」的单文件网页，内容随意，输出 html 版本给我就行）； - 把下载的
.html文件右键 → 打开方式 → 文本编辑（别用浏览器开）； - 找到
<h1>和</h1>之间的文字，改成你自己的名字； - 保存（Mac：⌘S / Windows：Ctrl+S），双击用浏览器打开——页面上最大的标题变成你的名字了。
✅ 恭喜：你刚刚亲手修改了一个网页。Vibe Coding 的全部秘密就是这一步的放大版——你改一行，AI 改一百行，原理一模一样。
看懂结构后，你的话术会升级
解剖过一次之后，你对 AI 提修改需求就能「指哪打哪」：
| 升级前（笼统） | 升级后（指哪打哪） |
|---|---|
| 「把页面改好看点」 | 「把 C 层那个板块的边框改成金色，其他不动」 |
| 「加个东西」 | 「在 B 层列表后面加一个按钮，点击展开提示」 |
| 「不对，重做」 | 「骨架不动，只把 A 层的 5 道题换成我贴给你的新题」 |
「骨架不动，只换内容」是和 AI 协作修改网页最重要的一句话术——它防止 AI 把你已经满意的部分推倒重来。
这节课在成长路径里的位置
会用 AI → 教学提效 → 场景实践 → 数据分析 → [Vibe Coding ← 你在这] → 做出作品 → 形成成果
解剖完网页，下一步就是完整做出一个属于自己的课件——带着你的学科材料，走 学科课件任务；想学更多「让 AI 更听话」的关键词 → 触发词速查表。
给想再深一步的老师
开源社区 Datawhale 有一套 easy-vibe 教程（含贪吃蛇游戏入门、原型实战、部署上线等 Stage 进阶），适合想往开发方向继续走的老师。它的路线更偏技术；本站则把同样的原理改写成「老师场景版」——两边对照着看，收获最大。
下一步去哪
会做网页之后，两条进阶路都在工具箱里备好了入口：设计美学（配色/图标/组件灵感，让作品好看）和进阶学习（easy-vibe 的数据库与部署，让作品能用真数据、上真网络）。