929 lines
43 KiB
Markdown
929 lines
43 KiB
Markdown
---
|
||
课时: 4
|
||
主题: 当AI"翻车"了
|
||
核心能力: [韧性力, 表达力]
|
||
核心工具: [AI编程工具（见L03工具方案）, DeepSeek]
|
||
时长: 90分钟
|
||
透明化层级: 结果层
|
||
---
|
||
|
||
### 1. 课程目标
|
||
|
||
**知识目标：**
|
||
- 理解"Bug描述三要素"：我做了什么（操作步骤）、我以为会怎样（预期结果）、实际怎样了（实际结果）
|
||
- 认识AI翻车的常见类型：颜色/文字错误、布局/结构错误、功能逻辑错误
|
||
- 理解"翻车大多数时候不是AI的问题，而是我们的指令不够清楚"
|
||
|
||
**能力目标：**
|
||
- 能从"不对"进化到精确的Bug描述（韧性力）
|
||
- 能用清晰的语言向AI描述修复需求（表达力）
|
||
- 能独立完成"发现问题→描述问题→修复问题"的完整流程（韧性力+表达力）
|
||
- 内化"需求→生成→审查→迭代"循环（共创力综合）
|
||
|
||
**情感目标：**
|
||
- 建立"翻车不可怕，翻车是学习机会"的心态
|
||
- 从"翻车=失败"转变为"翻车=下一次做得更好的线索"
|
||
- 感受到阶段一四课能力的串联，带着信心进入阶段二
|
||
|
||
---
|
||
|
||
### 2. 核心概念与误概念预设
|
||
|
||
**认知层级递进：**
|
||
|
||
| 层级 | 本课目标 | 对应活动 |
|
||
|------|---------|---------|
|
||
| 识别层 | 能发现AI的输出和自己的预期不同 | 翻车实验室 |
|
||
| 理解层 | 能说出翻车的原因（指令不清晰） | Bug描述训练 |
|
||
| 应用层 | 能用三要素描述Bug并指导AI修复 | 翻车修复挑战 |
|
||
| 迁移层 | 能把"描述问题"的方法迁移到日常沟通 | 阶段一回顾+5分钟挑战 |
|
||
|
||
**典型误概念：**
|
||
|
||
| 误概念 | 正确认知 | 诊断方式 | 纠正策略 |
|
||
|--------|---------|---------|---------|
|
||
| **误概念1：AI翻车是AI的问题** | 大多数翻车是因为我们的指令不够清楚，AI只能按它理解的来做 | 让学生故意给模糊指令，观察结果 | 翻车实验室：用实验证据证明"模糊指令→离谱结果" |
|
||
| **误概念2：修复=重新来一遍** | 修复应该是精确地告诉AI哪里不对、要改成什么样，而不是从头再来 | 观察学生遇到问题时是否直接重新生成 | 对比演示："重新来"vs"精确修复"的效率差异 |
|
||
| **误概念3：我说不清楚哪里不对** | 用"三要素"（我做了什么→我以为会怎样→实际怎样了）就能清楚描述 | 让学生先用"不对"描述，再用三要素重新描述 | 提供脚手架，用填空句式辅助表达 |
|
||
| **误概念4：翻车=失败，很丢脸** | 翻车是正常的，最厉害的程序员也天天翻车，关键是怎么修 | 观察学生翻车时的情绪反应 | 翻车正常化——用幽默的翻车案例营造安全氛围 |
|
||
| **误概念5：一次修不好就没办法了** | 修复往往需要多轮迭代，一轮修不好就再描述一次 | 观察学生一轮修复后是否放弃 | 鼓励"再试一次"，展示教师自己的多轮修复过程 |
|
||
|
||
---
|
||
|
||
### 3. 教学准备
|
||
|
||
**工具/环境：**
|
||
- AI编程工具（每位学生已在L03课完成安装配置，具体工具见L03工具方案）
|
||
- DeepSeek模型（通过选定工具接入）
|
||
- 教师演示电脑+投影
|
||
|
||
**教师提前准备资源：**
|
||
|
||
#### 3个预设翻车案例（教师提前用AI生成好，课堂直接展示给学生）
|
||
|
||
**案例1（简单）：颜色翻车——"我要蓝色，它给了红色"**
|
||
|
||
教师使用的模糊提示词：
|
||
```
|
||
帮我做一个好看的个人网页
|
||
```
|
||
|
||
AI生成的"翻车"结果（教师提前准备好的HTML文件）：
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>我的个人网页</title>
|
||
<style>
|
||
body {
|
||
background-color: #e74c3c; /* 红色背景 */
|
||
color: white;
|
||
font-family: "微软雅黑", sans-serif;
|
||
text-align: center;
|
||
padding: 50px;
|
||
}
|
||
h1 { font-size: 36px; }
|
||
.intro {
|
||
background-color: #c0392b; /* 深红色卡片 */
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
margin: 20px auto;
|
||
max-width: 500px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>欢迎来到我的主页</h1>
|
||
<div class="intro">
|
||
<p>大家好，我是小明！</p>
|
||
<p>我喜欢画画和打篮球。</p>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
预期结果：学生想要蓝色背景的清爽网页
|
||
实际结果：AI给了红色背景（因为提示词里没说要什么颜色）
|
||
|
||
修复方式示范——精确告诉AI：
|
||
```
|
||
请把网页的背景色改成天蓝色（#3498db），卡片背景改成深蓝色（#2980b9）
|
||
```
|
||
|
||
---
|
||
|
||
**案例2（中等）：布局翻车——"导航栏不跟着我走了"**
|
||
|
||
教师使用的提示词：
|
||
```
|
||
帮我做一个有导航栏的网页，导航栏上面有"首页""关于""作品"三个链接
|
||
```
|
||
|
||
AI生成的"翻车"结果：
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>我的网站</title>
|
||
<style>
|
||
/* 导航栏没有固定定位，会随页面滚动 */
|
||
nav {
|
||
background-color: #2c3e50;
|
||
padding: 15px;
|
||
text-align: center;
|
||
}
|
||
nav a {
|
||
color: white;
|
||
text-decoration: none;
|
||
margin: 0 20px;
|
||
font-size: 18px;
|
||
}
|
||
nav a:hover { color: #3498db; }
|
||
.content {
|
||
padding: 20px;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
.section {
|
||
min-height: 600px;
|
||
padding: 40px 0;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<nav>
|
||
<a href="#home">首页</a>
|
||
<a href="#about">关于</a>
|
||
<a href="#works">作品</a>
|
||
</nav>
|
||
<div class="content">
|
||
<div class="section" id="home">
|
||
<h1>欢迎来到我的网站</h1>
|
||
<p>这是首页的内容，这里有很多很多文字...</p>
|
||
<p>继续往下滚动看看...</p>
|
||
<p>更多内容...</p>
|
||
<p>还有更多...</p>
|
||
</div>
|
||
<div class="section" id="about">
|
||
<h2>关于我</h2>
|
||
<p>我是一名四年级学生。</p>
|
||
<p>我喜欢用AI创造有趣的东西！</p>
|
||
</div>
|
||
<div class="section" id="works">
|
||
<h2>我的作品</h2>
|
||
<p>作品1：AI性格测评卡</p>
|
||
<p>作品2：提示词五要素卡片</p>
|
||
<p>作品3：自我介绍网页</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
预期结果：导航栏始终固定在页面顶部，滚动页面时导航栏不动
|
||
实际结果：导航栏跟着页面一起滚走了，滚到下面就看不见导航栏了
|
||
|
||
Bug描述示范（三要素）：
|
||
```
|
||
我做了什么：我往下滚动页面
|
||
我以为会怎样：导航栏应该一直留在最上面不动
|
||
实际怎样了：导航栏跟着页面滚走了，滚到下面就看不到导航栏了
|
||
```
|
||
|
||
修复提示词：
|
||
```
|
||
请把导航栏固定在页面最顶部，页面往下滚动的时候导航栏不要动，一直留在最上面。
|
||
同时给导航栏下面的内容留出足够的空间，不要被导航栏挡住。
|
||
```
|
||
|
||
---
|
||
|
||
**案例3（复杂）：功能翻车——"按钮点了没反应"**
|
||
|
||
教师使用的提示词：
|
||
```
|
||
做一个网页，上面有一个"显示秘密消息"的按钮，点击之后显示一段隐藏的文字
|
||
```
|
||
|
||
AI生成的"翻车"结果：
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>秘密消息</title>
|
||
<style>
|
||
body {
|
||
font-family: "微软雅黑", sans-serif;
|
||
text-align: center;
|
||
padding: 50px;
|
||
background-color: #f0f0f0;
|
||
}
|
||
button {
|
||
background-color: #9b59b6;
|
||
color: white;
|
||
border: none;
|
||
padding: 15px 30px;
|
||
font-size: 18px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
}
|
||
button:hover { background-color: #8e44ad; }
|
||
.secret {
|
||
display: none;
|
||
margin-top: 20px;
|
||
padding: 20px;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
font-size: 20px;
|
||
color: #e74c3c;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>秘密消息</h1>
|
||
<button onclick="showSecert()">显示秘密消息</button>
|
||
<!-- 注意：函数名拼写错误 showSecert vs showSecret -->
|
||
<div class="secret" id="secretMsg">
|
||
你发现了隐藏的秘密消息！你真棒！
|
||
</div>
|
||
<script>
|
||
// 函数名是 showSecret，但按钮调用的是 showSecert（拼写不同）
|
||
function showSecret() {
|
||
document.getElementById('secretMsg').style.display = 'block';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
预期结果：点击按钮后，下方出现"你发现了隐藏的秘密消息！你真棒！"
|
||
实际结果：点击按钮完全没有反应，什么都不发生
|
||
|
||
Bug描述示范（三要素）：
|
||
```
|
||
我做了什么：我点击了"显示秘密消息"这个按钮
|
||
我以为会怎样：点击后应该在下面显示一段隐藏的文字
|
||
实际怎样了：点了按钮什么都没发生，页面没有任何变化
|
||
```
|
||
|
||
修复提示词：
|
||
```
|
||
我点击"显示秘密消息"按钮后没有任何反应。
|
||
预期效果是：点击按钮后，下方应该出现隐藏的秘密消息文字。
|
||
实际效果是：点了按钮什么都不发生。
|
||
请检查按钮的点击功能，修复这个问题。
|
||
```
|
||
|
||
> 教师技术备注：这个Bug的根因是函数名拼写不一致（onclick调用`showSecert`，但定义的是`showSecret`）。学生不需要知道代码层面的原因，只需要能精确描述"预期vs实际"，让AI找到并修复。
|
||
|
||
---
|
||
|
||
**翻车修复报告模板：**（教师提前打印或投影）
|
||
|
||
```
|
||
┌──────────────────────────────────────────┐
|
||
│ 翻车修复报告 │
|
||
│ │
|
||
│ 姓名：___________ 日期：___________ │
|
||
│ │
|
||
│ 【案例 __ 】 │
|
||
│ │
|
||
│ 1. 我做了什么： │
|
||
│ _________________________________ │
|
||
│ │
|
||
│ 2. 我以为会怎样： │
|
||
│ _________________________________ │
|
||
│ │
|
||
│ 3. 实际怎样了： │
|
||
│ _________________________________ │
|
||
│ │
|
||
│ 4. 我是怎么告诉AI修复的： │
|
||
│ _________________________________ │
|
||
│ _________________________________ │
|
||
│ │
|
||
│ 5. 修复后的结果： │
|
||
│ □ 完全修好了 │
|
||
│ □ 好了一些但还有问题：_____________ │
|
||
│ □ 没修好，我打算：_________________ │
|
||
│ │
|
||
│ 6. 这次翻车是谁的"锅"？ │
|
||
│ □ 我的指令不够清楚 │
|
||
│ □ AI理解错了我的意思 │
|
||
│ □ 都有一点 │
|
||
│ 为什么？_________________________ │
|
||
└──────────────────────────────────────────┘
|
||
```
|
||
|
||
**"翻车名人堂"展板：**（教师提前准备一张大海报纸或白板区域）
|
||
- 标题："今日翻车名人堂——最搞笑的翻车瞬间"
|
||
- 用于翻车实验室环节，学生把最离谱的翻车结果截图贴上去
|
||
|
||
---
|
||
|
||
### 4. 教学流程
|
||
|
||
**第一幕：联系 (Connect) — 10分钟**
|
||
|
||
**上节课回顾 (3分钟)**
|
||
|
||
**师：** 上节课我们做了一件很酷的事——每个人都用AI做了自己的自我介绍网页！谁还记得，我们和AI搭档合作的时候，要走哪几步？【诊断点：检测L03核心概念"需求→生成→审查→迭代"的保持度】【识别层】
|
||
|
||
**【分支A】若学生回答出"先告诉AI要做什么，然后看结果，然后提意见修改"：**
|
||
**师：** 非常好！这就是我们说的四步循环——需求→生成→审查→迭代。上节课大家都走了至少一轮这个循环。那我问大家一个问题——上节课有没有人的网页，AI第一次做出来就完美的？
|
||
|
||
**【分支B】若学生沉默或回答不完整：**
|
||
**师：** 我来提醒一下。我们先跟AI说了什么？（需求）然后AI帮我们做了什么？（生成）然后我们干了一件很重要的事？（审查、看效果）最后呢？（提意见、迭代）。对，这就是四步循环。
|
||
|
||
**【分支C】若学生只记得"让AI做网页"但忘了审查和迭代：**
|
||
**师：** 嗯，让AI做网页是第一步。但还记得吗，AI做出来之后我们还看了看效果对不对？有同学还提了修改意见让AI改。这个"看效果→提意见"的过程非常重要，今天我们要把这个能力练到更强！
|
||
|
||
**情景导入 (7分钟)**
|
||
|
||
**师：** 今天我要给大家看一个东西，你们可能会觉得很搞笑。【教师打开投影，展示一个翻车案例：提示词写"画一只在月球上吃火锅的猫"，AI画出来的图片里猫在太阳上、吃的是泡面，旁边还多了一只狗】
|
||
|
||
**师：** 哈哈，大家看看这个——我让AI画"一只在月球上吃火锅的猫"，结果AI给我画了什么？
|
||
|
||
**生：** （笑）猫跑到太阳上去了！还多了一只狗！吃的也不是火锅！
|
||
|
||
**师：** 对！这就是AI"翻车"了。翻车这个词大家知道什么意思吗？就像你骑自行车骑着骑着，突然歪了、倒了——AI也会这样，你让它做一个东西，结果做出来完全不是你想要的。今天这节课有一个特别好玩的名字——【停顿，营造期待】——叫做"翻车实验室"！
|
||
|
||
**师：** 我们今天要干三件事。第一，故意让AI翻车，看看谁能制造出最离谱的翻车。第二，学一个超级有用的技能——怎么把"它做错了"说清楚。第三，修复三个AI翻过的车。听起来好不好玩？【诊断点：观察学生对"翻车"主题的情绪反应——是觉得有趣还是觉得焦虑？】
|
||
|
||
**师：** 但在开始之前，我先问大家一个问题：你们觉得，AI翻车了，是谁的"锅"？是AI太笨了？还是别的什么原因？【诊断点：激发"AI翻车是AI的问题"这个核心误概念】【理解层】
|
||
|
||
**【分支A】若有学生说"可能是我们没说清楚"：**
|
||
**师：** 哦？你觉得可能是我们的问题？这个想法很厉害！但到底是不是呢，我们等会儿用实验来验证。
|
||
|
||
**【分支B】若学生普遍认为"是AI太笨了"：**
|
||
**师：** 嗯，很多人都这么觉得。那我们今天就来做个实验，看看到底是AI笨，还是我们的"说明书"写得不够好。
|
||
|
||
**【分支C】若学生犹豫不确定：**
|
||
**师：** 没关系，这正是我们今天要搞清楚的！一会儿做完实验你们就知道答案了。
|
||
|
||
---
|
||
|
||
**第二幕：建构 (Construct) — 65分钟**
|
||
|
||
**【分段一：翻车实验室——故意制造翻车】(15分钟)**
|
||
|
||
**预设误概念：**
|
||
- 误概念1：AI翻车是因为AI笨
|
||
- 误概念4：翻车=失败，很丢脸
|
||
|
||
**讲解与演示:**
|
||
|
||
**师：** 好，现在进入我们的"翻车实验室"！实验室里的规则是——越翻车越好！越离谱越好！今天翻车不是丢人的事，翻车是我们的研究材料。最搞笑的翻车还要贴到我们的"翻车名人堂"上！【指向提前准备好的展板】
|
||
|
||
**师：** 我先来示范。看好了——我现在要给AI一个超级模糊的指令，看看它会做出什么来。
|
||
|
||
【教师现场演示，在AI编程工具中输入：】
|
||
```
|
||
做个网页
|
||
```
|
||
|
||
**师：** 就三个字——"做个网页"。大家猜猜AI会做出什么来？【等待学生猜测】
|
||
|
||
【展示AI的输出结果——可能是一个非常基础的、内容不相关的网页】
|
||
|
||
**师：** 看到了吧？我什么都没说清楚——不知道做给谁看的、不知道要什么内容、不知道要什么颜色、不知道要什么功能。AI只能瞎猜！还记得第二课学的"提示词五要素"吗？我这个指令里，五个要素缺了几个？
|
||
|
||
**生：** 全缺了！
|
||
|
||
**师：** 对！五个都缺了！所以这次翻车，到底是AI的问题，还是我的问题？
|
||
|
||
**生：** 你的问题！你什么都没说清楚！
|
||
|
||
**师：** 哈哈，被你们抓到了！没错。现在轮到你们了！
|
||
|
||
**学生实践:**
|
||
|
||
**师：** 你们的任务是——在8分钟内，用最模糊、最奇怪、最不清楚的指令，让AI翻车！规则是这样的：
|
||
|
||
1. 在AI编程工具里给AI写一个故意很模糊的指令，让它做一个网页
|
||
2. 看看AI做出了什么离谱的东西
|
||
3. 至少尝试3个不同的模糊指令
|
||
4. 挑出你觉得最搞笑、最离谱的一个翻车结果
|
||
5. 想想：为什么会翻车？你的指令少说了什么？
|
||
|
||
模糊指令举例（可以参考，也可以自己想）：
|
||
- "做个好看的东西"
|
||
- "帮我做作业"
|
||
- "做一个关于动物的"
|
||
- "做一个酷的网页，要很酷"
|
||
|
||
开始！看谁的翻车最精彩！
|
||
|
||
【教师巡场观察，重点关注：】
|
||
- 学生是否真的在尝试模糊指令
|
||
- 学生看到翻车结果时的反应（笑→好，焦虑→需要安慰）
|
||
- 是否有学生开始主动分析"为什么翻车了"
|
||
|
||
**进度同步:**
|
||
|
||
**师：** 好，时间到！谁来分享一下你最离谱的翻车？给大家看看！【请2-3位学生投屏展示】【诊断点：学生是否只展示翻车结果，还是能初步说出翻车原因】【理解层】
|
||
|
||
**师：** 太搞笑了！那你觉得为什么会翻成这样？你的指令里少说了什么？
|
||
|
||
**【分支A】若学生能说出"我没说清楚颜色/内容/布局"：**
|
||
**师：** 非常好！你已经发现了翻车的关键——不是AI笨，是我们的"需求说明书"不合格。还记得第二课学的提示词五要素吗？当我们把要素说全了，AI就不容易翻车了。
|
||
|
||
**【分支B】若学生只是说"好搞笑"但说不出原因：**
|
||
**师：** 搞笑对吧！但我们来当一回"翻车侦探"——你的指令是什么？你想要什么？AI给了什么？中间差在哪里？是不是因为你没告诉AI你想要什么，AI就只能瞎猜？
|
||
|
||
**【分支C】若学生仍坚持"AI太笨了"：**
|
||
**师：** 那我们来做个小实验。你刚才的模糊指令是什么？现在用第二课学的提示词五要素重新说一遍，看看AI还会不会翻车。
|
||
|
||
【让该学生现场用五要素重新描述需求，展示AI改进后的结果】
|
||
|
||
**师：** 看到了吧？同一个AI，指令说清楚了，结果完全不一样！所以翻车的"锅"，大部分时候在谁身上？
|
||
|
||
**师：** 好，我来总结一下翻车实验室的发现——【在白板上写】
|
||
|
||
**翻车公式：模糊指令 + AI猜猜看 = 翻车**
|
||
|
||
反过来说：**清晰指令 + AI精确执行 = 满意结果**
|
||
|
||
这就是第二课提示词五要素的威力。但是！有时候就算我们说得挺清楚了，AI还是可能翻车。这时候怎么办？我们需要学一个新技能——怎么跟AI"报告"问题。
|
||
|
||
---
|
||
|
||
**【分段二：Bug描述训练——从"不对"到精确描述】(15分钟)**
|
||
|
||
**预设误概念：**
|
||
- 误概念3：我说不清楚哪里不对
|
||
- 误概念2：修复=重新来一遍
|
||
|
||
**讲解与演示:**
|
||
|
||
**师：** 大家想象一个场景。你去餐厅吃饭，菜端上来了，你觉得不对。你跟服务员说——"这个不对"。服务员会怎么说？【诊断点：用生活场景引出"精确描述"的重要性】【识别层】
|
||
|
||
**生：** "哪里不对？"
|
||
|
||
**师：** 对！光说"不对"，服务员不知道你想要什么。但如果你说——"我点的是番茄炒蛋，你端上来的是西红柿蛋汤"，服务员马上就知道问题在哪了。
|
||
|
||
**师：** 跟AI说修改意见也是一样的！我见过很多同学跟AI说"不对，重新做"——这就像跟服务员说"不对，重新炒"，服务员可能会炒出一道更不对的菜。
|
||
|
||
**师：** 所以今天我教大家一个超级有用的技能，叫做"Bug描述三要素"。Bug就是"问题""毛病"的意思，程序员管软件里的问题叫Bug。
|
||
|
||
【在白板/投影上展示】
|
||
|
||
**Bug描述三要素：**
|
||
1. **我做了什么**——我做了什么操作？（步骤）
|
||
2. **我以为会怎样**——我以为会出现什么效果？（预期）
|
||
3. **实际怎样了**——实际出现了什么效果？（实际）
|
||
|
||
**师：** 我来演示一下。这是一个翻车的网页——【展示案例1：红色背景的网页】
|
||
|
||
**烂描述：**"颜色不对"
|
||
|
||
**好描述：**
|
||
1. 我做了什么：打开了我的个人网页
|
||
2. 我以为会怎样：背景应该是天蓝色的
|
||
3. 实际怎样了：背景是红色的
|
||
|
||
**师：** 看到区别了吗？好描述把三个要素都说清楚了。现在我来把这个好描述变成给AI的修复指令——
|
||
|
||
"网页的背景色现在是红色的，但我想要天蓝色。请把背景色改成天蓝色。"
|
||
|
||
简单吧？比"颜色不对，重新做"好多了。
|
||
|
||
**师：** 再来一个更难的。我说两个描述，你们告诉我哪个好：
|
||
|
||
描述A："网页不好看，重做"
|
||
描述B："导航栏的字体太小了，在手机上看不清楚，请把导航栏的字体改大到20号"
|
||
|
||
**生：** B好！
|
||
|
||
**师：** 为什么B好？
|
||
|
||
**生：** 因为B说清楚了哪里不好、想要什么样的。
|
||
|
||
**师：** 完全正确！B里面有三要素——我做了什么（在手机上看网页）、我以为会怎样（字应该看得清）、实际怎样了（字太小看不清）。而且还告诉AI具体要改成什么样。
|
||
|
||
**学生实践:**
|
||
|
||
**师：** 现在轮到你们练习了！我在屏幕上展示3个"烂描述"，你们用Bug描述三要素把它们改成"好描述"。可以写在纸上，也可以直接说。
|
||
|
||
**烂描述1：** "颜色不对"
|
||
→ 改成好描述：_______________
|
||
|
||
**烂描述2：** "按钮有问题"
|
||
→ 改成好描述：_______________
|
||
|
||
**烂描述3：** "网页不好用"
|
||
→ 改成好描述：_______________
|
||
|
||
提示：用这个填空句式来帮忙——
|
||
- 我做了什么：我____（操作）
|
||
- 我以为会怎样：应该____
|
||
- 实际怎样了：但是____
|
||
|
||
给大家5分钟时间，至少完成2个。
|
||
|
||
【教师巡场，重点关注：】
|
||
- 学生是否理解三要素的含义
|
||
- 是否有学生仍然在写"不好看""有问题"这样的模糊描述
|
||
- 对有困难的学生提供填空句式的脚手架
|
||
|
||
**进度同步:**
|
||
|
||
**师：** 好，谁来分享你改造后的描述？先说烂描述是什么，再说你改成了什么。【诊断点：学生的改造是否真正包含三要素，还是只是换了个说法但仍然模糊】【应用层】
|
||
|
||
【请2-3位学生分享】
|
||
|
||
**【分支A】若学生的改造确实包含三要素：**
|
||
**师：** 太棒了！这就是一个专业的Bug描述！你看，你都能当软件测试工程师了！
|
||
|
||
**【分支B】若学生的改造有进步但还不够精确（如"颜色不是我想要的"）：**
|
||
**师：** 比之前好很多了！不过还差一点点。你说"不是我想要的"——那你想要的是什么颜色？如果你能说出"我想要蓝色但现在是红色"，AI就能一次改对了。
|
||
|
||
**【分支C】若学生还是写不出来：**
|
||
**师：** 没关系！我们用填空句式来练。你想象你打开了一个网页，发现颜色有问题。
|
||
- 我做了什么？——打开了网页。
|
||
- 我以为会怎样？——背景应该是____色？（你喜欢什么颜色？）
|
||
- 实际怎样了？——但背景是____色。
|
||
看，这样一填就出来了！
|
||
|
||
**师：** 大家记住这个口诀——"做了什么、以为怎样、实际怎样"。以后不管是跟AI说修改意见，还是跟朋友描述一个问题，这三步都超好用。
|
||
|
||
---
|
||
|
||
**【分段三：翻车修复挑战——修复3个预设案例】(20分钟)**
|
||
|
||
**预设误概念：**
|
||
- 误概念2：修复=重新来一遍
|
||
- 误概念5：一次修不好就没办法了
|
||
|
||
**讲解与演示:**
|
||
|
||
**师：** 好，Bug描述三要素学会了，现在到了最激动人心的环节——"翻车修复挑战"！我这里有3个AI翻过的车，从简单到难，你们来当"修车师傅"！
|
||
|
||
**师：** 规则是这样的：
|
||
1. 我给你们看一个翻车的网页
|
||
2. 你们先用三要素写下Bug描述
|
||
3. 然后用AI编程工具让AI帮你修复
|
||
4. 看看修好没有
|
||
|
||
重点——不是重新做！是告诉AI"哪里有问题，要改成什么"。这就是"迭代"——在原来的基础上改，不是从头来。
|
||
|
||
**师：** 先来第一个案例。【投屏展示案例1的网页效果——红色背景】
|
||
|
||
这是一个同学让AI做的"蓝色背景的个人网页"，但AI给了什么颜色的背景？
|
||
|
||
**生：** 红色的！
|
||
|
||
**师：** 对！现在你们用三要素描述这个Bug，然后在AI编程工具里让AI修复。我把这个网页的代码发到大家的电脑上，你们直接在这个基础上修。
|
||
|
||
【教师将案例1的HTML文件分发到每位学生的电脑上，可以通过U盘、共享文件夹或课堂文件分发系统】
|
||
|
||
**学生实践:**
|
||
|
||
**案例1修复（5分钟）：**
|
||
|
||
学生任务：
|
||
1. 在纸上/报告模板上写下Bug描述（三要素）
|
||
2. 在AI编程工具中用自然语言告诉AI修复
|
||
3. 检查修复结果
|
||
|
||
【教师巡场，重点观察：】
|
||
- 学生是否在用三要素描述Bug，还是直接说"改成蓝色"
|
||
- 学生是否对AI说"重新做一个"而不是"修改这个"
|
||
- 修复是否成功
|
||
|
||
**师：** 案例1大家都修好了？太快了！这说明当你能说清楚问题的时候，修复就很简单。
|
||
|
||
**师：** 接下来难度升级——案例2！【投屏展示案例2的网页效果】
|
||
|
||
这个网页有一个导航栏，我往下滚动页面给你们看——【教师现场滚动页面，导航栏消失了】
|
||
|
||
**师：** 发现问题了吗？
|
||
|
||
**生：** 导航栏滚走了！/导航栏不见了！
|
||
|
||
**师：** 对！导航栏应该一直固定在最上面，但它跟着页面滚走了。这个Bug比刚才的难一点，因为不是"一眼就看到"的，需要你"操作"之后才能发现。所以Bug描述的"我做了什么"这一步就特别重要了——你得说清楚你做了什么操作才发现的问题。
|
||
|
||
**案例2修复（7分钟）：**
|
||
|
||
学生任务同上，但教师提醒：
|
||
- 注意描述"我做了什么"——"我往下滚动了页面"
|
||
- 注意描述"我以为会怎样"——"导航栏应该一直在最上面"
|
||
- 注意修复指令要具体——不要只说"修复导航栏"
|
||
|
||
【教师巡场重点：】
|
||
- 学生的Bug描述是否包含"滚动"这个操作
|
||
- 学生是否因为这个Bug比案例1难就想"重新做"（误概念2的表现）
|
||
|
||
**师：** 案例2谁修好了？举手让我看看！好的，大部分都修好了。谁来说说你是怎么跟AI说的？
|
||
|
||
【请一位学生分享修复提示词】
|
||
|
||
**师：** 最后一个案例，最难的！案例3！【投屏展示案例3的网页效果——点击按钮，没有反应】
|
||
|
||
这个网页上有一个按钮，写着"显示秘密消息"。按照设计，我点这个按钮，应该出现一段隐藏的文字。但是——【教师现场点击按钮，什么都不发生】
|
||
|
||
**师：** 点了没反应！这个Bug比前两个都难，因为你不知道是按钮的问题、还是文字的问题、还是别的什么问题。但没关系，你不需要知道代码里出了什么错——你只需要用三要素，精确地告诉AI"你做了什么、期望什么、实际发生了什么"，让AI自己去找原因！
|
||
|
||
**案例3修复（8分钟）：**
|
||
|
||
学生任务同上，但教师提醒：
|
||
- 这个Bug可能一轮修不好，没关系，再跟AI描述一次
|
||
- 修好后一定要再点一次按钮验证
|
||
|
||
【教师巡场重点：】
|
||
- 学生是否因为"不知道代码里出了什么错"而慌张（误概念3变体）
|
||
- 学生是否在一轮没修好后放弃（误概念5）
|
||
- 有学生一轮就修好了→鼓励去帮其他同学
|
||
|
||
**进度同步:**
|
||
|
||
**师：** 好，三个案例都挑战完了！大家觉得哪个最难？【诊断点：学生对三个难度层次的感知是否与设计一致】【应用层】
|
||
|
||
**师：** 我来问一个关键问题——这三个案例，你们有没有人是"重新让AI做一个"来修的？
|
||
|
||
**【分支A】若所有学生都是在原基础上修改的：**
|
||
**师：** 太好了！你们都掌握了"迭代"的精髓——不是推倒重来，而是精准修复。这比重新做快多了，也好多了。
|
||
|
||
**【分支B】若有学生承认"重新做了"：**
|
||
**师：** 没关系！但你有没有发现，重新做的时候，AI可能又翻车翻到别的地方去了？这就是为什么"精准修复"比"重新来"更好——你已经有一个90分的作品了，只需要把那10分修一下就行，重新来的话又要从零开始冒险。
|
||
|
||
**【分支C】若有学生一个案例都没修好：**
|
||
**师：** 没关系！修bug本来就不是一次就能成功的。你写的Bug描述给我看看？——嗯，描述写得不错！可能是AI还没理解你的意思。我们可以试试换一种方式再描述一次。【和该学生一起演示多轮迭代修复】
|
||
|
||
---
|
||
|
||
**【分段四：翻车修复报告撰写 + 阶段一回顾】(15分钟)**
|
||
|
||
**预设误概念：**
|
||
- 误概念1（再次检验）：AI翻车是AI的问题
|
||
- 综合误概念：前三课的概念已经忘记
|
||
|
||
**讲解与演示:**
|
||
|
||
**师：** 最后一个任务——写你的"翻车修复报告"！每个案例写一份，一共三份。用我们发的模板来写。
|
||
|
||
【投屏展示翻车修复报告模板】
|
||
|
||
**师：** 我重点说一下模板最后那个问题——"这次翻车是谁的锅？"。这个问题很重要。通过今天的实验，你们觉得呢？【诊断点：核心误概念"AI翻车是AI的问题"是否被翻转】【理解层】
|
||
|
||
**【分支A】若学生说"大部分是我的指令不够清楚"：**
|
||
**师：** 恭喜你！你今天最大的收获就是这个！知道了翻车的原因，以后就能更少翻车了。
|
||
|
||
**【分支B】若学生仍然觉得"是AI的问题"：**
|
||
**师：** 那我们来回顾一下——翻车实验室里，你给了模糊指令，AI翻车了；你给了清楚指令，AI就做对了。同一个AI，不同的指令，结果完全不同——所以关键变量是什么？
|
||
|
||
**【分支C】若学生说"都有一点"：**
|
||
**师：** 很客观！确实，有时候AI也会犯自己的错（还记得第一课学的"AI幻觉"吗？）。但大部分时候，翻车的根源是——我们的指令不够精确。而这恰恰是我们能控制的！
|
||
|
||
**学生实践:**
|
||
|
||
学生用8分钟完成3份翻车修复报告。
|
||
|
||
【教师巡场检查报告质量，重点关注：】
|
||
- 三要素是否写完整
|
||
- "修复方式"是否具体（而不是"让AI重做"）
|
||
- "谁的锅"是否有思考（而不是随便勾一个）
|
||
|
||
**师：** 好，报告写好的同学，给我看一下。
|
||
|
||
【快速浏览几位学生的报告，挑选写得好的展示】
|
||
|
||
**师：** 现在到了今天最重要的时刻——阶段一回顾！我们前四节课一共学了些什么呢？
|
||
|
||
**阶段一回顾 (5分钟)：**
|
||
|
||
**师：** 大家看这张图——【在白板上画出或投屏展示】
|
||
|
||
```
|
||
第1课：AI是怎么"想"的？ → 认识AI（提问力）
|
||
↓ 我们知道了AI靠概率预测，会犯错，不同模型有不同"性格"
|
||
第2课：提问的艺术 → 学会说话（提问力+表达力）
|
||
↓ 我们学会了提示词五要素，知道怎么跟AI说清楚需求
|
||
第3课：认识你的编程搭档 → 开始合作（共创力）
|
||
↓ 我们用AI编程工具做了第一个网页，走了第一轮"需求→生成→审查→迭代"
|
||
第4课：当AI"翻车"了 → 不怕翻车（韧性力+表达力）
|
||
↓ 我们知道了翻车怎么修，学会了Bug描述三要素
|
||
```
|
||
|
||
**师：** 四节课，我们从"认识AI"到"会跟AI说话"到"和AI合作做出作品"到"翻车了也不怕"——这是一条完整的成长路线！【诊断点：学生能否看到四课之间的关联，而不是觉得是孤立的四节课】【迁移层】
|
||
|
||
**师：** 从下节课开始，我们就进入阶段二——"网页创作"！你们要做自己的个人主页和主题网站了。有了这四课的基础，你们已经准备好了——
|
||
|
||
- 你们知道AI怎么想的（第1课），所以不会对AI有不切实际的期望
|
||
- 你们会写好提示词（第2课），所以能跟AI高效沟通
|
||
- 你们走过了完整的合作循环（第3课），所以知道怎么和AI搭档
|
||
- 你们不怕翻车（第4课），所以遇到问题能淡定地修复
|
||
|
||
**师：** 准备好了吗？阶段二见！
|
||
|
||
**进度同步:**
|
||
|
||
**师：** 最后一个问题——如果我用一句话总结今天学到最重要的东西，你会怎么说？【诊断点：学生的抽象总结能力】【迁移层】
|
||
|
||
**【分支A】若学生能说出"翻车不可怕，关键是说清楚问题"或类似表述：**
|
||
**师：** 完美总结！这就是韧性力——不怕翻车，翻了就修。
|
||
|
||
**【分支B】若学生说"学会了Bug三要素"：**
|
||
**师：** 对！这是今天的核心工具。以后遇到任何问题，都可以用"我做了什么、我以为怎样、实际怎样"来描述。
|
||
|
||
**【分支C】若学生说不出来：**
|
||
**师：** 我来帮你总结——今天最重要的一个词是"韧性"。翻车了不怕，怕的是翻车了不知道怎么说清楚问题。你现在知道了怎么说——三要素！
|
||
|
||
---
|
||
|
||
**第三幕：反思 (Contemplate) — 10分钟**
|
||
|
||
**成果展示 (6分钟)**
|
||
|
||
**师：** 现在请2-3位同学来分享你们的翻车修复报告。注意，不只是展示结果——我想听的是你们的"修复过程"。你是怎么描述Bug的？你给AI说了什么？AI修好了吗？
|
||
|
||
【请2-3位学生展示，优先选择：】
|
||
- 一位三要素写得特别好的
|
||
- 一位经历了多轮修复的（体现韧性力）
|
||
- 一位在翻车实验室有精彩翻车案例的
|
||
|
||
**师：** 对展示的同学，大家给出一个优点和一个建议——
|
||
|
||
**互评与讨论 (4分钟)**
|
||
|
||
**师：** 我还想问一个问题——今天翻车实验室里，你们有没有发现，模糊指令和清晰指令做出来的东西差别有多大？这跟第二课学的什么有关？【诊断点：学生能否将今天的体验和L02的提示词五要素关联起来】【迁移层】
|
||
|
||
**生：** 提示词五要素！
|
||
|
||
**师：** 对！你看，第二课学的东西，在今天就用上了。而且今天学的Bug三要素，下节课做个人主页的时候也一定会用上——因为做项目一定会遇到问题，到时候你们就知道怎么精确地告诉AI修复了。
|
||
|
||
**师：** 还有一个发现分享——今天有没有人注意到，修Bug的过程其实就是"需求→生成→审查→迭代"循环的一部分？你发现了Bug（审查），告诉AI怎么改（新需求），AI改好了（重新生成），你检查改好没有（再审查）。这个循环我们会一直用到期末！
|
||
|
||
---
|
||
|
||
**第四幕：延续 (Continue) — 5分钟**
|
||
|
||
**抽象总结 (3分钟)**
|
||
|
||
**师：** 今天我们学了一个非常强大的能力——"精确描述问题"。这个能力不只在AI编程里有用。想想看，你在哪些地方也需要"说清楚问题"？【诊断点：迁移能力——学生能否将Bug描述能力推广到其他场景】【迁移层】
|
||
|
||
**【分支A】若学生举出好例子（如"告诉妈妈我肚子哪里疼""跟老师说作业哪里不会"）：**
|
||
**师：** 太好了！你看，"我做了什么、我以为怎样、实际怎样"这个方法到处都能用。这就是"表达力"——把你脑子里的想法清清楚楚地说出来。
|
||
|
||
**【分支B】若学生想不到：**
|
||
**师：** 比如去看医生——你说"我不舒服"，医生能帮你吗？但如果你说"昨天吃了冰淇淋（我做了什么），以为没事（我以为怎样），但今天肚子一直疼（实际怎样）"——医生马上就知道怎么帮你了！看，三要素到处都有用。
|
||
|
||
**5分钟挑战发布 + 下节预告 (2分钟)**
|
||
|
||
**师：** 本周的5分钟挑战来了！
|
||
|
||
**5分钟挑战：** 找一个AI翻车的案例——可以是你自己用AI时遇到的翻车，也可以是网上看到的搞笑AI翻车截图。然后用"Bug描述三要素"写下来：
|
||
1. 我做了什么（或这个人做了什么）
|
||
2. 我以为会怎样
|
||
3. 实际怎样了
|
||
|
||
拍照发到班级群里，看谁找到的翻车最有趣、描述写得最清楚！
|
||
|
||
**师：** 下节课预告——我们要进入阶段二了！下节课你们要开始做自己的个人主页。不是那种简单的自我介绍页面，是一个有导航栏、有配色方案、有好几个板块的正式主页！今天学的翻车修复技能，下节课一定会派上用场的。回家可以先想想——你的个人主页想要什么风格？下课！
|
||
|
||
---
|
||
|
||
### 5. AI助教使用指南
|
||
|
||
**教师提示词模板：**
|
||
|
||
**课前准备——生成翻车案例：**
|
||
```
|
||
你是一个AI编程课的课程设计助手。我需要为四年级学生准备一个"翻车案例"。
|
||
|
||
请帮我生成一个HTML网页，要求故意包含以下Bug：
|
||
[描述具体要包含的Bug]
|
||
|
||
要求：
|
||
1. 网页内容对四年级学生来说有趣、可理解
|
||
2. Bug要明显，学生一眼能发现（不需要看代码）
|
||
3. HTML代码放在一个文件里（包含CSS和JS）
|
||
4. 代码简洁，不要太复杂
|
||
```
|
||
|
||
**课堂演示——翻车实验室用：**
|
||
```
|
||
做个网页
|
||
```
|
||
（故意的超模糊指令，用于演示翻车效果）
|
||
|
||
**课堂演示——修复对比用：**
|
||
```
|
||
我的网页有个问题。
|
||
我做了什么：打开了网页
|
||
我以为会怎样：背景应该是天蓝色
|
||
实际怎样了：背景是红色的
|
||
请把背景色改成天蓝色（#3498db）。
|
||
```
|
||
|
||
---
|
||
|
||
**学生提示词模板：**
|
||
|
||
**Bug修复标准句式：**
|
||
```
|
||
我的网页有一个问题：
|
||
|
||
我做了什么：[描述你的操作]
|
||
我以为会怎样：[描述你期望的效果]
|
||
实际怎样了：[描述实际发生了什么]
|
||
|
||
请帮我修复这个问题。
|
||
```
|
||
|
||
**Bug修复进阶句式（如果一轮没修好）：**
|
||
```
|
||
我刚才说的问题还没修好。让我再描述清楚一点：
|
||
|
||
[更详细的描述]
|
||
|
||
请再试一次修复。
|
||
```
|
||
|
||
---
|
||
|
||
### 6. 教师指南
|
||
|
||
**技术备注：**
|
||
|
||
1. **案例1（颜色错误）的技术原理：** CSS的`background-color`属性控制背景色。红色的十六进制代码是`#e74c3c`，蓝色是`#3498db`。学生不需要知道这些，只需要会描述"现在是红色，我要蓝色"即可。
|
||
|
||
2. **案例2（导航栏不固定）的技术原理：** CSS中`position: fixed`可以让元素固定在页面上不随滚动。默认情况下元素是`position: static`，会随页面滚动。教师需要理解这个概念以便在AI修复后验证是否正确，但不需要向学生解释CSS属性。
|
||
|
||
3. **案例3（按钮无响应）的技术原理：** HTML的`onclick`属性调用的函数名是`showSecert`（拼写错误），而JavaScript中定义的函数名是`showSecret`。这种拼写不一致导致按钮点击时找不到对应函数。这是程序员常犯的经典Bug之一。学生不需要看懂代码，只需要用三要素描述"按钮点了没反应"，AI就能自动找到并修复这个拼写错误。
|
||
|
||
4. **关于"重新来"vs"迭代修复"：** 在AI编程工具中，如果学生在同一个对话中告诉AI"请修复这个问题"，AI会在现有代码基础上修改。如果学生开了新对话说"帮我做一个网页"，AI会重新生成全部代码。教师要引导学生在同一个对话中修复，体验"迭代"而非"重做"。
|
||
|
||
5. **如果AI修复后仍有问题：** 这本身就是一个教学机会！告诉学生"再描述一次，说得更精确一点"，让他们体验多轮迭代修复的过程。
|
||
|
||
**FAQ（学生常见问题应对）：**
|
||
|
||
| 学生问题 | 应对方式 |
|
||
|---------|---------|
|
||
| "AI怎么这么笨啊？" | "它不是笨，它是太听话了——你说什么它就做什么，你没说的它就猜。所以关键是我们要说得更清楚。" |
|
||
| "我不知道怎么描述这个Bug" | "用三要素填空：'我____了（做了什么），我以为____（以为怎样），但是____（实际怎样）'。先把空填上，不用写得完美。" |
|
||
| "修了一次没修好怎么办？" | "再描述一次！可以加更多细节。修bug经常要修两三次才能修好，这很正常。" |
|
||
| "我想重新做一个而不是修" | "重新做的话，之前做好的部分也没了。试试告诉AI具体哪里要改——你会发现比重新来快多了。" |
|
||
| "代码好长好吓人" | "你不需要看懂代码！你只需要看最终效果对不对，然后用三要素告诉AI哪里不对。AI负责改代码，你负责说清楚问题。" |
|
||
| "修好了一个但又出了一个新问题" | "太正常了！这就叫迭代。继续用三要素描述新问题就行。专业程序员每天都在做这件事。" |
|
||
|
||
**备课体验任务：**
|
||
|
||
教师在上课前必须自己完成以下任务：
|
||
1. 用3个预设翻车案例的代码创建HTML文件，在浏览器中打开确认Bug效果正确
|
||
2. 自己尝试用三要素描述每个Bug，并在AI编程工具中修复，记录修复用了几轮
|
||
3. 故意给AI一个模糊指令（如"做个网页"），体验翻车效果
|
||
4. 在班级文件夹中准备好3个HTML文件，确保上课时能快速分发给学生
|
||
|
||
---
|
||
|
||
### 7. 5分钟日常AI挑战
|
||
|
||
**本周挑战：翻车猎人**
|
||
|
||
找一个AI翻车的案例——可以是你自己用AI聊天或画图时遇到的翻车，也可以是网上看到的搞笑AI翻车截图（经典案例：AI画出来的六指手、拼错的文字、答非所问的回答等）。
|
||
|
||
用"Bug描述三要素"写下来并发到班级群：
|
||
1. **我做了什么**（或"这个人做了什么"）：给AI下了什么指令？
|
||
2. **我以为会怎样**：期望AI做出什么效果？
|
||
3. **实际怎样了**：AI实际做出了什么？
|
||
|
||
**评选标准：**
|
||
- 翻车有趣程度：越离谱越好
|
||
- 描述精确程度：三要素是否写清楚了
|
||
|
||
下节课开始前，老师会展示"本周最佳翻车猎人"的作品。
|
||
|
||
---
|
||
|
||
### 8. 拓展任务
|
||
|
||
**进阶挑战（适合提前完成的学生）：**
|
||
|
||
**挑战1：翻车预防师**
|
||
|
||
回顾你在第3课做的自我介绍网页。用今天学到的"审查"眼光重新检查一遍：
|
||
- 有没有你当时没注意到的Bug？
|
||
- 用三要素描述出来，然后让AI修复
|
||
- 记录修复前后的对比
|
||
|
||
**挑战2：翻车分析师**
|
||
|
||
做一个"翻车原因分类表"：
|
||
- 收集至少5个翻车案例（可以是今天课上的、自己的、同学的、网上的）
|
||
- 给每个翻车案例归类：
|
||
- A类：指令太模糊导致的翻车
|
||
- B类：指令说清楚了但AI理解错了
|
||
- C类：AI自己犯的错（幻觉等）
|
||
- 分析：哪类翻车最多？这说明什么？
|
||
|
||
**挑战3：修复大师**
|
||
|
||
找到一个你觉得比案例3更复杂的Bug（可以是自己的项目中的），尝试用多轮迭代修复它。记录：
|
||
- 你一共跟AI对话了几轮才修好？
|
||
- 每轮你是怎么改进描述的？
|
||
- 最终的修复提示词是什么？
|