643 lines
40 KiB
Markdown
643 lines
40 KiB
Markdown
---
|
||
课时: 3
|
||
主题: 认识你的编程搭档
|
||
核心能力: [共创力]
|
||
核心工具: [AI编程工具（见工具方案）, DeepSeek]
|
||
时长: 90分钟
|
||
透明化层级: 结果层
|
||
---
|
||
|
||
### 1. 课程目标
|
||
|
||
**知识目标：**
|
||
- 认识AI编程工具的界面布局和核心功能区域（代码/对话区、AI对话面板、预览方式）
|
||
- 理解"快思考"模型与"慢思考"模型的区别（速度vs质量的权衡）
|
||
- 知道模型选型口诀："日常创意用快模型，复杂逻辑用慢模型"
|
||
|
||
**能力目标：**
|
||
- 能通过AI编程工具用自然语言描述需求并生成代码
|
||
- 能完成一轮完整的"需求→生成→审查→反馈→迭代"循环
|
||
- 能使用"审查三问"对AI生成结果进行基本判断
|
||
|
||
**情感目标：**
|
||
- 消除"代码恐惧"：建立"你不需要看懂每一行代码，你只需要看结果对不对"的心智模型
|
||
- 体验"用说话让电脑帮你做事"的成就感和新鲜感
|
||
- 建立"AI是搭档而非万能神"的正确预期——搭档需要你的反馈才能做得更好
|
||
|
||
### 2. 核心概念与误概念预设
|
||
|
||
**本节课核心概念（按认知层级排列）：**
|
||
|
||
- **识别层：** AI编程工具是什么（一个和AI对话做东西的工作台）；工作台的三大功能区（代码/编辑区、AI对话区、预览方式）；快思考模型和慢思考模型是两种不同的AI
|
||
- **理解层：** 代码是AI的"作品"而不是你需要读懂的"考试题"；快模型速度快但不擅长复杂任务，慢模型速度慢但质量高；"需求→生成→审查→迭代"是一个循环，不是一次性动作
|
||
- **应用层：** 能根据任务复杂度选择合适的模型；能用自然语言向AI描述具体需求；能根据预览效果给出修改意见
|
||
- **迁移层：** "选对工具做对事"的思维方式可以迁移到生活中的其他场景（比如选不同的笔画不同的画）
|
||
|
||
**预设典型误概念：**
|
||
|
||
1. **误概念1：代码很可怕我看不懂**
|
||
- 诊断问题：学生第一次看到AI生成的代码时是否出现畏缩、紧张、或说"好多字看不懂"
|
||
- 纠正策略：类比重塑——"代码就像菜谱，你不需要看懂菜谱上每一步，你只需要尝一尝菜好不好吃"；重点引导看预览效果，而非代码本身
|
||
|
||
2. **误概念2：AI一次做完了就不用改了**
|
||
- 诊断问题：学生看到AI生成的网页后是否直接说"好了"而不检查
|
||
- 纠正策略：设计"审查三问"脚手架，强制引导至少检查一轮；展示教师自己的迭代过程——"你看老师也改了3遍才满意"
|
||
|
||
3. **误概念3：编程工具是用来写代码的（而非用来和AI对话的）**
|
||
- 诊断问题：学生是否尝试在代码区打字而非在AI对话区输入
|
||
- 纠正策略：明确告知——"今天你唯一要打字的地方就是这个AI对话框，其他地方不用碰"
|
||
|
||
4. **误概念4：模型越贵越好，什么任务都用最强的**
|
||
- 诊断问题：快慢模型对比实验后，学生是否认为"以后都用慢模型就好了"
|
||
- 纠正策略：用"杀鸡焉用牛刀"的类比——简单任务用慢模型是浪费时间和资源；引导学生感受等待慢模型的焦虑
|
||
|
||
**螺旋深化路径设计：**
|
||
- 第一轮接触（分段一）：认识AI编程工具 → 理解"这是和AI合作的工作台"
|
||
- 第二轮深化（分段二）：对比两种模型 → 理解"不同工具适合不同任务"
|
||
- 第三轮应用（分段三）：用AI做自我介绍网页 → 体验"说话→出结果"的魔法
|
||
- 第四轮迁移（分段四）：审查→反馈→迭代 → 建立"和AI搭档的完整工作循环"
|
||
|
||
### 3. 教学准备
|
||
|
||
**硬件：**
|
||
- 学生人手一台电脑，具备网络环境
|
||
- 教师电脑连接投影/大屏幕用于演示
|
||
|
||
**软件（三选一，根据机构实际情况选择）：**
|
||
|
||
> **工具方案**
|
||
>
|
||
> | 方案 | 工具 | 说明 | 预览方式 |
|
||
> |------|------|------|---------|
|
||
> | Plan A | **QonnWolfCode**（穹狼自研TUI，基于Claude Code CLI） | 终端式交互，学生在命令行与AI对话，代码自动生成到文件 | 浏览器打开本地HTML文件 |
|
||
> | Plan B | **Trae**（字节跳动AI IDE） | 图形化IDE，内置AI对话面板和预览窗口 | IDE内置预览窗口 |
|
||
> | Plan C | **国产AI网页端 + 任意代码编辑器** | 在线AI对话 + 本地编辑器查看代码 | 浏览器打开本地HTML文件 |
|
||
>
|
||
> 教案中所有操作步骤均以**功能描述**编写，不绑定特定工具的按钮位置。教师根据实际使用的工具进行对应操作即可。
|
||
|
||
- 选定工具已在每台电脑上安装并完成配置
|
||
- 公司API中转已配置好，学生打开即可使用
|
||
- 快思考模型和慢思考模型均已接入并命名清晰（如"快速版"和"深度版"）
|
||
|
||
**资源：**
|
||
- 教师示范用的自我介绍网页提示词（打印版，放在每台电脑旁）
|
||
- "审查三问"卡片（打印版，每人一张）
|
||
- "模型选型口诀"海报（贴在教室显眼位置）
|
||
- 备用方案：如果主工具出问题，准备好备选工具或在线代码编辑器（如CodePen）
|
||
|
||
**教师课前必做：**
|
||
- 自己用选定工具完成一遍"自我介绍网页"的全流程（含至少2轮迭代），记录耗时和常见问题
|
||
- 用快思考模型和慢思考模型分别生成同一个网页，截图保存对比结果
|
||
- 确认每台电脑的工具能正常打开、AI对话功能能正常响应
|
||
- 准备一个"故意做得不完美"的自我介绍网页demo，用于演示审查环节
|
||
|
||
### 4. 教学流程
|
||
|
||
**第一幕：联系 (Connect) — 10分钟**
|
||
|
||
**【上节课回顾】(3分钟)**
|
||
|
||
**师：** 同学们好！上节课我们学了提示词五要素，还记得是哪五个吗？谁来说说？【诊断点：检验L2知识保持度】【识别层】
|
||
|
||
**【分支A】若学生能说出大部分要素（角色、指令、场景、限制、示例）：**
|
||
**师：** 记得很清楚！那我问一个进阶问题——如果你只能用三个要素写一条提示词，你会选哪三个？为什么？【理解层：测试优先级判断】
|
||
|
||
**【分支B】若学生只记得1-2个：**
|
||
**师：** 没关系，我们一起回忆。上节课我们说过，写提示词就像点外卖——你要告诉AI你是谁（角色）、你要什么（指令）、什么场景下用（场景）、有什么忌口（限制）、最好给个参考图（示例）。现在能记起来了吗？
|
||
|
||
**【分支C】若学生沉默：**
|
||
**师：** 我给个提示——上节课我们把一个"帮我写作文"的烂提示词，改成了一个好提示词。你们加了什么？（通过回忆活动触发记忆）
|
||
|
||
**师：** 太好了。上节课学的这些提示词技巧，今天全部都要用到！因为今天，我们要开始一个全新的冒险——不只是跟AI聊天了，而是要让AI帮你做出一个真正的东西！
|
||
|
||
**【情景导入】(7分钟)**
|
||
|
||
**师：** 想象一下：你用手机打开一个网页，上面有你的名字、你的照片、你的爱好介绍，还有酷炫的背景——你把这个链接发给爸爸妈妈，他们一打开就看到你自己设计的"个人名片"。酷不酷？【制造期待】
|
||
|
||
**生：** 酷！/ 真的能做到吗？/ 我不会写代码啊！
|
||
|
||
**师：** 这就是今天要做的事！而且，你不需要写一行代码。你只需要——说话。【制造认知冲突】【诊断点：观察学生听到"不需要写代码"时的反应——是松了口气还是不相信】
|
||
|
||
**【分支A】若学生表现出兴奋和好奇：**
|
||
**师：** 对，就是用说话来编程！这就是AI编程的魔法。不过，要把话说对，AI才能做对——还记得提示词五要素吗？今天你就要把它用在真正的编程里了！
|
||
|
||
**【分支B】若有学生说"不可能吧"或表示怀疑：**
|
||
**师：** 你的怀疑很正常！以前编程确实要写很多代码。但今天我要让你见证一个奇迹——等下你亲眼看我用一句话变出一个网页！如果我做到了，你愿意试试吗？
|
||
|
||
**【分支C】若有学生表现出紧张（预设误概念1的早期表现）：**
|
||
**师：** 我看到有同学有点紧张。别担心！今天你不需要看懂代码，你只需要做两件事：跟AI说话，和看结果满不满意。就像你去餐厅点菜——你只需要点菜和尝菜，不需要自己炒菜！
|
||
|
||
**师：** 但在开始做之前，我们得先认识一下今天的新工具。就像一个画家画画前要先了解自己的画室在哪里摆颜料、在哪里放画布一样——我们也要认识我们的"AI编程工作台"！
|
||
|
||
---
|
||
|
||
**第二幕：建构 (Construct) — 65分钟**
|
||
|
||
**【分段一：认识你的AI编程工作台】(15分钟)**
|
||
|
||
**预设误概念：**
|
||
- 误概念3：编程工具是用来写代码的（学生可能想在代码区打字）
|
||
- 误概念1：代码很可怕我看不懂（学生看到界面可能紧张）
|
||
|
||
**讲解与演示:**
|
||
|
||
**师：** 大家看我的屏幕。这个软件就是我们的AI编程工作台。它的名字不重要，重要的是，它是你和AI搭档合作的"工作台"。我来带你们认识三个最重要的功能。【投影展示工具界面】
|
||
|
||
**师：** 第一个功能——**AI对话区**。看到这个可以打字的地方了吗？这是今天你唯一需要打字的地方！你在这里用自然语言告诉AI你想要什么，就像跟朋友发微信一样。【诊断点：观察学生是否能找到对话区】【识别层】
|
||
|
||
**师：** 第二个功能——**代码区**。这里可能会出现很多看起来密密麻麻的文字。注意听——这个区域，今天你不需要碰它！AI会把代码写在这里，但你不需要看懂。就像你在手机上用App，不需要知道App是怎么写出来的。【代码脱敏：提前降低恐惧】
|
||
|
||
**师：** 第三个功能——**预览**。AI写完代码后，你可以通过预览看到做出来的网页长什么样。这才是你要重点关注的！就像你网购的时候，你看的是商品图片，不是商品的生产说明书。【类比强化】
|
||
|
||
**师：** 我来总结一下：AI对话区是你的"嘴巴"——你在那里说话；代码区是AI的"手"——它在那里干活；预览是"镜子"——你在那里看效果。三个功能，你只需要用一个——AI对话区。清楚了吗？【诊断点：确认理解三功能关系】【理解层】
|
||
|
||
**【分支A】若学生清楚：**
|
||
**师：** 很好！那我考你们——如果你想让网页上的字变大，你应该在哪里操作？
|
||
|
||
**【分支B】若有学生说"代码编辑区"（误概念3的表现）：**
|
||
**师：** 很好的猜测！但今天我们不碰代码编辑区。你要做的是在AI对话面板里说："请把标题字号调大"。AI听懂了，就会自动去代码区改。你只管说，它来改！
|
||
|
||
**【分支C】若学生表现出被界面吓到（误概念1的表现）：**
|
||
**师：** 我知道这个界面看起来有点复杂。但其实跟你打开微信差不多——微信也有很多按钮你不用管，你只用管聊天框。我们的工具也一样，你只用管AI对话区！
|
||
|
||
**学生实践:**
|
||
|
||
**师：** 现在，打开你面前电脑上的AI编程工具。找到AI对话区。在对话框里输入一句话："你好，请帮我写一首四行的关于春天的小诗。"然后按回车发送。
|
||
|
||
（学生操作2-3分钟）
|
||
|
||
**师：** 注意观察：AI回复了什么？它回复的速度快吗？这只是热热身，让你确认AI对话面板能正常用。
|
||
|
||
（教师走动观察，帮助操作遇到困难的学生。重点关注：是否有学生找不到对话面板、是否有学生试图在代码区输入）
|
||
|
||
**进度同步:**
|
||
|
||
**师：** 好，大家都看到AI回复了吧？谁来读读AI给你写的小诗？【诊断点：确认所有学生都成功与AI对话】
|
||
|
||
**师：** 很好！你刚刚做的事情，就是"和AI对话"。接下来整节课，你都是通过这个对话框和AI合作的。代码区不用管，预览窗口用来看效果。记住这三个区域的分工了吗？
|
||
|
||
---
|
||
|
||
**【分段二：快思考vs慢思考——模型选型速成】(15分钟)**
|
||
|
||
**预设误概念：**
|
||
- 误概念4：模型越贵越好，什么任务都用最强的
|
||
- 学生可能不理解"模型"是什么意思
|
||
|
||
**讲解与演示:**
|
||
|
||
**师：** 刚才你们跟AI聊天的时候，有没有注意到工具里有一个可以切换模型的地方？那里显示的是"模型"的名字。我先问大家：上节课的内容——什么是模型？你们还记得L1课上说的吗？【诊断点：回忆L1知识】【识别层】
|
||
|
||
**【分支A】若学生能回忆"不同AI有不同性格"：**
|
||
**师：** 对！不同的模型就像不同的"AI搭档"，它们各有特长。今天我们要认识两类特别重要的搭档：一个反应特别快但有时粗心，另一个很慢但特别细致。
|
||
|
||
**【分支B】若学生记忆模糊：**
|
||
**师：** 没关系。你可以把"模型"想象成不同的AI员工。有些员工干活特别快，但有时候不太细心；有些员工干活比较慢，但特别认真仔细。今天我们就来认识这两类员工。
|
||
|
||
**师：** 我们把它们起个名字。干活快的叫**"快思考"模型**，干活慢但仔细的叫**"慢思考"模型**。现在，我来做一个实验——同一个任务，分别让它们两个来做，你们帮我看看有什么不同！
|
||
|
||
**师：** 任务是这样的：我要让AI用HTML生成一个简单的生日贺卡网页，上面有"生日快乐"四个大字、一个蛋糕的emoji、和一句祝福语。先看快思考模型——【切换到快思考模型，现场演示】
|
||
|
||
（教师在投影上操作：输入提示词，切换到快思考模型，发送，计时）
|
||
|
||
**师：** 你们看，快思考模型花了多少秒？大概5秒就出来了。我们看看预览效果——功能都有了，"生日快乐"四个字、蛋糕emoji、祝福语，都在。但是……你们觉得好看吗？
|
||
|
||
**生：** 还行 / 有点丑 / 太简单了
|
||
|
||
**师：** 好，记住你们的评价。现在同样的提示词，我切换到慢思考模型——【切换到慢思考模型，现场演示】
|
||
|
||
（教师操作：同样的提示词，切换到慢思考模型，发送，计时。让学生感受等待时间。）
|
||
|
||
**师：** 你们感受到了吗？慢思考模型花了多少秒？大概20-30秒。比刚才慢了好多倍。但是我们看看预览效果——
|
||
|
||
（展示慢思考模型的结果：通常会有更精美的配色、居中排版、渐变背景等）
|
||
|
||
**师：** 两个结果放在一起对比。谁来说说区别？【诊断点：学生能否具体描述两者差异】【理解层】
|
||
|
||
**【分支A】若学生能说出具体差异（"慢的那个有渐变背景""慢的排版更好看"）：**
|
||
**师：** 观察力很强！快思考模型就像交作业——完成了任务，但没花心思美化。慢思考模型就像精心设计——不只完成任务，还考虑了美观。
|
||
|
||
**【分支B】若学生只说"慢的好看"但说不出为什么：**
|
||
**师：** "好看"是一个好的起点！但我们要更具体——比如，你注意到背景颜色有什么不同吗？文字的位置有什么不同吗？再仔细看看？
|
||
|
||
**【分支C】若学生说"那以后都用慢的不就好了"（误概念4的表现）：**
|
||
**师：** 好问题！那如果你只是想快速测试一个想法——比如"这个颜色搭配好不好看"——你愿意每次都等20秒吗？想象一下你要改10次，每次等20秒，加起来就是……
|
||
|
||
**生：** 200秒！3分钟多！
|
||
|
||
**师：** 对！但如果用快思考模型，10次只要50秒！所以有一个选型口诀，大家跟我念一遍——
|
||
|
||
**师+生：** "日常创意用快模型，复杂逻辑用慢模型！"
|
||
|
||
**师：** 翻译成大白话就是：简单的事情（改个颜色、试个想法、写首小诗）用快模型，复杂的事情（做一个有很多功能的程序、需要精确计算的任务）用慢模型。就像切水果用小刀，砍木头用斧头——选对工具才高效！
|
||
|
||
**学生实践:**
|
||
|
||
**师：** 现在你们来试试！用下面这个任务分别用快思考模型和慢思考模型各做一次：
|
||
|
||
"请帮我生成一个HTML网页，上面居中显示我的名字（用你自己的名字），名字下面有一句你喜欢的格言或者口头禅，背景用你喜欢的颜色。"
|
||
|
||
操作步骤：
|
||
1. 先切换到快思考模型（在工具的模型切换处选择"快速版"）
|
||
2. 输入上面的提示词（把名字和格言换成你自己的），记录花了多少秒
|
||
3. 看预览效果，心里记住长什么样
|
||
4. 再切换到慢思考模型（选择"深度版"），输入同样的提示词
|
||
5. 记录花了多少秒，对比两次的效果
|
||
|
||
（学生操作8-10分钟。教师走动观察，帮助遇到技术问题的学生，重点关注：是否有人不知道如何切换模型、是否有人在代码区操作。）
|
||
|
||
**进度同步:**
|
||
|
||
**师：** 时间到！谁来分享一下你的对比结果？快模型花了几秒？慢模型花了几秒？效果有什么不同？【诊断点：学生能否总结快/慢模型的差异特征】
|
||
|
||
（请2-3位学生分享，投影展示他们的对比结果）
|
||
|
||
**师：** 非常好。那我问大家：如果接下来我们要做一个比较复杂的自我介绍网页——有你的名字、爱好、照片、好看的排版——你会选哪个模型？
|
||
|
||
**生：** 慢思考模型！
|
||
|
||
**师：** 为什么？
|
||
|
||
**生：** 因为比较复杂！
|
||
|
||
**师：** 对了！但如果后面我们觉得"这个颜色不好看，换一个试试"呢？
|
||
|
||
**生：** 用快模型！
|
||
|
||
**师：** 恭喜你们！你们已经学会"选对搭档做对事"了。接下来，我们就用慢思考模型，来做今天的主角——你的个人自我介绍网页！
|
||
|
||
---
|
||
|
||
**【分段三：第一个AI编程任务——自我介绍网页】(20分钟)**
|
||
|
||
**预设误概念：**
|
||
- 误概念1：代码很可怕我看不懂（生成代码时可能再次出现）
|
||
- 误概念2：AI一次做完了就不用改了
|
||
- 学生可能不知道怎么描述自己想要的网页
|
||
|
||
**讲解与演示:**
|
||
|
||
**师：** 好，现在进入今天最重要的环节！你要用AI做一个"自我介绍网页"——上面有你的名字、爱好、一段自我介绍，做完后可以用手机打开给爸爸妈妈看。
|
||
|
||
**师：** 但在你动手之前，我先给大家做一遍示范。注意看我怎么跟AI说！【教师现场演示】
|
||
|
||
（教师在投影上操作，在AI对话面板输入以下提示词：）
|
||
|
||
**师：** 我要输入的提示词是这样的，大家注意看——
|
||
|
||
```
|
||
请帮我用HTML和CSS生成一个自我介绍网页。要求如下：
|
||
- 页面标题是"关于我"
|
||
- 顶部居中显示我的名字：王老师
|
||
- 名字下面有一段自我介绍（3-4句话）：我是穹狼科创的老师，喜欢教小朋友用AI创造有趣的东西。我的爱好是看科幻电影和打羽毛球。我最喜欢的一句话是"想象力比知识更重要"。
|
||
- 下面列出我的三个爱好，每个爱好用一个emoji图标配上文字
|
||
- 背景用浅蓝色渐变，文字用深灰色
|
||
- 整体风格简洁大方，适合手机屏幕显示
|
||
```
|
||
|
||
**师：** 大家注意，我这个提示词用到了上节课学的什么技巧？【诊断点：连接L2知识】【应用层】
|
||
|
||
**【分支A】若学生能识别出提示词要素：**
|
||
**师：** 对！有明确的指令（"生成一个自我介绍网页"）、有具体的限制（背景颜色、风格）、有示例内容（具体的自我介绍文字）。L2学的东西现在直接就用上了！
|
||
|
||
**【分支B】若学生说不出来：**
|
||
**师：** 提示一下——我有没有告诉AI"做什么"？有没有告诉它"具体内容是什么"？有没有告诉它"限制条件"？这就是提示词五要素在实战中的应用！
|
||
|
||
（教师按下发送，等待AI生成。这时学生会看到代码在编辑区出现。）
|
||
|
||
**师：** 看！AI正在写代码了。我知道你们现在可能看到左边的代码区出现了一堆看不懂的东西——不要慌！【代码脱敏关键时刻】【诊断点：观察学生表情和反应，谁紧张了？谁好奇了？】
|
||
|
||
**【分支A】若有学生好奇地想看代码：**
|
||
**师：** 你想看看代码？很好，这份好奇心非常棒！你可以瞄一眼，但今天你不需要看懂它。以后的课上我们会慢慢"掀开盖子看里面"的。
|
||
|
||
**【分支B】若有学生说"好多看不懂的东西"（误概念1的表现）：**
|
||
**师：** 完全正常！这些代码就像菜谱上的步骤——你今天是"品菜的客人"，不是"做菜的厨师"。你只需要看预览窗口里的网页好不好看、对不对。来，把目光移到预览窗口！
|
||
|
||
**【分支C】若有学生表现出紧张/退缩：**
|
||
**师：** 嘿，没事的！你知道吗，今天全班没有一个人需要看懂这些代码。这是AI的工作，不是你的。你的工作是——看这个！（手指预览窗口）它做出来的东西好不好看？
|
||
|
||
（预览窗口展示生成的网页）
|
||
|
||
**师：** 大家看预览窗口——这就是AI帮我做出来的自我介绍网页！我的名字在上面，自我介绍也有了，爱好列表也有emoji。你们觉得怎么样？
|
||
|
||
**生：** 还不错！/ 挺好看的！
|
||
|
||
**师：** 看起来是不是很神奇？一段话就变成了一个真正的网页！但是——先别急着说"完成了"！我故意留了一些不太满意的地方，等下我们在下一个环节来审查和修改。现在，轮到你们了！
|
||
|
||
**学生实践:**
|
||
|
||
**师：** 现在，每个人做自己的"自我介绍网页"。我给你们一个提示词模板，你们把里面的内容换成自己的：
|
||
|
||
```
|
||
请帮我用HTML和CSS生成一个自我介绍网页。要求如下：
|
||
- 页面标题是"关于[你的名字]"
|
||
- 顶部居中显示我的名字：[你的名字]
|
||
- 名字下面有一段自我介绍（3-4句话）：[写几句关于自己的话]
|
||
- 下面列出我的三个爱好，每个爱好用一个emoji图标配上文字
|
||
- 背景用[你喜欢的颜色]，文字用[你选的颜色]
|
||
- 整体风格[简洁/可爱/酷炫/清新]，适合手机屏幕显示
|
||
```
|
||
|
||
**师：** 重要提醒！方括号里面的内容要换成你自己的！不要照抄模板！每个人的网页应该是独一无二的——你自己的名字、你自己的故事、你自己喜欢的风格。
|
||
|
||
**师：** 对了，用慢思考模型（深度版），因为这是一个比较复杂的任务。开始吧！
|
||
|
||
（学生操作10-12分钟。教师走动观察，重点关注：）
|
||
- 谁在发呆不知道写什么内容 → 过去聊天引导："你最喜欢做什么？最喜欢什么动物？"
|
||
- 谁把模板原封不动发出去了 → 提醒把方括号里的内容换成自己的
|
||
- 谁看到代码紧张了 → 再次安抚，引导看预览
|
||
- 谁选错了模型 → 帮忙切换
|
||
- 谁第一个做完了 → 问"你满意吗？等下我们来审查"
|
||
|
||
**进度同步:**
|
||
|
||
**师：** 好，暂停一下！你们现在应该都在预览窗口看到了自己的自我介绍网页。举手告诉我：看到了的举手！【诊断点：确认所有学生完成生成】
|
||
|
||
（如果有学生没完成，快速排障。）
|
||
|
||
**师：** 太棒了！你们刚才完成了一件很酷的事——用"说话"做出了一个真正的网页！这就是AI编程！但是——这才是第一步。接下来我要教你们一个特别重要的技能：怎么判断AI做的东西好不好，怎么告诉AI去改。
|
||
|
||
---
|
||
|
||
**【分段四：审查→反馈→迭代——完整循环体验】(15分钟)**
|
||
|
||
**预设误概念：**
|
||
- 误概念2：AI一次做完了就不用改了
|
||
- 学生可能不知道怎么描述"哪里不对"
|
||
- 学生可能以为"修改=重新做一遍"
|
||
|
||
**讲解与演示:**
|
||
|
||
**师：** 你们的网页AI都做出来了。我现在问一个关键问题——你满意吗？100分满分的话，你给自己的网页打几分？【诊断点：观察学生有没有审查意识，还是"能出来就行"】【理解层】
|
||
|
||
**【分支A】若有学生说"80分"或指出具体不足：**
|
||
**师：** 很好！那扣掉的20分扣在哪里？能不能具体说说？
|
||
|
||
**【分支B】若大部分学生说"挺好的""100分"（误概念2的表现）：**
|
||
**师：** 真的100分吗？那我们来做一个测试——把你的网页在手机上打开看看。（教师指导学生用手机扫码或输入预览链接）手机上的字够大吗？颜色在手机屏幕上还好看吗？
|
||
|
||
**【分支C】若学生说"不太好但不知道哪里不好"：**
|
||
**师：** 完全没问题！"不知道哪里不好"是很正常的，因为你还没有学会怎么"审查"。现在我教你一个超级好用的工具——
|
||
|
||
**师：** 每个人桌上有一张"审查三问"卡片，我们一起念一遍：
|
||
|
||
**师+生：**
|
||
**第一问：功能对不对？** （名字对吗？爱好列表完整吗？有没有遗漏的内容？）
|
||
**第二问：好不好看？** （颜色搭配舒服吗？字体大小合适吗？间距太挤还是太松？）
|
||
**第三问：好不好用？** （手机上能正常显示吗？文字看得清吗？）
|
||
|
||
**师：** 这三个问题就是你审查AI作品的"三把尺子"。现在，我先用这三把尺子量量我自己的网页——
|
||
|
||
（教师展示自己故意做的"不完美"的自我介绍网页）
|
||
|
||
**师：** 第一问，功能对不对？名字有了，自我介绍有了，爱好列表有了——功能基本OK，打勾。
|
||
第二问，好不好看？嗯……我觉得这个背景颜色有点刺眼，而且爱好列表的emoji太小了。这里我不满意。
|
||
第三问，好不好用？在手机上看看……嗯，字太小了，手机上要放大才看得清。
|
||
|
||
**师：** 发现了两个问题！现在我要跟AI说修改意见。注意看我怎么说——我不是说"重新做一个"，而是说"在现有基础上改两个地方"。这很重要！修改不等于推翻重来！
|
||
|
||
（教师在对话面板输入：）
|
||
|
||
```
|
||
请帮我修改两个地方：
|
||
1. 背景颜色改成浅绿色渐变，不要太刺眼
|
||
2. 爱好列表的emoji放大一倍，文字字号也稍微加大，确保手机上看得清
|
||
```
|
||
|
||
（AI修改后展示预览效果）
|
||
|
||
**师：** 看！AI根据我的反馈改了。背景换了，emoji也大了。这就是一轮完整的"需求→生成→审查→反馈→迭代"循环！你说——我改——你改——这就是你和AI搭档的工作方式。
|
||
|
||
**学生实践:**
|
||
|
||
**师：** 现在轮到你了！用"审查三问"检查你自己的网页，找出至少2个你想修改的地方，然后在AI对话面板里告诉AI你的修改意见。记住：
|
||
|
||
1. 先用审查三问检查（功能？美观？好用？）
|
||
2. 把你不满意的地方写成具体的修改意见（"背景太暗了"比"不好看"有用100倍！）
|
||
3. 在对话面板里告诉AI，让它修改
|
||
4. 看看修改后的效果
|
||
|
||
（学生操作8-10分钟。教师走动观察，重点关注：）
|
||
- 谁的修改意见很模糊（"改好看点"）→ 引导用审查三问聚焦
|
||
- 谁一直在重新生成而不是修改 → 提醒"修改≠重来，在对话里接着说就行"
|
||
- 谁完成了一轮想要再改一轮 → 鼓励"太棒了！继续迭代！"
|
||
- 谁遇到AI改错了 → "翻车了正常！跟AI说清楚它哪里理解错了"
|
||
|
||
**进度同步:**
|
||
|
||
**师：** 时间到！谁来分享一下：你给AI提了什么修改意见？AI改对了吗？【诊断点：检验反馈是否具体——"导航栏字太小"vs"不好看"】
|
||
|
||
（请2位学生展示修改前后的对比）
|
||
|
||
**师：** 大家注意，他/她的修改意见是很具体的——不是说"不好看"，而是说"XX颜色换成XX""XX字体太小"。这就是好的反馈！你的反馈越具体，AI的修改就越准确。这跟你跟朋友说话一样——"帮我拿那个东西"不如"帮我拿桌上的红色水杯"管用！
|
||
|
||
**师：** 你们今天完成了一轮完整的循环——描述需求，AI生成，审查效果，给反馈，AI迭代。这就是AI编程的核心工作流程！不管以后做什么项目，都是这个循环。记住：AI不是一次就能做完美的，它是你的搭档，你要跟它不断沟通才能做出好东西。
|
||
|
||
---
|
||
|
||
**第三幕：反思 (Contemplate) — 10分钟**
|
||
|
||
**【成果展示】(6分钟)**
|
||
|
||
**师：** 好，现在是展示时间！我请3位同学把自己的自我介绍网页投到大屏幕上，给大家看看。但注意——你不只是展示网页，还要回答两个问题：【元认知诊断】
|
||
|
||
1. 你是怎么跟AI描述你的需求的？（展示你的提示词）
|
||
2. 你给了AI什么修改意见？修改后效果怎么样？
|
||
|
||
（请3位学生展示，每人2分钟。优先选择：①有明显迭代改进的学生 ②提示词写得有特色的学生 ③遇到困难但解决了的学生）
|
||
|
||
**【互评与讨论】(4分钟)**
|
||
|
||
**师：** 看完这3位同学的展示，每人在心里想一个："我觉得最酷的一个设计"和"我想偷学的一个技巧"。谁来分享？
|
||
|
||
（请2-3位学生分享）
|
||
|
||
**师：** 最后一个问题，也是今天的总复习——谁来告诉我，快思考模型和慢思考模型有什么区别？什么时候用哪个？【诊断点：检验模型选型理解】【迁移层】
|
||
|
||
**【分支A】若学生能说出口诀和理由：**
|
||
**师：** 完美！你已经掌握了"选对搭档做对事"的方法！
|
||
|
||
**【分支B】若学生只记得"一个快一个慢"：**
|
||
**师：** 没错，速度不同。但更重要的是——简单任务用快的、复杂任务用慢的。口诀记一下："日常创意用快模型，复杂逻辑用慢模型！"
|
||
|
||
---
|
||
|
||
**第四幕：延续 (Continue) — 5分钟**
|
||
|
||
**【抽象总结】(3分钟)**
|
||
|
||
**师：** 今天我们学了三个核心内容，我用三句话总结：
|
||
|
||
**第一句：** IDE不是用来写代码的，是用来和AI对话的。你只需要管对话面板和预览窗口。
|
||
|
||
**第二句：** 快模型适合简单任务（试颜色、试想法），慢模型适合复杂任务（做完整项目）。口诀——"日常创意用快模型，复杂逻辑用慢模型。"
|
||
|
||
**第三句：** AI不是一次就能做完美的。你要跟它合作：说需求→看效果→给反馈→再改进。这个循环会贯穿我们以后每一节课。
|
||
|
||
**师：** 今天学到的"选对工具、说清需求、审查结果、给出反馈"这些能力，不只是AI编程用到的。以后你跟任何人合作（同学、老师、甚至将来工作）都需要这些能力。所以你们今天不只是学了AI编程，还学了一种"和搭档高效合作"的方法！【迁移诊断】
|
||
|
||
**【5分钟挑战发布 + 下节预告】(2分钟)**
|
||
|
||
**师：** 本周的5分钟日常AI挑战来了！任务很简单——
|
||
|
||
**把你今天做的自我介绍网页链接发给爸爸妈妈，请他们给你一条改进建议。** 把家长的建议截图发到班级群。下节课上课前，我们会看看谁收到了最有价值的建议！
|
||
|
||
操作方法：用工具的预览/分享功能生成链接，或者把网页文件导出后发给家长。具体操作方式由教师根据使用的工具在课上演示。如果不会操作，可以在班级群里问老师。
|
||
|
||
**师：** 最后预告一下下节课——下节课的主题是"当AI翻车了"。我们会故意让AI犯错，看看它能犯多离谱的错误，然后学习怎么修复。你们期不期待？
|
||
|
||
**生：** 期待！
|
||
|
||
**师：** 那下节课见！别忘了5分钟挑战——发给家长，收集建议！
|
||
|
||
### 5. AI助教使用指南
|
||
|
||
**教师提示词模板：**
|
||
|
||
**1. 课前准备——生成演示用的自我介绍网页：**
|
||
```
|
||
你是一位小学编程课的教师。请帮我用HTML和CSS生成一个"教师自我介绍网页"作为课堂演示用，要求：
|
||
- 标题是"关于王老师"
|
||
- 包含一段简短的自我介绍（3句话，语言活泼亲切）
|
||
- 列出3个爱好，每个配emoji
|
||
- 背景用浅蓝色渐变
|
||
- 故意留2-3个小问题（字号偏小、间距不均匀、某个emoji显示不对），
|
||
方便课堂上演示"审查→修改"流程
|
||
- 适配手机屏幕
|
||
```
|
||
|
||
**2. 课前准备——快慢模型对比实验的标准任务：**
|
||
```
|
||
请用HTML和CSS生成一个简单的生日贺卡网页：
|
||
- 居中显示"生日快乐！"四个大字，用漂亮的字体
|
||
- 下面有一个大蛋糕emoji（🎂）
|
||
- 再下面有一句祝福语："愿你每天都开心！"
|
||
- 背景用温暖的颜色
|
||
- 整体居中显示
|
||
```
|
||
> 教师说明：同一提示词分别用快思考模型和慢思考模型各生成一次，截图保存对比结果。快模型通常能完成基本功能但排版简单，慢模型通常有更好的配色和排版细节。
|
||
|
||
**3. 课中救急——学生不知道写什么自我介绍：**
|
||
```
|
||
我是一个四年级的小学生，名字叫[XX]。请帮我想几个写自我介绍的角度，比如我的爱好、我的梦想、我喜欢的动物等。不要直接帮我写，给我一些提示让我自己想。
|
||
```
|
||
|
||
**学生提示词模板：**
|
||
|
||
**1. 自我介绍网页（基础版）：**
|
||
```
|
||
请帮我用HTML和CSS生成一个自我介绍网页。要求如下：
|
||
- 页面标题是"关于[你的名字]"
|
||
- 顶部居中显示我的名字：[你的名字]
|
||
- 名字下面有一段自我介绍（3-4句话）：[写几句关于自己的话]
|
||
- 下面列出我的三个爱好，每个爱好用一个emoji图标配上文字
|
||
- 背景用[你喜欢的颜色]，文字用[你选的颜色]
|
||
- 整体风格[简洁/可爱/酷炫/清新]，适合手机屏幕显示
|
||
```
|
||
|
||
**2. 修改反馈模板（教学生怎么给AI提修改意见）：**
|
||
```
|
||
请帮我修改以下几个地方：
|
||
1. [具体位置]的[具体问题]改成[你想要的效果]
|
||
2. [具体位置]的[具体问题]改成[你想要的效果]
|
||
例如：
|
||
1. 背景颜色从灰色改成浅粉色渐变
|
||
2. 名字的字号从小号改成大号，加粗
|
||
3. 爱好列表的emoji放大，每个爱好之间加一点间距
|
||
```
|
||
|
||
### 6. 教师指南
|
||
|
||
**技术备注：**
|
||
|
||
**1. AI编程工具基础知识（教师需理解但不需要教给学生的）：**
|
||
|
||
| 方案 | 工具特点 | AI对话方式 | 预览方式 | 模型切换 |
|
||
|------|---------|-----------|---------|---------|
|
||
| **Plan A: QonnWolfCode** | 穹狼自研TUI，基于Claude Code CLI封装 | 终端命令行输入自然语言 | 浏览器打开生成的HTML文件 | 通过命令或配置切换 |
|
||
| **Plan B: Trae** | 字节跳动VS Code分支，内置AI能力 | 右侧AI对话面板 | IDE内置网页预览 | 对话面板顶部下拉框 |
|
||
| **Plan C: AI网页端+编辑器** | 在线AI + 本地编辑器 | 浏览器中与AI对话 | 浏览器打开本地HTML文件 | AI网页端自带模型选择 |
|
||
|
||
- 所有方案均支持上下文对话：学生的后续修改请求会基于之前的代码自动修改，无需每次重写
|
||
- 预览功能：无论使用哪种工具，最终都是在浏览器中查看HTML网页效果
|
||
- 教师根据实际采用的方案，提前熟悉该工具的操作流程
|
||
|
||
**2. 快思考模型vs慢思考模型的技术解释（教师理解用）：**
|
||
- "快思考"模型通常是参数较小的模型（如DeepSeek-V2-Lite），推理速度快，Token消耗少，适合简单的代码生成和文本任务
|
||
- "慢思考"模型通常是参数较大的推理模型（如DeepSeek-R1），会经历"思考"过程，生成质量更高但速度较慢
|
||
- 本质区别：快模型像"凭直觉回答"，慢模型像"想一想再回答"
|
||
- 成本差异：慢模型的Token消耗通常是快模型的3-10倍
|
||
|
||
**3. HTML/CSS基础（教师理解用，不需要教给学生）：**
|
||
- HTML定义网页的内容和结构（标题、段落、列表等）
|
||
- CSS定义网页的样式（颜色、字体、间距、布局等）
|
||
- 本课学生不需要了解这些概念，他们只需要看预览效果即可
|
||
- 如果学生好奇问"那些代码是什么"，可以简单说："HTML告诉浏览器'这里有什么'，CSS告诉浏览器'长什么样'。以后的课我们会慢慢了解。"
|
||
|
||
**常见问题FAQ：**
|
||
|
||
**Q1：工具打不开或AI对话不响应怎么办？**
|
||
A：先检查网络连接。如果网络正常但AI不响应，可能是API额度用完或服务器繁忙。备用方案：切换到备选工具方案（见教学准备-工具方案），或让学生暂时使用网页版AI（如chat.deepseek.com）完成对话，代码复制到本地HTML文件用浏览器打开。
|
||
|
||
**Q2：学生看到代码害怕/紧张怎么办？**
|
||
A：这是本课最重要的情感关口。三个策略：
|
||
1. 反复类比："代码=菜谱，你=食客，看菜不看谱"
|
||
2. 物理引导：手指预览窗口说"看这里"
|
||
3. 正常化："所有人第一次看到代码都会觉得密密麻麻的，这很正常"
|
||
|
||
**Q3：学生的网页预览是空白的怎么办？**
|
||
A：通常是AI生成的代码有语法错误。让学生在对话面板里说"预览是空白的，请帮我检查并修复代码"。AI通常能自动修复。
|
||
|
||
**Q4：学生说"AI做得挺好的不用改"怎么办？**
|
||
A：这是误概念2的典型表现。两个策略：
|
||
1. 设定强制要求："今天的任务要求至少修改一次，所以你必须找到至少一个可以改进的地方"
|
||
2. 引入外部视角："在手机上打开看看，效果还一样好吗？"
|
||
|
||
**Q5：快思考模型和慢思考模型生成的结果差异不明显怎么办？**
|
||
A：对于非常简单的任务，两种模型的差异确实可能不大。如果对比实验效果不理想，教师可以使用课前准备好的截图进行对比展示，确保教学效果。
|
||
|
||
**Q6：学生问"为什么不让我们直接写代码"怎么办？**
|
||
A：好问题！回答："以后我们会慢慢学代码的。就像学开车——先学用方向盘和油门（AI编程），以后再学发动机原理（代码）。顺序很重要！"
|
||
|
||
**教师备课体验任务：**
|
||
|
||
课前请务必自己完成以下操作（约30分钟）：
|
||
1. 用选定的AI编程工具，用慢思考模型生成自己的自我介绍网页
|
||
2. 至少做2轮"审查→反馈→迭代"
|
||
3. 用快思考模型和慢思考模型分别生成生日贺卡网页，截图对比
|
||
4. 记录过程中遇到的问题和解决方法（特别注意该工具的预览和分享操作流程）
|
||
5. 准备一个"故意不完美"的演示网页（用于审查环节的教学）
|
||
|
||
### 7. 5分钟日常AI挑战
|
||
|
||
**本周挑战：把你的自我介绍网页链接发给家长，请他们给一条改进建议**
|
||
|
||
**具体要求：**
|
||
- 把AI编程工具生成的自我介绍网页链接（或文件）发给爸爸妈妈（或其他家人）
|
||
- 请他们用手机打开看看
|
||
- 请他们给你一条改进建议（任何方面都可以：内容、颜色、排版、信息量……）
|
||
- 把家长的建议截图发到班级群
|
||
- 下节课上课前，我们会看看谁收到了最有价值的建议
|
||
|
||
**为什么这个挑战重要：**
|
||
- 让学生的作品被真实的"用户"（家长）使用和评价
|
||
- 训练"接受反馈"的能力——这是共创力的核心
|
||
- 让家长看到孩子的AI编程成果，增强家校连接
|
||
- 为下节课"当AI翻车了"做铺垫——家长的建议可能会暴露出问题
|
||
|
||
### 8. 拓展任务
|
||
|
||
**进阶挑战（适合提前完成的学生）：**
|
||
|
||
**挑战A：给自我介绍网页加一个"特别功能"**
|
||
在AI对话面板里尝试说："请给我的网页加一个功能——当用户点击我的名字时，名字的颜色会变化。"看看AI能不能做到！
|
||
|
||
**挑战B：用快思考模型做一个"30秒速成"实验**
|
||
用快思考模型，在30秒内用一句话生成一个网页。看看一句话能做出什么样的效果？试试这些：
|
||
- "做一个全屏的蓝色背景，中间用白色大字写'Hello World'"
|
||
- "做一个有10个随机emoji在页面上的网页"
|
||
- "做一个当前时间的大时钟显示在页面上"
|
||
|
||
**挑战C：给同学做一个"互联网名片"**
|
||
用你学到的技能，帮你旁边的同学做一个自我介绍网页。但你必须先"采访"他/她——问清楚名字、爱好、喜欢的颜色，然后写成提示词。这个挑战训练的是"需求采集"能力！
|