AICODE2026/3-lessons/AICODE-03/旧版本/AICODE03-03 认识你的编程搭档 v1.md

课时, 主题, 核心能力, 核心工具, 时长, 透明化层级

课时	主题	核心能力	核心工具	时长	透明化层级
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：给同学做一个"互联网名片" 用你学到的技能，帮你旁边的同学做一个自我介绍网页。但你必须先"采访"他/她——问清楚名字、爱好、喜欢的颜色，然后写成提示词。这个挑战训练的是"需求采集"能力！