Files
AICODE2026/3-lessons/AICODE-03/旧版本/AICODE03-04 当AI翻车了 v1.md
2026-04-09 13:42:10 +02:00

43 KiB
Raw Blame History

课时, 主题, 核心能力, 核心工具, 时长, 透明化层级
课时 主题 核心能力 核心工具 时长 透明化层级
4 当AI"翻车"了
韧性力
表达力
AI编程工具见L03工具方案
DeepSeek
90分钟 结果层

1. 课程目标

知识目标:

  • 理解"Bug描述三要素":我做了什么(操作步骤)、我以为会怎样(预期结果)、实际怎样了(实际结果)
  • 认识AI翻车的常见类型颜色/文字错误、布局/结构错误、功能逻辑错误
  • 理解"翻车大多数时候不是AI的问题而是我们的指令不够清楚"

能力目标:

  • 能从"不对"进化到精确的Bug描述韧性力
  • 能用清晰的语言向AI描述修复需求表达力
  • 能独立完成"发现问题→描述问题→修复问题"的完整流程(韧性力+表达力)
  • 内化"需求→生成→审查→迭代"循环(共创力综合)

情感目标:

  • 建立"翻车不可怕,翻车是学习机会"的心态
  • 从"翻车=失败"转变为"翻车=下一次做得更好的线索"
  • 感受到阶段一四课能力的串联,带着信心进入阶段二

2. 核心概念与误概念预设

认知层级递进:

层级 本课目标 对应活动
识别层 能发现AI的输出和自己的预期不同 翻车实验室
理解层 能说出翻车的原因(指令不清晰) Bug描述训练
应用层 能用三要素描述Bug并指导AI修复 翻车修复挑战
迁移层 能把"描述问题"的方法迁移到日常沟通 阶段一回顾+5分钟挑战

典型误概念:

误概念 正确认知 诊断方式 纠正策略
误概念1AI翻车是AI的问题 大多数翻车是因为我们的指令不够清楚AI只能按它理解的来做 让学生故意给模糊指令,观察结果 翻车实验室:用实验证据证明"模糊指令→离谱结果"
误概念2修复=重新来一遍 修复应该是精确地告诉AI哪里不对、要改成什么样而不是从头再来 观察学生遇到问题时是否直接重新生成 对比演示:"重新来"vs"精确修复"的效率差异
误概念3我说不清楚哪里不对 用"三要素"(我做了什么→我以为会怎样→实际怎样了)就能清楚描述 让学生先用"不对"描述,再用三要素重新描述 提供脚手架,用填空句式辅助表达
误概念4翻车=失败,很丢脸 翻车是正常的,最厉害的程序员也天天翻车,关键是怎么修 观察学生翻车时的情绪反应 翻车正常化——用幽默的翻车案例营造安全氛围
误概念5一次修不好就没办法了 修复往往需要多轮迭代,一轮修不好就再描述一次 观察学生一轮修复后是否放弃 鼓励"再试一次",展示教师自己的多轮修复过程

3. 教学准备

工具/环境:

  • AI编程工具每位学生已在L03课完成安装配置具体工具见L03工具方案
  • DeepSeek模型通过选定工具接入
  • 教师演示电脑+投影

教师提前准备资源:

3个预设翻车案例教师提前用AI生成好课堂直接展示给学生

案例1简单颜色翻车——"我要蓝色,它给了红色"

教师使用的模糊提示词:

帮我做一个好看的个人网页

AI生成的"翻车"结果教师提前准备好的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生成的"翻车"结果:

<!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>作品1AI性格测评卡</p>
            <p>作品2提示词五要素卡片</p>
            <p>作品3自我介绍网页</p>
        </div>
    </div>
</body>
</html>

预期结果:导航栏始终固定在页面顶部,滚动页面时导航栏不动 实际结果:导航栏跟着页面一起滚走了,滚到下面就看不见导航栏了

Bug描述示范三要素

我做了什么:我往下滚动页面
我以为会怎样:导航栏应该一直留在最上面不动
实际怎样了:导航栏跟着页面滚走了,滚到下面就看不到导航栏了

修复提示词:

请把导航栏固定在页面最顶部,页面往下滚动的时候导航栏不要动,一直留在最上面。
同时给导航栏下面的内容留出足够的空间,不要被导航栏挡住。

案例3复杂功能翻车——"按钮点了没反应"

教师使用的提示词:

做一个网页,上面有一个"显示秘密消息"的按钮,点击之后显示一段隐藏的文字

AI生成的"翻车"结果:

<!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分钟)

预设误概念:

  • 误概念1AI翻车是因为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对话了几轮才修好
  • 每轮你是怎么改进描述的?
  • 最终的修复提示词是什么?