Initial commit from WSL migration
This commit is contained in:
Rocky
676
3-lessons/AICODE-03/旧版本/AICODE03-02 提问的艺术 v1.md
Normal file
676
3-lessons/AICODE-03/旧版本/AICODE03-02 提问的艺术 v1.md
Normal file
@@ -0,0 +1,676 @@
|
||||
---
|
||||
课时: 2
|
||||
主题: 提问的艺术
|
||||
核心能力: [提问力, 表达力]
|
||||
核心工具: [DeepSeek, 通义千问]
|
||||
时长: 90分钟
|
||||
透明化层级: 结果层
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 理解好提示词与烂提示词的核心差异
|
||||
- 掌握提示词五要素模型：角色（Role）、指令（Instruction）、场景（Scene）、限制（Constraints）、示例（Examples）
|
||||
- 了解"思维链"——AI是怎么一步步推理的
|
||||
|
||||
**能力目标：**
|
||||
- 能识别一段提示词中缺失了哪些要素
|
||||
- 能用五要素将模糊的提示词改造为精准提示词
|
||||
- 能评判AI生成的提示词质量，指出其优缺点
|
||||
|
||||
**情感目标：**
|
||||
- 建立"好问题比好答案更重要"的信念
|
||||
- 体会"表达清楚"对AI协作效果的决定性影响
|
||||
- 感受"我能驾驭AI"的掌控感和成就感
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**认知层级规划：**
|
||||
|
||||
| 层级 | 目标 | 对应环节 |
|
||||
|------|------|---------|
|
||||
| 识别层 | 能分辨好提示词和烂提示词 | 第一幕导入 + 分段二对比实验 |
|
||||
| 理解层 | 能说出五要素各自的作用 | 分段三归纳模型 |
|
||||
| 应用层 | 能用五要素改造真实提示词 | 分段三改造工坊 |
|
||||
| 迁移层 | 能评判AI生成的提示词是否完整 | 分段四进阶挑战 |
|
||||
|
||||
**典型误概念：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发方式 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | 说得越多AI回答越好 | 关键是说对，不是说多；废话反而干扰AI | 对比实验：一段100字的啰嗦提示词 vs 一段30字的精准提示词 |
|
||||
| M2 | AI能读懂我脑子里想的 | AI只能看到你打出来的文字，你没说的它就不知道 | "传话游戏"类比：你只能通过文字传话 |
|
||||
| M3 | 一次就该得到完美答案 | 好的结果需要多轮迭代，第一次是起点不是终点 | 展示教师自己迭代3轮的对话记录 |
|
||||
| M4 | 给了角色就够了，不需要其他要素 | 角色只是五要素之一，缺了其他要素效果依然很差 | 分段二对比实验直接暴露 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- 每位学生一台电脑，打开DeepSeek网页端（deepseek.com）
|
||||
- 备用：通义千问网页端（tongyi.aliyun.com）
|
||||
- 教师投屏设备（可实时展示教师端AI对话）
|
||||
- 白板/黑板 + 彩色马克笔（用于头脑风暴分类整理）
|
||||
|
||||
**教学资源：**
|
||||
- 提示词五要素卡片模板（A4纸，课前打印，每人3张）
|
||||
- "提示词改造"练习单（含3个待改造的烂提示词）
|
||||
- 对比实验记录表（记录无角色/有角色/指定人物三组实验结果）
|
||||
- 课前预设的对比实验问题（见分段二）
|
||||
|
||||
**教师备课任务：**
|
||||
- 教师课前必须亲自完成一遍对比实验（无角色 vs 有角色 vs 指定人物），记录实际输出差异
|
||||
- 教师课前用五要素改造至少3个提示词，体验改造过程
|
||||
- 教师课前尝试"让AI写提示词"，准备1-2个AI写出的提示词供课堂分析
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
---
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟**
|
||||
|
||||
**上节课回顾（3分钟）**
|
||||
|
||||
**师：** 同学们好！上节课我们当了一回"幻觉猎人"，专门找AI一本正经胡说八道的地方。谁还记得，AI为什么会"犯错"？【诊断点：检验学生对L01核心概念"概率预测"的保持度】【识别层】
|
||||
|
||||
**【分支A】若学生回答出"概率预测""猜下一个字"等关键词：**
|
||||
**师：** 记得非常清楚！对，AI是在猜"下一个最可能的字"，它不是真的"懂"。那我再问一个——上节课你们测试了好几个AI模型，它们回答同一个问题的结果一样吗？
|
||||
|
||||
**【分支B】若学生沉默或只说"因为AI不聪明"：**
|
||||
**师：** 想想上节课那个比喻——AI就像一个读了超级多书的鹦鹉，它根据读过的内容来——？对，猜下一个字。它是"猜"不是"懂"。所以才会犯错。
|
||||
|
||||
**【分支C】若学生说"AI什么都知道只是有时候出bug"（M1类误概念残留）：**
|
||||
**师：** 这是个很好的想法，但我们上节课的实验告诉我们什么？武松打唐伯虎那个实验，AI是出bug了还是它根本就不理解这个问题？——对，它只是在猜最可能的下一个字，听起来很有道理但其实乱说的。
|
||||
|
||||
**情景导入（7分钟）**
|
||||
|
||||
**师：** 今天我们要来聊一个特别重要的事——怎么跟AI说话。我先给你们看两段对话。
|
||||
|
||||
（教师投屏展示）
|
||||
|
||||
第一段对话：
|
||||
> **提示词：** 帮我写一篇作文。
|
||||
> **AI输出：** （一篇泛泛而谈的、没有特色的400字作文）
|
||||
|
||||
第二段对话：
|
||||
> **提示词：** 你是一位幽默风趣的四年级语文老师。请帮我写一篇描写春天校园的作文，要求：字数300字左右，用到至少3个比喻句，语气要像小学生写的不要太成熟，参考这种风格——"春天像一个调皮的小画家，把校园涂成了彩色的。"
|
||||
> **AI输出：** （一篇生动有趣的、符合小学生口吻的、有具体比喻的300字作文）
|
||||
|
||||
**师：** 大家看出区别了吗？同一个AI，两段对话的结果差了十万八千里。为什么？【诊断点：观察学生能否自发注意到提示词的差异是导致输出差异的原因】【识别层】
|
||||
|
||||
**【分支A】若学生说"第二个说得更清楚/更详细"：**
|
||||
**师：** 说得太好了！第二个确实说得更清楚。那你觉得它到底"清楚"在哪里？多了什么东西？（过渡到建构环节）
|
||||
|
||||
**【分支B】若学生说"第二个字多"：**
|
||||
**师：** 字确实多了一些。但是关键不是字多，是多了什么内容。我们一会儿来仔细拆解。
|
||||
|
||||
**【分支C】若学生说"因为AI心情不一样"或其他拟人化解释：**
|
||||
**师：** 哈哈，AI可没有心情好不好的问题。上节课我们学过，AI是根据什么来回答的？——对，根据你给它的文字。你给的文字不一样，它的回答就不一样。所以关键在于——我们怎么说话！这就是今天要学的。
|
||||
|
||||
**师：** 今天我们要解锁一个超级技能——**"提示词魔法"**。会用这个技能的人，能让AI乖乖听话，做出你想要的东西。不会用的人，就像对着一个听不懂方言的外国人比划半天，最后得到的完全不是你想要的。准备好了吗？
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟**
|
||||
|
||||
**【分段一：头脑风暴——你心目中最好的AI助手】(15分钟)**
|
||||
|
||||
**预设误概念：**
|
||||
- 误概念1：好的AI助手就是"什么都会"（只关注能力，忽略沟通方式）
|
||||
- 误概念2：只要AI聪明就行了（忽略性格、表达风格等维度）
|
||||
- 误概念3：AI助手跟真人助手一模一样
|
||||
|
||||
**讲解与演示:**
|
||||
|
||||
**师：** 在我们正式学"怎么跟AI说话"之前，我想先听听你们的想法。现在请你闭上眼睛想一想——如果你有一个全世界最好的AI助手，它应该是什么样的？【诊断点：收集学生的前概念，观察他们自发关注哪些维度——是只关注"能力"还是也能想到"性格""说话方式"等】【识别层】
|
||||
|
||||
**师：** 不用想得太完美，什么词都行。想到一个词，就大声说出来，我写在白板上。
|
||||
|
||||
**学生实践:**
|
||||
|
||||
（学生自由发言，教师在白板上快速记录所有词汇，不做判断，先全部接收）
|
||||
|
||||
预期学生可能说出的词：
|
||||
- 能力类：聪明、什么都知道、会画画、会写代码、会帮忙写作业、回答正确
|
||||
- 性格类：有耐心、温柔、有趣、幽默、不会生气
|
||||
- 说话方式类：说人话、不啰嗦、好懂、像朋友一样说话
|
||||
- 其他：快、免费、酷、好看
|
||||
|
||||
**师：** 好，白板上已经有很多词了！现在我们来做一件事——给这些词"分组"。你们觉得这些词可以分成几类？怎么分？【诊断点：观察学生能否自发进行分类思维，以及分类的维度是否合理】【理解层】
|
||||
|
||||
**【分支A】若学生能自发提出分类维度（比如"有的是说性格的，有的是说能力的"）：**
|
||||
**师：** 太棒了！你已经发现了——我们对AI助手的期望不是一个单一的东西，而是好几个方面的。来，我们一起整理。（在白板上画三个圈）
|
||||
|
||||
**【分支B】若学生不知道怎么分：**
|
||||
**师：** 我来帮大家一把。比如"聪明"和"有耐心"，这两个词说的是AI的同一个方面吗？"聪明"说的是它——能力对吧？"有耐心"说的是它——性格！所以至少可以分出"能力"和"性格"两类。还有没有其他类？
|
||||
|
||||
**【分支C】若学生把所有词都归为一类：**
|
||||
**师：** 想想看，"会画画"和"像朋友一样说话"，这两个词说的是同一件事吗？一个是AI"会做什么"，另一个是AI"怎么说话"。对不对？
|
||||
|
||||
（引导学生将词汇分为三大类，在白板上整理成三列）
|
||||
|
||||
| 它的能力（会做什么） | 它的性格（什么态度） | 它的说话方式（怎么表达） |
|
||||
|---|---|---|
|
||||
| 聪明、什么都知道、会写作文... | 有耐心、幽默、温柔... | 说人话、不啰嗦、像朋友... |
|
||||
|
||||
**进度同步:**
|
||||
|
||||
**师：** 大家看白板上这三列。这就是你们自己总结出来的——一个好的AI助手需要有三个方面：**能力、性格、说话方式**。记住这三个词，一会儿你们会发现，它们跟我们今天要学的提示词技巧有大关系。【诊断点：确认学生理解了三个分类维度】【理解层】
|
||||
|
||||
**师：** 现在问题来了——AI本身没有固定的性格和说话方式，它的性格和说话方式取决于——？对，取决于你怎么告诉它！所以我们接下来就来试试，不同的"告诉方式"会让AI有多大的变化。
|
||||
|
||||
---
|
||||
|
||||
**【分段二：对比实验——角色的魔力】(15分钟)**
|
||||
|
||||
**预设误概念：**
|
||||
- 误概念1：给不给角色没什么区别（低估角色的影响力）
|
||||
- 误概念2：给了角色AI就变成那个人了（过度拟人化）
|
||||
- 误概念3：角色就够了，不需要其他信息（M4）
|
||||
|
||||
**讲解与演示:**
|
||||
|
||||
**师：** 现在我们来做一个实验。同一个问题，我们用三种不同的方式问AI，看结果会有什么不同。实验规则：每个人都用同一个问题，但换三种提示词。
|
||||
|
||||
实验问题：**"请给我讲讲月亮"**
|
||||
|
||||
三种提示词：
|
||||
1. **无角色版：** "请给我讲讲月亮。"
|
||||
2. **有角色版：** "你是一位天文学家，请给我讲讲月亮。"
|
||||
3. **指定人物版：** "你是李白，请给我讲讲月亮。"
|
||||
|
||||
**师：** 在动手之前，先做个预测——你觉得这三种问法，AI的回答会有什么不同？把你的预测写在纸上，就一句话。【诊断点：通过预测暴露学生对"角色"作用的前概念】【识别层】
|
||||
|
||||
**学生实践:**
|
||||
|
||||
（学生依次输入三段提示词，记录AI的回答要点到对比实验记录表上）
|
||||
|
||||
预期输出差异：
|
||||
- **无角色版：** AI可能给出一段通用的科普介绍，涵盖月亮的基本信息，语气像百科全书
|
||||
- **有角色版（天文学家）：** AI会用更专业的视角讲解月亮，可能涉及月球地质、潮汐效应等科学内容，语气更学术
|
||||
- **指定人物版（李白）：** AI会用诗意的语言描述月亮，可能引用或仿写古诗，语气浪漫优美
|
||||
|
||||
（教师走动观察，关注以下信号：）
|
||||
- 学生是否按顺序做了三次实验？
|
||||
- 学生是否注意到了输出的差异？
|
||||
- 是否有学生的AI因网络等原因没有产生明显差异？（准备用教师预做的截图补充）
|
||||
|
||||
**师：** （等大部分学生完成后）好，实验做完了！现在来对比——三次回答最大的区别是什么？谁来说说？【诊断点：学生能否准确描述角色对输出的影响】【理解层】
|
||||
|
||||
**【分支A】若学生说"说话方式不一样""内容重点不一样"：**
|
||||
**师：** 非常准确！天文学家讲的是科学知识，李白讲的是诗情画意。同一个月亮，不同的角色看到的完全不一样。那回到你之前的预测，预测对了吗？
|
||||
|
||||
**【分支B】若学生只说"第三个最好玩"但说不出具体差异：**
|
||||
**师：** 好玩是没错。但我们来具体看看——天文学家的回答里有什么词？（"陨石坑""引力""潮汐"）李白的回答里有什么词？（"举杯""清辉""故乡"）这两组词差别大不大？为什么差别这么大？
|
||||
|
||||
**【分支C】若学生说"区别不大都差不多"：**
|
||||
**师：** 来，我们把天文学家说的第一句话和李白说的第一句话放在一起看。（投屏对比）一个在讲"月球距离地球38万公里"，一个在说"举杯邀明月，对影成三人"——这叫差不多吗？（笑）所以角色一换，AI整个说话风格和内容重点都变了！
|
||||
|
||||
**进度同步:**
|
||||
|
||||
**师：** 所以我们发现了第一个秘密——**给AI一个角色，它就会用那个角色的方式来回答**。这就像演员拿到不同的剧本，演出来的完全不一样。但是！只给角色够不够？我们来想想——如果你跟李白说"讲讲月亮"，他可能讲成一首诗，也可能讲成一个故事，也可能讲成一篇散文。你想要哪种？他不知道。因为你没告诉他。所以角色只是第一步，我们还需要更多的信息。【诊断点：检验学生是否理解"角色必要但不充分"】【理解层】
|
||||
|
||||
---
|
||||
|
||||
**【分段三：五要素模型归纳 + 提示词改造工坊】(20分钟)**
|
||||
|
||||
**预设误概念：**
|
||||
- 误概念1：说得越多AI回答越好（M1——即将通过五要素模型纠正：不是说多，是说对）
|
||||
- 误概念2：五个要素每次都必须全部用上（实际上最低限度是指令，其他按需添加）
|
||||
- 误概念3：要素的顺序很重要（实际上顺序不重要，关键是内容完整）
|
||||
|
||||
**讲解与演示:**
|
||||
|
||||
**师：** 刚才我们发现，光给角色还不够。现在我来把刚才那个"好的提示词"拆开来看，看看它到底比"烂的提示词"多了哪些东西。
|
||||
|
||||
（教师投屏，展示开头导入时的第二段提示词，逐句标注颜色）
|
||||
|
||||
> **[角色]** 你是一位幽默风趣的四年级语文老师。
|
||||
> **[指令]** 请帮我写一篇描写春天校园的作文。
|
||||
> **[限制]** 字数300字左右，用到至少3个比喻句，语气要像小学生写的不要太成熟。
|
||||
> **[场景]** （隐含在"四年级"和"校园"中——这是给四年级学生用的校园作文）
|
||||
> **[示例]** 参考这种风格——"春天像一个调皮的小画家，把校园涂成了彩色的。"
|
||||
|
||||
**师：** 大家看，这个好的提示词里面其实藏了五个"要素"——就像做一道菜需要五种调料一样。我给它们起了名字。
|
||||
|
||||
（在白板上画一个五角星，每个角写一个要素）
|
||||
|
||||
1. **角色** — 你希望AI扮演谁？（语文老师、科学家、李白...）
|
||||
2. **指令** — 你要AI做什么？（写作文、解释概念、编故事...）
|
||||
3. **场景** — 这件事的背景是什么？（给谁看的？在什么情况下？）
|
||||
4. **限制** — 有什么具体要求？（字数、格式、风格、禁止做什么...）
|
||||
5. **示例** — 给一个参考样本（"就像这个样子"）
|
||||
|
||||
**师：** 现在回忆一下，刚才你们头脑风暴分的三类——能力、性格、说话方式——跟这五个要素有什么关系？【诊断点：检验学生能否将自己的前概念与正式模型建立连接】【理解层】
|
||||
|
||||
**【分支A】若学生说"性格像角色""说话方式像限制"：**
|
||||
**师：** 你太厉害了！没错，你们刚才自己想出来的东西，其实就是提示词五要素的雏形！你们早就有这个感觉了，今天只是给它一个正式的名字和框架。
|
||||
|
||||
**【分支B】若学生不确定怎么对应：**
|
||||
**师：** 我来帮你们连线。你们说好的AI助手要有"耐心"——这是不是在说AI扮演什么样的角色？对！你们说要"说人话、不啰嗦"——这是不是一种限制？对！你们说要"会写作文"——这是不是一种指令？所以你们自己已经在用这些要素了，只是还没有意识到。
|
||||
|
||||
**师：** 好，现在我们来实战。我这里有三个"烂提示词"，我们一起用五要素来改造它们，让它们变成"好提示词"。
|
||||
|
||||
（教师投屏展示改造练习）
|
||||
|
||||
**学生实践:**
|
||||
|
||||
**改造练习一：**
|
||||
|
||||
改造前："帮我写一首诗。"
|
||||
|
||||
**师：** 这个提示词缺了什么？大家用五要素检查一下。
|
||||
|
||||
（引导学生逐一检查：角色——缺、指令——有但模糊、场景——缺、限制——缺、示例——缺）
|
||||
|
||||
改造后（师生共同完成）：
|
||||
> **[角色]** 你是一位擅长儿童诗的诗人。
|
||||
> **[指令]** 请写一首关于夏天的短诗。
|
||||
> **[场景]** 这首诗要在班级朗诵会上朗读，听众是四年级的同学。
|
||||
> **[限制]** 8行以内，要押韵，用小学生能理解的词汇，不要用文言文。
|
||||
> **[示例]** 参考这种感觉："夏天是个急性子，一来就把太阳开到最大。"
|
||||
|
||||
**师：** 看到了吗？从5个字变成了一段话，但不是随便凑字数，而是每个要素都补上了。现在轮到你们自己来改造了！
|
||||
|
||||
**改造练习二：（学生独立完成）**
|
||||
|
||||
改造前："帮我介绍一个动物。"
|
||||
|
||||
提示：想想——什么角色来介绍？介绍给谁听？介绍什么动物？有什么特别要求？能不能给个参考？
|
||||
|
||||
（给学生5分钟独立完成，教师走动指导）
|
||||
|
||||
预期学生改造示例：
|
||||
> 你是一位动物园讲解员。请给四年级小学生介绍大熊猫。要求语言有趣活泼，300字左右，要包含大熊猫的3个有趣的冷知识。参考风格："各位小朋友，今天要介绍的这位明星，每天的工作就是吃和睡——没错，就是我们的国宝大熊猫！"
|
||||
|
||||
**改造练习三：（学生独立完成 + 挑战升级）**
|
||||
|
||||
改造前："帮我出几道数学题。"
|
||||
|
||||
提示：这是最"看起来简单但其实最模糊"的一个！数学题给谁做的？几年级？什么知识点？多少道？什么难度？
|
||||
|
||||
预期学生改造示例：
|
||||
> 你是一位耐心的数学老师。请出5道适合四年级学生的应用题，知识点是"小数加减法"。要求：由易到难排列，每道题都有生活场景（比如买东西、量身高），最后一道要有一定挑战性。参考："小明买了一个3.5元的铅笔和一个2.8元的橡皮，一共花了多少钱？"
|
||||
|
||||
**进度同步:**
|
||||
|
||||
**师：** 现在请你检查一下自己改造后的提示词——用手指数，五个要素你用了几个？【诊断点：学生能否自主运用五要素框架进行自检】【应用层】
|
||||
|
||||
（让2-3位学生读出自己改造后的提示词，全班一起数五要素）
|
||||
|
||||
**【分支A】若学生五要素齐全：**
|
||||
**师：** 完美！五要素全齐！但我还要加一个测试——把你改造后的提示词输入AI，看看效果是不是真的变好了。
|
||||
|
||||
**【分支B】若学生缺了1-2个要素（最常缺的是"示例"和"场景"）：**
|
||||
**师：** 四个要素了，很不错！但是你看，缺了"示例"——AI就不知道你想要的"感觉"是什么样的。就像你跟理发师说"剪短一点"，他不知道你说的"短"是什么样的。但如果你给他看一张照片——"就像这个发型"——他立刻就懂了。提示词里的示例就是那张"照片"。
|
||||
|
||||
**【分支C】若学生把提示词写得很长但要素不全（M1的表现）：**
|
||||
**师：** 你写了很多！但我们来用五要素检查一下——角色？有。指令？有。场景？没有。限制？没有。示例？没有。看到了吗？字多不等于好。关键是五个要素有没有覆盖到。这就像写地址——"中国一个很大的城市里的一条很长的路上的一栋很高的楼"，写了一大堆但快递员还是找不到你。不如直接写"北京市朝阳区XX路XX号"，短但精准。
|
||||
|
||||
**师：** 好，现在最关键的一步——把你改造后的提示词输入AI，对比改造前和改造后的AI输出。把两次输出的关键区别记录在五要素卡片上。
|
||||
|
||||
（学生将改造前/改造后的提示词都输入AI，对比结果，填写五要素卡片）
|
||||
|
||||
---
|
||||
|
||||
**【分段四：进阶挑战——让AI帮你写提示词】(15分钟)**
|
||||
|
||||
**预设误概念：**
|
||||
- 误概念1：AI写的提示词一定比我写的好（盲目信任）
|
||||
- 误概念2：AI写的提示词不需要检查（缺乏审查意识）
|
||||
- 误概念3：让AI写提示词是"偷懒"（其实这是一种高级协作技能）
|
||||
|
||||
**讲解与演示:**
|
||||
|
||||
**师：** 现在你们已经会写提示词了。接下来我要教你们一招更厉害的——**让AI帮你写提示词**。没错，你可以用提示词让AI帮你写提示词！【诊断点：观察学生的反应——是惊讶还是困惑】【应用层】
|
||||
|
||||
**师：** 看好了。（教师投屏演示）
|
||||
|
||||
教师输入：
|
||||
> 我想让AI帮我写一个自我介绍，但我不知道怎么写提示词。请你帮我写一段提示词，要求这段提示词包含：角色、指令、场景、限制、示例五个要素。
|
||||
|
||||
（展示AI的输出——一段相当完整的提示词）
|
||||
|
||||
**师：** 哇，AI写出来了一段提示词。但是！我们不能直接拿来用。为什么？因为上节课我们学过——AI有时候会？
|
||||
|
||||
**生：** 胡说八道！/犯错！/幻觉！
|
||||
|
||||
**师：** 对！所以我们要做一件事——**审查AI写的提示词**。用我们刚学的五要素来检查，看看AI写的提示词有没有问题。
|
||||
|
||||
**学生实践:**
|
||||
|
||||
**师：** 现在轮到你们了。每个人想一件你希望AI帮你做的事——可以是任何事：写一个笑话、设计一个游戏角色、解释一道题、写一段自我介绍——什么都行。然后：
|
||||
|
||||
第一步：让AI帮你写一段提示词（在对话框输入"请帮我写一段提示词，用来让AI做[你想做的事]，要包含角色、指令、场景、限制、示例五个要素"）。
|
||||
|
||||
第二步：审查！用五要素检查AI写的提示词——五个要素齐了吗？每个要素合理吗？有没有废话？
|
||||
|
||||
第三步：如果有问题，修改它。然后把修改后的提示词输入AI，看效果。
|
||||
|
||||
第四步：在"AI写的提示词评审记录"上写下你的评审意见。
|
||||
|
||||
（给学生10分钟操作时间。教师走动观察，重点关注：）
|
||||
- 学生是否真的在审查，还是直接拿来用了？
|
||||
- 学生能否识别AI生成的提示词中的问题？
|
||||
- AI生成的提示词中常见的问题：示例部分可能过于通用、场景可能不准确、限制可能遗漏
|
||||
|
||||
**师：** （在走动过程中，发现典型案例时可以全班分享）大家暂停一下！XX同学发现了一个问题——AI写的提示词里，角色和示例都有，但限制条件太宽泛了，只写了"适当长度"。"适当长度"是多长？100字还是1000字？AI不知道，你也不知道。所以XX同学把它改成了"200字左右"。这就是审查的价值！
|
||||
|
||||
**进度同步:**
|
||||
|
||||
**师：** 最后一个问题——AI帮你写的提示词，你觉得能打几分？满分10分的话。为什么？【诊断点：学生是否具备评判AI输出质量的元认知能力】【迁移层】
|
||||
|
||||
**【分支A】若学生能具体说出优缺点（"角色很好但示例不太对"）：**
|
||||
**师：** 你已经是一个"提示词审查官"了！能评价AI的输出，说明你真的掌握了五要素。
|
||||
|
||||
**【分支B】若学生只给分数但说不出理由：**
|
||||
**师：** 打分很容易，难的是说出为什么。来，我们用五要素一个一个打分——角色几分？指令几分？场景几分？限制几分？示例几分？这样是不是就能说出原因了？
|
||||
|
||||
**【分支C】若学生说"AI写的比我好多了10分"（盲目信任）：**
|
||||
**师：** 真的10分吗？我们来用五要素逐条检查一下。（逐条检查后通常能发现至少1-2个不足）看到了吧？AI写得确实不错，但不是完美的。你的审查能力，就是你比AI多的那一点点"判断力"。
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟**
|
||||
|
||||
**成果展示（6分钟）**
|
||||
|
||||
**师：** 今天大家都做了不少东西！现在请2-3位同学来展示。展示规则——你要告诉我们三件事：
|
||||
1. 你改造前的烂提示词是什么？
|
||||
2. 你改造后的好提示词是什么？
|
||||
3. 改造前后AI输出的最大区别是什么？
|
||||
|
||||
（选择2-3位学生展示，优先选择：改造效果显著的、发现了有趣差异的、AI写的提示词有明显问题并成功修复的）
|
||||
|
||||
**互评与讨论（4分钟）**
|
||||
|
||||
**师：** 听了同学的展示，谁来评价一下——他的提示词改造，你觉得哪里改得最好？还有没有可以更好的地方？【诊断点：学生能否给出具体的、基于五要素的评价，而非"挺好的"】【迁移层】
|
||||
|
||||
**【分支A】若学生给出具体评价（"他的示例给得很好，但场景可以更具体"）：**
|
||||
**师：** 这就是专业的反馈！你不仅会写提示词，还会评价提示词。
|
||||
|
||||
**【分支B】若学生只说"很好"或"不错"：**
|
||||
**师：** "很好"太笼统了。试试用我们学的五要素来评价——他的角色设定怎么样？指令清楚吗？限制够具体吗？示例合适吗？用这个框架再说一遍。
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟**
|
||||
|
||||
**抽象总结（3分钟）**
|
||||
|
||||
**师：** 今天我们学了一个超级重要的模型——提示词五要素。谁能不看笔记，把五个要素背出来？
|
||||
|
||||
（让学生齐声或依次说出：角色、指令、场景、限制、示例）
|
||||
|
||||
**师：** 记住一个口诀——**"角指场限例"**（角色、指令、场景、限制、示例），就像"金木水火土"一样，五个凑齐了威力最大。
|
||||
|
||||
**师：** 最后一个问题：今天学的提示词五要素，除了跟AI说话，还能用在生活中什么地方？【诊断点：学生能否将提示词五要素迁移到非AI场景】【迁移层】
|
||||
|
||||
**【分支A】若学生说"跟人说话也要说清楚""写作文也要有条理"：**
|
||||
**师：** 太对了！跟人说话和跟AI说话是一样的道理——你说得越清楚，对方理解得越准确。五要素不只是"AI提示词"的技巧，它是"清晰表达"的通用方法。
|
||||
|
||||
**【分支B】若学生只能想到AI相关的场景：**
|
||||
**师：** 想想看——你跟妈妈说"我饿了"，跟你说"我想吃一碗不要香菜的牛肉面，大碗的"，哪个更容易让妈妈帮到你？第二种就是有"限制"和"指令"的清楚表达。所以五要素在生活里也一样管用！
|
||||
|
||||
**5分钟挑战发布 + 下节预告（2分钟）**
|
||||
|
||||
**师：** 本周的5分钟挑战来了！
|
||||
|
||||
**本周5分钟挑战：** 找一个你之前觉得AI回答不好的对话，用提示词五要素重新改造那段提示词，然后对比改造前后的效果。截图发到班级群里，附上一句话说明你改了什么。
|
||||
|
||||
**师：** 下节课预告——下节课我们要正式跟AI搭档一起写代码了！你以为写代码要背很多语法？不用！你只需要用你今天学到的提示词技巧，告诉AI你想做什么，它来负责写代码。你负责审查和提意见——就像你是导演，AI是演员。是不是很期待？我们下节课见！
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师课前备课提示词模板：**
|
||||
|
||||
```
|
||||
你是一位资深小学编程教育专家。我正在备课"提示词五要素"这节课，
|
||||
面向四年级学生（约10岁）。请帮我：
|
||||
|
||||
1. 生成3组"烂提示词→好提示词"的对比案例，
|
||||
要求每组的好提示词包含五要素（角色、指令、场景、限制、示例），
|
||||
主题要贴近四年级学生的生活。
|
||||
|
||||
2. 预测学生在学习提示词时可能出现的3个典型错误。
|
||||
|
||||
3. 给出3个测试"角色对AI输出影响"的趣味问题
|
||||
（要求能产生明显的输出差异）。
|
||||
```
|
||||
|
||||
**学生对比实验提示词模板：**
|
||||
|
||||
```
|
||||
无角色版：请给我讲讲月亮。
|
||||
有角色版：你是一位天文学家，请给我讲讲月亮。
|
||||
指定人物版：你是李白，请给我讲讲月亮。
|
||||
```
|
||||
|
||||
**学生"让AI写提示词"的提示词模板：**
|
||||
|
||||
```
|
||||
我想让AI帮我[做一件具体的事]。请你帮我写一段高质量的提示词。
|
||||
要求这段提示词必须包含以下五个要素：
|
||||
1. 角色：给AI设定一个合适的角色
|
||||
2. 指令：清晰的任务描述
|
||||
3. 场景：说明使用背景
|
||||
4. 限制：具体的要求和限制条件
|
||||
5. 示例：给一个参考样本
|
||||
```
|
||||
|
||||
**教师课堂应急提示词（当AI输出不理想时）：**
|
||||
|
||||
```
|
||||
你刚才的回答不够好，请重新回答。这次请注意：
|
||||
- 我的角色设定是：[重复角色]
|
||||
- 我的核心要求是：[重复指令]
|
||||
- 请严格遵守以下限制：[重复限制]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**技术备注：**
|
||||
|
||||
1. **提示词五要素不是死规矩**：并非每次都必须五个要素全用。最低限度是"指令"（你要AI做什么）。其他四个是"加分项"——加得越多，AI输出越精准。但对四年级学生，先建立"五要素框架"的意识，后续课程中再引导灵活使用。
|
||||
|
||||
2. **角色的技术原理**：当你给AI设定角色时，AI会调整自己的"回答分布"——它在训练数据中学习过不同角色的说话模式，所以设定角色相当于告诉AI"请从这个子集中采样"。这个解释不需要跟学生说，但教师理解后能更好地解释"为什么角色有效"。
|
||||
|
||||
3. **思维链（Chain-of-Thought）简介**：有些AI模型（如DeepSeek-R1）支持"思维链"——在回答之前先展示推理过程。如果课堂上有学生注意到AI输出中的"思考过程"，教师可以简单解释："这就像你做数学题先在草稿纸上演算一样，AI也会先想再答。"本课可以提及但不深入。
|
||||
|
||||
4. **"说得越多越好"误概念的处理**：最常见的课堂误概念。处理策略是对比实验——准备一段100字的啰嗦提示词（充满废话但缺少关键要素）和一段30字的精准提示词（五要素齐全），让学生亲眼看到结果。
|
||||
|
||||
5. **不同AI模型对角色的响应差异**：DeepSeek和通义千问对角色设定的响应可能有差异。DeepSeek通常更"听话"地扮演角色，通义千问可能在扮演特定人物时加入更多"安全声明"（"我是AI不是真的李白"）。如果出现这种情况，向学生解释"不同AI模型的性格不一样"，呼应L01的内容。
|
||||
|
||||
**常见学生问题FAQ：**
|
||||
|
||||
| 学生问题 | 建议回答 |
|
||||
|---------|---------|
|
||||
| "是不是每次都要写这么长？" | 不一定。简单的问题用简短的提示词就行。但如果你对AI的回答不满意，五要素就是你的"检查清单"——看看是不是漏了什么。 |
|
||||
| "我不知道该给AI什么角色" | 想想你这个问题，去问谁最合适？问一个什么样的人会得到最好的回答？那就让AI扮演那个人。 |
|
||||
| "AI没有按照我说的做" | 检查两件事：第一，你的指令是不是足够具体？"写得好一点"AI不知道"好"是什么意思。第二，你有没有给示例？示例是最直接告诉AI"我要这种感觉"的方式。 |
|
||||
| "为什么我加了五要素AI回答还是不好？" | 检查每个要素是否足够具体。"角色"不能只写"一个老师"，可以写"一个幽默的四年级语文老师"。越具体，AI越知道你要什么。 |
|
||||
| "可以一直跟AI聊下去让它改吗？" | 当然可以！这叫"多轮迭代"。第一次不完美很正常。你告诉AI哪里不满意，它就会修改。这个能力我们下节课和第4课还会专门练。 |
|
||||
|
||||
**备课体验任务：**
|
||||
|
||||
教师在上课前，请完成以下任务（约30分钟）：
|
||||
|
||||
1. **亲自做一遍对比实验**：用"请给我讲讲月亮"分别无角色/有角色/指定人物问AI，截图保存实际输出（课堂上如果学生端AI出问题，可用教师截图替代）。
|
||||
|
||||
2. **亲自改造3个提示词**：用五要素把以下三个烂提示词改好，并记录改造前后的AI输出差异：
|
||||
- "帮我写一篇作文"
|
||||
- "帮我介绍一个动物"
|
||||
- "帮我出几道数学题"
|
||||
|
||||
3. **亲自试一遍"让AI写提示词"**：输入"请帮我写一段用来让AI做[任意任务]的提示词，要包含五要素"，看AI写出什么，然后用五要素审查打分。记录AI提示词的优缺点。
|
||||
|
||||
4. **准备"啰嗦但不好" vs "简短但精准"的对比案例**：
|
||||
- 啰嗦版："我想让你帮我写一个东西，就是那种关于动物的文章，你知道吧，就是那种小学生看的，不要太难，也不要太简单，要好看一点，有趣一点，最好能学到东西，字数嘛适当就好。"（80字，废话多，缺关键要素）
|
||||
- 精准版："你是动物园讲解员。请用活泼语气为四年级学生介绍大熊猫，300字，含3个冷知识。"（40字，五要素齐全）
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周挑战：提示词改造大师**
|
||||
|
||||
**任务：** 用提示词五要素改造一个你之前觉得不好用的AI对话。
|
||||
|
||||
**具体步骤：**
|
||||
1. 找到一个你之前和AI的对话，觉得AI回答不好的那条
|
||||
2. 分析原来的提示词缺了哪些要素
|
||||
3. 用五要素重新写一段提示词
|
||||
4. 把新提示词输入AI，截图保存
|
||||
5. 发到班级群，附一句话说明你补了哪个要素、效果有什么变化
|
||||
|
||||
**评价标准：**
|
||||
- 基础：完成改造并截图（完成即可）
|
||||
- 进阶：能说出改造前缺了哪个要素
|
||||
- 挑战：改造前后的AI输出有明显可见的质量提升
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**拓展任务一：提示词收藏家**
|
||||
|
||||
收集3个你觉得很厉害的提示词（可以从网上搜、问家长、或自己写），用五要素分析每一个，记录在卡片上。下节课带来分享。
|
||||
|
||||
**拓展任务二：提示词PK赛**
|
||||
|
||||
和家长或朋友一起，用同一个AI完成同一个任务（比如"画一只猫的描述"），各写各的提示词，看谁的AI输出更好。讨论为什么赢家的提示词更好。
|
||||
|
||||
**拓展任务三：跨AI对比**
|
||||
|
||||
把你改造后的五要素提示词，分别输入两个不同的AI（比如DeepSeek和通义千问），对比它们的输出差异。思考：同一个提示词，不同AI的回答为什么不一样？（呼应L01的"模型差异"知识）
|
||||
|
||||
---
|
||||
|
||||
### 附录：提示词五要素卡片模板
|
||||
|
||||
```
|
||||
┌───────────────────────────────────────────────┐
|
||||
│ 提示词五要素卡片 │
|
||||
│ │
|
||||
│ 姓名：____________ 日期：____________ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────┐ │
|
||||
│ │ 【改造前的烂提示词】 │ │
|
||||
│ │ │ │
|
||||
│ │ _______________________________________ │ │
|
||||
│ │ _______________________________________ │ │
|
||||
│ └─────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────┐ │
|
||||
│ │ 【用五要素改造后的好提示词】 │ │
|
||||
│ │ │ │
|
||||
│ │ ☆ 角色：_______________________________ │ │
|
||||
│ │ ☆ 指令：_______________________________ │ │
|
||||
│ │ ☆ 场景：_______________________________ │ │
|
||||
│ │ ☆ 限制：_______________________________ │ │
|
||||
│ │ ☆ 示例：_______________________________ │ │
|
||||
│ └─────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────┐ │
|
||||
│ │ 【效果对比】 │ │
|
||||
│ │ │ │
|
||||
│ │ 改造前AI输出的特点： │ │
|
||||
│ │ _______________________________________ │ │
|
||||
│ │ │ │
|
||||
│ │ 改造后AI输出的特点： │ │
|
||||
│ │ _______________________________________ │ │
|
||||
│ │ │ │
|
||||
│ │ 最大的变化是： │ │
|
||||
│ │ _______________________________________ │ │
|
||||
│ └─────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 我的提示词小贴士（写一条你今天学到的经验）： │
|
||||
│ _____________________________________________ │
|
||||
└───────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 附录：对比实验记录表
|
||||
|
||||
```
|
||||
┌───────────────────────────────────────────────┐
|
||||
│ 对比实验记录表 │
|
||||
│ │
|
||||
│ 实验问题：请给我讲讲月亮 │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────┐ │
|
||||
│ │ 实验一：无角色 │ │
|
||||
│ │ 提示词：请给我讲讲月亮。 │ │
|
||||
│ │ AI回答的关键词/特点： │ │
|
||||
│ │ _______________________________________ │ │
|
||||
│ │ 语气像：□百科全书 □老师 □朋友 □诗人 □其他 │ │
|
||||
│ └─────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────┐ │
|
||||
│ │ 实验二：有角色（天文学家） │ │
|
||||
│ │ 提示词：你是一位天文学家，请给我讲讲月亮。 │ │
|
||||
│ │ AI回答的关键词/特点： │ │
|
||||
│ │ _______________________________________ │ │
|
||||
│ │ 语气像：□百科全书 □老师 □朋友 □诗人 □其他 │ │
|
||||
│ └─────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────┐ │
|
||||
│ │ 实验三：指定人物（李白） │ │
|
||||
│ │ 提示词：你是李白，请给我讲讲月亮。 │ │
|
||||
│ │ AI回答的关键词/特点： │ │
|
||||
│ │ _______________________________________ │ │
|
||||
│ │ 语气像：□百科全书 □老师 □朋友 □诗人 □其他 │ │
|
||||
│ └─────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 三次实验最大的区别是什么？ │
|
||||
│ _____________________________________________ │
|
||||
│ │
|
||||
│ 我的结论：角色会影响AI的____________和________ │
|
||||
└───────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 附录："AI写的提示词"评审记录
|
||||
|
||||
```
|
||||
┌───────────────────────────────────────────────┐
|
||||
│ AI写的提示词 · 评审记录 │
|
||||
│ │
|
||||
│ 我想让AI帮我做的事：______________________ │
|
||||
│ │
|
||||
│ 我让AI写的提示词（原文抄写或截图粘贴）： │
|
||||
│ _____________________________________________ │
|
||||
│ _____________________________________________ │
|
||||
│ _____________________________________________ │
|
||||
│ │
|
||||
│ 五要素逐项打分（1-5分）： │
|
||||
│ │
|
||||
│ ☆ 角色：___分 评价：_____________________ │
|
||||
│ ☆ 指令：___分 评价：_____________________ │
|
||||
│ ☆ 场景：___分 评价：_____________________ │
|
||||
│ ☆ 限制：___分 评价：_____________________ │
|
||||
│ ☆ 示例：___分 评价：_____________________ │
|
||||
│ │
|
||||
│ 总分：___/25分 │
|
||||
│ │
|
||||
│ AI写的提示词最大的优点： │
|
||||
│ _____________________________________________ │
|
||||
│ │
|
||||
│ AI写的提示词最大的问题： │
|
||||
│ _____________________________________________ │
|
||||
│ │
|
||||
│ 我修改后的版本（写出你改了什么）： │
|
||||
│ _____________________________________________ │
|
||||
│ _____________________________________________ │
|
||||
│ │
|
||||
│ 修改后的效果：□变好了 □差不多 □反而变差了 │
|
||||
└───────────────────────────────────────────────┘
|
||||
```
|
||||
642
3-lessons/AICODE-03/旧版本/AICODE03-03 认识你的编程搭档 v1.md
Normal file
642
3-lessons/AICODE-03/旧版本/AICODE03-03 认识你的编程搭档 v1.md
Normal file
@@ -0,0 +1,642 @@
|
||||
---
|
||||
课时: 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：给同学做一个"互联网名片"**
|
||||
用你学到的技能，帮你旁边的同学做一个自我介绍网页。但你必须先"采访"他/她——问清楚名字、爱好、喜欢的颜色，然后写成提示词。这个挑战训练的是"需求采集"能力！
|
||||
928
3-lessons/AICODE-03/旧版本/AICODE03-04 当AI翻车了 v1.md
Normal file
928
3-lessons/AICODE-03/旧版本/AICODE03-04 当AI翻车了 v1.md
Normal file
@@ -0,0 +1,928 @@
|
||||
---
|
||||
课时: 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对话了几轮才修好？
|
||||
- 每轮你是怎么改进描述的？
|
||||
- 最终的修复提示词是什么？
|
||||
696
3-lessons/AICODE-03/旧版本/AICODE03-05 自然语言驱动开发 v1.md
Normal file
696
3-lessons/AICODE-03/旧版本/AICODE03-05 自然语言驱动开发 v1.md
Normal file
@@ -0,0 +1,696 @@
|
||||
---
|
||||
课时: 5
|
||||
主题: 自然语言驱动开发
|
||||
核心能力: [提问力, 共创力]
|
||||
核心工具: [穹狼 Code / Trae]
|
||||
时长: 90分钟
|
||||
透明化层级: 结果层
|
||||
适用路线: 共享
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 理解"一句话需求"的威力与局限：一句话可以让AI生成可玩游戏，但一句话的质量决定游戏质量
|
||||
- 理解"最小可玩单元（MVP）"概念：先做出最核心的玩法，再逐步添加功能
|
||||
- 知道"需求→生成→验收"是游戏开发的基本循环
|
||||
|
||||
**能力目标：**
|
||||
- 能用一句自然语言描述清楚一个游戏的核心玩法，并让AI生成可运行的代码（提问力）
|
||||
- 能判断AI生成的游戏是否"可玩"，并描述问题让AI修复（共创力）
|
||||
- 能区分"核心玩法"和"锦上添花的功能"，做出优先级判断（拆解力萌芽）
|
||||
|
||||
**情感目标：**
|
||||
- 体验"一句话变出游戏"的震撼与成就感——从"认知"跃迁到"创造"
|
||||
- 建立"先做出来再说"的行动力心态，不怕不完美
|
||||
- 激发个性化创造欲望：每个人做不同的游戏，我的想法值得被实现
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 层级 | 本课目标 | 对应活动 |
|
||||
|------|---------|---------|
|
||||
| 识别层 | 能看到"一句话→可玩游戏"的效果 | 教师演示一句话魔法 |
|
||||
| 理解层 | 能理解"核心玩法"和"额外功能"的区别 | MVP概念讲解与讨论 |
|
||||
| 应用层 | 能自己写出一句话需求，让AI生成可玩游戏 | 学生自选游戏创作 |
|
||||
| 迁移层 | 能对自己的游戏进行验收，发现问题并迭代修复 | 审查与修复环节 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 诊断方式 | 纠正策略 |
|
||||
|------|--------|---------|---------|---------|
|
||||
| M1 | **一句话就能做出完美游戏** | 一句话能做出"能玩"的游戏，但"好玩"需要多轮迭代 | 观察学生对第一次生成结果的反应——是否以为"做完了" | 引导学生试玩后发现问题，建立"先能玩→再好玩"的认知 |
|
||||
| M2 | **游戏一定要很复杂才好玩** | 最经典的游戏往往玩法简单（贪吃蛇、打地鼠、猜数字），核心玩法清晰才是关键 | 学生选题时是否描述了过于复杂的游戏（如"做个3D射击游戏"） | 用"最小可玩单元"概念引导简化，展示简单但好玩的案例 |
|
||||
| M3 | **我不会做游戏，游戏太难了** | 你已经会跟AI合作了——做游戏和做网页一样，都是"告诉AI你要什么" | 观察学生听到"做游戏"时是否表现出畏难情绪 | 教师演示：一句话就出来了，跟之前做网页一样简单 |
|
||||
| M4 | **要先想好所有功能再开始做** | 先做最核心的一个玩法（MVP），确认能玩了再加功能 | 学生是否在描述需求时列了一大堆功能 | 引导学生砍到只剩一个核心动作："玩家要做的那一件事是什么？" |
|
||||
| M5 | **AI生成的游戏一定能玩** | AI可能生成不能运行、有Bug或玩法不对的游戏，需要你验收 | 学生是否不试玩就说"好了" | 强制要求"自己玩三遍再说完成" |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- AI编程工具（穹狼 Code / Trae，学生已在L03完成配置）
|
||||
- DeepSeek模型（通过选定工具接入，建议使用慢思考模型做游戏生成）
|
||||
- 教师演示电脑+投影
|
||||
- 每位学生一台电脑，浏览器可正常打开本地HTML文件
|
||||
|
||||
**教学资源：**
|
||||
|
||||
#### 教师演示用游戏——"打地鼠"（教师提前用AI生成并验证可玩）
|
||||
|
||||
教师使用的一句话提示词：
|
||||
```
|
||||
做一个网页版打地鼠游戏，9个洞，地鼠随机冒出来，点到加分。
|
||||
```
|
||||
|
||||
预期效果：一个3x3的网格，地鼠随机出现在某个格子里，玩家用鼠标点击地鼠得分，页面上显示当前分数。
|
||||
|
||||
> 教师备注：提前用AI生成这个游戏，确认能玩。如果AI生成的版本有小问题（比如地鼠冒出太快或太慢），保留这些问题，课堂上作为"验收发现问题"的素材。
|
||||
|
||||
#### 备选演示游戏（如果打地鼠效果不理想）
|
||||
|
||||
```
|
||||
做一个网页版猜数字游戏，电脑随机想一个1到100的数字，我来猜，每次告诉我猜大了还是猜小了。
|
||||
```
|
||||
|
||||
#### 学生游戏方向参考表（投影展示，帮助学生选择）
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────┐
|
||||
│ 游戏灵感墙 │
|
||||
│ │
|
||||
│ 反应类：打地鼠、接水果、躲避障碍、点击变色方块 │
|
||||
│ 猜谜类：猜数字、猜颜色、记忆翻牌 │
|
||||
│ 动作类：贪吃蛇、弹球、飞机躲子弹 │
|
||||
│ 策略类：井字棋、石头剪刀布、扫雷 │
|
||||
│ 创意类：画板涂鸦、节奏点击、表情包生成器 │
|
||||
│ │
|
||||
│ 也可以做你自己想的任何游戏！ │
|
||||
└─────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### "我的游戏验收单"模板（投影或打印）
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────┐
|
||||
│ 我的游戏验收单 │
|
||||
│ 姓名：___________ 游戏名：___________ │
|
||||
│ │
|
||||
│ 1. 我的一句话需求：__________________ │
|
||||
│ 2. 核心玩法验收（自己玩3遍）： │
|
||||
│ □ 游戏能正常打开 │
|
||||
│ □ 核心操作有反应（点击/按键/移动） │
|
||||
│ □ 游戏规则能跑通（能赢或能输） │
|
||||
│ 3. 发现的问题：__________________ │
|
||||
│ 4. 我跟AI说了什么来修复： │
|
||||
│ _________________________________ │
|
||||
│ 5. □ 能玩了！ □ 还有问题，继续修 │
|
||||
└──────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**教师备课体验任务：**
|
||||
|
||||
1. 用"一句话"提示词生成至少3个不同的小游戏（打地鼠、猜数字、贪吃蛇），记录哪些能一次成功
|
||||
2. 体验"做个游戏"这种模糊指令的翻车效果，准备好坏对比素材
|
||||
3. 确认每台电脑的AI工具正常运行，浏览器能打开本地HTML文件
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟** 🔗
|
||||
|
||||
**【环节】阶段跃迁导入 (4分钟)**
|
||||
|
||||
**师：** 同学们好！在开始今天的课之前，我想跟大家说一件事。前四节课，我们做了很多了不起的事——我们认识了AI怎么想、学会了怎么跟AI说话、用AI做了自己的网页、还学会了翻车怎么修。给自己鼓个掌！
|
||||
|
||||
**师：** 但是——前四节课我们做的都是什么？网页。自我介绍网页、个人主页。好不好看？好看。但好不好"玩"？
|
||||
|
||||
**生：** 不好玩 / 没什么好玩的 / 就是看的
|
||||
|
||||
**师：** 对！网页是用来"看"的。但今天开始，我们要做一个用来"玩"的东西——【停顿，环顾全班】——游戏！【诊断点：观察学生听到"游戏"时的反应——兴奋？惊讶？怀疑？】
|
||||
|
||||
**【分支A】若学生非常兴奋：**
|
||||
**师：** 我就知道你们会有这个反应！但先别急，你们猜猜看，做一个游戏需要多长时间？
|
||||
|
||||
**【分支B】若学生表现出怀疑（"我们能做游戏吗？"）：**
|
||||
**师：** 你的怀疑很正常！做游戏听起来很难对吧？但还记得第三课吗——你以为做网页也很难，结果呢？一段话就出来了。今天做游戏也是一样的。
|
||||
|
||||
**【分支C】若有学生表现出畏难（误概念M3的早期表现）：**
|
||||
**师：** 有些同学可能觉得"做游戏太难了吧"。别担心！今天你会发现，做游戏比你想的简单得多。你只需要做一件事——说一句话。
|
||||
|
||||
**【环节】一句话悬念 (6分钟)**
|
||||
|
||||
**师：** 我现在要给你们表演一个魔术。不需要任何准备，不需要写代码，我就用一句话——只用一句话——变出一个可以玩的游戏。你们信不信？【制造认知悬念】
|
||||
|
||||
**生：** 不信！/ 怎么可能！/ 真的假的？
|
||||
|
||||
**师：** 那你们看好了。我现在打开AI编程工具，我只说这一句话——
|
||||
|
||||
【教师在投影上打开AI编程工具，切换到慢思考模型，输入：】
|
||||
|
||||
```
|
||||
做一个网页版打地鼠游戏，9个洞，地鼠随机冒出来，点到加分。
|
||||
```
|
||||
|
||||
**师：** 就这一句话。24个字。现在我们等AI工作……
|
||||
|
||||
【等待AI生成代码，大约20-30秒。教师可以在等待时和学生互动：】
|
||||
|
||||
**师：** 在AI工作的时候，你们猜猜它能做出来吗？能做出来的举手？不能的举手？
|
||||
|
||||
【AI生成完成，教师打开预览】
|
||||
|
||||
**师：** 来，看！【打开浏览器预览生成的游戏】
|
||||
|
||||
【教师现场试玩：点击冒出的地鼠，分数增加】
|
||||
|
||||
**师：** 它真的做出来了！一个可以玩的打地鼠游戏！谁想上来试试？【请一位学生上台试玩】
|
||||
|
||||
**生：** （试玩）哇！真的能玩！
|
||||
|
||||
**师：** 一句话，24个字，一个可以玩的游戏。这就是"自然语言驱动开发"——你用人话说需求，AI帮你做出来。酷不酷？【诊断点：观察全班反应，是否被震撼到，还是觉得"就这？"】【识别层】
|
||||
|
||||
**【分支A】若全班被震撼：**
|
||||
**师：** 这就是你们今天要学的魔法！而且今天不是做打地鼠——每个人做自己想做的游戏！
|
||||
|
||||
**【分支B】若有学生说"但这个游戏很简单啊/不好看"：**
|
||||
**师：** 观察力很强！没错，它确实很简单，可能也不够好看。但关键是——它能玩！这就引出了今天的第一个重要概念。
|
||||
|
||||
**【分支C】若有学生说"那如果我想做更复杂的游戏呢"：**
|
||||
**师：** 好问题！今天我们先学会用一句话做出"能玩"的版本，下节课再学怎么在这个基础上加功能。一步一步来！
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟** 🛠️
|
||||
|
||||
**【分段一：一句话魔法——理解一句话的威力与局限】(15分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M1：一句话就能做出完美游戏
|
||||
- M3：我不会做游戏，游戏太难了
|
||||
|
||||
**讲解与演示 (Teach & Demo):**
|
||||
|
||||
**师：** 刚才大家看到了一句话的威力。但我要问一个问题——我那句话是随便说的吗？我们来分析一下。
|
||||
|
||||
【投影展示教师的提示词】
|
||||
|
||||
```
|
||||
做一个网页版打地鼠游戏，9个洞，地鼠随机冒出来，点到加分。
|
||||
```
|
||||
|
||||
**师：** 这句话虽然短，但它包含了什么信息？大家帮我拆一拆。【诊断点：学生能否识别出一句话里的关键信息】【理解层】
|
||||
|
||||
**【分支A】若学生能指出"打地鼠""9个洞""随机冒出""点到加分"：**
|
||||
**师：** 非常好！你看，虽然只有一句话，但关键信息都有了——游戏类型（打地鼠）、游戏场景（9个洞）、核心动作（地鼠随机冒出来）、得分规则（点到加分）。这四个信息就够AI做出一个能玩的游戏了。
|
||||
|
||||
**【分支B】若学生只说出"打地鼠"但说不出其他：**
|
||||
**师：** "打地鼠"是游戏类型。但光说"做个打地鼠游戏"够不够？——可能不够，AI不知道有几个洞、地鼠怎么出现、怎么计分。所以我还说了"9个洞""随机冒出""点到加分"。
|
||||
|
||||
**【分支C】若学生沉默：**
|
||||
**师：** 我来带你们拆。"打地鼠游戏"——这告诉AI做什么类型的游戏。"9个洞"——告诉AI游戏长什么样。"地鼠随机冒出来"——告诉AI游戏怎么运行。"点到加分"——告诉AI计分规则。四个关键信息，组成一句话。
|
||||
|
||||
**师：** 现在我来做一个对比实验。如果我只说——"做个游戏"——你们猜AI会做出什么？
|
||||
|
||||
**生：** 不知道！/ 可能什么都做！/ 可能做个很奇怪的！
|
||||
|
||||
**师：** 对！还记得第二课和第四课学的吗？模糊指令会导致什么？
|
||||
|
||||
**生：** 翻车！
|
||||
|
||||
**师：** 没错！所以"一句话魔法"不是随便一句话——是一句包含关键信息的话。你的一句话里至少要说清楚：**你要做什么游戏、核心玩法是什么**。
|
||||
|
||||
**师：** 我来对比一下好的一句话和坏的一句话——
|
||||
|
||||
**坏：** "帮我做一个好玩的游戏" → AI不知道做什么，完全靠猜
|
||||
|
||||
**好：** "做一个网页版贪吃蛇游戏，用方向键控制蛇移动，吃到食物蛇变长，撞到墙就结束" → 游戏类型、操作方式、核心规则全说清了
|
||||
|
||||
**师：** 秘诀就是——说清楚"玩家要做的那一件事"。打地鼠——点击。贪吃蛇——控制方向。猜数字——输入数字。这"一件事"就是游戏的灵魂！
|
||||
|
||||
**学生实践 (Practice):**
|
||||
|
||||
**师：** 现在轮到你们了！但先别急着让AI做，我们先练习"写一句话"。在纸上或者打字写下你想做的游戏的一句话描述。不需要完美，但要包含：
|
||||
1. 游戏类型/名字
|
||||
2. 核心玩法（玩家要做什么）
|
||||
|
||||
给你们3分钟。如果想不到做什么游戏，看看屏幕上的"游戏灵感墙"！
|
||||
|
||||
【投影展示游戏灵感墙】
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 谁在发呆想不出来 → 过去聊："你平时爱玩什么游戏？""你最喜欢的游戏是什么？"帮助聚焦
|
||||
- 谁写了特别复杂的需求（误概念M4）→ 先不打断，等进度同步时处理
|
||||
- 谁写了特别模糊的需求 → 轻声提醒："玩家要做的那一件事是什么？"
|
||||
|
||||
**进度同步 (Checkpoint):**
|
||||
|
||||
**师：** 好，时间到！谁来念念你写的一句话？【请3-4位学生分享】【诊断点：学生的一句话是否包含游戏类型和核心玩法，是否过于模糊或过于复杂】【应用层】
|
||||
|
||||
**【分支A】若学生的一句话清晰且合理（如"做一个接水果游戏，水果从上面掉下来，我左右移动篮子去接"）：**
|
||||
**师：** 非常好！你说清楚了游戏类型、核心操作、游戏规则。这句话交给AI，它就知道该做什么了！
|
||||
|
||||
**【分支B】若学生的一句话太模糊（如"做一个好玩的游戏"）：**
|
||||
**师：** "好玩"是你的目标，但AI不知道什么叫"好玩"。你心里想的是什么游戏？是那种点点点的？还是移来移去的？还是猜谜的？——好，那我们把这个具体说出来。
|
||||
|
||||
**【分支C】若学生的需求太复杂（如"做一个有角色升级、装备系统、多关卡的RPG游戏"）（误概念M2/M4的表现）：**
|
||||
**师：** 哇，你的想法很宏大！但我先问你一个问题——如果这个游戏只能有一个功能，你最想保留哪个？是角色移动探索？还是打怪物？还是收集装备？——对，先抓住最核心的那一个，今天先把它做出来。其他功能下节课再加！
|
||||
|
||||
**师：** 好，大家注意听！刚才有同学的描述很长很复杂，有同学的很简短。今天我们的目标是——先做出一个"能玩"的版本，不需要完美，不需要功能多。这就引出了今天最重要的概念——
|
||||
|
||||
---
|
||||
|
||||
**【分段二：我的游戏——一句话变现实】(20分钟)** 🎮
|
||||
|
||||
**预设误概念：**
|
||||
- M4：要先想好所有功能再开始做
|
||||
- M2：游戏一定要很复杂才好玩
|
||||
- M1：一句话就能做出完美游戏
|
||||
|
||||
**讲解与演示 (Teach & Demo):**
|
||||
|
||||
**师：** 在你们开始做之前，我要教一个超级重要的概念。大家看——
|
||||
|
||||
【在白板上画一个简单的图】
|
||||
|
||||
```
|
||||
┌───────────┐
|
||||
│ 最终梦想版 │ ← 计分+倒计时+动画+音效+关卡+排行榜
|
||||
├───────────┤
|
||||
│ 好玩版本 │ ← 计分+倒计时+简单动画
|
||||
├───────────┤
|
||||
│ 能玩版本 │ ← 核心玩法能跑通 ★ 今天的目标！
|
||||
└───────────┘
|
||||
```
|
||||
|
||||
**师：** 做游戏就像盖楼。你不能直接盖第十层，得先盖第一层。这个"第一层"有一个专业的名字，叫**最小可玩单元**——英文缩写MVP。"最小"就是最简单的，"可玩"就是能玩起来的，"单元"就是最核心的一个功能。【诊断点：学生是否理解MVP的含义】【理解层】
|
||||
|
||||
**师：** 拿打地鼠举例。打地鼠的MVP是什么？不是漂亮的画面，不是音效，不是倒计时。MVP是——"地鼠冒出来，我点它，能得分"。就这一个核心循环。
|
||||
|
||||
**师：** 你们想做的游戏，MVP是什么？就问自己一个问题——**玩家需要重复做的那一件事是什么？**
|
||||
- 贪吃蛇：控制蛇吃食物
|
||||
- 猜数字：输入数字看大了还是小了
|
||||
- 接水果：左右移动接住水果
|
||||
- 井字棋：轮流下棋判断输赢
|
||||
|
||||
**师：** 想清楚这一件事，你的一句话就写对了。好，现在——动手！
|
||||
|
||||
**学生实践 (Practice):**
|
||||
|
||||
**师：** 打开你的AI编程工具，把你的一句话需求输入进去！注意几个事项：
|
||||
|
||||
1. **用慢思考模型**——做游戏比较复杂，用慢模型质量更高
|
||||
2. **一句话要包含核心玩法**——不要只说"做个游戏"
|
||||
3. **生成完了要自己试玩！**——不要看一眼就说"好了"，你要亲自玩至少3遍
|
||||
4. **如果一次生成不成功，不要慌**——翻车了我们修就是了，第四课学过的！
|
||||
|
||||
开始！给你们12分钟。
|
||||
|
||||
【学生操作，教师巡场。重点关注：】
|
||||
|
||||
【教师巡场检查清单：】
|
||||
- 游戏成功能玩 → 点赞，提醒"自己玩三遍检查"
|
||||
- 生成了但不能玩 → 安慰"翻车正常！一会儿我们来修"
|
||||
- 还没输入提示词 → 帮助聚焦，用游戏灵感墙引导
|
||||
- 提示词太复杂 → 引导简化到MVP
|
||||
- 3分钟屏幕没变化 → 主动过去了解情况
|
||||
|
||||
**进度同步 (Checkpoint):**
|
||||
|
||||
**师：** 好，暂停一下！我来做一个小调查。游戏能打开的举手！好。能打开而且核心玩法能玩的举手！好。觉得自己的游戏已经很完美的举手？【诊断点：检查全班完成度，以及学生是否有验收意识（误概念M5——是否不试玩就说"完成了"）】
|
||||
|
||||
**【分支A】若大部分学生游戏能玩：**
|
||||
**师：** 太棒了！你们刚才做了一件了不起的事——用一句话做出了一个可玩的游戏。但我问你们——你们的游戏好玩吗？有没有什么地方觉得不对？
|
||||
|
||||
**【分支B】若不少学生游戏有问题（打不开/不能玩）：**
|
||||
**师：** 没关系！翻车是正常的。还记得第四课学的Bug描述三要素吗？"我做了什么→我以为怎样→实际怎样了"。一会儿我们就来用这个技能修复游戏！
|
||||
|
||||
**【分支C】若有学生的游戏效果超出预期（很精美/很完整）：**
|
||||
**师：** 哇！你的一句话描述得非常好，AI理解得很到位！一会儿你来给大家分享你的一句话是怎么写的。
|
||||
|
||||
---
|
||||
|
||||
**【分段三：审查与修复——我的游戏能玩吗？】(15分钟)** 🔧
|
||||
|
||||
**预设误概念：**
|
||||
- M5：AI生成的游戏一定能玩
|
||||
- M1：一句话就能做出完美游戏
|
||||
|
||||
**讲解与演示 (Teach & Demo):**
|
||||
|
||||
**师：** 现在到了非常关键的一步——验收！做游戏和做网页不一样。网页你看一眼就知道好不好看。但游戏你必须要**玩**才知道行不行。
|
||||
|
||||
**师：** 我来示范怎么验收一个游戏。回到我的打地鼠——
|
||||
|
||||
【教师打开自己的打地鼠游戏，现场试玩，故意找出问题】
|
||||
|
||||
**师：** 我来验收三件事——
|
||||
|
||||
**验收第一关：能打开吗？** 打开浏览器……好，游戏界面出来了。过！
|
||||
|
||||
**验收第二关：核心操作有反应吗？** 地鼠冒出来了……我点击……分数变了！过！
|
||||
|
||||
**验收第三关：游戏规则能跑通吗？** 嗯……地鼠一直在冒，我一直在点。但我发现一个问题——这个游戏没有结束！它永远不会停！【教师现场发现这个"Bug"】
|
||||
|
||||
**师：** 看到了吗？AI做出来的游戏"能玩"，但不"完整"。它缺了一个"游戏结束"的条件。这是不是Bug？——严格来说不算Bug，但它让游戏不完整。这就是为什么我们需要验收！
|
||||
|
||||
**师：** 现在我要用第四课学的技能来修复这个问题。我跟AI说——
|
||||
|
||||
```
|
||||
游戏需要加一个30秒倒计时，时间到了就显示"游戏结束"和最终得分。
|
||||
```
|
||||
|
||||
【教师现场演示修复过程】
|
||||
|
||||
**师：** 看！AI加上了倒计时。我再试玩一遍……30秒到了……"游戏结束，你的得分是12"！完美！这就是一轮完整的"需求→生成→验收→修复"循环。
|
||||
|
||||
**师：** 现在看这张验收单——【投影展示验收单模板】——你们要对自己的游戏做同样的事。三关验收：
|
||||
1. 能打开吗？
|
||||
2. 核心操作有反应吗？
|
||||
3. 游戏规则能跑通吗？
|
||||
|
||||
发现问题就用Bug三要素告诉AI修复。我们第四课学过的——"我做了什么→我以为怎样→实际怎样了"。
|
||||
|
||||
**学生实践 (Practice):**
|
||||
|
||||
**师：** 现在你们有10分钟。任务是：
|
||||
|
||||
1. **自己试玩自己的游戏至少3遍**
|
||||
2. **按验收单三关检查**——能打开？操作有反应？规则能跑通？
|
||||
3. **发现问题就用Bug三要素描述，让AI修复**
|
||||
4. **修复后再玩一遍确认**
|
||||
|
||||
如果你的游戏一开始就不能打开或完全不能玩——别慌！跟AI说"我的游戏打不开/点了没反应，请帮我检查修复"。AI会帮你找到问题的。
|
||||
|
||||
开始！
|
||||
|
||||
【教师巡场重点：】
|
||||
- 认真试玩并发现问题 → 鼓励审查意识
|
||||
- 不知道怎么描述问题 → 提醒Bug三要素
|
||||
- 游戏问题太大 → 帮助判断是重新生成还是修复
|
||||
- 修了一个又出新问题 → 鼓励"这就是迭代！"
|
||||
- 已修复完毕 → 引导思考MVP是否完成
|
||||
|
||||
**进度同步 (Checkpoint):**
|
||||
|
||||
**师：** 时间到！我来做一个调查。修复了至少一个问题的举手！修复了两个以上的举手！有没有人发现游戏完全没问题不用修的？【诊断点：验证学生是否真正进行了验收，还是"看了一眼就说OK"】【应用层】
|
||||
|
||||
**师：** 谁来分享一下你发现了什么问题、是怎么告诉AI修的？
|
||||
|
||||
【请1-2位学生分享修复经历】
|
||||
|
||||
**【分支A】若学生能用三要素描述Bug并成功修复：**
|
||||
**师：** 太棒了！你用了第四课学的Bug三要素精确地描述了问题，AI一下就听懂了。看到了吧——学过的技能在这里直接就用上了！
|
||||
|
||||
**【分支B】若学生描述Bug时很模糊（"游戏不对"）：**
|
||||
**师：** "不对"——具体哪里不对呢？你点了什么？以为会发生什么？实际发生了什么？——对，这样说AI就能帮你了。
|
||||
|
||||
**【分支C】若有学生的游戏反复修不好：**
|
||||
**师：** 有时候修来修去越修越乱，这时候不如退一步——重新用一句清晰的话描述你的游戏，让AI重新做一次。这不是"失败"，这是"策略调整"！
|
||||
|
||||
---
|
||||
|
||||
**【分段四：最小可玩单元——确认核心玩法】(15分钟)** ⭐
|
||||
|
||||
**预设误概念：**
|
||||
- M4：要先想好所有功能再开始做
|
||||
- M2：游戏一定要很复杂才好玩
|
||||
|
||||
**讲解与演示 (Teach & Demo):**
|
||||
|
||||
**师：** 经过前面的修复，现在大部分同学的游戏应该都能玩了。我来问一个关键问题——你的游戏的"最小可玩单元"是什么？就是那个"玩家重复做的一件事"？
|
||||
|
||||
【请3-4位学生快速回答】
|
||||
|
||||
**师：** 非常好。你们的回答就是你们游戏的MVP——最小可玩单元。现在我要你们做一个判断——你的MVP完成了吗？
|
||||
|
||||
【在白板上展示MVP验收标准】
|
||||
|
||||
```
|
||||
MVP验收三问：
|
||||
1. 玩家能做那"一件事"吗？（操作响应）
|
||||
2. 做了那件事有反馈吗？（得分/变化/提示）
|
||||
3. 游戏有开始和结束吗？（完整循环）
|
||||
```
|
||||
|
||||
**师：** 我用打地鼠举例。
|
||||
1. 玩家能点击地鼠吗？——能！MVP的操作OK。
|
||||
2. 点了有反馈吗？——分数增加了！MVP的反馈OK。
|
||||
3. 有开始和结束吗？——刚才修复了，加了30秒倒计时，时间到了显示最终得分。MVP的循环OK。
|
||||
|
||||
**师：** 三个都OK，我的打地鼠的MVP就完成了！注意——我没有加音效、没有加动画、没有加关卡、没有加排行榜。那些都是"锦上添花"的，下节课再说。今天只要MVP完成就是胜利！
|
||||
|
||||
**师：** 现在你们来判断自己的游戏。【诊断点：学生能否判断自己的MVP是否完成，是否能区分"核心玩法"和"额外功能"】【理解层】
|
||||
|
||||
**学生实践 (Practice):**
|
||||
|
||||
**师：** 给你们8分钟，做两件事：
|
||||
|
||||
**任务一：** 用MVP三问检查你的游戏。如果有一项没过关，跟AI说让它补上。
|
||||
- 操作没反应 → 告诉AI"点击/按键没有反应，请修复"
|
||||
- 没有反馈 → 告诉AI"做了操作但看不到变化，需要加上计分/提示"
|
||||
- 没有结束 → 告诉AI"游戏一直不会结束，请加上结束条件"
|
||||
|
||||
**任务二：** 在验收单上填写你的游戏信息。特别注意"我的一句话需求是什么"——把你最终用的那句话写下来。
|
||||
|
||||
【教师巡场重点：】
|
||||
- MVP三问全部通过 → 恭喜，引导填写验收单
|
||||
- 还缺一两项 → 帮助优先补齐最关键的
|
||||
- 在加额外功能 → 温柔拉回"先确认MVP三问OK再美化"
|
||||
- 反复有问题 → 协助用保底提示词（猜数字）
|
||||
|
||||
**保底方案——如果有学生的游戏始终做不出来：**
|
||||
```
|
||||
做一个猜数字游戏。电脑随机想一个1到100的数字，玩家输入猜的数字，提示猜大了或猜小了，猜对了显示"恭喜"和猜了几次。
|
||||
```
|
||||
> 这个游戏是最简单的交互游戏，AI几乎100%能正确生成。教师可以在学生遇到困难时提供这个保底选项。
|
||||
|
||||
**进度同步 (Checkpoint):**
|
||||
|
||||
**师：** 好，最后的调查！MVP三问全部通过的举手！好，大多数同学都通过了。还有一两个没通过的也没关系——你已经知道哪里差了，下节课继续完善。
|
||||
|
||||
**师：** 我来问一个重要的问题——今天你们每个人做的游戏都不一样。有人做了打地鼠，有人做了猜数字，有人做了贪吃蛇，有人做了接水果。但你们用的方法是一样的。什么方法？【诊断点：学生能否归纳出今天的方法论】【迁移层】
|
||||
|
||||
**【分支A】若学生能说出"一句话描述→AI生成→自己试玩→发现问题修复"：**
|
||||
**师：** 完美！你总结了今天最核心的方法——用一句话说清楚需求，AI帮你做，你来验收和修复。这个方法不管做什么游戏都通用！
|
||||
|
||||
**【分支B】若学生说"用AI做游戏"：**
|
||||
**师：** 对，但更准确地说——你告诉AI做什么（需求），AI做出来（生成），你检查能不能玩（验收），有问题就告诉AI修（迭代）。这四步就是做任何软件的基本流程！
|
||||
|
||||
**【分支C】若学生说不出来：**
|
||||
**师：** 我帮你们总结——今天的核心方法是四个字："说→做→验→修"。你说需求，AI做出来，你验收，有问题就修。这个循环我们从第三课就开始走了，今天只是从"网页"升级到了"游戏"！
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟** 🤔
|
||||
|
||||
**【环节】成果展示 (6分钟)**
|
||||
|
||||
**师：** 展示时间到！今天每个人做的游戏都不一样，我请3位同学来展示。展示的时候，不只是让大家玩你的游戏——你还要回答两个问题：
|
||||
|
||||
1. **你的一句话需求是什么？**
|
||||
2. **你修复了什么问题？**
|
||||
|
||||
谁愿意第一个上来？
|
||||
|
||||
【优先选择：一位MVP完整的、一位经历修复的、一位创意独特的。每人2分钟展示。】
|
||||
|
||||
**师：** 对展示的同学，大家说说你觉得最酷的一点。
|
||||
|
||||
**【环节】互评与讨论 (4分钟)**
|
||||
|
||||
**师：** 今天大家做了各种各样的游戏。我来问一个问题——你觉得今天最有成就感的时刻是什么？【诊断点：学生的成就感来源——是"AI帮我做了"还是"我让AI做出了我想要的"】【迁移层】
|
||||
|
||||
**【分支A】若学生说"看到游戏能玩的时候"：**
|
||||
**师：** 对！那种"一句话变出游戏"的感觉是不是很爽？这就是"创造"的快乐——你有一个想法，然后它变成了现实。
|
||||
|
||||
**【分支B】若学生说"修好Bug的时候"：**
|
||||
**师：** 你知道吗？专业的游戏开发者说，修好一个Bug比写新代码还有成就感！你已经有了游戏开发者的心态。
|
||||
|
||||
**【分支C】若学生说"看到别人玩我的游戏的时候"：**
|
||||
**师：** 这就是"产品设计师"的快乐——你做出来的东西有人用、有人玩。这种感觉以后会越来越强！
|
||||
|
||||
**师：** 还有一个重要的发现——今天你们每个人做的游戏都不一样！没有两个人做了同样的游戏。这说明什么？
|
||||
|
||||
**生：** 每个人想法不一样！
|
||||
|
||||
**师：** 对！AI是工具，但创意是你的。AI不会自己想"我要做一个什么游戏"——是你告诉它的。你是设计师，AI是程序员。记住这个关系！
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟** 🚀
|
||||
|
||||
**【环节】抽象总结 (3分钟)**
|
||||
|
||||
**师：** 今天我们学了两个超级重要的东西。
|
||||
|
||||
**第一个：一句话魔法。** 用一句包含核心玩法的话告诉AI，它就能做出可玩的游戏。好话要说清楚：做什么游戏、玩家做什么、规则是什么。
|
||||
|
||||
**第二个：最小可玩单元（MVP）。** 先做出最核心的玩法，确认"能玩"，再慢慢加功能。先有一楼，再盖二楼。
|
||||
|
||||
**师：** 这两个概念不只做游戏用。以后做任何项目都可以：先用一句话说清楚核心功能，先做出最小可用版本，再迭代。这就是"自然语言驱动开发"！
|
||||
|
||||
**【环节】下节预告 + 5分钟挑战 (2分钟)**
|
||||
|
||||
**师：** 下节课预告——今天你们做出了游戏的MVP，能玩了但还不够好玩。下节课我们要在今天的游戏基础上做"升级"——加计分系统、加倒计时、加动画反馈、加难度变化！你的游戏会从"能玩"变成"好玩"。所以今天做的游戏千万别删了！
|
||||
|
||||
**师：** 本周的5分钟挑战来了！
|
||||
|
||||
**5分钟挑战：** 找一个你平时经常玩的游戏（手机游戏、电脑游戏、或者课间玩的游戏都行），想一想——这个游戏的"最小可玩单元"是什么？如果只能保留一个核心玩法，你会保留哪个？
|
||||
|
||||
把你的分析发到班级群：
|
||||
1. 游戏名称
|
||||
2. 核心玩法（一句话描述）
|
||||
3. 如果只保留MVP，哪些功能可以先不要？
|
||||
|
||||
**师：** 下节课开始前，我们会看看谁的分析最到位！回去好好想想。下课！
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师演示用提示词：**
|
||||
|
||||
**1. 课堂演示——一句话生成打地鼠：**
|
||||
```
|
||||
做一个网页版打地鼠游戏，9个洞，地鼠随机冒出来，点到加分。
|
||||
```
|
||||
|
||||
**2. 课堂演示——修复打地鼠（加倒计时）：**
|
||||
```
|
||||
游戏需要加一个30秒倒计时，时间到了就显示"游戏结束"和最终得分。
|
||||
```
|
||||
|
||||
**3. 好坏一句话对比演示：**
|
||||
|
||||
坏的一句话（故意模糊）：
|
||||
```
|
||||
帮我做一个好玩的游戏
|
||||
```
|
||||
|
||||
好的一句话：
|
||||
```
|
||||
做一个网页版贪吃蛇游戏，用方向键控制蛇移动，吃到食物蛇变长，撞到墙就结束。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**学生保底提示词：**
|
||||
|
||||
**如果学生想不出做什么游戏：**
|
||||
```
|
||||
做一个猜数字游戏。电脑随机想一个1到100的数字，玩家输入猜的数字，提示猜大了或猜小了，猜对了显示"恭喜"和猜了几次。
|
||||
```
|
||||
|
||||
**如果学生的游戏完全不能运行：**
|
||||
```
|
||||
我的游戏打不开/点了没反应。请帮我检查代码，修复所有错误，确保游戏能正常运行。
|
||||
```
|
||||
|
||||
**如果学生不知道怎么描述修复需求：**
|
||||
```
|
||||
我的游戏有一个问题：
|
||||
我做了什么：[描述你的操作]
|
||||
我以为会怎样：[描述你期望的效果]
|
||||
实际怎样了：[描述实际发生了什么]
|
||||
请帮我修复这个问题。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**进阶提示词（学有余力的学生）：**
|
||||
|
||||
```
|
||||
给我的[游戏名]加上以下功能：
|
||||
1. 页面顶部显示当前得分
|
||||
2. 加一个"重新开始"按钮
|
||||
3. 游戏结束时显示最终得分
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**本课技术备注：**
|
||||
|
||||
1. **关于游戏类型的AI生成成功率：** 不同类型的游戏，AI生成的成功率差异较大。以下是经验参考：
|
||||
- **高成功率**（推荐）：猜数字、石头剪刀布、井字棋、记忆翻牌、打地鼠、简易计算器游戏
|
||||
- **中成功率**（可能需要一两轮修复）：贪吃蛇、接水果、弹球、躲避游戏、点击反应测试
|
||||
- **低成功率**（可能需要多轮修复或简化需求）：横版卷轴、射击类、复杂物理模拟、多人对战
|
||||
|
||||
如果学生选了低成功率的游戏类型，建议引导他们先从核心玩法的最简版本开始，或切换到高成功率的游戏作为保底。
|
||||
|
||||
2. **HTML游戏的技术实现（教师理解用）：** AI通常用HTML+CSS+JS生成网页游戏。常用技术：DOM操作（元素出现/消失）、Canvas画布（自由绘制类游戏）、定时器（控制游戏节奏）、事件监听（响应点击/按键）。教师不需要向学生解释这些。
|
||||
|
||||
3. **常见游戏Bug：** 点击无响应（事件监听问题）、游戏不会结束（缺少结束条件）、分数不计算（变量更新问题）、画面异常（CSS布局问题）、游戏太快/太慢（定时器间隔问题）。所有问题都可通过Bug三要素描述后让AI修复。
|
||||
|
||||
4. **单文件策略：** 本课游戏全部是单文件index.html（内联CSS/JS），浏览器直接打开即可运行。如果IDE内置预览操作异常，改用独立浏览器窗口打开。
|
||||
|
||||
**常见问题 FAQ：**
|
||||
|
||||
| 学生问题 | 应对方式 |
|
||||
|---------|---------|
|
||||
| "我想做XXX游戏但不知道怎么描述" | "这个游戏里，玩家要做的那一件事是什么？就把这件事说出来就行了。" |
|
||||
| "AI做的游戏画面好丑" | "今天我们的目标是'能玩'，不是'好看'。好看是下一步的事。先确认核心玩法OK了！" |
|
||||
| "我想加音效/动画/关卡" | "好想法！但今天先确保MVP完成。把你的想法记下来，下节课我们就专门做这些升级！" |
|
||||
| "游戏完全不能玩，白屏了" | "别慌！跟AI说'我的游戏打开是白屏，请帮我检查并修复所有错误'。如果还是不行，我们可以换一个更简单的游戏先试。" |
|
||||
| "我想做和XXX同学一样的游戏" | "可以做同类型的，但要加你自己的创意！比如他做了打地鼠，你也可以做，但你的地鼠可以是别的东西——比如打星星、打emoji！" |
|
||||
| "做完了，可以做第二个游戏吗？" | "当然可以！但先确认你第一个游戏的MVP三问全通过了。如果通过了，去挑战第二个游戏吧！" |
|
||||
| "我想做3D游戏/多人对战游戏" | "想法很棒！今天先做简单版本——3D先做成2D的，多人先做成人机的。以后学更高级的技术！" |
|
||||
|
||||
**课堂风险预案：**
|
||||
|
||||
| 风险 | 预案 |
|
||||
|------|------|
|
||||
| AI服务不可用 | 使用教师提前生成好的3-4个游戏HTML文件，让学生在已有游戏基础上体验"验收→修复"流程（手动修改提示词让AI修复的环节改为教师统一演示） |
|
||||
| 学生进度差异过大 | 快的学生引导做第二个游戏或帮助慢的同学；慢的学生使用保底提示词（猜数字），确保人人有可玩作品 |
|
||||
| 某学生的游戏反复生成失败 | 提供保底游戏选项（猜数字），或让该学生在教师的打地鼠基础上做修改体验迭代流程 |
|
||||
| 学生沉迷玩游戏不做验收 | 设置明确的时间节点和任务："玩三遍之后必须在验收单上写下发现的问题" |
|
||||
| 全班游戏选题同质化（都做打地鼠） | 鼓励差异化："做同类型可以，但必须有你自己的变化——比如打的不是地鼠是别的东西，或者规则不一样" |
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周挑战：MVP侦探**
|
||||
|
||||
找一个你平时经常玩的游戏（手机游戏、电脑游戏、桌游、或者课间玩的游戏都行），分析它的"最小可玩单元"。
|
||||
|
||||
把你的分析发到班级群：
|
||||
1. **游戏名称**：你分析的是什么游戏？
|
||||
2. **核心玩法**：用一句话描述玩家重复做的那一件事
|
||||
3. **如果只保留MVP**：哪些功能必须保留？哪些可以先不要？
|
||||
|
||||
**示例：** 王者荣耀 → 核心玩法：控制英雄移动和释放技能击败敌方 → 必须保留：英雄移动、技能、攻击判定 → 可以先不要：皮肤、排行榜、商城
|
||||
|
||||
**评选标准：** 核心玩法找对了吗？MVP取舍合理吗？下节课展示"本周最佳MVP侦探"。
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**拓展一（推荐）：第二个游戏**
|
||||
|
||||
如果你今天的第一个游戏MVP已经完成，试试用一句话做第二个完全不同类型的游戏。对比两次的体验：
|
||||
- 哪个游戏的一句话写得更好？为什么？
|
||||
- 哪个游戏AI一次就做对了？哪个需要修复？
|
||||
- 你觉得什么样的一句话最容易让AI做出能玩的游戏？
|
||||
|
||||
**拓展二（挑战）：反向工程**
|
||||
|
||||
找一个你觉得很简单的手机小游戏（比如Flappy Bird、2048、Chrome断网小恐龙），尝试用一句话告诉AI做一个类似的。记录：
|
||||
- 你的一句话是什么？
|
||||
- AI做出来了吗？和原版差多远？
|
||||
- 你怎么修改描述让它更接近原版？
|
||||
|
||||
**拓展三（创意）：给家人做个游戏**
|
||||
|
||||
用一句话做一个小游戏，发给爸爸妈妈或其他家人玩。问他们：
|
||||
- 你觉得这个游戏好玩吗？
|
||||
- 你觉得最大的问题是什么？
|
||||
- 收集家人的反馈，下节课我们会用这些反馈来改进游戏！
|
||||
620
3-lessons/AICODE-03/旧版本/AICODE03-06 产品迭代与增量开发 v1.md
Normal file
620
3-lessons/AICODE-03/旧版本/AICODE03-06 产品迭代与增量开发 v1.md
Normal file
@@ -0,0 +1,620 @@
|
||||
---
|
||||
课时: 6
|
||||
主题: 产品迭代与增量开发
|
||||
核心能力: [拆解力, 共创力]
|
||||
核心工具: [穹狼 Code / Trae]
|
||||
时长: 90分钟
|
||||
透明化层级: 过程层
|
||||
适用路线: 共享
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 理解"增量开发"的概念：在已有代码上"加功能"，而不是推倒重来
|
||||
- 理解功能优先级分类：必须有（Must Have）vs 最好有（Nice to Have）vs 以后再加（Later）
|
||||
- 认识三大增量方向：计分系统（反馈机制）、倒计时/生命值（紧张感）、动画/音效反馈（体验感）
|
||||
|
||||
**能力目标：**
|
||||
- 能对功能清单进行优先级排序，先做最重要的（拆解力）
|
||||
- 能在AI对话中引用"现有代码/现有游戏"让AI在已有基础上增量修改（共创力）
|
||||
- 能完成至少两轮"提出新功能需求→AI增量实现→验收测试→继续迭代"的完整循环（共创力）
|
||||
|
||||
**情感目标：**
|
||||
- 建立"好产品不是一次做出来的，是一轮一轮迭代出来的"的信念
|
||||
- 体验"我的游戏在我手里一步步变好"的成就感和掌控感
|
||||
- 从"做出来就行"升级为"做得更好"的产品意识
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 概念 | 学生类比 | 认知层级 |
|
||||
|------|---------|---------|
|
||||
| 增量开发 | 装修房子：不是拆了重建，是在现有房子里加家具、刷新墙面 | 理解层 |
|
||||
| 功能优先级 | 考试先做会做的题，难题放最后——功能也有"先做哪个"的顺序 | 应用层 |
|
||||
| 计分系统 | 打篮球要有计分板，否则不知道谁赢了——游戏也需要反馈 | 理解层 |
|
||||
| 倒计时机制 | 考试有时间限制才会紧张——游戏加倒计时才刺激 | 理解层 |
|
||||
| 动画反馈 | 微信发消息有"已读"标记，你才知道对方看到了——游戏也需要"回应" | 应用层 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | 加新功能就要重新做一个游戏 | 在已有代码上让AI增量添加，原来的功能不会丢失 | 演示"重新做"导致旧功能丢失 vs "在原来基础上加"保留一切 |
|
||||
| M2 | 所有想到的功能都要一次性加完 | 一次加一个功能，验收通过后再加下一个；一次说太多AI容易出错 | 让学生尝试一次提5个需求，观察AI"翻车"；再对比逐个添加的效果 |
|
||||
| M3 | 功能越多游戏越好 | 核心功能做好比堆砌功能更重要；3个精打细磨的功能胜过10个半成品 | 展示一个功能很多但全都半成品的"烂游戏"对比一个功能少但打磨到位的好游戏 |
|
||||
| M4 | 加功能的顺序不重要，想到什么加什么 | 有些功能是其他功能的基础（如没有计分就没法做"最高分"），顺序很重要 | 让学生尝试先加"排行榜"再发现需要先有"计分"，体验依赖关系 |
|
||||
| M5 | AI加完功能不用测试，肯定对的 | 每加一个功能都要亲自玩一遍验证，AI经常在加新功能时"弄坏"旧功能 | 演示AI加计分后倒计时意外消失的案例 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- AI编程工具（穹狼 Code / Trae，每位学生已在前几课完成配置）
|
||||
- 每位学生上节课（第5课）的游戏项目文件（HTML文件）
|
||||
- 教师演示电脑 + 投影
|
||||
- 教师准备一份"基础版打地鼠游戏"作为演示用的标准起点
|
||||
|
||||
**教学资源：**
|
||||
- 教师准备：一个已验证的基础游戏（上节课的MVP），以及经过三轮迭代后的完成版（用于对比展示）
|
||||
- 学生资源：上节课做的可玩游戏（如果有学生缺课或丢失文件，教师提前准备2-3份不同的基础游戏作为备选）
|
||||
- "功能优先级排序卡"（打印版，每人一张，含 Must Have / Nice to Have / Later 三个区域）
|
||||
|
||||
**教师备课体验任务：**
|
||||
> 备课前，教师必须亲自完成以下操作：
|
||||
> 1. 用一个基础游戏（如打地鼠），分三轮分别添加计分系统、倒计时、点击动画，记录每轮的提示词和AI表现
|
||||
> 2. 故意在一轮中一次性提出3个以上功能需求，观察AI是否出错（为课堂演示"一次加太多会翻车"做准备）
|
||||
> 3. 故意在新对话中说"帮我做一个有计分的打地鼠游戏"（不引用现有代码），对比在同一对话中说"在现有游戏基础上加计分"的差异
|
||||
> 4. 确认每位学生的电脑上保留了上节课的游戏文件
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟** 🔗
|
||||
|
||||
**【环节：上节课回顾】(3分钟)**
|
||||
|
||||
**师：** 上节课我们干了一件特别酷的事——每个人用一句话就做出了一个可以玩的游戏！谁还记得，你做的是什么游戏？【诊断点：检测第5课核心体验的保持度——学生是否记得自己的MVP游戏】【识别层】
|
||||
|
||||
**【分支A】若学生兴奋地说出自己的游戏（"打地鼠！""接水果！""躲避球！"）：**
|
||||
**师：** 记得很清楚！那我再问一个问题——你的游戏好玩吗？满分10分你给自己打几分？
|
||||
|
||||
**【分支B】若学生记忆模糊：**
|
||||
**师：** 上节课我们用一句话描述需求，AI就帮我们生成了一个可以玩的游戏。你的电脑上还存着呢，等下我们打开来看看。
|
||||
|
||||
**【分支C】若有学生缺课没有做过第5课：**
|
||||
**师：** 没关系！我这里给你准备了几个基础游戏，等下你选一个来用。今天的重点不是做新游戏，而是把已有的游戏变得更好。
|
||||
|
||||
**【环节：情景导入】(7分钟)**
|
||||
|
||||
**师：** 大家给自己的游戏打了分。我猜大部分人打了6分、7分左右——能玩，但总觉得少了点什么。对吧？
|
||||
|
||||
**师：** 我来给大家看两个东西。第一个——【投影展示一个最基础的打地鼠游戏：点击地鼠，地鼠消失，没有计分，没有倒计时，没有任何反馈】
|
||||
|
||||
**师：** 这是上节课做的"基础版"打地鼠。能玩吗？
|
||||
|
||||
**生：** 能玩。/ 但是好无聊。/ 没意思。
|
||||
|
||||
**师：** 能玩，但不好玩。现在看第二个——【投影展示同一个游戏的"迭代版"：有计分、有倒计时、打中地鼠有动画效果和音效、有"游戏结束"画面和最高分记录】
|
||||
|
||||
**师：** 同一个游戏！但感觉完全不一样了，对不对？你们觉得第二个比第一个多了什么？【诊断点：探测学生能否自发识别出"增量功能"——计分、倒计时、动画等】【理解层】
|
||||
|
||||
**生：** 有分数了！/ 有倒计时！/ 打中了会闪一下！/ 还有声音！
|
||||
|
||||
**师：** 全都对！关键问题来了——这个"升级版"是我推翻了原来的游戏重新做的吗？
|
||||
|
||||
**【分支A】若有学生说"不是，是在原来的基础上加的"：**
|
||||
**师：** 厉害！你已经理解今天的核心概念了。没错——这叫"迭代"。不是重新做，是在已经能跑的游戏上，一个功能一个功能地加上去。
|
||||
|
||||
**【分支B】若学生认为"可能是重新做的"（误概念M1的早期表现）：**
|
||||
**师：** 你猜错了！如果我重新做，那之前调好的游戏玩法可能又要从头来。实际上，我就是在原来的游戏上，跟AI说"帮我加一个计分功能"，它就加上了。这就叫——增量开发！
|
||||
|
||||
**师：** 今天这节课，你们就要把自己上节课做的游戏，从"能玩"升级到"好玩"！怎么升级？——一个功能一个功能地加。这就叫**增量开发**，也叫**产品迭代**。
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟** 🛠️
|
||||
|
||||
**【分段一：重开游戏 + 功能清单与优先级排序】(15分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M2：所有想到的功能都要一次性加完
|
||||
- M4：加功能的顺序不重要
|
||||
|
||||
**讲解与演示 (Teach & Demo): (5分钟)**
|
||||
|
||||
**师：** 首先，大家把上节课做的游戏打开，在浏览器里玩一遍。【等30秒让学生打开】
|
||||
|
||||
**师：** 玩完了？好。现在我教你们做产品经理最重要的事——列"功能清单"。产品经理是什么人？就是决定"这个产品要做什么功能"的人。今天你就是自己游戏的产品经理！
|
||||
|
||||
**师：** 我先用我的打地鼠游戏做个示范。我玩了一遍基础版，觉得缺了这些东西——【在白板上写】
|
||||
|
||||
```
|
||||
我想加的功能：
|
||||
1. 计分——打中一只加10分
|
||||
2. 倒计时——30秒时间限制
|
||||
3. 打中时有动画效果——地鼠闪一下
|
||||
4. 最高分记录——保存我的最佳成绩
|
||||
5. 难度递增——越到后面地鼠出现越快
|
||||
6. 背景音乐
|
||||
7. 排行榜
|
||||
8. 不同种类的地鼠（有的加分多有的加分少）
|
||||
```
|
||||
|
||||
**师：** 列了8个功能。但问题来了——我能一次全加上去吗？
|
||||
|
||||
**生：** 不能！/ 太多了！
|
||||
|
||||
**师：** 对！一次加太多，AI容易"翻车"——加了新的把旧的弄坏了。所以我们要给功能排优先级！这就像考试——你会先做哪种题？
|
||||
|
||||
**生：** 先做会做的！/ 先做简单的！
|
||||
|
||||
**师：** 考试是先做会做的。功能排序呢，我们用另一个方法——分成三类：【在白板上画三个区域】
|
||||
|
||||
**Must Have（必须有）：** 没有这个功能，游戏就不完整
|
||||
**Nice to Have（最好有）：** 有了更好，没有也能玩
|
||||
**Later（以后再加）：** 太复杂了或者不急，放到以后
|
||||
|
||||
**师：** 我来示范排序——
|
||||
|
||||
| Must Have | Nice to Have | Later |
|
||||
|-----------|-------------|-------|
|
||||
| 计分 | 打中动画效果 | 排行榜 |
|
||||
| 倒计时 | 最高分记录 | 不同种类地鼠 |
|
||||
| | 难度递增 | 背景音乐 |
|
||||
|
||||
**师：** 为什么计分是 Must Have？因为没有分数，你都不知道自己打了多少只！这不是游戏，是"无聊的点点点"。为什么排行榜是 Later？因为排行榜需要先有计分系统——你连分都没有，排什么榜？【诊断点：学生能否理解功能之间的依赖关系】【理解层】
|
||||
|
||||
**学生实践 (Practice): (8分钟)**
|
||||
|
||||
**师：** 现在轮到你们了！每个人拿出功能优先级排序卡。
|
||||
|
||||
任务：
|
||||
1. 打开你的游戏，玩一遍
|
||||
2. 花3分钟写下你想加的所有功能（至少写5个，越多越好！先别管能不能做到）
|
||||
3. 花3分钟把功能分类到三个区域：Must Have / Nice to Have / Later
|
||||
4. 在 Must Have 里挑出最重要的一个，画个星号——这就是你今天第一个要加的功能
|
||||
|
||||
提示：如果你不知道写什么功能，看看这些方向——
|
||||
- **反馈类：** 计分、生命值、最高分
|
||||
- **紧张感：** 倒计时、速度加快、关卡
|
||||
- **体验类：** 动画效果、音效、颜色变化、弹出提示
|
||||
|
||||
> 教师走动观察：重点关注谁把所有功能都放在 Must Have（误概念M3的表现），谁不知道怎么分类，谁只写了1-2个功能需要帮忙扩展思路。
|
||||
|
||||
**进度同步 (Checkpoint): (2分钟)**
|
||||
|
||||
**师：** 好，停一下！谁来分享你的功能清单？先说你列了几个功能，再说你 Must Have 里选了什么。【诊断点：学生的优先级判断是否合理——有没有把"排行榜"放在"计分"前面（M4的表现）】【应用层】
|
||||
|
||||
**【分支A】若学生排序合理（先基础功能后高级功能）：**
|
||||
**师：** 你的排序很有产品经理的思维！注意到了吗——计分是很多其他功能的"基础"，所以它排在最前面。
|
||||
|
||||
**【分支B】若学生把太多功能放在 Must Have：**
|
||||
**师：** 你列了不少 Must Have！但想一下——如果今天只能加两个功能，你选哪两个？真正的 Must Have 是"没有它游戏就缺了一大块"的功能。
|
||||
|
||||
**【分支C】若学生列的功能很少或不知道分类：**
|
||||
**师：** 没关系！想想看你玩别人的游戏时，什么功能让你觉得"这个游戏好好玩"？分数？倒计时？过关？把这些写下来就行。
|
||||
|
||||
---
|
||||
|
||||
**【分段二：第一轮迭代——加计分系统】(20分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M1：加新功能要重新做游戏
|
||||
- M5：AI加完功能不用测试
|
||||
|
||||
**讲解与演示 (Teach & Demo): (5分钟)**
|
||||
|
||||
**师：** 功能清单排好了，现在开始动手！第一轮迭代，我们一起加最高优先级的功能。大部分同学 Must Have 里排第一的应该是——
|
||||
|
||||
**生：** 计分！
|
||||
|
||||
**师：** 对！计分系统。我来演示怎么跟AI说"在现有游戏上加计分"。注意——这里有一个非常关键的说法！
|
||||
|
||||
**师：** 错误的说法——【在投影上打出来】
|
||||
|
||||
```
|
||||
帮我做一个有计分功能的打地鼠游戏
|
||||
```
|
||||
|
||||
**师：** 这句话有什么问题？
|
||||
|
||||
**生：** ……
|
||||
|
||||
**师：** 这是让AI"重新做一个"！它会忽略我们上节课辛辛苦苦做的游戏，从零开始。之前调好的玩法、样式全没了！
|
||||
|
||||
**师：** 正确的说法——【在投影上打出来】
|
||||
|
||||
```
|
||||
请在我现有的打地鼠游戏基础上，添加一个计分系统：
|
||||
- 每次成功点击地鼠，分数加10分
|
||||
- 在页面顶部显示当前得分
|
||||
- 分数要大字号显示，醒目一点
|
||||
- 不要改动现有的游戏玩法和样式，只添加计分功能
|
||||
```
|
||||
|
||||
**师：** 看到区别了吗？关键词是——**"在现有的……基础上"**和**"不要改动现有的"**。这两句话告诉AI：别重做，在我已经有的代码上加！这就是"增量开发"的核心——**迭代不等于重来**。【诊断点：学生能否理解"在现有基础上加"和"重新做"的区别】【理解层】
|
||||
|
||||
（教师现场演示：在AI对话中发送上述提示词，等AI修改代码，刷新预览。）
|
||||
|
||||
**师：** 看！计分加上了。现在最关键的一步——验收！我要亲自玩一遍，检查三件事：
|
||||
1. 点击地鼠，分数有没有增加？✅
|
||||
2. 分数显示的位置和大小对不对？✅
|
||||
3. 原来的游戏玩法有没有被弄坏？——我点击空白处看看，地鼠的出现节奏正不正常？✅
|
||||
|
||||
**师：** 三项全通过！这一轮迭代成功了。如果验收发现有问题呢？——就用第4课学的 Bug 描述三要素告诉AI修复。
|
||||
|
||||
**学生实践 (Practice): (12分钟)**
|
||||
|
||||
**师：** 现在轮到你们了！给你们12分钟，在你的游戏上加你选的第一个 Must Have 功能。
|
||||
|
||||
注意三个关键步骤：
|
||||
1. **写清需求**——在AI对话中明确说"在现有游戏基础上"，具体描述你要加什么
|
||||
2. **一次只加一个功能**——不要贪心把所有功能一次说完
|
||||
3. **验收测试**——AI改完后，亲自玩一遍！检查新功能是否正常，旧功能有没有坏
|
||||
|
||||
如果你的 Must Have 是计分，可以参考我的提示词改成自己游戏的版本。如果你的 Must Have 是其他功能（比如倒计时），也用同样的结构去写。
|
||||
|
||||
保底提示词（如果不知道怎么写）：
|
||||
```
|
||||
请在我现有游戏的基础上，添加一个[你要加的功能名]。
|
||||
具体要求：[用1-3句话描述这个功能应该怎么运作]
|
||||
注意：不要改动现有的游戏玩法和样式，只添加这个新功能。
|
||||
```
|
||||
|
||||
> 教师走动观察，重点关注：
|
||||
> - 谁在开新对话重新描述整个游戏（M1的表现）→ 提醒"在同一个对话里接着说就行"
|
||||
> - 谁一次提了3个以上功能（M2的表现）→ 提醒"先加一个，验收通过再加下一个"
|
||||
> - 谁加完功能没有测试就继续下一步（M5的表现）→ 提醒"先自己玩一遍看看对不对"
|
||||
> - 谁的旧功能被AI改坏了 → 这是绝佳教学时刻！引导用Bug三要素描述
|
||||
|
||||
**进度同步 (Checkpoint): (3分钟)**
|
||||
|
||||
**师：** 好，暂停一下！举手告诉我——加完第一个功能并且测试通过的，举手！【诊断点：完成度统计 + 验收意识检测——有没有人说"加了但没测试"】【应用层】
|
||||
|
||||
**师：** 没举手的同学，遇到了什么问题？
|
||||
|
||||
**【分支A】若大部分学生完成且测试通过：**
|
||||
**师：** 太好了！你们刚刚完成了第一轮迭代！感觉到了吗——游戏在你手里一点一点变好了。这就是产品经理的感觉。接下来我们进入第二轮！
|
||||
|
||||
**【分支B】若有学生AI加完功能后旧功能坏了：**
|
||||
**师：** 举个手看看，有谁的游戏加了新功能后，原来的功能反而坏了？（几只手举起）很正常！这就是为什么我说"每加一个功能都要测试"！你现在要用第4课学的Bug三要素告诉AI："我加了计分后，地鼠不再消失了。请修复这个问题，不要影响计分功能。"
|
||||
|
||||
**【分支C】若有学生还没完成：**
|
||||
**师：** 没关系，你的节奏慢一点不要紧。先确保第一个功能加好了再往下走。遇到问题可以举手，也可以参考保底提示词。
|
||||
|
||||
---
|
||||
|
||||
**【分段三：第二轮迭代——自选增量方向】(15分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M2：一次加太多功能
|
||||
- M3：功能越多越好（不注重质量）
|
||||
|
||||
**讲解与演示 (Teach & Demo): (3分钟)**
|
||||
|
||||
**师：** 第一轮迭代完成了，你们的游戏已经比上节课好了一大截！现在进入第二轮——你可以从两个方向中自选一个：
|
||||
|
||||
**方向A：加倒计时/生命值（紧张感方向）**
|
||||
|
||||
提示词参考：
|
||||
```
|
||||
请在现有游戏基础上添加一个30秒倒计时功能：
|
||||
- 在页面顶部显示剩余时间，和计分并排
|
||||
- 每秒倒数一次
|
||||
- 时间到0后显示"游戏结束！"和最终得分
|
||||
- 倒计时最后5秒文字变红色提示紧迫感
|
||||
- 不要修改已有的计分功能和游戏玩法
|
||||
```
|
||||
|
||||
**方向B：加动画/视觉反馈（体验感方向）**
|
||||
|
||||
提示词参考：
|
||||
```
|
||||
请在现有游戏基础上添加点击反馈动画：
|
||||
- 点中目标时，目标放大后消失（或者闪烁一下）
|
||||
- 同时在点击位置弹出"+10"的文字提示，1秒后淡出
|
||||
- 点空了的时候显示一个"X"标记，半秒后消失
|
||||
- 不要修改已有的计分功能和游戏玩法
|
||||
```
|
||||
|
||||
**师：** 选哪个方向都可以！关键是——还是那个原则：一次只加一个功能，加完要测试！
|
||||
|
||||
**师：** 做得快的同学，可以两个方向都加。但记住——每加一个，先验收再加下一个。不要急着堆功能！质量比数量重要。【诊断点：观察学生选择方向时是否有自主思考，还是盲目跟风】【应用层】
|
||||
|
||||
**学生实践 (Practice): (10分钟)**
|
||||
|
||||
学生自选方向进行第二轮迭代。
|
||||
|
||||
> 教师走动观察，重点关注：
|
||||
> - 谁选了方向后犹豫不决 → 帮助简化选择："你更想让游戏更刺激，还是更好看？刺激选A，好看选B"
|
||||
> - 谁开始同时加多个功能 → 温和提醒"先把这一个加好，测试通过再说"
|
||||
> - 谁两轮都加完了，开始自由发挥 → 鼓励并引导他们看看 Nice to Have 里还有什么可以加的
|
||||
> - 谁遇到困难卡住了 → 指导使用保底提示词，或建议简化功能需求
|
||||
|
||||
**进度同步 (Checkpoint): (2分钟)**
|
||||
|
||||
**师：** 好！第二轮迭代完成了多少人？举手让我看看！太棒了。谁来简单说说——你加了什么功能？加完后你的游戏体验有什么变化？【诊断点：学生能否描述"加了这个功能后，游戏哪里变好了"——从纯操作上升到产品感知】【迁移层】
|
||||
|
||||
**【分支A】若学生能说出具体感受（"加了倒计时后感觉紧张多了""加了动画后打中很爽"）：**
|
||||
**师：** 你说到了一个很重要的词——"感觉"！游戏好不好玩，就是看玩的人有没有"感觉"。计分给你"成就感"，倒计时给你"紧张感"，动画给你"爽感"。这就是为什么这三个方向这么重要！
|
||||
|
||||
**【分支B】若学生只说"加了XXX功能"但说不出感受：**
|
||||
**师：** 功能加上了，很好！那你现在再玩一遍你的游戏——跟上节课的基础版比，你更想玩哪个？为什么？
|
||||
|
||||
---
|
||||
|
||||
**【分段四：调试与打磨——确保所有功能正常】(15分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M5：加完功能不用测试
|
||||
- M3：功能越多越好（忽视Bug和细节）
|
||||
|
||||
**讲解与演示 (Teach & Demo): (3分钟)**
|
||||
|
||||
**师：** 前两轮迭代，你们给游戏加了计分、倒计时、动画……功能越来越多了。但功能多了，Bug的可能性也多了。现在进入最后一个环节——**打磨**。
|
||||
|
||||
**师：** 什么叫打磨？就像做一个木头椅子——形状做好了（功能都有了），但表面有毛刺（Bug），坐起来不舒服（体验不好）。打磨就是把毛刺磨掉，让椅子又好看又舒服。
|
||||
|
||||
**师：** 打磨三步检查法——【在白板上写】
|
||||
|
||||
1. **功能完整性检查：** 每个加过的功能，亲自操作一遍，确认都正常工作
|
||||
2. **功能冲突检查：** 新加的功能有没有把旧功能弄坏？（比如加了倒计时后计分还对吗？）
|
||||
3. **视觉细节检查：** 分数显示位置对吗？倒计时字够大吗？动画流畅吗？颜色搭配协调吗？
|
||||
|
||||
**师：** 我演示一下。我的打地鼠游戏已经加了计分和倒计时。我来检查——
|
||||
- 计分：点击地鼠，+10……✅ 正常
|
||||
- 倒计时：30秒开始倒计……✅ 正常
|
||||
- 冲突：时间到了后我再点地鼠，分数还会加吗？——哎，居然还能加分！这是Bug！游戏结束后不应该还能操作！
|
||||
|
||||
**师：** 发现了一个Bug。我怎么跟AI说？——用Bug描述三要素！
|
||||
|
||||
```
|
||||
发现一个问题：
|
||||
- 我做了什么：倒计时到0后，我继续点击地鼠
|
||||
- 我以为会怎样：游戏结束后应该不能再操作了
|
||||
- 实际怎样了：时间到了还能点击地鼠并加分
|
||||
请修复：倒计时到0后，禁止所有点击操作，只显示最终得分和"游戏结束"画面。
|
||||
```
|
||||
|
||||
**师：** 看到了吗？打磨就是——发现细节问题，精确描述，让AI修复。这一步最考验耐心，但也是让你的游戏从"半成品"变成"正式产品"的关键！
|
||||
|
||||
**学生实践 (Practice): (10分钟)**
|
||||
|
||||
**师：** 现在，花10分钟给你的游戏做最后的打磨。按照三步检查法：
|
||||
|
||||
1. 把你加的每个功能都操作一遍，列出发现的Bug
|
||||
2. 特别注意不同功能之间有没有冲突
|
||||
3. 检查视觉效果——文字大小、颜色、位置有没有不舒服的
|
||||
4. 发现问题就用Bug三要素告诉AI修复
|
||||
|
||||
如果所有功能都正常了——恭喜你，你可以做这些"锦上添花"的打磨：
|
||||
- 让AI美化一下界面配色
|
||||
- 加一个游戏标题
|
||||
- 加一个"重新开始"按钮
|
||||
- 调整动画的速度或效果
|
||||
|
||||
> 教师走动观察，重点关注：
|
||||
> - 谁认真在做测试（好现象）→ 表扬"你的验收很专业"
|
||||
> - 谁在继续疯狂加新功能而不测试（M3+M5）→ "先停一下，把现有功能测好了再加新的"
|
||||
> - 谁发现了有趣的Bug → 鼓励分享给全班
|
||||
> - 谁的游戏已经打磨得很好 → 建议帮助旁边的同学
|
||||
|
||||
**进度同步 (Checkpoint): (2分钟)**
|
||||
|
||||
**师：** 最后问一个问题。你的游戏从上节课的基础版到现在，一共经历了几轮迭代？每一轮加了什么？【诊断点：学生能否清晰回顾自己的迭代历程——这是"过程层"透明化的核心检验】【迁移层】
|
||||
|
||||
**【分支A】若学生能说出"第一轮加了计分，第二轮加了倒计时，第三轮修了几个Bug"：**
|
||||
**师：** 完美！你刚才描述的就是"产品迭代记录"——专业的产品经理都会记录每一轮做了什么。这个能力以后会越来越有用！
|
||||
|
||||
**【分支B】若学生只说"加了很多东西"但说不清每轮做了什么：**
|
||||
**师：** "加了很多东西"说明你做了不少工作！但如果能说清楚"第一步加了什么、第二步加了什么"，你就能更清楚地知道自己的游戏是怎么一步步变好的。下次试试每轮迭代后记一句话笔记。
|
||||
|
||||
**【分支C】若有学生只完成了一轮迭代：**
|
||||
**师：** 一轮迭代也是迭代！一个功能做好了、测试通过了，比加了三个功能但都是半成品好得多。质量第一！
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟** 🤔
|
||||
|
||||
**【环节：成果展示】(6分钟)**
|
||||
|
||||
**师：** 现在是最激动人心的环节——展示时间！我请3位同学来展示你的游戏"进化史"。展示的时候要说三件事：
|
||||
|
||||
1. 上节课的基础版是什么样的（可以说一句话描述）
|
||||
2. 你加了哪些功能？按什么顺序加的？为什么？
|
||||
3. 现场玩一遍给大家看！
|
||||
|
||||
（请3位学生展示，每人2分钟。优先选择：①迭代轮数多且有明确节奏的学生 ②遇到Bug并成功修复的学生 ③功能不多但打磨精细的学生）
|
||||
|
||||
**【环节：互评与讨论】(4分钟)**
|
||||
|
||||
**师：** 看完了三位同学的展示，每人在心里想两个问题：
|
||||
1. 谁的游戏你最想玩？为什么？
|
||||
2. 如果你是产品经理，你会建议他/她下一步加什么功能？
|
||||
|
||||
谁来说说？
|
||||
|
||||
（请2-3位学生发言）
|
||||
|
||||
**师：** 最后一个关键问题——今天这节课和上节课有什么不同？上节课是"从无到有"，今天呢？【诊断点：学生能否提炼出"从有到更好"的核心跃迁】【迁移层】
|
||||
|
||||
**【分支A】若学生能说出"上节课是做出来，今天是做更好"：**
|
||||
**师：** 一针见血！这就是产品开发的两个阶段——先做出MVP（最小可玩版本），再通过迭代让它越来越好。真正的产品公司，都是这么做的。
|
||||
|
||||
**【分支B】若学生说"今天加了很多功能"：**
|
||||
**师：** 对！但更精确地说——今天不是"做了一个有很多功能的新游戏"，而是"在已有的基础上一个一个加上去的"。这个"在已有基础上加"就是核心！
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟** 🚀
|
||||
|
||||
**【环节：抽象总结】(3分钟)**
|
||||
|
||||
**师：** 今天我们学了三个核心能力，我用三句话总结：
|
||||
|
||||
**第一句：增量开发——** 不是推翻重来，是在已有的基础上加功能。就像装修房子，不是拆了重建，是一样一样添置进去。
|
||||
|
||||
**第二句：功能优先级——** Must Have 先做，Nice to Have 后做，Later 放一放。做产品不能贪心，先保证核心功能好用。
|
||||
|
||||
**第三句：每轮迭代都要验收——** 加一个功能就测一下，发现问题就修。"做了→测了→修了"比"做了做了做了→全崩了"好一百倍。
|
||||
|
||||
**师：** 这三个能力，不只在做游戏的时候有用。以后你做任何项目——写一篇长作文、准备一次班会、甚至整理自己的房间——都可以用"先列清单、排优先级、一步一步做、每步检查"这个方法。这就是"拆解力"的核心！【迁移诊断】
|
||||
|
||||
**【环节：下节预告 + 5分钟挑战】(2分钟)**
|
||||
|
||||
**师：** 下节课预告——我们要学"交互产品架构设计"。什么意思呢？今天你们是在已有游戏上"加功能"，下节课你们要学"怎么从一开始就把功能想清楚"——先设计，再开发。就像建房子——今天是装修，下节课是画图纸！
|
||||
|
||||
**师：** 本周5分钟AI挑战来了！
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师演示用提示词：**
|
||||
|
||||
**课前准备——基础版打地鼠游戏（演示起点）：**
|
||||
```
|
||||
请帮我用HTML/CSS/JavaScript生成一个最基础的打地鼠游戏：
|
||||
- 一个3x3的网格
|
||||
- 地鼠随机出现在某个格子里，1.5秒后自动消失
|
||||
- 点击地鼠后地鼠消失
|
||||
- 没有计分，没有倒计时，没有动画效果
|
||||
- 视觉上要简洁可爱，适合小学生的风格
|
||||
- 所有代码放在一个HTML文件中
|
||||
```
|
||||
|
||||
**课堂演示——增量添加计分（第一轮迭代示范）：**
|
||||
```
|
||||
请在我现有的打地鼠游戏基础上，添加一个计分系统：
|
||||
- 每次成功点击地鼠，分数加10分
|
||||
- 在页面顶部显示当前得分
|
||||
- 分数要大字号显示，醒目一点
|
||||
- 不要改动现有的游戏玩法和样式，只添加计分功能
|
||||
```
|
||||
|
||||
**课堂演示——增量添加倒计时（第二轮迭代示范）：**
|
||||
```
|
||||
请在现有游戏基础上添加一个30秒倒计时功能：
|
||||
- 在页面顶部显示剩余时间，和计分并排
|
||||
- 每秒倒数一次
|
||||
- 时间到0后显示"游戏结束！"和最终得分
|
||||
- 倒计时最后5秒文字变红色提示紧迫感
|
||||
- 不要修改已有的计分功能和游戏玩法
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**学生保底提示词：**
|
||||
|
||||
**通用增量功能添加模板：**
|
||||
```
|
||||
请在我现有游戏的基础上，添加一个[功能名称]。
|
||||
具体要求：
|
||||
- [功能的具体表现，1-3句话]
|
||||
注意：不要改动现有的游戏玩法和样式，只添加这个新功能。
|
||||
```
|
||||
|
||||
**Bug修复保底模板（结合第4课）：**
|
||||
```
|
||||
我的游戏出了一个问题：
|
||||
- 我做了什么：[描述操作]
|
||||
- 我以为会怎样：[描述预期]
|
||||
- 实际怎样了：[描述实际]
|
||||
请在不影响其他功能的前提下修复这个问题。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**进阶提示词：**
|
||||
|
||||
**同时打磨视觉效果：**
|
||||
```
|
||||
请帮我美化游戏界面：
|
||||
- 给游戏加一个标题"[游戏名]"，用好看的字体和颜色
|
||||
- 计分和倒计时区域加一个半透明背景框
|
||||
- 整体配色方案换成[描述想要的风格，如"科技感蓝紫色""可爱粉色系"]
|
||||
- 加一个"重新开始"按钮，放在游戏结束画面上
|
||||
- 不要改动游戏逻辑，只美化视觉效果
|
||||
```
|
||||
|
||||
**高阶：加难度递增机制：**
|
||||
```
|
||||
请在现有游戏基础上添加难度递增：
|
||||
- 每得50分，地鼠出现间隔缩短0.1秒（最低不低于0.5秒）
|
||||
- 每次难度提升时，在页面上闪一下"难度UP！"的提示
|
||||
- 不影响计分和倒计时功能
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**本课技术备注：**
|
||||
|
||||
1. **增量开发的技术原理：** 在AI编程工具中，如果学生在同一个对话/项目中发送后续请求，AI会基于已有代码进行修改，这就是增量开发的技术基础。如果学生开新对话或不引用现有代码，AI会从零生成，导致之前的功能丢失。教师需确保学生在同一对话/项目中操作。
|
||||
|
||||
2. **计分系统的技术实现：** JavaScript变量存储分数，点击事件触发分数增加，DOM操作更新页面显示。学生不需要知道这些细节，只需要通过自然语言描述"每次点击加10分，在页面上显示分数"。
|
||||
|
||||
3. **倒计时的技术实现：** JavaScript的`setInterval`函数每秒执行一次倒数。时间到后清除定时器、禁用交互。常见Bug：倒计时到0后玩家仍可操作（需要在回调中禁用点击事件）。
|
||||
|
||||
4. **CSS动画的技术实现：** `@keyframes`定义动画帧，`animation`属性触发动画。常见效果：缩放(`scale`)、渐变透明(`opacity`)、颜色变化(`color`)。AI通常能根据"闪烁""放大后消失""淡出"等自然语言描述生成对应动画代码。
|
||||
|
||||
5. **功能冲突的常见原因：** AI在添加新功能时可能意外修改了已有代码的逻辑（如重新定义了同名变量、修改了事件监听器）。这就是为什么每轮迭代后都要验收测试。如果出现冲突，让学生描述"加了X功能后，Y功能坏了"，AI通常能定位并修复。
|
||||
|
||||
**常见问题 FAQ：**
|
||||
|
||||
| 问题 | 应对 |
|
||||
|------|------|
|
||||
| "我上节课的游戏文件丢了怎么办？" | 教师提前准备2-3份不同的基础游戏作为备选："没关系，我这里有几个基础游戏，你选一个你喜欢的来迭代。" |
|
||||
| "我想加的功能AI做不出来" | "可能是你描述得还不够具体。试试把这个功能拆成更小的步骤：先实现最基本的，再逐步完善。" |
|
||||
| "AI加了功能后整个游戏都坏了" | "别慌！告诉AI：'你刚才的修改导致游戏出了问题。请回到上一个版本，然后只添加计分功能，不要改动其他部分。'" |
|
||||
| "我能不能重新做一个更好的游戏？" | "你的想法很好！但今天的重点是在已有基础上加功能。就像学开车——先学会直线走，再学会转弯，不能每次都换一辆新车。下节课你会有机会设计新游戏。" |
|
||||
| "为什么要一次只加一个功能？" | "就像搭积木——一块一块搭，每搭一块检查一下稳不稳。如果一次堆五块，塌了你都不知道是哪块的问题。" |
|
||||
| "我的功能都加完了，没事做了" | "你的打磨做完了吗？视觉效果满意吗？要不要试试加Nice to Have列表里的功能？或者帮帮旁边还在调试的同学。" |
|
||||
|
||||
**课堂风险预案：**
|
||||
- **如果AI服务不可用：** 教师使用课前准备好的三个版本（基础版→计分版→完整版）进行对比展示和讲解，学生用纸笔完成功能清单和优先级排序练习，作为概念课处理。下节课补做实践。
|
||||
- **如果学生进度差异过大：** 快的学生完成三轮迭代后，安排"小导师"角色帮助慢的同学；慢的学生只要完成一轮高质量迭代即可，不要求跟上最快的人。
|
||||
- **如果大量学生上节课作品丢失：** 全班统一使用教师准备的基础游戏（建议准备3种不同类型：打地鼠、接水果、点击反应），学生选择自己喜欢的类型进行迭代。
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周挑战：功能优先级设计师**
|
||||
|
||||
**挑战说明：** 选一个你常用的App或常玩的游戏（比如微信、抖音、王者荣耀），想象它还是一个"基础版"——只有最核心的功能。然后：
|
||||
|
||||
1. 列出这个产品至少有的5个功能
|
||||
2. 用 Must Have / Nice to Have / Later 给它们排优先级
|
||||
3. 用1-2句话解释：为什么你觉得XX功能是 Must Have？
|
||||
|
||||
把你的排序拍照发到班级群。下节课开始前，我们看看谁对"产品功能"的理解最深！
|
||||
|
||||
**下节课分享：** 下周课上选2-3位同学展示挑战成果
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**拓展一（推荐）：继续迭代你的游戏**
|
||||
|
||||
回家后打开今天的游戏，从你的 Nice to Have 列表中再挑1-2个功能加上去。记录你的"迭代日志"：
|
||||
- 第X轮：加了什么功能？用了什么提示词？测试结果如何？
|
||||
把迭代日志和游戏截图发到班级群，下节课展示"终极版"。
|
||||
|
||||
**拓展二（挑战）：给朋友的游戏做"产品评审"**
|
||||
|
||||
找一个同学（或者用教师提供的基础游戏），以"产品经理"的身份进行评审：
|
||||
1. 玩他/她的游戏，列出你觉得需要加的功能
|
||||
2. 用 Must Have / Nice to Have / Later 排序
|
||||
3. 写出最高优先级功能的详细需求描述（要具体到AI能直接执行的程度）
|
||||
4. 把你的"产品评审报告"发给那位同学
|
||||
|
||||
这个挑战训练的是"从用户视角发现需求"的能力——这是产品经理最核心的技能！
|
||||
700
3-lessons/AICODE-03/旧版本/AICODE03-07 交互产品架构设计 v1.md
Normal file
700
3-lessons/AICODE-03/旧版本/AICODE03-07 交互产品架构设计 v1.md
Normal file
@@ -0,0 +1,700 @@
|
||||
---
|
||||
课时: 7
|
||||
主题: 交互产品架构设计
|
||||
核心能力: [拆解力, 表达力]
|
||||
核心工具: [穹狼 Code / Trae]
|
||||
时长: 90分钟
|
||||
透明化层级: 过程层
|
||||
适用路线: 共享
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 理解"游戏核心循环"概念：玩家做什么 → 系统反馈什么 → 为什么还想玩
|
||||
- 理解"需求文档"的作用：先想清楚再动手，用文字把想法固定下来
|
||||
- 知道MVP（最小可玩版本）与功能优先级的关系：不是所有功能都同样重要
|
||||
|
||||
**能力目标：**
|
||||
- 能分析一款游戏/产品的核心循环，并用一句话描述其核心玩法（拆解力）
|
||||
- 能独立撰写一份"一页纸需求文档"：项目名称、目标用户、核心玩法、功能清单（表达力）
|
||||
- 能将需求文档转化为AI可执行的开发指令，并验收核心玩法是否实现（拆解力+表达力）
|
||||
|
||||
**情感目标：**
|
||||
- 建立"先想清楚再做"的产品思维——从"随便做一个"进化到"有计划地做"
|
||||
- 感受"我的项目我做主"的自主感——完全开放的方向选择带来创作自由
|
||||
- 体验"文档是和AI合作的最好起点"——写好文档比写好单条提示词更强大
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 概念 | 学生类比 | 认知层级 |
|
||||
|------|---------|---------|
|
||||
| 游戏核心循环 | 就像"石头剪刀布"——出招（玩家行动）→ 比大小（系统反馈）→ 不服再来（继续动力） | 识别层→理解层 |
|
||||
| 需求文档 | 就像出去旅游前的"旅行计划"——去哪、玩什么、带什么，写清楚了再出发 | 理解层→应用层 |
|
||||
| MVP功能优先级 | 就像做一道菜——先把主菜做好（MVP），再考虑摆盘和配菜（V2/V3） | 应用层 |
|
||||
| 自选方向 | 就像自助餐——老师提供六个窗口，你选最想吃的那个 | 识别层 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | **不需要写文档，直接让AI做就行** | 文档帮你理清思路、减少返工；没有文档，AI只能猜你想要什么，做出来的大概率不满意 | 对比演示：有文档vs无文档的AI产出质量差异 |
|
||||
| M2 | **功能越多越好，一次全部做完** | 先做核心玩法（MVP），确认好玩了再加功能；一次塞太多功能，AI容易做乱 | 展示一个"功能太多反而什么都不好玩"的反面案例 |
|
||||
| M3 | **核心循环=游戏规则** | 核心循环是"为什么你会一直玩下去"的动力机制，不只是规则说明 | 用"贪吃蛇"举例——规则是"吃豆子变长"，但核心循环是"我还能更长→贪心→撞墙→不服→再来" |
|
||||
| M4 | **需求文档要写得很正式很长** | 一页纸就够了！关键是想清楚"做什么、给谁用、核心体验是什么" | 展示一页纸模板，消除"写文档很难"的恐惧 |
|
||||
| M5 | **只有游戏才需要核心循环** | 任何产品都有循环——工具类是"遇到问题→使用工具→问题解决→下次还用"，创意类是"看到灵感→创作→获得反馈→想做更多" | 引导学生分析一个工具类产品的循环 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- AI编程工具（穹狼 Code / Trae，每位学生已在前几课完成安装配置）
|
||||
- DeepSeek模型（慢思考模型，用于核心玩法开发）
|
||||
- 教师演示电脑+投影
|
||||
|
||||
**教学资源：**
|
||||
- 教师准备：3个经典游戏的"核心循环分析卡"（打印或投影）
|
||||
- "一页纸需求文档"模板（打印版，每人一张）
|
||||
- 六个方向的简介卡（投影展示或贴在教室墙上）
|
||||
- 教师提前用需求文档生成的一个示范项目（用于演示"文档→AI开发"流程）
|
||||
|
||||
**教师备课体验任务：**
|
||||
> 备课前，教师必须亲自完成以下操作：
|
||||
> 1. 选择一个方向（建议选"动作类游戏"），自己写一份一页纸需求文档
|
||||
> 2. 把需求文档交给AI开发，记录AI的产出质量和需要修改的地方
|
||||
> 3. 对比测试：不写文档直接说"帮我做一个躲避游戏" vs 把写好的文档发给AI——对比两次产出的差异
|
||||
> 4. 分析2-3个经典游戏的核心循环，确保自己能流畅讲解
|
||||
> 5. 准备一个"功能塞太多导致混乱"的反面案例（可以故意让AI做一个功能过多的游戏）
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟** 🔗
|
||||
|
||||
**【环节】上节课回顾 (3分钟)**
|
||||
|
||||
**师：** 上两节课我们做了很酷的事情——第5课用一句话做出了一个可玩游戏，第6课在游戏上加了计分、倒计时、动画。谁还记得，第6课我们加功能的时候用了什么方法？【诊断点：检测"增量开发"概念的保持度】【识别层】
|
||||
|
||||
**【分支A】若学生回答出"一个功能一个功能加上去""在原来的基础上改"：**
|
||||
**师：** 对！我们不是重新做一个，而是在已有的作品上一点一点加新功能。这叫"迭代"，也叫"增量开发"。那今天我问你们一个新问题——你们之前做的游戏，是"想好了再做的"，还是"随便先做一个再说"的？
|
||||
|
||||
**【分支B】若学生记忆模糊：**
|
||||
**师：** 我来提醒一下。第6课我们拿到第5课的游戏之后，先加了什么？（计分）然后呢？（倒计时）最后呢？（动画）。对，一个一个功能加上去，这叫增量开发。今天我们要学一个更厉害的技能——在开始做之前，先"想清楚"要做什么！
|
||||
|
||||
**【分支C】若学生只记得"做了游戏"但忘了具体过程：**
|
||||
**师：** 嗯，我们确实做了游戏。但今天我想问你们一个更深的问题——你们有没有想过，为什么有些游戏你玩了就停不下来，有些游戏玩两分钟就不想玩了？今天我们就要揭开这个秘密！
|
||||
|
||||
**【环节】情景导入 (7分钟)**
|
||||
|
||||
**师：** 我先问大家一个问题——你们最近最喜欢玩的游戏是什么？不限于电脑游戏，手机游戏、桌游、甚至课间玩的游戏都算！
|
||||
|
||||
**生：** （各种回答：我的世界、贪吃蛇、跳一跳、五子棋、抓人游戏……）
|
||||
|
||||
**师：** 好，我听到了很多。那我再问一个更有意思的问题——你们玩这些游戏的时候，为什么会一直想玩下去？是什么让你"停不下来"？【诊断点：激发对"核心循环"的直觉认知】【理解层】
|
||||
|
||||
**【分支A】若学生说出"因为好玩""因为想赢""因为想打更高分"：**
|
||||
**师：** "想赢""想打更高分"——这就是关键！每个让你停不下来的游戏，都有一个"魔法循环"藏在里面。今天我们就要学会发现这个循环，然后自己设计一个！
|
||||
|
||||
**【分支B】若学生说"因为无聊""因为没事干"：**
|
||||
**师：** 哈哈，那如果一个游戏真的很无聊，你会一直玩吗？肯定不会吧？说明让你继续玩的不只是"没事干"，一定有什么东西在吸引你。今天我们就来找到这个"东西"是什么！
|
||||
|
||||
**【分支C】若学生说不出来：**
|
||||
**师：** 没关系，我来举个例子。你们玩过"贪吃蛇"吗？你控制一条蛇，吃豆子会变长。你为什么不吃一个就停？因为你想变得更长！但越长越容易撞到自己——所以你又紧张又兴奋，就一直玩下去了。这里面藏着一个"循环"，今天我们就来研究它！
|
||||
|
||||
**师：** 今天这节课非常特别。从今天开始，你们要启动一个全新的项目——不是老师指定的，是你们自己选的！但这次，我们不是上来就让AI做，而是要先"想清楚"再做。今天的目标：写一份你的项目"设计图纸"，然后让AI按图纸开工！
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟** 🛠️
|
||||
|
||||
**【分段一：游戏核心循环——为什么好玩的秘密】(15分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M3：核心循环=游戏规则
|
||||
- M5：只有游戏才需要核心循环
|
||||
|
||||
**讲解与演示 (Teach & Demo):**
|
||||
|
||||
**师：** 我们先来破解一个秘密——为什么有些游戏你玩了就停不下来？答案是：每个好玩的游戏里面都藏着一个"核心循环"。什么意思呢？我画给你们看。
|
||||
|
||||
【在白板上画一个循环图】
|
||||
|
||||
```
|
||||
玩家做什么？
|
||||
↓
|
||||
系统反馈什么？
|
||||
↓
|
||||
为什么还想玩？
|
||||
↓
|
||||
（回到"玩家做什么"）
|
||||
```
|
||||
|
||||
**师：** 这就是核心循环——三个问题不断转圈。我来用大家都知道的游戏分析一下。
|
||||
|
||||
**师：** 第一个例子——**贪吃蛇**。
|
||||
|
||||
- **玩家做什么？** 控制蛇的方向，去吃豆子
|
||||
- **系统反馈什么？** 吃到豆子→蛇变长，分数增加
|
||||
- **为什么还想玩？** 想变得更长！但蛇越长越难操控，随时可能撞到自己→紧张刺激→"再来一次！"
|
||||
|
||||
**师：** 看到了吗？这三步形成了一个循环。你吃了一个豆子，就想吃下一个；蛇变长了，难度也上去了；你撞死了，不服气，再来一次。这就是让你"停不下来"的魔法！
|
||||
|
||||
**师：** 再来一个——**Flappy Bird**（或者"飞翔的小鸟"，你们可能玩过类似的）。
|
||||
|
||||
- **玩家做什么？** 点击屏幕让小鸟飞起来，穿过管道的缝隙
|
||||
- **系统反馈什么？** 穿过一个管道→加1分，撞上管道→游戏结束
|
||||
- **为什么还想玩？** 上次才得了5分，这次我一定能得6分！→挑战自己→"再来一次！"
|
||||
|
||||
**师：** 注意——两个游戏的核心循环不一样，但结构是一样的：做动作→得反馈→想继续。【诊断点：学生是否理解"循环"不是"规则"】【理解层】
|
||||
|
||||
**师：** 我再问一个问题——核心循环和游戏规则，是同一个东西吗？
|
||||
|
||||
**【分支A】若学生说"不一样"：**
|
||||
**师：** 很好！能说说哪里不一样吗？
|
||||
|
||||
**【分支B】若学生说"差不多吧"或"就是规则"（M3的表现）：**
|
||||
**师：** 想想看——贪吃蛇的规则是"蛇吃到豆子会变长，撞到自己或墙壁就死"。但核心循环回答的是一个更深的问题——"你为什么愿意一直玩下去？"。规则告诉你"怎么玩"，核心循环解释"为什么好玩"。
|
||||
|
||||
**【分支C】若学生沉默：**
|
||||
**师：** 我换个说法。规则就像交通法规——"红灯停绿灯行"。核心循环就像你为什么喜欢开车——"开快了有速度感→超车了有成就感→到达目的地了有满足感"。一个是规定，一个是让你上瘾的原因。明白了吗？
|
||||
|
||||
**师：** 好，刚才我们说了游戏的核心循环。但其实不只是游戏——任何好产品都有核心循环！比如抖音：刷视频（玩家做什么）→ 看到有趣的内容（系统反馈）→ 想看下一个（为什么还想用）。所以今天不管你选做游戏、工具还是创意作品，都可以用核心循环来设计！
|
||||
|
||||
**学生实践 (Practice):**
|
||||
|
||||
**师：** 现在轮到你们了！想一个你喜欢的游戏或者App，用核心循环三个问题分析它：
|
||||
|
||||
1. 玩家/用户做什么？
|
||||
2. 系统反馈什么？
|
||||
3. 为什么还想玩/用？
|
||||
|
||||
在纸上写下来，3分钟。写完后跟你旁边的同学互相分享。
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 学生选择分析的对象是什么（游戏？App？现实中的活动？）
|
||||
- 三个问题是否都写了，还是漏了"为什么还想玩"
|
||||
- 是否有学生把"规则"写成了"循环"（M3）
|
||||
|
||||
**进度同步 (Checkpoint):**
|
||||
|
||||
**师：** 谁来分享一下你分析的核心循环？告诉我们你分析的是什么游戏/App，三个问题分别是什么。【诊断点：学生能否区分"规则"和"循环"，能否识别出"继续动力"】【应用层】
|
||||
|
||||
【请2位学生分享】
|
||||
|
||||
**【分支A】若学生分析完整且准确：**
|
||||
**师：** 非常好！你准确地找到了核心循环。特别是"为什么还想玩"这一步——你说的是"想打更高分"，这就是核心循环的发动机！
|
||||
|
||||
**【分支B】若学生的"为什么还想玩"写得太浅（如"因为好玩"）：**
|
||||
**师：** "好玩"是对的，但我们要更具体——好玩在哪里？是因为"想打败上次的自己"？还是"想解锁新关卡"？还是"想看到新东西"？越具体，你设计自己的项目时就越知道怎么让人停不下来。
|
||||
|
||||
**【分支C】若学生把规则当成了循环：**
|
||||
**师：** 你写的其实是游戏规则——"怎么玩"。核心循环要回答的是"为什么你玩了一局还想再玩一局"。想想看：你输了之后为什么不关掉游戏？是什么让你点了"再来一次"？
|
||||
|
||||
**师：** 好！现在你们知道了"核心循环"是什么。接下来我们要做一件更重要的事——用这个知识来设计你们自己的新项目！
|
||||
|
||||
---
|
||||
|
||||
**【分段二：我的项目提案——选方向、写文档】(15分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M1：不需要写文档，直接让AI做就行
|
||||
- M2：功能越多越好，一次全部做完
|
||||
- M4：需求文档要写得很正式很长
|
||||
|
||||
**讲解与演示 (Teach & Demo):**
|
||||
|
||||
**师：** 上两节课，我们的项目是"老师说做什么就做什么"。但从今天开始，你的项目完全由你自己决定！我给你们六个方向可以选——
|
||||
|
||||
【投影展示六个方向】
|
||||
|
||||
```
|
||||
🎮 方向一：动作类游戏 — 躲避障碍、射击敌人、跑酷闯关
|
||||
🧩 方向二：益智类游戏 — 记忆翻牌、数学挑战、拼图解谜
|
||||
🏰 方向三：策略类游戏 — 塔防、经营、资源管理
|
||||
🔧 方向四：实用工具 — 计时器、备忘录、计算器
|
||||
🎨 方向五：创意展示 — 个人主页、互动故事、作品画廊
|
||||
📚 方向六：学科应用 — 英语单词、数学练习、科学模拟
|
||||
```
|
||||
|
||||
**师：** 这六个方向随便选！你也可以选不在这里面的方向，只要你能说清楚想做什么。没有标准答案，你做什么都可以。
|
||||
|
||||
**师：** 但是——选好了方向之后，我们不能直接冲过去让AI做。第5课的时候我们就是这么干的——"一句话让AI做"，对吧？那时候做出来的东西好不好？
|
||||
|
||||
**生：** 还行 / 有些不太满意
|
||||
|
||||
**师：** 那时候做出来的是"最小可玩版本"——能玩，但不完美。现在我们要做一个更大的项目，如果不想清楚就开始，AI做出来的东西大概率会让你不满意。所以今天，我要教你们一个专业产品经理都在用的工具——**需求文档**。【诊断点：激发M1"不需要文档"的误概念】【理解层】
|
||||
|
||||
**师：** 你们觉得"需求文档"是什么？听起来是不是很吓人，很正式？
|
||||
|
||||
**【分支A】若有学生说"感觉要写很多"（M4的表现）：**
|
||||
**师：** 哈哈，不用！我们写的是"一页纸"版本——一张纸就够了。不需要写得多，关键是想得清楚。
|
||||
|
||||
**【分支B】若有学生说"就是告诉AI要做什么吧"：**
|
||||
**师：** 差不多！但比你之前发给AI的一句话要详细得多。它不只说"做什么"，还说"给谁用""核心体验是什么""先做什么后做什么"。
|
||||
|
||||
**【分支C】若学生不理解这个概念：**
|
||||
**师：** 想象你要盖一栋房子。你会不会直接跟工人说"帮我盖个房子"就完了？不会吧！你得先画一张图纸——几个房间、多大面积、厨房在哪里。需求文档就是你项目的"图纸"。
|
||||
|
||||
**师：** 我来展示一下"一页纸需求文档"的模板——
|
||||
|
||||
【投屏展示模板】
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────┐
|
||||
│ 一页纸需求文档 │
|
||||
│ │
|
||||
│ 项目名称：______________________ │
|
||||
│ │
|
||||
│ 目标用户：这个项目做给谁用？ │
|
||||
│ ________________________________________ │
|
||||
│ │
|
||||
│ 核心玩法一句话： │
|
||||
│ "玩家/用户____（做什么），系统____（怎么反馈）， │
|
||||
│ 让人想继续因为____（为什么上瘾）" │
|
||||
│ │
|
||||
│ 功能清单： │
|
||||
│ 【MVP·必须有】（今天要完成的核心功能） │
|
||||
│ □ ______________________ │
|
||||
│ □ ______________________ │
|
||||
│ □ ______________________ │
|
||||
│ │
|
||||
│ 【V2·下次加】（下一课想加的功能） │
|
||||
│ □ ______________________ │
|
||||
│ □ ______________________ │
|
||||
│ │
|
||||
│ 【V3·未来想】（以后有时间再做的） │
|
||||
│ □ ______________________ │
|
||||
│ □ ______________________ │
|
||||
│ │
|
||||
│ 视觉风格：□简洁 □可爱 □酷炫 □像素 □其他____ │
|
||||
│ │
|
||||
└──────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**师：** 我先拿我自己的例子来填一遍。假设我选"动作类游戏——躲避游戏"：
|
||||
|
||||
- **项目名称：** 太空躲避大师
|
||||
- **目标用户：** 课间想玩两分钟的小学生
|
||||
- **核心玩法一句话：** "玩家用键盘控制飞船左右移动躲避从天上掉下来的陨石，系统会记录你存活了多少秒，让人想继续因为想打败自己上次的记录"
|
||||
- **MVP功能：** ①飞船能左右移动 ②陨石从上往下掉 ③碰到就游戏结束并显示存活秒数
|
||||
- **V2功能：** 计分排行榜、陨石速度递增
|
||||
- **V3功能：** 道具系统（护盾、加速）、不同关卡
|
||||
- **视觉风格：** 像素风
|
||||
|
||||
**师：** 你们注意到了吗？MVP里只有3个功能！不是什么都塞进去。先把最核心的"躲避+碰撞检测+显示时间"做好，确认好玩了再加其他东西。这就是我们第5课学的MVP精神！【诊断点：学生是否理解MVP的优先级逻辑】【应用层】
|
||||
|
||||
**学生实践 (Practice):**
|
||||
|
||||
**师：** 现在是你们的时间了！每个人做三件事：
|
||||
|
||||
**第一步（2分钟）：** 选方向。六个方向里挑一个，或者自己想一个。不用纠结太久，跟着感觉走！
|
||||
|
||||
**第二步（6分钟）：** 填写一页纸需求文档。用我发给你们的纸质模板，一项一项填。最重要的是"核心玩法一句话"——它要包含核心循环的三个要素！
|
||||
|
||||
**第三步（2分钟）：** 跟旁边的同学互相读一下你的需求文档。听听对方觉得"听起来好不好玩/好不好用"。
|
||||
|
||||
提示：如果你不知道选什么方向，可以想想——
|
||||
- 你平时最喜欢玩什么类型的游戏？→ 选游戏方向
|
||||
- 你觉得生活中什么事情很麻烦？→ 选工具方向
|
||||
- 你有没有什么想展示给别人看的？→ 选创意展示方向
|
||||
- 你哪个学科想做得更有趣？→ 选学科应用方向
|
||||
|
||||
开始！
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 是否有学生纠结方向选不出来 → 跟他聊天引导："你平时下课最喜欢干什么？"
|
||||
- 是否有学生在"核心玩法一句话"卡住 → 给脚手架："玩家/用户做什么？系统会怎样？为什么想继续？"
|
||||
- 是否有学生在MVP里塞了太多功能（M2）→ 提醒："挑最重要的3个就够了"
|
||||
- 是否有学生不写文档直接打开AI工具（M1）→ 引导："先把文档写好，等会儿你会发现文档让AI做事更准"
|
||||
|
||||
**进度同步 (Checkpoint):**
|
||||
|
||||
**师：** 时间到！我来检查一下——举手告诉我，你选了哪个方向？选游戏的举手？选工具的？选创意展示的？选学科应用的？【诊断点：方向分布是否合理，是否有学生还没选】
|
||||
|
||||
**师：** 好，大部分人都选好了。现在谁来读一下你写的"核心玩法一句话"？只读这一句！【诊断点：一句话是否包含核心循环三要素】【应用层】
|
||||
|
||||
【请2-3位学生读】
|
||||
|
||||
**【分支A】若学生的一句话包含了"做什么→反馈→继续动力"：**
|
||||
**师：** 非常完整！你把核心循环写进去了——有动作、有反馈、有继续玩的理由。这就是一个好的核心玩法描述！
|
||||
|
||||
**【分支B】若学生只描述了功能，没有"为什么想继续"：**
|
||||
**师：** 你说了"玩家做什么"和"系统反馈什么"，很好！但是少了最关键的一步——为什么你/用户会想继续？想想刚才分析核心循环时的第三个问题。加上这句话！
|
||||
|
||||
**【分支C】若学生的描述太模糊（如"一个好玩的游戏"）：**
|
||||
**师：** "好玩"太笼统了。具体什么操作？点击？拖动？键盘控制？系统会怎么回应你？试试用我给的句式填空："玩家____，系统____，让人想继续因为____"。
|
||||
|
||||
---
|
||||
|
||||
**【分段三：AI启动开发——文档变成代码】(20分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M1：不需要写文档，直接让AI做就行（此处正面验证文档的威力）
|
||||
- M2：功能越多越好（此处强调只做MVP）
|
||||
|
||||
**讲解与演示 (Teach & Demo):**
|
||||
|
||||
**师：** 好，文档写好了！现在到了最激动人心的环节——把你的"设计图纸"交给AI，让它帮你把核心玩法做出来！
|
||||
|
||||
**师：** 但注意，我们今天只做MVP——就是你文档里"必须有"那一栏的功能。V2和V3的功能先不管！就像盖房子，今天只把框架搭好，装修的事以后再说。
|
||||
|
||||
**师：** 我先示范一下怎么把需求文档"翻译"成AI能理解的开发指令。看好了——
|
||||
|
||||
【教师现场演示，在AI编程工具中输入：】
|
||||
|
||||
```
|
||||
请帮我用HTML/CSS/JS开发一个叫"太空躲避大师"的小游戏，要求如下：
|
||||
|
||||
## 项目信息
|
||||
- 目标用户：想在课间玩两分钟的小学生
|
||||
- 视觉风格：像素风格，深蓝色太空背景
|
||||
|
||||
## 核心玩法
|
||||
玩家用键盘左右方向键控制一架飞船在屏幕底部移动，陨石从屏幕顶部随机位置往下掉落。玩家需要躲避陨石，碰到陨石就游戏结束。
|
||||
|
||||
## MVP功能（只做这些）
|
||||
1. 飞船可以用左右方向键移动，不能移出屏幕
|
||||
2. 陨石从屏幕顶部随机位置不断掉落
|
||||
3. 飞船碰到陨石→游戏结束，显示"游戏结束"和存活秒数
|
||||
4. 有一个"重新开始"按钮
|
||||
|
||||
## 技术要求
|
||||
- 单个HTML文件，内联CSS和JS
|
||||
- 使用Canvas做游戏画面
|
||||
- 适配电脑浏览器
|
||||
```
|
||||
|
||||
**师：** 大家注意——我没有一句一句地跟AI聊天，而是把整个需求文档整理好，一次性发给AI！这就是需求文档的威力——你想好了所有细节，AI一次就能做出比较完整的东西，不用来来回回改。
|
||||
|
||||
【等待AI生成，预览效果】
|
||||
|
||||
**师：** 看！AI根据我的文档做出了一个基本能玩的躲避游戏。飞船能动、陨石在掉、碰到会结束、有存活时间。虽然可能不完美，但核心玩法已经有了！这就是MVP。
|
||||
|
||||
**师：** 如果我刚才不写文档，只说"帮我做一个太空躲避游戏"，AI可能会少做很多东西，或者做出来不是我想要的效果。文档帮AI理解了你脑子里完整的画面。
|
||||
|
||||
**师：** 现在轮到你们了！把你的需求文档翻译成AI能理解的开发指令。我给你们一个框架——
|
||||
|
||||
【投屏展示提示词框架】
|
||||
|
||||
```
|
||||
请帮我用HTML/CSS/JS开发一个叫"[项目名称]"的[游戏/工具/网页]，
|
||||
要求如下：
|
||||
|
||||
## 项目信息
|
||||
- 目标用户：[你的目标用户]
|
||||
- 视觉风格：[你选的风格]
|
||||
|
||||
## 核心玩法/核心功能
|
||||
[把你的"核心玩法一句话"展开写，描述用户做什么、系统怎么反馈]
|
||||
|
||||
## MVP功能（只做这些）
|
||||
1. [功能1]
|
||||
2. [功能2]
|
||||
3. [功能3]
|
||||
|
||||
## 技术要求
|
||||
- 单个HTML文件，内联CSS和JS
|
||||
- 适配电脑浏览器
|
||||
```
|
||||
|
||||
**学生实践 (Practice):**
|
||||
|
||||
**师：** 现在动手！步骤如下：
|
||||
|
||||
1. 对照你的纸质需求文档，把内容填进刚才的提示词框架里
|
||||
2. 用慢思考模型（因为这是个复杂任务），把提示词发给AI
|
||||
3. 等AI生成完代码后，打开预览看效果
|
||||
4. **关键验收**：核心玩法能跑吗？你文档里写的3个MVP功能都实现了吗？
|
||||
|
||||
**师：** 给大家15分钟。如果AI第一次做出来的不对，不要急着加新功能——先把核心玩法调对！用我们第4课学的Bug描述三要素来跟AI沟通修改。
|
||||
|
||||
开始！
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 学生是否在用需求文档框架发送，还是随便说一句话（对比文档效果的关键时刻）
|
||||
- 学生是否在等待AI生成时焦虑 → 安慰："慢思考模型就是需要时间，它在认真想"
|
||||
- AI生成后学生是否在验收MVP功能 → 提醒："你文档里写了3个功能，一个一个检查"
|
||||
- 是否有学生一上来就要求加V2/V3的功能（M2）→ 提醒："先确认MVP好不好玩！"
|
||||
- 是否有学生的核心玩法完全跑不起来 → 帮助诊断是提示词的问题还是AI的问题
|
||||
- 做得快的学生 → 鼓励迭代修复细节，而不是急着加功能
|
||||
|
||||
**进度同步 (Checkpoint):**
|
||||
|
||||
**师：** 时间过半了！快速检查——你的核心玩法能跑起来了吗？举手告诉我：能玩的举手！还在调的举手！还没生成的举手！【诊断点：完成度分布——如果大部分学生还没能跑，可能需要延长时间或提供更多帮助】
|
||||
|
||||
**【分支A】若大部分学生核心玩法已经能跑：**
|
||||
**师：** 太棒了！现在做一件事——对照你的需求文档，逐项检查：功能1实现了吗？功能2呢？功能3呢？有没有跟文档不一样的地方？如果有，用Bug描述三要素告诉AI修。
|
||||
|
||||
**【分支B】若有不少学生还在调试：**
|
||||
**师：** 没关系！核心玩法是最难做的部分。如果AI做出来的不对，先深呼吸，然后用这个句式跟AI说："我的[项目名]有一个问题——我做了什么（操作），我以为会怎样（预期），实际怎样了（实际）。请帮我修复。"
|
||||
|
||||
**【分支C】若有学生完全卡住：**
|
||||
**师：** 来，让我看看你的需求文档和提示词。有时候问题出在描述不够清楚——我们一起改一下。（教师一对一辅导）
|
||||
|
||||
---
|
||||
|
||||
**【分段四：验收与调整——核心体验对了吗？】(15分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M2：功能越多越好（学生可能急着加功能而忽略核心体验）
|
||||
- 审查类：能跑就行，不检查体验好不好
|
||||
|
||||
**讲解与演示 (Teach & Demo):**
|
||||
|
||||
**师：** 好！大部分人的核心玩法已经能跑了。但我要问一个关键问题——"能跑"和"好玩"，是同一回事吗？【诊断点：激发"能跑就行"的误概念】【理解层】
|
||||
|
||||
**生：** 不是 / 不一定
|
||||
|
||||
**师：** 对！一个游戏能运行不代表它好玩。一个工具能打开不代表它好用。我们需要做一件事——**验收核心体验**。怎么验收呢？回到你的需求文档，看你写的那句"核心玩法一句话"，然后问自己三个问题：
|
||||
|
||||
**核心体验验收三问：**
|
||||
1. **动作对吗？** ——玩家/用户的操作跟你设计的一样吗？（比如：我设计的是"左右移动飞船"，现在真的能左右移动吗？操控手感顺畅吗？）
|
||||
2. **反馈到位吗？** ——系统的反馈是否让你感受到了？（比如：碰到陨石后有没有明确的"游戏结束"提示？分数显示清楚吗？）
|
||||
3. **想继续吗？** ——你自己玩了一轮之后，是否真的想再玩一轮？如果不想，是哪里出了问题？
|
||||
|
||||
**师：** 我来用我的"太空躲避大师"演示一下验收过程。
|
||||
|
||||
【教师打开自己的游戏，现场试玩】
|
||||
|
||||
**师：** 动作对吗？嗯，飞船能左右移动，但移动速度有点太快了，手指一按就飞出去半个屏幕。这个需要调。反馈到位吗？碰到陨石后确实显示"游戏结束"了，但存活时间的字太小了，我差点没看见。想继续吗？嗯……说实话，陨石掉得太慢了，不太刺激。我需要让AI把陨石速度调快一点。
|
||||
|
||||
**师：** 看到了吗？验收不是"能跑就打勾"，而是认真体验一遍，找出不对劲的地方。然后用精确的语言告诉AI去调整。
|
||||
|
||||
**学生实践 (Practice):**
|
||||
|
||||
**师：** 现在你们也来验收！步骤：
|
||||
|
||||
1. **自己玩/用你的作品至少2分钟**——认认真真地体验
|
||||
2. **用"核心体验验收三问"检查**——动作对吗？反馈到位吗？想继续吗？
|
||||
3. **找出最需要改的1-2个问题**——不要一次改太多，挑最影响体验的
|
||||
4. **告诉AI修改**——描述清楚"现在是什么样"和"我想要什么样"
|
||||
5. **改完再验收一遍**——看看是不是好了
|
||||
|
||||
给大家10分钟。记住——今天的目标不是功能完美，是**核心体验OK**。功能可以下节课再加，但核心体验必须今天验证通过！
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 学生是否真的在体验自己的作品，还是只看了一眼就说"好了"
|
||||
- 学生的修改意见是否具体（"飞船移动太快"vs"不好玩"）
|
||||
- 是否有学生开始加V2功能了（M2）→ 引导回到核心体验验收
|
||||
- 做得特别好的学生 → 让他们帮助还在调试的同学
|
||||
- 做得特别困难的学生 → 提供保底方案（见AI助教使用指南）
|
||||
|
||||
**进度同步 (Checkpoint):**
|
||||
|
||||
**师：** 最后一分钟！你的核心体验验收通过了吗？用手势告诉我：
|
||||
- 竖大拇指👍 = 核心体验OK，基本满意
|
||||
- 平手✋ = 差不多但还有问题
|
||||
- 往下👎 = 还跑不起来
|
||||
|
||||
【快速统计】
|
||||
|
||||
**【分支A】若大部分学生竖大拇指：**
|
||||
**师：** 太棒了！你们今天完成了一件非常了不起的事——从零开始，写文档、交给AI开发、验收核心体验。这就是真正的产品开发流程！
|
||||
|
||||
**【分支B】若不少学生是平手：**
|
||||
**师：** 差不多了！核心玩法有了但还需要调，这非常正常。下节课的主题就是"用户体验与产品发布"——专门帮你打磨这些不完美的地方。今天最重要的是你已经有了一个能跑的核心版本！
|
||||
|
||||
**【分支C】若有学生往下：**
|
||||
**师：** 没关系！有些项目确实更复杂一些。下节课我们会继续。今天你完成了最重要的一步——写出了需求文档，知道了自己到底想做什么。这比盲目让AI做一堆东西有价值多了。
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟** 🤔
|
||||
|
||||
**【环节】成果展示 (6分钟)**
|
||||
|
||||
**师：** 展示时间！今天的展示跟以前不一样——我不只想看你的作品，我还想看你的**需求文档**。请2-3位同学上来，先展示你的一页纸需求文档，再展示AI做出来的作品。告诉我们：
|
||||
|
||||
1. 你选了什么方向？为什么？
|
||||
2. 你的核心玩法一句话是什么？
|
||||
3. AI做出来的跟你文档里写的一样吗？有什么不一样？
|
||||
|
||||
【请2-3位学生展示，优先选择：】
|
||||
- 一位文档写得特别清晰、AI产出质量高的（正面案例）
|
||||
- 一位方向选择独特的（鼓励创意）
|
||||
- 一位经历了修改调试过程的（体现韧性力）
|
||||
|
||||
**师：** 大家注意看——他/她的需求文档写得很清楚，所以AI做出来的东西基本对了。这就是"先想清楚再做"的威力！
|
||||
|
||||
**【环节】互评与讨论 (4分钟)**
|
||||
|
||||
**师：** 看了这几位同学的展示，谁有问题或建议？格式是"一个优点 + 一个建议"。
|
||||
|
||||
【请2-3位学生互评】
|
||||
|
||||
**师：** 我想问大家一个反思问题——今天的体验跟第5课"一句话做游戏"有什么不同？【诊断点：学生能否感受到"有文档"vs"无文档"的差异】【迁移层】
|
||||
|
||||
**【分支A】若学生说出"这次想得更清楚""做出来更接近想要的"：**
|
||||
**师：** 完全正确！这就是"产品设计思维"——先想清楚再做，比随便做一个再改要高效得多。
|
||||
|
||||
**【分支B】若学生说"写文档有点麻烦"：**
|
||||
**师：** 确实多花了10分钟写文档。但你想想——有了文档，AI一次做出来就八九不离十；没有文档，你可能要跟AI来回改五六轮。哪个更快？
|
||||
|
||||
**【分支C】若学生说不出区别：**
|
||||
**师：** 第5课你只说了一句话，AI猜着做。今天你写了一页纸的"说明书"，AI按照说明书做。结果是不是更接近你想要的？这就是区别——说得越清楚，AI做得越准。
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟** 🚀
|
||||
|
||||
**【环节】抽象总结 (3分钟)**
|
||||
|
||||
**师：** 今天我们学了三个核心知识点，我帮你们串起来——
|
||||
|
||||
**第一：** 每个好产品都有一个"核心循环"——用户做什么 → 系统反馈什么 → 为什么还想用。不管是游戏、工具还是App，都有这个循环。
|
||||
|
||||
**第二：** 开始做项目之前，先写一份"需求文档"——想清楚做什么、给谁用、核心体验是什么、先做哪些功能。
|
||||
|
||||
**第三：** MVP优先——先做最核心的功能，确认体验OK了，再加其他功能。不要一口气塞太多东西。
|
||||
|
||||
**师：** 这三个知识点不只在AI编程里有用。以后你做任何事情——写作文、做PPT、策划活动——都可以先问自己："核心是什么？先做什么后做什么？"这就是"设计思维"。【迁移诊断】
|
||||
|
||||
**【环节】下节预告 + 5分钟挑战 (2分钟)**
|
||||
|
||||
**师：** 下节课预告——第8课的主题是"用户体验与产品发布"。你今天做的MVP版本还有很多可以优化的地方：界面美化、难度平衡、胜利/失败反馈……下节课我们会把你的作品从"能用"升级到"好用又好看"，最后做成一个可以分享给朋友的版本！
|
||||
|
||||
**师：** 本周的5分钟挑战来了！
|
||||
|
||||
**5分钟AI挑战：** 打开你今天做的项目，自己玩/用至少3分钟。然后在你的需求文档背面写下"我最想加的一个V2功能"和"为什么加这个功能能让体验更好"。拍照发到班级群。下节课你就要把这个功能真的做进去！
|
||||
|
||||
**师：** 记住——今天你完成了一件专业产品经理才做的事：写需求文档→交给开发团队（AI）→验收核心体验。你们不只是在学编程，你们在学"怎么把想法变成现实"！下课！
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师演示用提示词：**
|
||||
|
||||
**课前准备——生成示范项目（太空躲避大师）：**
|
||||
```
|
||||
请帮我用HTML/CSS/JS开发一个叫"太空躲避大师"的小游戏，要求如下：
|
||||
|
||||
## 项目信息
|
||||
- 目标用户：想在课间玩两分钟的小学生
|
||||
- 视觉风格：像素风格，深蓝色太空背景，白色星星点缀
|
||||
|
||||
## 核心玩法
|
||||
玩家用键盘左右方向键控制一架飞船在屏幕底部移动，陨石从屏幕顶部随机位置往下掉落。玩家需要躲避陨石，碰到陨石就游戏结束。
|
||||
|
||||
## MVP功能（只做这些）
|
||||
1. 飞船可以用左右方向键移动，不能移出屏幕
|
||||
2. 陨石从屏幕顶部随机位置不断掉落，速度适中
|
||||
3. 飞船碰到陨石→游戏结束，屏幕中央显示"游戏结束！"和存活秒数
|
||||
4. 有一个"重新开始"按钮
|
||||
|
||||
## 技术要求
|
||||
- 单个HTML文件，内联CSS和JS
|
||||
- 使用Canvas绘制游戏画面
|
||||
- 游戏区域800x600像素，居中显示
|
||||
- 适配电脑浏览器
|
||||
```
|
||||
|
||||
**学生保底提示词（当学生完全不知道怎么写时）：**
|
||||
|
||||
**保底方案A：动作游戏**
|
||||
```
|
||||
请帮我用HTML/CSS/JS做一个简单的躲避游戏。玩家用方向键控制一个角色在屏幕底部左右移动，障碍物从上面不断掉落，碰到就游戏结束，显示分数和重新开始按钮。单个HTML文件，使用Canvas。
|
||||
```
|
||||
|
||||
**保底方案B：益智游戏**
|
||||
```
|
||||
请帮我用HTML/CSS/JS做一个记忆翻牌游戏。屏幕上有8张牌（4对），正面朝下。点击翻开一张牌，再点击翻开第二张，如果两张一样就保持翻开，不一样就翻回去。全部翻开就获胜，显示用了多少次。单个HTML文件。
|
||||
```
|
||||
|
||||
**保底方案C：实用工具**
|
||||
```
|
||||
请帮我用HTML/CSS/JS做一个简单的倒计时器。用户可以设置分钟数（1-60分钟），点"开始"就倒计时，到0的时候屏幕变红色并显示"时间到！"。有暂停和重置按钮。单个HTML文件。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**进阶提示词（学有余力的学生）：**
|
||||
```
|
||||
在我的需求文档基础上，请帮我增加以下体验优化：
|
||||
1. 添加开场画面：显示游戏名称和"按空格键开始"
|
||||
2. 给核心操作添加音效反馈（用Web Audio API生成简单音效，不需要外部文件）
|
||||
3. 添加简单的粒子效果（比如碰撞时的爆炸粒子）
|
||||
请在现有代码基础上修改，不要重新写。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**本课技术备注：**
|
||||
|
||||
1. **Canvas游戏开发的基本原理（教师理解用）：** HTML的`<canvas>`标签提供一块画布，JavaScript通过"游戏循环"（requestAnimationFrame）每帧重新绘制画面。这是浏览器游戏的标准做法。学生不需要理解这些，只需要通过需求文档描述想要的效果。
|
||||
|
||||
2. **关于"单个HTML文件"的技术限制：** 单文件可以做的游戏/工具比想象的多——躲避游戏、翻牌游戏、打砖块、计算器、倒计时器、闪卡应用等都完全没问题。但复杂的策略类游戏（如塔防）在单文件中可能代码量较大，AI生成质量会下降。如果有学生选了策略类，建议引导他们先做一个极简版本。
|
||||
|
||||
3. **AI生成游戏常见问题：** 碰撞检测不精确（让学生描述现象，AI通常能调整）；Canvas尺寸问题（提示词中加"游戏区域固定800x600像素，居中显示"）；键盘事件失焦（提醒学生"先点一下游戏画面"）；帧率不稳（减少画面元素数量）。
|
||||
|
||||
4. **需求文档到提示词的转换：** 纸质文档帮学生理清思路，发给AI的提示词需更结构化。关键：①"核心玩法一句话"展开为具体交互描述；②MVP功能列表直接作为开发要求；③加上技术约束（单文件、Canvas等）。
|
||||
|
||||
5. **方向选择预期分布：** 大部分四年级学生会选游戏类（约60-70%），工具和学科应用各约10-15%，创意展示约5-10%。分布正常，不需要强制均衡。
|
||||
|
||||
**常见问题 FAQ：**
|
||||
|
||||
| 学生问题 | 应对方式 |
|
||||
|---------|---------|
|
||||
| "我不知道选什么方向" | "你课间最喜欢干什么？如果你能做一个app，你最想做什么？"——从兴趣出发引导。如果实在选不出来，建议选"动作类游戏-躲避游戏"，因为结构简单、AI生成质量高 |
|
||||
| "我想做的东西AI能做出来吗？" | "你先把想法写在需求文档上，我们一起看看。如果太复杂，我们可以简化MVP——先做最核心的部分" |
|
||||
| "需求文档怎么写核心玩法一句话？" | 用脚手架句式："玩家/用户（做什么动作），系统（怎么反馈），让人想继续因为（什么原因）"。先口头说一遍，然后写下来 |
|
||||
| "AI做出来的跟我文档里写的不一样" | "哪里不一样？具体描述出来，然后告诉AI修。这就是验收——对照文档一项一项检查" |
|
||||
| "我想加更多功能！" | "你的核心玩法好玩吗？先确认核心体验OK。就像做蛋糕——蛋糕本身不好吃，加再多奶油也救不了" |
|
||||
| "能做手机游戏吗？" | "我们现在做的是网页版，在电脑浏览器里玩。但是——手机浏览器也能打开！如果你想让手机也能玩，可以在需求文档里加'适配手机触屏操作'" |
|
||||
| "我的游戏/工具完全跑不起来" | 先检查：①提示词是否包含"单个HTML文件"；②是否指定了技术方案（Canvas等）；③描述是否太模糊。如果都没问题，用保底提示词重新生成一个基础版本 |
|
||||
|
||||
**课堂风险预案：**
|
||||
|
||||
- **如果AI服务不可用：** 本课前半段（分段一、二）完全不依赖AI——学生可以正常分析核心循环、写需求文档。如果后半段AI仍然不可用，将分段三改为"完善需求文档+互相审阅文档"，把AI开发推迟到下节课。
|
||||
- **如果学生进度差异过大：** 快的学生进入验收和迭代阶段；慢的学生使用保底提示词快速生成基础版本。关键是每个学生都要完成需求文档——即使今天没来得及让AI开发，文档本身就是有价值的学习产出。
|
||||
- **如果有学生完全不想写文档（M1顽固型）：** 让他先不写文档，直接用一句话让AI做。做完后跟写了文档的同学对比产出——用事实说服，比强制要求更有效。
|
||||
- **如果AI生成的游戏/工具有严重Bug：** 这本身就是教学机会。引导学生用第4课学的Bug描述三要素来修复。如果Bug太严重无法修复，使用保底提示词重新生成。
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周挑战：V2功能提案**
|
||||
|
||||
打开你今天做的项目，自己认真玩/用至少3分钟。然后在你的需求文档背面写下：
|
||||
|
||||
1. **我最想加的一个V2功能是什么？**（只写一个！）
|
||||
2. **为什么加这个功能能让体验更好？**（用核心循环的思路回答——它能让"做动作→得反馈→想继续"的循环更强吗？）
|
||||
3. **这个功能用一句话怎么描述给AI？**（提前写好下节课直接用）
|
||||
|
||||
拍照发到班级群。下节课你就要把这个功能真的做进去！
|
||||
|
||||
**评选标准：**
|
||||
- 功能是否真的能提升核心体验（而不是"锦上添花"）
|
||||
- 描述是否清晰具体（AI看了就能做）
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**拓展一（推荐）：核心循环分析师**
|
||||
|
||||
选3个你喜欢的游戏或App，用"核心循环三问"分析它们：
|
||||
- 玩家/用户做什么？
|
||||
- 系统反馈什么？
|
||||
- 为什么还想玩/用？
|
||||
|
||||
把三个循环写下来，对比它们的异同——不同类型的产品，核心循环有什么不一样？
|
||||
|
||||
**拓展二（挑战）：竞品分析**
|
||||
|
||||
如果你选了游戏方向，找一个跟你的游戏类似的经典游戏（比如你做躲避游戏，就找"Flappy Bird"或"太空侵略者"）。分析它的核心循环，然后思考：
|
||||
|
||||
- 我的游戏跟它的核心循环有什么相同？有什么不同？
|
||||
- 它有哪些功能是我V2/V3可以借鉴的？
|
||||
- 我的游戏有没有什么独特的地方是它没有的？
|
||||
|
||||
把分析结果写在需求文档后面，这就是专业产品经理做的"竞品分析"！
|
||||
871
3-lessons/AICODE-03/旧版本/AICODE03-08 用户体验与产品发布 v1.md
Normal file
871
3-lessons/AICODE-03/旧版本/AICODE03-08 用户体验与产品发布 v1.md
Normal file
@@ -0,0 +1,871 @@
|
||||
---
|
||||
课时: 8
|
||||
主题: 用户体验与产品发布
|
||||
核心能力: [审美力, 表达力]
|
||||
核心工具: [穹狼 Code / Trae]
|
||||
时长: 90分钟
|
||||
透明化层级: 过程层
|
||||
适用路线: 共享
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 理解"UX三维度"框架：好看（视觉）、好玩（平衡）、有感觉（反馈）——三个维度共同决定用户体验
|
||||
- 理解"Vibe Design"的基本思路：用自然语言描述你想要的视觉效果，让AI帮你实现
|
||||
- 知道"产品发布"不只是"做完了"——需要录屏/截图、写一句话介绍、让别人能体验到你的作品
|
||||
|
||||
**能力目标：**
|
||||
- 能用"UX三维度检查清单"诊断自己作品的用户体验问题，至少找出3个改进点（审美力）
|
||||
- 能用自然语言向AI描述视觉风格需求（配色、字体、布局、图标），完成界面美化（审美力+表达力）
|
||||
- 能通过同桌互测收集反馈，并据此调整难度参数和反馈系统（共创力萌芽）
|
||||
- 能为自己的作品录屏/截图，写出一句话产品介绍（表达力）
|
||||
|
||||
**情感目标：**
|
||||
- 体验"从粗糙到精致"的打磨快感——原来同一个作品，花心思打磨后体验天差地别
|
||||
- 建立"用户视角"意识——不是"我觉得好"就行，要"别人玩着也觉得好"
|
||||
- 感受"发布"的仪式感——我的作品值得被看见、被分享
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 概念 | 学生类比 | 认知层级 |
|
||||
|------|---------|---------|
|
||||
| UX三维度（好看/好玩/有感觉） | 就像一道菜——好看（摆盘漂亮）、好吃（味道好）、有感觉（吃完想再来）。三样都好才是好菜 | 理解层→应用层 |
|
||||
| Vibe Design | 就像跟装修师傅说"我想要温馨的感觉"——你不用自己刷漆，但你要说得出想要什么样子 | 应用层 |
|
||||
| 难度平衡 | 就像跳绳——太慢没意思，太快跳不过去，刚好有点挑战才最好玩 | 理解层→应用层 |
|
||||
| 胜利/失败反馈 | 就像考试发成绩——考好了老师表扬你开心，考砸了老师鼓励你下次加油，不能考完了什么都不说 | 理解层 |
|
||||
| 产品发布 | 就像画完一幅画要装进画框挂起来展览——不挂出来别人怎么欣赏？ | 识别层→应用层 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | **好看=加很多特效和鲜艳颜色** | 好看是"舒服、协调、看得清"，不是"花里胡哨"。简洁清晰往往比满屏特效更好看 | 对比展示：一个配色协调的简洁界面 vs 一个颜色刺眼特效满天飞的界面，问"你愿意玩哪个？" |
|
||||
| M2 | **游戏越难越好/越简单越好** | 好的难度是"刚好有点挑战"——让玩家觉得"我再试一次就能过"，而不是"太简单无聊"或"太难想摔电脑" | 让学生互相试玩，收集"太难了"/"太简单了"的真实反馈 |
|
||||
| M3 | **游戏结束直接显示"Game Over"就行了** | 胜利要有庆祝感（让玩家觉得值得），失败要有鼓励感（让玩家想再来一次），不能冷冰冰地直接结束 | 对比演示：冷冰冰的"游戏结束" vs 有动画和鼓励语的结束画面 |
|
||||
| M4 | **做完了就是发布了** | 发布是让别人能体验到你的作品——需要截图/录屏、写介绍、提供访问方式。"做完了"只是第一步 | 问学生"如果你想让好朋友玩你的游戏，你怎么发给他？" |
|
||||
| M5 | **美化界面要懂设计/懂代码** | Vibe Design 就是用大白话告诉AI"我想要什么感觉"——你不需要懂色号、不需要懂CSS，只需要说得出"我想要科技感的蓝色" | 教师现场演示：一句话让AI完成界面大变身 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- AI编程工具（穹狼 Code / Trae，每位学生已在前几课完成安装配置）
|
||||
- DeepSeek模型（用于界面美化和功能优化）
|
||||
- 教师演示电脑+投影
|
||||
- 系统自带截图工具（Win+Shift+S）或录屏工具（建议提前测试OBS/系统录屏是否可用）
|
||||
- 每位学生的第7课项目文件（HTML文件）
|
||||
|
||||
**教学资源：**
|
||||
- 教师准备：一个"打磨前 vs 打磨后"的对比项目（同一个游戏，分别展示粗糙版和精致版）
|
||||
- "UX三维度检查清单"（打印版，每人一张）
|
||||
- "同桌互测反馈表"（打印版，每人一张）
|
||||
- "一句话产品介绍"模板（投影展示）
|
||||
- 教师提前录制一段自己项目的30秒演示视频（用于展示"怎么录屏"）
|
||||
|
||||
**教师备课体验任务：**
|
||||
> 备课前，教师必须亲自完成以下操作：
|
||||
> 1. 拿一个基础游戏项目，用Vibe Design思维让AI美化界面——记录你的提示词和AI的表现
|
||||
> 2. 故意做一个"配色刺眼、字体混乱"的反面案例，课堂上用于对比
|
||||
> 3. 调整一个游戏的难度参数（速度、间隔、生命值等），体验"太难"和"太简单"的感觉
|
||||
> 4. 给一个游戏添加胜利庆祝动画和失败鼓励画面，记录提示词
|
||||
> 5. 用截图工具和录屏工具各操作一次，确保课堂演示流畅
|
||||
> 6. 写一段30字以内的"一句话产品介绍"，体验提炼卖点的过程
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟** 🔗
|
||||
|
||||
**【环节】上节课回顾 (3分钟)**
|
||||
|
||||
**师：** 上节课大家做了一件很有挑战的事——自己写需求文档，自己选方向，让AI开发出你的项目的核心玩法。谁来说说，你做的是什么项目？核心玩法跑起来了吗？【诊断点：检测第7课核心产出的保持度】【识别层】
|
||||
|
||||
**【分支A】若学生能说出项目名和核心玩法状态：**
|
||||
**师：** 很好！核心玩法能跑了。那我问你——你对你的项目打几分？10分满分。
|
||||
|
||||
**【分支B】若学生记忆模糊或项目未完成：**
|
||||
**师：** 没关系！今天我们先把上节课的项目打开看看，能跑的继续打磨，不能跑的先修好。今天的目标不是做新东西，而是把已有的东西变得更好。
|
||||
|
||||
**【分支C】若有学生上节课缺课：**
|
||||
**师：** 没问题！我这里有几个基础项目供你选择。今天的重点是"打磨"——把一个粗糙的作品变成精致的产品。你用我提供的基础项目，一样可以学到所有技能。
|
||||
|
||||
**【环节】情景导入——"打磨前 vs 打磨后" (7分钟)**
|
||||
|
||||
**师：** 大部分同学给自己的项目打了6、7分。为什么不是10分？因为你们心里清楚——能玩，但还不够好。今天我们就来解决这个问题。
|
||||
|
||||
**师：** 先看两个东西。第一个——
|
||||
|
||||
【投影展示一个粗糙版游戏：灰色背景、默认字体、没有开始画面、游戏结束只显示"Game Over"两个字、没有重新开始按钮】
|
||||
|
||||
**师：** 这个游戏能玩吗？
|
||||
|
||||
**生：** 能玩。/ 但是好丑。/ 感觉像半成品。
|
||||
|
||||
**师：** 好，现在看第二个——
|
||||
|
||||
【投影展示同一个游戏的打磨版：协调的配色方案、清晰的标题、有开始画面、游戏中有计分动画、胜利时有彩色纸屑庆祝、失败时有鼓励语和"再来一次"按钮】
|
||||
|
||||
**师：** 同一个游戏！核心玩法完全一样。但你们更想玩哪个？
|
||||
|
||||
**生：** 第二个！
|
||||
|
||||
**师：** 为什么？【诊断点：学生能否自发识别出"好看""好玩""有感觉"三个维度的差异】【理解层】
|
||||
|
||||
**【分支A】若学生说出多个维度（"好看""有反馈""更刺激"）：**
|
||||
**师：** 你们说到了三个不同的点——好看、更刺激、有反馈。这三个点就是今天的核心！
|
||||
|
||||
**【分支B】若学生只说"好看"：**
|
||||
**师：** 好看是一个原因。但除了好看，还有没有别的不一样？比如游戏结束的时候呢？难度呢？
|
||||
|
||||
**【分支C】若学生说不出具体区别：**
|
||||
**师：** 我来帮你们对比。第一个：灰色背景、字小看不清——不好看。第二个：颜色协调、字大清晰——好看。第一个：游戏结束就两个字"Game Over"——没感觉。第二个：输了有鼓励、赢了有庆祝——有感觉。看出来了吗？
|
||||
|
||||
**师：** 今天这节课，我们要做的就是这件事——把你的项目从"能用"打磨成"好用又好看"。而且在课程最后，你要做一件更酷的事——把你的作品"发布"出去，让别人也能体验到！
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟** 🛠️
|
||||
|
||||
**【分段一：UX诊断——给你的作品做一次"体检"】(15分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M1：好看=加很多特效和鲜艳颜色
|
||||
- M2：游戏越难越好/越简单越好
|
||||
- M3：游戏结束直接显示"Game Over"就行了
|
||||
|
||||
**讲解与演示 (Teach & Demo):**
|
||||
|
||||
**师：** 要打磨一个产品，第一步不是动手改——是先"诊断"。就像去医院看病，医生不会上来就开药，得先做检查。今天我教你们一个"UX体检"工具——**UX三维度检查清单**。
|
||||
|
||||
**师：** UX是什么？UX就是"用户体验"——用户（就是玩你游戏的人）使用你的产品时的感受。好的UX让人"玩了还想玩"，差的UX让人"打开就想关"。
|
||||
|
||||
**师：** UX有三个维度——【在白板上画三个圆，互相交叉】
|
||||
|
||||
```
|
||||
┌──────────┐
|
||||
│ 好看 👁️ │ 视觉维度：看起来舒服吗？
|
||||
└──────────┘
|
||||
┌──────────┐
|
||||
│ 好玩 🎮 │ 平衡维度：难度合适吗？节奏好吗？
|
||||
└──────────┘
|
||||
┌──────────┐
|
||||
│ 有感觉 💫 │ 反馈维度：赢了开心吗？输了想再来吗？
|
||||
└──────────┘
|
||||
```
|
||||
|
||||
**师：** 三个维度就像三条腿的凳子——少了哪条都会倒。好看但不好玩？花瓶。好玩但丑？让人不想打开。好看好玩但没反馈？玩完没感觉。
|
||||
|
||||
**师：** 我来给你们展示每个维度的具体检查项——
|
||||
|
||||
【投影展示UX三维度检查清单】
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────┐
|
||||
│ UX三维度检查清单 │
|
||||
│ │
|
||||
│ 维度一：好看 👁️ │
|
||||
│ □ 配色协调吗？（不超过3种主色，不刺眼） │
|
||||
│ □ 文字看得清吗？（字够大、颜色和背景有对比） │
|
||||
│ □ 布局整齐吗？（按钮居中、元素对齐、不挤在一起） │
|
||||
│ □ 有统一的风格吗？（不要一半可爱一半恐怖） │
|
||||
│ │
|
||||
│ 维度二：好玩 🎮 │
|
||||
│ □ 难度合适吗？（普通人第一次玩能撑过10秒吗？） │
|
||||
│ □ 节奏好吗？（不会太无聊也不会太忙乱） │
|
||||
│ □ 有目标感吗？（玩家知道自己在追求什么） │
|
||||
│ □ 想再玩一次吗？（有没有"不服气，再来"的冲动） │
|
||||
│ │
|
||||
│ 维度三：有感觉 💫 │
|
||||
│ □ 做对了有奖励感吗？（得分+1有提示吗？连续得分有特效吗？）│
|
||||
│ □ 赢了有庆祝吗？（不是直接结束，而是"太厉害了！"） │
|
||||
│ □ 输了有鼓励吗？（不是冷冰冰的Game Over，而是"再试一次？"）│
|
||||
│ □ 操作有回应吗？（点击有反应、移动很流畅） │
|
||||
│ │
|
||||
│ 我的诊断结果： │
|
||||
│ 最需要改的3个问题： │
|
||||
│ 1. _______________ │
|
||||
│ 2. _______________ │
|
||||
│ 3. _______________ │
|
||||
└──────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**师：** 我来用我的"太空躲避大师"做个示范诊断——
|
||||
|
||||
- **好看：** 配色？深蓝色背景还行，但飞船和陨石都是白色方块，太丑了。文字？存活时间的字太小了。布局？还行，居中显示。风格？没什么风格，就是一堆方块。
|
||||
- **好玩：** 难度？陨石掉得太慢了，完全没挑战。节奏？一直是一个速度，没变化。目标感？就是活着，有点无聊。
|
||||
- **有感觉：** 得分提示？没有。赢了庆祝？没有赢的概念。输了鼓励？就显示"游戏结束"三个字，冷冰冰的。操作回应？飞船能动，算有回应。
|
||||
|
||||
**师：** 我找到了最需要改的3个问题：①飞船和陨石太丑（好看维度）②陨石太慢没挑战（好玩维度）③输了没有鼓励画面（有感觉维度）。有了诊断结果，等下我们就知道改什么了！
|
||||
|
||||
**学生实践 (Practice):**
|
||||
|
||||
**师：** 现在打开你上节课的项目。拿出UX三维度检查清单，用5分钟认真"体检"一遍。步骤：
|
||||
|
||||
1. **先自己玩/用你的作品2分钟**——不是随便点两下，是认真体验
|
||||
2. **按清单逐项勾选**——每一项都看看，不符合的打叉
|
||||
3. **写下最需要改的3个问题**——从打叉的项目里挑最严重的3个
|
||||
|
||||
提示：如果你不确定某一项，问问自己——"如果我第一次打开这个东西，我会觉得怎么样？"
|
||||
|
||||
开始！
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 学生是否真的在体验自己的作品，还是随便一看就开始填清单
|
||||
- 学生能不能找出具体问题（"配色不好"vs"背景太灰看不清文字"）
|
||||
- 是否有学生觉得"我的作品没问题"（可能审美敏感度不够）→ 轻声提示："你觉得字够大吗？颜色舒服吗？"
|
||||
- 做得特别快的学生 → 提醒："12项都检查了吗？每一项都认真看了？"
|
||||
|
||||
**进度同步 (Checkpoint):**
|
||||
|
||||
**师：** 时间到！谁来分享你找到的3个最需要改的问题？【诊断点：学生的UX诊断是否覆盖三个维度，还是只集中在"好看"上】【应用层】
|
||||
|
||||
【请2-3位学生分享】
|
||||
|
||||
**【分支A】若学生的3个问题覆盖了多个维度：**
|
||||
**师：** 你的诊断很全面！你不只看到了"不好看"的问题，还发现了"不好玩"和"没感觉"的问题。这就是"全面体检"的威力！
|
||||
|
||||
**【分支B】若学生的3个问题全集中在"好看"维度：**
|
||||
**师：** 你发现了好几个视觉问题，很好！但再看看另外两个维度——难度合适吗？输赢有反馈吗？一个游戏光好看不好玩，就像一道菜光好看不好吃。
|
||||
|
||||
**【分支C】若学生说"我觉得没什么问题"：**
|
||||
**师：** 这很可能是因为你太熟悉自己的作品了。等下同桌互测的时候，让你同桌来玩——看看他/她能不能发现问题。设计师自己往往看不到自己的盲点！
|
||||
|
||||
---
|
||||
|
||||
**【分段二：Vibe Design——让AI帮你美化界面】(20分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M1：好看=加很多特效和鲜艳颜色
|
||||
- M5：美化界面要懂设计/懂代码
|
||||
|
||||
**讲解与演示 (Teach & Demo):**
|
||||
|
||||
**师：** 诊断做完了，现在开始"治疗"！第一个要解决的维度——**好看**。怎么让你的作品变好看？
|
||||
|
||||
**师：** 你们可能觉得"我又不是设计师，我不知道什么颜色好看、什么布局好"。没关系！今天我教你们一个新思维——**Vibe Design**。
|
||||
|
||||
**师：** Vibe是什么意思？就是"感觉""氛围"。Vibe Design就是——你只需要告诉AI"你想要什么感觉"，AI来帮你实现。你不需要知道色号是#3B82F6，你只需要说"我想要科技感的蓝色"。你不需要知道CSS怎么写圆角，你只需要说"按钮要圆润一点"。【诊断点：学生是否理解"用感觉描述"而非"用技术语言描述"的Vibe Design核心思路】【理解层】
|
||||
|
||||
**师：** 我来现场演示。我的太空躲避大师现在是这样的——灰色背景、白色方块。我想让它变成科幻太空风。看我怎么跟AI说——
|
||||
|
||||
【教师在AI编程工具中输入：】
|
||||
|
||||
```
|
||||
请帮我美化游戏界面，我想要以下效果：
|
||||
|
||||
## 整体风格
|
||||
科幻太空风格，深邃的星空背景
|
||||
|
||||
## 配色方案
|
||||
- 背景：深蓝色到黑色的渐变，带闪烁的小星星
|
||||
- 飞船：亮蓝色发光效果，看起来像科幻飞船的形状（三角形）
|
||||
- 陨石：橙红色，带尾焰效果
|
||||
- 文字：白色，带轻微发光
|
||||
|
||||
## 字体和布局
|
||||
- 游戏标题"太空躲避大师"用大字显示在开始页面
|
||||
- 存活时间用大字号显示在右上角，清晰易读
|
||||
- 游戏结束画面居中显示，有半透明黑色遮罩
|
||||
|
||||
## 注意
|
||||
- 不要修改游戏逻辑和操控方式
|
||||
- 只美化视觉效果
|
||||
```
|
||||
|
||||
**师：** 注意我是怎么说的——我没有说任何代码、任何色号。我说的是"深蓝色到黑色的渐变""亮蓝色发光效果""科幻飞船的形状"。全是**感觉和画面的描述**。这就是Vibe Design！
|
||||
|
||||
【等待AI生成，预览效果】
|
||||
|
||||
**师：** 哇！看这个变化！同一个游戏，但现在看起来像一个真正的太空游戏了。星空背景、发光的飞船、带尾焰的陨石——全是AI帮我做的，我只是"说"了我想要什么感觉。
|
||||
|
||||
**师：** 但注意——Vibe Design不是"随便说"。要说得具体。我来对比一下好的和坏的描述——
|
||||
|
||||
```
|
||||
坏：请把界面变好看一点
|
||||
→ AI不知道你觉得什么叫"好看"
|
||||
|
||||
好：请把背景改成深蓝色星空，飞船改成亮蓝色三角形，
|
||||
陨石改成橙红色带尾焰
|
||||
→ AI清楚地知道每个元素要变成什么样
|
||||
```
|
||||
|
||||
**师：** 秘诀就是——**说清楚三件事**：①整体风格是什么感觉（科幻？可爱？像素？）②每个元素长什么样③不要改什么（保护游戏逻辑）。
|
||||
|
||||
**师：** 如果你不知道想要什么风格，这里有几个热门选项——
|
||||
|
||||
【投影展示风格参考】
|
||||
|
||||
```
|
||||
🌌 科幻风：深色背景、发光效果、蓝紫配色
|
||||
🍬 可爱风：浅色背景、圆角元素、粉色/黄色/绿色
|
||||
🎮 像素风：像素化图形、鲜明色块、复古感
|
||||
🌊 简洁风：白色背景、灰色线条、大量留白
|
||||
🔥 酷炫风：黑色背景、红色/橙色高亮、粒子效果
|
||||
```
|
||||
|
||||
**学生实践 (Practice):**
|
||||
|
||||
**师：** 现在动手美化你的项目！步骤：
|
||||
|
||||
1. **看你的诊断清单**——"好看"维度有哪些问题？
|
||||
2. **选一个你喜欢的整体风格**——从风格参考里选一个，或者自己想一个
|
||||
3. **写Vibe Design提示词**——说清楚整体风格、每个元素的视觉效果、不要改什么
|
||||
4. **发给AI，看效果**——如果不满意，继续用自然语言调整："背景再暗一点""字再大一点"
|
||||
|
||||
给你们12分钟。
|
||||
|
||||
保底提示词（如果实在不知道怎么写）：
|
||||
```
|
||||
请帮我美化界面：
|
||||
- 整体风格：[可爱/科幻/像素/简洁]
|
||||
- 配色：背景用[深色/浅色]，主要元素用[什么颜色]
|
||||
- 文字要大一点，看得清楚
|
||||
- 按钮要明显，圆角
|
||||
- 不要修改游戏逻辑
|
||||
```
|
||||
|
||||
开始！
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 学生的Vibe Design描述是否具体（"变好看"vs"背景改成深蓝色星空"）
|
||||
- 是否有学生要求加太多花里胡哨的效果（M1）→ 提醒："好看不是越花越好。试试先统一配色，比加特效更有效"
|
||||
- 是否有学生不知道选什么风格 → 引导："你的游戏/工具是什么主题？太空游戏就科幻风，动物游戏就可爱风"
|
||||
- AI美化后有没有破坏游戏功能 → 提醒学生验收："美化完了先玩一遍，确认功能没坏"
|
||||
- 做得快的学生 → 鼓励继续微调："颜色满意了？那字体呢？按钮的样式呢？"
|
||||
|
||||
**进度同步 (Checkpoint):**
|
||||
|
||||
**师：** 暂停！让我看看大家的成果。谁的界面变化最大？举手让我看看你的屏幕！【诊断点：学生的Vibe Design是否产生了有效的视觉提升，还是改了但没什么变化】【应用层】
|
||||
|
||||
【请2位学生展示屏幕，教师投影展示】
|
||||
|
||||
**【分支A】若学生的美化效果明显且协调：**
|
||||
**师：** 变化太大了！感觉完全不一样了。你跟AI说了什么？能读一下你的Vibe Design提示词吗？——大家听听，他/她的描述多具体！这就是Vibe Design的威力。
|
||||
|
||||
**【分支B】若学生美化了但效果不太好（颜色冲突、元素混乱）：**
|
||||
**师：** 你已经迈出了第一步！如果你觉得颜色有点冲突，可以跟AI说："整体配色太乱了，请帮我统一成以蓝色为主色调的方案，最多用3种颜色。"——关键词是"统一"和"最多3种"。
|
||||
|
||||
**【分支C】若学生还在美化过程中：**
|
||||
**师：** 没关系，美化可以一步一步来。先从最明显的开始——背景颜色和文字大小。这两个改完，整体感觉就会好很多。
|
||||
|
||||
---
|
||||
|
||||
**【分段三：体验优化——同桌互测+难度调整+反馈系统】(15分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M2：游戏越难越好/越简单越好
|
||||
- M3：游戏结束直接显示"Game Over"就行了
|
||||
|
||||
**讲解与演示 (Teach & Demo):**
|
||||
|
||||
**师：** 界面变好看了！但好看只是三维度之一。现在解决第二个和第三个维度——**好玩**和**有感觉**。
|
||||
|
||||
**师：** 怎么知道你的游戏好不好玩？有一个最简单的办法——**让别人玩**。你自己觉得好玩不算数，因为你太熟悉了。要让"第一次玩的人"告诉你真实感受。这就叫——**用户测试**。
|
||||
|
||||
**师：** 等下你要跟你的同桌互换作品来玩。但不是随便玩——你要填一张"互测反馈表"。看看这张表——
|
||||
|
||||
【投影展示同桌互测反馈表】
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────┐
|
||||
│ 同桌互测反馈表 │
|
||||
│ │
|
||||
│ 测试员：____________ 作品名称：____________ │
|
||||
│ │
|
||||
│ 第一印象（打开的第一秒）： │
|
||||
│ □ 看起来很专业 □ 还不错 □ 有点简陋 □ 看不懂怎么玩 │
|
||||
│ │
|
||||
│ 难度感受： │
|
||||
│ □ 太简单了，没挑战 □ 刚刚好 □ 有点难 □ 太难了！ │
|
||||
│ │
|
||||
│ 玩完后的感受： │
|
||||
│ □ 还想再玩！ □ 还行吧 □ 不太想玩了 │
|
||||
│ │
|
||||
│ 最喜欢的一个点：_____________________ │
|
||||
│ 最想改的一个点：_____________________ │
|
||||
│ │
|
||||
│ 结束体验打分（给反馈系统打分）： │
|
||||
│ 赢了/做得好的时候： □ 有庆祝 □ 一般 □ 没什么反馈 │
|
||||
│ 输了/做得差的时候： □ 有鼓励 □ 一般 □ 冷冰冰的 │
|
||||
└──────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**师：** 这张表会告诉你三件关键的事：
|
||||
1. **第一印象**——别人打开你的作品第一秒的感受
|
||||
2. **难度感受**——是太难还是太简单
|
||||
3. **反馈体验**——赢了输了有没有感觉
|
||||
|
||||
**师：** 互测之后，我们要根据反馈做两件事——**调难度**和**加反馈**。
|
||||
|
||||
**师：** 关于调难度，我给你们一个"黄金难度公式"——
|
||||
|
||||
```
|
||||
黄金难度 = 普通人第一次玩能撑过15-30秒
|
||||
+ 第三次玩能明显进步
|
||||
+ 高手玩也有挑战
|
||||
```
|
||||
|
||||
**师：** 调难度不需要改游戏逻辑——只需要调"参数"。比如：
|
||||
|
||||
```
|
||||
太难了？→ 跟AI说：
|
||||
"请把障碍物的速度降低30%，出现间隔增加到2秒"
|
||||
|
||||
太简单了？→ 跟AI说：
|
||||
"请让障碍物速度每10秒自动加快10%，增加紧张感"
|
||||
```
|
||||
|
||||
**师：** 关于胜利/失败反馈，我来演示两种结束画面——
|
||||
|
||||
差的失败画面：`Game Over`（黑底白字，什么都没有）
|
||||
|
||||
好的失败画面：
|
||||
```
|
||||
请把游戏结束画面改成这样：
|
||||
- 背景加半透明黑色遮罩
|
||||
- 大字显示"再接再厉！"
|
||||
- 下面显示本次成绩和历史最高分
|
||||
- 一个醒目的"再来一次！"按钮，鼠标放上去会变大
|
||||
- 如果打破了最高分，显示"新纪录！"并加金色星星特效
|
||||
```
|
||||
|
||||
**师：** 看到区别了吗？好的反馈不是冷冰冰地告诉你"你输了"，而是让你觉得"我下次一定能做得更好"——这就是为什么你会想再玩一次！
|
||||
|
||||
**学生实践 (Practice):**
|
||||
|
||||
**师：** 现在开始互测！步骤：
|
||||
|
||||
**第一步（4分钟）：互换测试**
|
||||
- 你玩同桌的作品，同桌玩你的作品
|
||||
- 一边玩一边填"同桌互测反馈表"
|
||||
- 认真填！你的反馈决定同桌要改什么
|
||||
|
||||
**第二步（8分钟）：根据反馈优化**
|
||||
- 拿回你的反馈表，看看同桌怎么说的
|
||||
- 根据反馈做两件事中的至少一件：
|
||||
- ①调难度（如果反馈说太难或太简单）
|
||||
- ②加/改反馈系统（胜利庆祝或失败鼓励）
|
||||
|
||||
开始互换！
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 学生是否认真在填反馈表（而不是随便勾）
|
||||
- 是否有学生收到"太难"的反馈但不愿意改 → "设计师不能只想着自己，要想着用户"
|
||||
- 是否有学生不知道怎么调难度 → 提示："跟AI说'请把XX的速度降低/增加XX%'"
|
||||
- 是否有学生没有任何反馈系统（M3）→ 提示保底提示词
|
||||
|
||||
保底提示词——添加失败反馈：
|
||||
```
|
||||
请在游戏结束时添加以下效果：
|
||||
- 屏幕中央显示"再接再厉！"的大字
|
||||
- 下方显示最终得分
|
||||
- 加一个大大的"再来一次"按钮
|
||||
- 不要修改游戏核心逻辑
|
||||
```
|
||||
|
||||
保底提示词——添加胜利反馈：
|
||||
```
|
||||
请在游戏通关/达到目标时添加以下效果：
|
||||
- 显示"太厉害了！"的庆祝文字
|
||||
- 加一个简单的彩色纸屑掉落动画
|
||||
- 显示本次成绩
|
||||
- 加"再玩一次"按钮
|
||||
```
|
||||
|
||||
**进度同步 (Checkpoint):**
|
||||
|
||||
**师：** 好！互测完了。我来快速调查——收到"太难"反馈的举手？收到"太简单"的举手？收到"刚刚好"的举手？【诊断点：难度分布情况，以及学生是否根据反馈做了调整】【应用层】
|
||||
|
||||
**【分支A】若大部分学生已根据反馈调整了难度或反馈系统：**
|
||||
**师：** 你们刚才做了一件专业设计师才做的事——**用户测试+根据反馈迭代**。这比自己闷头改一百遍都有效！因为你猜不到别人怎么想，但别人会告诉你。
|
||||
|
||||
**【分支B】若有学生收到反馈但没做修改：**
|
||||
**师：** 收到了反馈但没改？为什么呢？是不知道怎么改，还是不同意反馈？如果是不知道怎么改，用我给的保底提示词试试。如果是不同意——那也OK，但记住，最终是"用户"在用你的产品，不只是你自己。
|
||||
|
||||
**【分支C】若学生的反馈表填得太笼统（"挺好的"/"没问题"）：**
|
||||
**师：** 下次互测的时候，要更具体！不是"挺好的"，而是"我最喜欢XX""我觉得XX可以改"。具体的反馈才有用，笼统的夸奖帮不了设计师改进。
|
||||
|
||||
---
|
||||
|
||||
**【分段四：发布准备——让世界看到你的作品】(15分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M4：做完了就是发布了
|
||||
- 审查类："能跑就行"，不想办法让别人体验到
|
||||
|
||||
**讲解与演示 (Teach & Demo):**
|
||||
|
||||
**师：** 经过三轮打磨——美化了界面、调整了难度、加了反馈——你的作品已经从"粗糙版"变成"精致版"了！但还差最后一步——**发布**。
|
||||
|
||||
**师：** 什么叫发布？你做了一幅画，但一直锁在抽屉里——别人看得到吗？看不到。发布就是把你的画"挂出来"让别人看到。对于你的项目来说，发布就是——**让不在你身边的人也能体验到你的作品**。【诊断点：学生是否理解"发布"不等于"做完了"】【理解层】
|
||||
|
||||
**师：** 怎么发布？今天我们学最简单的方法——"三件套"发布法：
|
||||
|
||||
**发布三件套：**
|
||||
1. **一张截图**——你的作品最好看的那个画面
|
||||
2. **一段录屏**——30秒演示你的作品怎么玩/怎么用
|
||||
3. **一句话介绍**——让别人一看就知道你的作品是做什么的
|
||||
|
||||
**师：** 我来演示。先看**截图**——
|
||||
|
||||
【教师演示截图操作】
|
||||
|
||||
**师：** 截图很简单。Windows按 Win+Shift+S，选一个区域就行。关键是——截哪个画面？要截你作品**最好看、最能体现核心玩法**的那个画面。不是随便截一张。
|
||||
|
||||
**师：** 比如我的太空躲避大师，我不会截开始画面（太无聊），我会截游戏进行中、陨石满天飞、飞船在躲避的那个紧张时刻——这张图一看就知道这是什么游戏，而且看起来很刺激。
|
||||
|
||||
**师：** 再看**录屏**——
|
||||
|
||||
【教师演示录屏，播放提前准备好的30秒演示视频】
|
||||
|
||||
**师：** 录屏就是录一段你玩游戏/用工具的过程。30秒就够了——展示核心玩法、展示一次胜利或失败、展示你的精美界面。不需要录很长。
|
||||
|
||||
**师：** 最后——**一句话产品介绍**。这是最考验功力的。看看这个模板——
|
||||
|
||||
```
|
||||
[产品名] —— 一个[类型]，你需要[核心操作]来[达成目标]。
|
||||
```
|
||||
|
||||
**师：** 比如我的：
|
||||
|
||||
```
|
||||
太空躲避大师 —— 一个太空生存游戏，
|
||||
你需要左右移动飞船来躲避从天而降的陨石，看看你能撑多久！
|
||||
```
|
||||
|
||||
**师：** 一句话就说清楚了——是什么、怎么玩、目标是什么。别人看了就知道要不要试试。
|
||||
|
||||
**学生实践 (Practice):**
|
||||
|
||||
**师：** 现在做你的"发布三件套"！给你们10分钟：
|
||||
|
||||
1. **截一张最好的截图**（2分钟）——选你作品最精彩的画面，Win+Shift+S截图，保存
|
||||
2. **写一句话产品介绍**（3分钟）——用模板"[名字]——一个[类型]，你需要[操作]来[目标]"
|
||||
3. **录一段30秒演示**（5分钟）——打开录屏，展示你的作品核心体验，然后停止录屏
|
||||
|
||||
提示：如果你不会录屏，也没关系——截图+一句话介绍已经是很好的发布了！
|
||||
|
||||
一句话产品介绍的保底模板（如果写不出来）：
|
||||
```
|
||||
[名字] —— 用[操作方式]来[做什么]的[类型]！
|
||||
```
|
||||
|
||||
示例：
|
||||
- "记忆大师 —— 用点击翻牌来配对的记忆力挑战游戏！"
|
||||
- "数学闪电 —— 用心算来打败倒计时的数学竞速工具！"
|
||||
- "我的星球 —— 用鼠标画画来设计你的专属星球的创意画板！"
|
||||
|
||||
开始！
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 学生是否在认真选择截图画面（而不是随便截）→ "想想哪个画面最能吸引人"
|
||||
- 一句话介绍是否包含了类型、操作、目标 → "读一遍你写的，别人能听懂是什么吗？"
|
||||
- 录屏是否有困难 → 帮助操作，或建议只做截图+文字介绍
|
||||
- 做得快的学生 → "试试把截图、介绍、录屏整理在一起，发到班级群"
|
||||
|
||||
**进度同步 (Checkpoint):**
|
||||
|
||||
**师：** 时间到！完成了截图的举手？写了一句话介绍的举手？录了屏的举手？太好了！【诊断点：发布三件套的完成度】
|
||||
|
||||
**师：** 谁来读一下你的一句话产品介绍？【诊断点：学生的产品介绍是否清晰且有吸引力】【应用层】
|
||||
|
||||
【请3-4位学生读自己的一句话介绍】
|
||||
|
||||
**【分支A】若学生的介绍清晰且有吸引力：**
|
||||
**师：** 一听就知道你的产品是干什么的，而且让我想试试！这就是好的产品介绍——简短、清楚、有吸引力。
|
||||
|
||||
**【分支B】若学生的介绍太模糊（"一个好玩的游戏"）：**
|
||||
**师：** "好玩的游戏"——什么游戏？怎么玩？试试用模板："你需要[做什么]来[达成什么]"。越具体，别人越想试。
|
||||
|
||||
**【分支C】若学生的介绍太长（说了一大段）：**
|
||||
**师：** 说了很多细节，但产品介绍要"一句话"就够！想象你在电梯里只有10秒跟别人说——你会怎么说？挑最核心的。
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟** 🤔
|
||||
|
||||
**【环节】成果展示 (6分钟)**
|
||||
|
||||
**师：** 今天最后的展示环节！这次的展示跟之前不一样——你不只要展示作品，还要做一次"迷你产品发布"。步骤：
|
||||
|
||||
1. 先读你的**一句话产品介绍**
|
||||
2. 展示你的**截图**（或者现场打开作品）
|
||||
3. 用30秒**现场演示**核心体验
|
||||
4. 告诉大家：你打磨前和打磨后**最大的变化**是什么？
|
||||
|
||||
【请3位学生展示，每人2分钟。优先选择：】
|
||||
- 一位"打磨前后对比特别明显"的（视觉改善案例）
|
||||
- 一位"根据同桌反馈做了有效调整"的（用户驱动案例）
|
||||
- 一位"反馈系统做得特别好"的（体验设计案例）
|
||||
|
||||
**师：** 大家注意看——他/她的作品打磨前和打磨后完全是两个东西！核心玩法没变，但用户体验天差地别。
|
||||
|
||||
**【环节】互评与讨论 (4分钟)**
|
||||
|
||||
**师：** 看了这几位同学的展示，谁有评价？格式还是"一个优点 + 一个建议"。
|
||||
|
||||
【请2-3位学生互评】
|
||||
|
||||
**师：** 我来问一个反思问题——今天的课和前几课有什么不一样？前几课我们在做什么，今天我们在做什么？【诊断点：学生能否理解"从粗糙到精致"的产品打磨过程的价值】【迁移层】
|
||||
|
||||
**【分支A】若学生说出"前面是做功能，今天是让它变好看/好用"：**
|
||||
**师：** 完全正确！前几课是"从无到有"——让作品能跑。今天是"从有到好"——让作品值得用。这两步都很重要，缺了哪一步都不行。
|
||||
|
||||
**【分支B】若学生说"今天是改好看的"：**
|
||||
**师：** 美化是一部分。但今天我们还做了什么？让同桌试玩、调难度、加反馈。这些不只是"好看"——是"好玩"和"有感觉"。三个维度一起提升，才是完整的"用户体验优化"。
|
||||
|
||||
**【分支C】若学生说不出区别：**
|
||||
**师：** 我来总结。前几课你是"产品开发者"——负责把东西做出来。今天你变成了"产品设计师"——负责让东西好看、好用、有感觉。开发者关注"能不能跑"，设计师关注"用户爽不爽"。你们今天两个角色都体验了！
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟** 🚀
|
||||
|
||||
**【环节】抽象总结 (3分钟)**
|
||||
|
||||
**师：** 今天我们学了四个核心知识点，我帮你们串起来——
|
||||
|
||||
**第一：UX三维度。** 好的用户体验 = 好看（视觉舒服）+ 好玩（难度平衡）+ 有感觉（反馈到位）。三条腿的凳子，少一条就倒。
|
||||
|
||||
**第二：Vibe Design。** 你不需要是设计师才能做出好看的界面——用大白话告诉AI"你想要什么感觉"，AI来实现。关键是说得具体："科幻风的蓝色星空"比"变好看"有效一万倍。
|
||||
|
||||
**第三：用户测试。** 自己觉得好不算数，让别人玩了觉得好才算数。同桌互测是最简单的用户测试——你猜不到的问题，别人一玩就发现了。
|
||||
|
||||
**第四：产品发布。** 做完了不等于发布了。发布三件套——截图、录屏、一句话介绍——让不在你身边的人也能体验到你的作品。
|
||||
|
||||
**师：** 这四个知识点不只是做游戏用的。以后你做PPT、做海报、写作文——都可以用UX三维度检查：好看吗？好读吗？有感觉吗？Vibe Design的思维——用自然语言描述你想要的效果——在AI时代会越来越重要。【迁移诊断】
|
||||
|
||||
**师：** 你们刚刚完成了一件了不起的事——从第7课的需求文档，到今天的打磨发布，你们完整地走了一遍"设计→开发→打磨→发布"的产品开发全流程。这就是真正的产品设计师的工作方式！
|
||||
|
||||
**【环节】下节预告 + 5分钟挑战 (2分钟)**
|
||||
|
||||
**师：** 下节课预告——第9课的主题是"需求驱动工具开发"。前面四课我们做了"好玩"的游戏。下节课，我们要做"好用"的东西——用AI做一个能解决你生活中真实问题的小工具！比如背单词工具、计时器、记事本……从"好玩"到"好用"，这是一个新的跃迁！
|
||||
|
||||
**师：** 本周5分钟挑战来了！
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师演示用提示词：**
|
||||
|
||||
**课前准备——美化前的"粗糙版"游戏（演示对比用）：**
|
||||
```
|
||||
请帮我做一个最简单的躲避游戏：
|
||||
- 灰色背景
|
||||
- 玩家是一个白色方块在屏幕底部，用左右方向键移动
|
||||
- 障碍物是白色小方块从顶部掉落
|
||||
- 碰到就显示"Game Over"和存活秒数
|
||||
- 不需要任何美化，越简单越好
|
||||
- 单个HTML文件
|
||||
```
|
||||
|
||||
**课堂演示——Vibe Design美化（对比效果用）：**
|
||||
```
|
||||
请帮我美化游戏界面，我想要以下效果：
|
||||
|
||||
## 整体风格
|
||||
科幻太空风格，深邃的星空背景
|
||||
|
||||
## 配色方案
|
||||
- 背景：深蓝色到黑色的渐变，带随机闪烁的小星星
|
||||
- 玩家飞船：亮蓝色发光三角形
|
||||
- 障碍物陨石：橙红色圆形，带短尾焰
|
||||
- 文字：白色，带轻微发光效果
|
||||
|
||||
## 字体和布局
|
||||
- 顶部居中显示"太空躲避大师"标题
|
||||
- 右上角大字号显示存活时间
|
||||
- 游戏结束时半透明遮罩+居中显示结果
|
||||
|
||||
## 开始画面
|
||||
- 游戏名称大字居中
|
||||
- 下方显示"按空格键开始"，文字缓慢闪烁
|
||||
|
||||
## 结束画面
|
||||
- 显示"再接再厉！"和存活时间
|
||||
- 如果超过之前最长时间，显示"新纪录！"加金色文字
|
||||
- 大大的"再来一次"按钮
|
||||
|
||||
## 注意
|
||||
- 不要修改游戏逻辑和操控方式，只美化视觉效果
|
||||
```
|
||||
|
||||
**课堂演示——添加难度递增：**
|
||||
```
|
||||
请在游戏中添加难度递增机制：
|
||||
- 每存活10秒，障碍物的掉落速度增加15%
|
||||
- 每次难度提升时，屏幕边缘短暂闪烁红光提示
|
||||
- 障碍物速度最高不超过初始速度的3倍
|
||||
- 不要修改其他游戏逻辑
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**学生保底提示词：**
|
||||
|
||||
**保底方案A——一键美化：**
|
||||
```
|
||||
请帮我美化界面，要求：
|
||||
- 整体风格：可爱卡通风
|
||||
- 背景：浅蓝色渐变
|
||||
- 所有文字加大加粗，用深色字体确保看得清
|
||||
- 按钮用圆角，加浅色阴影
|
||||
- 整体配色不超过3种颜色
|
||||
- 不要修改功能逻辑
|
||||
```
|
||||
|
||||
**保底方案B——添加失败反馈：**
|
||||
```
|
||||
请在游戏结束时添加以下效果：
|
||||
- 半透明黑色遮罩覆盖游戏画面
|
||||
- 屏幕中央大字显示"再接再厉！"
|
||||
- 下方显示最终得分/成绩
|
||||
- 加一个醒目的"再来一次！"按钮，点击后重新开始
|
||||
- 不要修改游戏核心逻辑
|
||||
```
|
||||
|
||||
**保底方案C——添加胜利反馈：**
|
||||
```
|
||||
请在游戏通关/达到目标分数时添加以下效果：
|
||||
- 屏幕中央显示"太厉害了！"的金色大字
|
||||
- 添加简单的彩色纸屑从上方飘落的庆祝动画
|
||||
- 显示最终成绩
|
||||
- 加"再玩一次"和"挑战更高分"两个按钮
|
||||
- 不要修改游戏核心逻辑
|
||||
```
|
||||
|
||||
**保底方案D——难度调整：**
|
||||
```
|
||||
我的游戏太难了/太简单了，请帮我调整：
|
||||
- [太难] 把障碍物/敌人的速度降低30%，出现间隔增加到2秒
|
||||
- [太简单] 把障碍物/敌人的速度提高20%，每过10秒再加快10%
|
||||
- 不要修改其他游戏逻辑
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**进阶提示词（学有余力的学生）：**
|
||||
|
||||
**进阶一——添加开场动画：**
|
||||
```
|
||||
请给游戏添加一个开场画面：
|
||||
- 游戏名称从小到大弹出的动画效果
|
||||
- 下方显示"按空格键开始"的文字，缓慢闪烁
|
||||
- 背景与游戏主题风格一致
|
||||
- 按空格键后，开场画面淡出，游戏开始
|
||||
```
|
||||
|
||||
**进阶二——添加音效反馈：**
|
||||
```
|
||||
请用Web Audio API给游戏添加简单音效（不需要外部文件）：
|
||||
- 得分/成功操作时：短促的"叮"声
|
||||
- 失败/碰撞时：低沉的"嗡"声
|
||||
- 游戏结束时：简短的结束旋律
|
||||
- 添加一个静音/开启音效的按钮
|
||||
```
|
||||
|
||||
**进阶三——粒子特效：**
|
||||
```
|
||||
请在以下时机添加简单的粒子效果：
|
||||
- 碰撞/失败时：红色粒子向四周扩散
|
||||
- 得分/成功时：金色粒子向上飘散
|
||||
- 粒子数量不要太多（每次10-15个），1秒内消失
|
||||
- 不要影响游戏性能
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**本课技术备注：**
|
||||
|
||||
1. **CSS美化的技术原理（教师理解用）：** AI在美化界面时主要修改CSS样式——背景色/渐变（`background`）、字体大小/颜色（`font-size/color`）、圆角（`border-radius`）、阴影（`box-shadow`）、动画（`@keyframes`+`animation`）。学生不需要知道这些属性名，只需用自然语言描述想要的效果。AI对CSS美化的生成质量通常很高。
|
||||
|
||||
2. **Vibe Design的关键技巧：** 描述越具体，AI产出越接近预期。"科幻风的深蓝色星空背景"远好于"好看的背景"。建议学生分三层描述：整体风格→各元素具体样式→交互动画。加上"不要修改游戏逻辑"可以有效防止AI在美化时破坏功能。
|
||||
|
||||
3. **难度调整的技术实现：** 游戏难度通常由几个参数控制——移动速度、出现间隔、目标大小、时间限制等。AI通常能理解"速度降低30%""间隔增加到2秒"这类自然语言描述，并准确修改对应的JavaScript变量。如果AI不确定改哪个参数，提示学生补充描述："我说的是障碍物从上面掉下来的速度"。
|
||||
|
||||
4. **胜利/失败反馈的技术实现：** 主要涉及DOM操作（显示/隐藏结束画面）、CSS动画（文字弹出、纸屑飘落）、和事件监听（重新开始按钮）。彩色纸屑效果AI通常用Canvas粒子系统实现。如果效果不理想，建议简化要求——"不要纸屑动画，只要大字显示祝贺+按钮就行"。
|
||||
|
||||
5. **截图和录屏工具：** Windows自带截图工具（Win+Shift+S）操作简单，建议优先使用。录屏可用Windows自带的Xbox Game Bar（Win+G），或教师提前安装免费工具（如OBS Studio）。如果录屏工具安装有问题，课堂上可跳过录屏环节，只做截图+文字介绍。
|
||||
|
||||
6. **关于"统一配色"的技术建议：** 如果学生的界面颜色混乱，一个有效的提示词是："请帮我把整个界面的配色统一成以[主色]为主的方案，最多使用3种颜色（主色、辅色、强调色）。所有文字确保与背景有足够的对比度。"
|
||||
|
||||
**常见问题 FAQ：**
|
||||
|
||||
| 学生问题 | 应对方式 |
|
||||
|---------|---------|
|
||||
| "我不知道选什么风格" | "你的项目是什么主题？太空的就科幻风，动物的就可爱风，数学的就简洁风。或者告诉AI'你帮我选一个适合XX主题的风格'" |
|
||||
| "AI美化之后我的游戏坏了" | "这是常见问题。跟AI说'你刚才的美化改坏了游戏功能。请撤销对游戏逻辑的修改，只保留视觉美化的部分。'或者在美化前记得保存一个备份" |
|
||||
| "我的作品不是游戏，怎么做难度平衡？" | "工具类的'平衡'是'好不好用'——操作步骤会不会太多？提示够不够清楚？按钮好不好找？让同桌试用就知道了" |
|
||||
| "我不会录屏" | "没关系！截图+一句话介绍就很好了。如果你会用手机，也可以用手机拍屏幕" |
|
||||
| "一句话介绍写不出来" | "用填空句式：'[名字]是一个[类型]，你需要[做什么]来[达成什么目标]。'先填空再修改" |
|
||||
| "我的同桌说我的项目很好不用改" | "让他/她再认真看一遍——有没有哪个字看不清？有没有哪里不知道怎么操作？'很好'通常意味着没认真测" |
|
||||
| "我能不能加背景音乐？" | "可以！但用Web Audio API生成简单旋律就行，不需要外部音乐文件。跟AI说'用Web Audio API生成一段简短的背景旋律，可以开关静音'" |
|
||||
| "美化和加功能可以同时做吗？" | "建议分开做。先美化，确认没问题。再加功能，确认没问题。一次改太多，出了问题你不知道是美化还是功能导致的" |
|
||||
|
||||
**课堂风险预案：**
|
||||
|
||||
- **如果AI服务不可用：** 本课前15分钟（UX诊断）完全不依赖AI——学生可以正常填写检查清单。分段三（同桌互测）也不依赖AI——互测和填反馈表是纯线下活动。如果AI持续不可用，将分段二改为"用纸笔画出你想要的界面设计稿"（手绘UI），分段四改为"手写产品介绍+课堂内现场演示给全班看"。
|
||||
- **如果学生上节课的项目文件丢失：** 教师准备2-3份不同类型的基础项目作为替代。学生可以在替代项目上体验完整的"诊断→美化→互测→发布"流程。
|
||||
- **如果学生进度差异过大：** 快的学生完成全部四个环节后，安排为"UX顾问"角色——帮还在调试的同学做UX诊断和美化建议。慢的学生至少完成UX诊断+一项美化或反馈优化即可。
|
||||
- **如果截图/录屏工具不可用：** 跳过录屏环节，发布三件套简化为"截图+一句话介绍"。截图可用最原始的方法：按PrtSc键然后粘贴到画图工具保存。
|
||||
- **如果同桌互测不积极（敷衍填表）：** 教师在互测前明确要求："你的反馈表要写出'最喜欢的一个点'和'最想改的一个点'——不能写'都挺好'。具体的反馈才是对同桌最好的帮助！"可以在互测后随机抽查反馈表质量。
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周挑战：Vibe Design改造大赛**
|
||||
|
||||
**挑战说明：**
|
||||
|
||||
打开你今天打磨过的项目，做以下三件事：
|
||||
|
||||
1. **再做一轮美化**——找一个你今天没来得及改的视觉细节（按钮样式？动画效果？配色微调？），用Vibe Design让AI帮你改好
|
||||
2. **写一段"产品故事"**——不超过3句话，告诉别人：你为什么做这个项目？它能带给用户什么体验？你在设计时最用心的是什么？
|
||||
3. **把截图+产品故事发到班级群**——让同学们投票你的"一句话产品介绍"是否吸引人
|
||||
|
||||
**示例产品故事：**
|
||||
> "我做太空躲避大师是因为我超喜欢太空！我希望玩家在躲避陨石的时候能感受到在太空飞行的刺激。我最用心的地方是陨石的尾焰效果——看起来像真的在燃烧。"
|
||||
|
||||
**评选标准：**
|
||||
- 美化后视觉效果是否协调（不是越花越好！）
|
||||
- 产品故事是否打动人
|
||||
- 班级群投票数最高者获"本周最佳产品设计师"称号
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**拓展一（推荐）：极致打磨**
|
||||
|
||||
选择你UX检查清单上还没解决的问题，继续优化。目标：让清单上的12项检查全部打勾。每改一项就截图保存，最后做一个"优化前 vs 优化后"的对比图。
|
||||
|
||||
具体方向建议：
|
||||
- 给项目加一个精致的开场画面（标题+按钮+简短说明）
|
||||
- 用Web Audio API加上音效反馈（得分叮、失败嗡）
|
||||
- 优化移动端适配——让手机浏览器也能正常体验
|
||||
|
||||
**拓展二（挑战）：UX评审师**
|
||||
|
||||
找一个家人或朋友（不是同班同学），让他/她使用你的作品。全程在旁边观察：
|
||||
- 他/她打开后第一反应是什么？
|
||||
- 有没有不知道怎么操作的时刻？
|
||||
- 玩完后说了什么？
|
||||
|
||||
把观察记录写成一份"用户测试报告"，包含：
|
||||
1. 测试者基本信息（年龄、是否玩过类似游戏/工具）
|
||||
2. 观察到的3个行为细节
|
||||
3. 测试者的直接反馈（原话记录）
|
||||
4. 你打算根据反馈做什么调整
|
||||
|
||||
这就是真正的产品经理在做的"可用性测试"！
|
||||
712
3-lessons/AICODE-03/旧版本/AICODE03-09 需求驱动工具开发 v1.md
Normal file
712
3-lessons/AICODE-03/旧版本/AICODE03-09 需求驱动工具开发 v1.md
Normal file
@@ -0,0 +1,712 @@
|
||||
---
|
||||
课时: 9
|
||||
主题: 需求驱动工具开发
|
||||
核心能力: [拆解力, 共创力]
|
||||
核心工具: [穹狼 Code / Trae]
|
||||
时长: 90分钟
|
||||
透明化层级: 过程层
|
||||
适用路线: 共享
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 理解"工具"和"游戏"的本质区别：工具的核心是"解决问题"，游戏的核心是"制造快乐"
|
||||
- 理解"需求发现"的方法：从自己生活中找到"不方便"或"费时间"的真实痛点
|
||||
- 知道"用户思维"的基本含义：你的工具是给谁用的，他们最需要什么功能
|
||||
|
||||
**能力目标：**
|
||||
- 能从日常生活中识别至少3个"不方便"的场景，并选择一个作为工具开发方向（拆解力）
|
||||
- 能将真实需求转化为结构化的工具需求文档，明确"解决什么问题、给谁用、核心功能"（拆解力）
|
||||
- 能将需求文档交给AI完成核心功能开发，并以"是否真的解决了问题"为标准验收（共创力）
|
||||
|
||||
**情感目标：**
|
||||
- 建立"编程不只是好玩，还能好用"的认知升级——从娱乐导向到价值导向
|
||||
- 感受"我做的东西真的能帮到人"的成就感——超越自嗨，创造实际价值
|
||||
- 激发"发现问题就是发现机会"的产品嗅觉——生活中的不方便就是创造的起点
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 概念 | 学生类比 | 认知层级 |
|
||||
|------|---------|---------|
|
||||
| 工具 vs 游戏 | 游戏像游乐园——去了就是为了开心；工具像书包——帮你装东西、解决问题 | 识别层→理解层 |
|
||||
| 需求发现 | 就像医生看病——先问"哪里不舒服"，再开药方。做工具也是先找"哪里不方便"，再做解决方案 | 理解层→应用层 |
|
||||
| 用户思维 | 你给自己做鞋和给姚明做鞋，尺码完全不一样——做工具也要先想清楚"给谁用" | 应用层 |
|
||||
| 核心功能聚焦 | 瑞士军刀什么都能干但什么都不好使，一把好剪刀只干一件事但干得特别好 | 应用层→迁移层 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | **工具就是无聊的东西，没有游戏好玩** | 好工具用起来甚至比游戏更"爽"——因为它真的帮你解决了麻烦事。想想你用计算器算出答案那一刻的感觉 | 展示一个"好用到停不下来"的工具案例，让学生体会"解决问题的快感" |
|
||||
| M2 | **我的生活里没有什么不方便的** | 每个人都有不方便的事情，只是你习惯了。比如每天整理书包要想半天带什么书、记不住朋友的生日、不知道零花钱花到哪了 | 用"不方便清单"引导法，从具体场景逐步唤醒真实需求 |
|
||||
| M3 | **工具要做得很复杂才有用** | 最好的工具只解决一个问题，但解决得很彻底。微信红包只干一件事——发红包，但人人都爱用 | 对比"功能很多但很难用"和"功能简单但一下就解决问题"的两个工具 |
|
||||
| M4 | **做工具跟做游戏方法完全不同** | 开发流程是一样的：需求→设计→开发→验收。只是思考方向不同——游戏问"好不好玩"，工具问"有没有用" | 并排展示游戏需求文档和工具需求文档的相似结构 |
|
||||
| M5 | **AI做出来的工具肯定能直接用** | AI做的工具需要你用"真实场景"去验收——拿真实数据试一遍，看看是不是真的解决了你的问题 | 让学生用自己的真实数据测试AI生成的工具，发现实际使用中的问题 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- AI编程工具（穹狼 Code / Trae，每位学生已在前几课完成配置）
|
||||
- DeepSeek模型（慢思考模型，用于工具核心功能开发）
|
||||
- 教师演示电脑+投影
|
||||
- 每人一张"不方便清单"工作纸（打印版，见下方模板）
|
||||
- 每人一张"工具需求文档"模板（打印版，复用第7课模板并做工具化改编）
|
||||
|
||||
**教学资源：**
|
||||
- 教师准备：一个课前做好的示范工具（"作业倒计时器"，含完整开发过程截图）
|
||||
- 教师准备：3-4个"学生痛点场景"的短描述卡（投影用）
|
||||
- 教师准备：一个"无聊的工具"反面案例（功能多但不解决真实问题的工具）
|
||||
|
||||
**教师备课体验任务：**
|
||||
> 备课前，教师必须亲自完成以下操作：
|
||||
> 1. 自己做一遍"不方便清单"——列出自己生活中至少5个不方便的事情，选一个做成工具
|
||||
> 2. 用工具需求文档模板写一份完整的需求文档（建议做"作业倒计时器"）
|
||||
> 3. 把需求文档交给AI开发，记录AI的产出质量和需要修改的地方
|
||||
> 4. 用真实场景测试这个工具——设一个真实的倒计时试试，看能不能真的提醒你
|
||||
> 5. 准备一个"功能多但不好用"的反面案例：让AI做一个"什么都能干的超级工具"，展示它什么都做不好
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟** 🔗
|
||||
|
||||
**【环节】上节课回顾 (3分钟)**
|
||||
|
||||
**师：** 上节课我们做了一件很专业的事——把自己的游戏从"能玩"打磨成了"好玩又好看"的版本，有些同学甚至做出了可以分享给朋友的作品。谁还记得，上节课你主要改善了游戏的哪个方面？【诊断点：检测"产品打磨"概念的保持度】【识别层】
|
||||
|
||||
**【分支A】若学生说出"改了界面""加了动画""调了难度"：**
|
||||
**师：** 对！你们学会了把产品从"能用"打磨到"好用"。界面美化、难度平衡、反馈优化——这些都是在提升"用户体验"。那我问你们一个新问题——到目前为止，我们做的所有项目，有一个共同点，你们发现了吗？
|
||||
|
||||
**【分支B】若学生记忆模糊：**
|
||||
**师：** 我来提醒一下。上节课我们做了三件事：让游戏更好看（界面美化）、让游戏更好玩（难度平衡）、让游戏更"有感觉"（胜利/失败反馈）。这些统称"用户体验优化"。好！今天我要问你们一个全新的问题——
|
||||
|
||||
**【分支C】若有学生缺课：**
|
||||
**师：** 没关系！简单说，前面几节课我们一直在做游戏——从一句话做出游戏，到给游戏加功能，再到设计文档、美化打磨。今天，我们要做一件完全不同的事情！
|
||||
|
||||
**【环节】情景导入 (7分钟)**
|
||||
|
||||
**师：** 我先问大家一个问题——从第5课到第8课，我们做的都是什么类型的东西？
|
||||
|
||||
**生：** 游戏！
|
||||
|
||||
**师：** 对，全是游戏！做游戏好不好玩？
|
||||
|
||||
**生：** 好玩！
|
||||
|
||||
**师：** 确实好玩。但今天我想让你们想一件事——【在白板上写两个大字】
|
||||
|
||||
```
|
||||
好玩 vs 好用
|
||||
```
|
||||
|
||||
**师：** 我来讲一个真实的故事。上个学期有个同学，他做了一个特别酷的打地鼠游戏，动画流畅、音效带感、还有排行榜。但有一天他跟我说："老师，我每天做作业都拖到很晚，因为我不知道时间过了多久，一不小心就在一道题上磨了半小时。" 我说："你不是会AI编程吗？你怎么不做一个'作业倒计时器'呢？每道题设个时间，到了就提醒你，不就解决了吗？" 他愣了一下说："对哦，我怎么没想到！"
|
||||
|
||||
**师：** 你们发现问题了吗？他会做酷炫的游戏，但面对自己真实的烦恼——"作业拖太久"——他居然没想到用编程来解决！这就是今天这节课的核心——**从"好玩"到"好用"。** 【诊断点：探测学生是否理解"编程可以解决生活中的实际问题"】【理解层】
|
||||
|
||||
**师：** 游戏是做给别人"玩"的，目标是让人开心。工具是做给自己或别人"用"的，目标是——
|
||||
|
||||
**【分支A】若学生说出"解决问题""帮忙做事"：**
|
||||
**师：** 一针见血！工具的核心就是"解决问题"。做游戏问的是"好不好玩"，做工具问的是"有没有用"。今天你们就要做一个真正有用的东西！
|
||||
|
||||
**【分支B】若学生说"让事情变方便"：**
|
||||
**师：** 非常好！"方便"就是工具的灵魂。任何让你的生活变得更方便的东西，都是好工具。今天你就要找到一个"不方便"，然后用AI帮你把它变"方便"！
|
||||
|
||||
**【分支C】若学生沉默或说不清楚：**
|
||||
**师：** 我举个例子。你的书包是工具——它解决了"怎么把书带到学校"的问题。你的铅笔盒是工具——它解决了"笔到处乱放找不到"的问题。工具的使命就是——让麻烦事变简单！今天你们要用AI编程做一个这样的东西。
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟** 🛠️
|
||||
|
||||
**【分段一：需求猎人——从生活中找"不方便"】(15分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M2：我的生活里没有什么不方便的
|
||||
- M1：工具就是无聊的东西
|
||||
- M3：工具要做得很复杂才有用
|
||||
|
||||
**讲解与演示 (Teach & Demo): (5分钟)**
|
||||
|
||||
**师：** 做工具的第一步，不是打开AI编程工具，而是——找到一个"不方便"。专业的说法叫"需求发现"。听起来很高大上？其实很简单——就是找你生活中让你觉得"烦""费时间""总忘记"的事情。
|
||||
|
||||
**师：** 我来教你们一个方法——"场景扫描法"。我把你一天的生活分成几个场景，你在每个场景里想想有没有"不方便"的事：【投影展示】
|
||||
|
||||
```
|
||||
🌅 早上起床：闹钟、穿衣、整理书包...
|
||||
📚 上学路上：带没带东西、今天什么课...
|
||||
✏️ 上课/做作业：记笔记、错题、时间管理...
|
||||
🏠 回家之后：安排时间、练琴练字、读书...
|
||||
🎂 社交生活：朋友生日、约好的事、借还东西...
|
||||
💰 零花钱：花了多少、还剩多少、存钱目标...
|
||||
```
|
||||
|
||||
**师：** 我来示范。我扫描"做作业"这个场景——不方便的事有：不知道每道题花了多少时间、容易在一道题上磨太久、做完后不知道哪些题做错了需要复习。三个不方便！每一个都可以做成一个工具。
|
||||
|
||||
**师：** 再看"社交生活"——我老是忘记朋友的生日，等看到朋友圈才想起来"啊今天是他生日！"如果有个工具能提前提醒我，那该多好？
|
||||
|
||||
**师：** 注意——你不需要找很大的问题。越小越具体的问题，越容易做成好工具！"忘记朋友生日"比"想让生活更美好"具体一万倍。【诊断点：学生能否区分"具体需求"和"模糊愿望"】【理解层】
|
||||
|
||||
**学生实践 (Practice): (7分钟)**
|
||||
|
||||
**师：** 现在拿出"不方便清单"工作纸。按照六个场景，每个场景至少写一个你觉得"不方便"或"费时间"的事情。写得越具体越好！
|
||||
|
||||
```
|
||||
不方便清单
|
||||
┌──────────────────────────────────────────┐
|
||||
│ 场景1·早上起床： │
|
||||
│ ________________________________________│
|
||||
│ 场景2·上学/课间： │
|
||||
│ ________________________________________│
|
||||
│ 场景3·做作业/学习： │
|
||||
│ ________________________________________│
|
||||
│ 场景4·回家之后： │
|
||||
│ ________________________________________│
|
||||
│ 场景5·社交/朋友： │
|
||||
│ ________________________________________│
|
||||
│ 场景6·零花钱/物品管理： │
|
||||
│ ________________________________________│
|
||||
│ │
|
||||
│ 我选的那个"不方便"： │
|
||||
│ ________________（圈出来！） │
|
||||
│ │
|
||||
│ 一句话描述：谁，在什么场景下，遇到了 │
|
||||
│ 什么不方便？ │
|
||||
│ ________________________________________│
|
||||
└──────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**师：** 五分钟写清单，两分钟选一个你最想解决的，圈出来！选的标准是——
|
||||
|
||||
1. 你自己真的被这个问题烦过
|
||||
2. 这个问题发生的频率够高（不是一年才遇到一次）
|
||||
3. 你能想象出"如果有个工具帮我，那该多好"
|
||||
|
||||
开始！
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 是否有学生说"我没有不方便的事"（M2的表现）→ 过去聊天引导："你今天早上整理书包花了多久？有没有忘带过东西？"
|
||||
- 是否有学生写得太模糊（如"学习不好"）→ 追问："具体是什么不方便？是记不住单词？还是找不到错题？"
|
||||
- 是否有学生选了一个太大的问题（如"想让成绩变好"）→ 引导缩小："成绩不好可能有很多原因。你觉得最烦的一个小问题是什么？"
|
||||
- 是否有学生选了一个很独特的问题 → 鼓励："这个问题很有意思！你是第一个发现的！"
|
||||
|
||||
**进度同步 (Checkpoint): (3分钟)**
|
||||
|
||||
**师：** 好！时间到。谁来分享你选的那个"不方便"？用一句话说：谁，在什么场景下，遇到了什么不方便。【诊断点：学生的需求是否具体且真实——不是编出来的，而是自己真的经历过】【应用层】
|
||||
|
||||
【请3-4位学生分享】
|
||||
|
||||
**【分支A】若学生说出了很具体的痛点（如"我每次练钢琴不知道练了多久，总是练太短或者练太久"）：**
|
||||
**师：** 这就是一个绝佳的工具需求！你的问题很具体——"练琴时间不确定"。一个简单的"练琴计时器"就能解决！越具体的问题越容易做成好工具。
|
||||
|
||||
**【分支B】若学生的描述还比较模糊（如"我觉得做作业很烦"）：**
|
||||
**师：** "做作业很烦"——那是烦什么呢？是不知道先做哪科？还是做太久没人提醒？还是做错了没地方记？你越往深想，就越能找到一个具体的"不方便"。
|
||||
|
||||
**【分支C】若有学生说"我想做一个游戏工具"（混淆了工具和游戏）：**
|
||||
**师：** 等一下——"游戏工具"是帮你玩游戏的工具，还是一个好玩的工具？今天我们的目标是做"解决问题"的工具。你的工具要解决什么问题？想清楚这个，其他的自然就来了。
|
||||
|
||||
**师：** 太好了！每个人都找到了一个真实的"不方便"。接下来我们要把这个"不方便"变成一份设计图纸！
|
||||
|
||||
---
|
||||
|
||||
**【分段二：工具设计——从"不方便"到需求文档】(15分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M4：做工具跟做游戏方法完全不同
|
||||
- M3：工具要做得很复杂才有用
|
||||
- M5：AI做出来的工具肯定能直接用
|
||||
|
||||
**讲解与演示 (Teach & Demo): (5分钟)**
|
||||
|
||||
**师：** 你们还记得第7课写的"一页纸需求文档"吗？做工具也需要一份。但做工具的需求文档跟做游戏有一个关键区别——游戏的核心是"核心循环"（为什么想继续玩），工具的核心是"核心场景"（在什么情况下用、怎么用、用完解决了什么问题）。
|
||||
|
||||
**师：** 我来展示工具版的需求文档模板——
|
||||
|
||||
【投屏展示模板】
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────┐
|
||||
│ 工具需求文档（一页纸版） │
|
||||
│ │
|
||||
│ 工具名称：______________________ │
|
||||
│ │
|
||||
│ 解决什么问题？ │
|
||||
│ "我/____（谁）在____（什么场景）时， │
|
||||
│ 总是会____（什么不方便）， │
|
||||
│ 如果有一个工具能____（怎么帮忙），就好了" │
|
||||
│ │
|
||||
│ 目标用户：这个工具做给谁用？ │
|
||||
│ □ 我自己 □ 我和同学 □ 我的家人 □ 其他____ │
|
||||
│ │
|
||||
│ 核心功能（Must Have·今天必须做完的）： │
|
||||
│ □ ______________________ │
|
||||
│ □ ______________________ │
|
||||
│ □ ______________________ │
|
||||
│ │
|
||||
│ 加分功能（Nice to Have·做完核心再加的）： │
|
||||
│ □ ______________________ │
|
||||
│ □ ______________________ │
|
||||
│ │
|
||||
│ 验收标准：用真实数据试一遍，问自己—— │
|
||||
│ "这个工具真的解决了我的问题吗？" │
|
||||
│ │
|
||||
│ 视觉风格：□简洁 □可爱 □科技感 □其他____ │
|
||||
│ │
|
||||
└──────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**师：** 我来填一个示范。我选的"不方便"是"做作业时不知道花了多少时间"——
|
||||
|
||||
- **工具名称：** 作业倒计时器
|
||||
- **解决什么问题：** "我在做作业时，总是会在一道题上磨太久不知不觉过了半小时，如果有一个工具能帮我设定每道题的时间限制并到时提醒，就好了"
|
||||
- **目标用户：** 我自己（和做作业爱拖延的同学）
|
||||
- **核心功能（Must Have）：** ①能设定倒计时分钟数 ②大字显示剩余时间 ③时间到了有明显提醒（屏幕变色+文字提示）
|
||||
- **加分功能（Nice to Have）：** 记录每次用了多少时间、暂停/继续按钮
|
||||
- **验收标准：** 设一个5分钟倒计时，做一道题试试，看到时间会不会准确提醒我
|
||||
- **视觉风格：** 简洁
|
||||
|
||||
**师：** 注意两个关键点——
|
||||
|
||||
**第一：** 核心功能只写了3个！不贪心。一个好的倒计时器，只要能设时间、能显示、能提醒，就已经解决问题了。这就是我们第6课学的 Must Have 优先！
|
||||
|
||||
**第二：** 验收标准不是"能跑就行"——而是"用真实场景试一遍"。做作业倒计时器，你就真的拿它来计时做一道题！不是打开看一眼就算通过。【诊断点：学生是否理解"工具验收=解决了真实问题"】【理解层】
|
||||
|
||||
**学生实践 (Practice): (8分钟)**
|
||||
|
||||
**师：** 现在每个人填写你的工具需求文档。最重要的是前两项——"解决什么问题"和"核心功能"。
|
||||
|
||||
如果你还不确定做什么工具，这里有一些方向参考——
|
||||
|
||||
```
|
||||
📝 学习类：作业倒计时器、错题记录本、单词速记卡、课程表生成器
|
||||
🎂 社交类：生日提醒器、借还物品记录、值日表生成器
|
||||
💰 生活类：零花钱记账本、每日打卡器、读书计划表
|
||||
📦 管理类：书包整理清单、文具借还记录、收藏品目录
|
||||
```
|
||||
|
||||
但最好是做你自己"不方便清单"上选的那个——因为那是你真正的需求！
|
||||
|
||||
给大家8分钟。写完后跟旁边同学互相看一下，问对方一个问题："如果你是用户，你最需要哪个功能？"
|
||||
|
||||
开始！
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 是否有学生在"解决什么问题"处写得太模糊 → 用脚手架句式引导："你在____的时候，总是会____，如果有工具能____就好了"
|
||||
- 是否有学生核心功能列了太多（5个以上）→ 提醒："挑最重要的3个。问自己：没有这个功能，这个工具还能解决问题吗？"
|
||||
- 是否有学生在做"游戏化工具"而忽略了核心功能 → 引导："好玩是加分项，但先保证'有用'。你的工具不好玩但好用，还是好玩但没用？"
|
||||
- 是否有学生互相讨论得很热烈 → 鼓励："如果你的同学也觉得这个工具有用，说明你找到了一个好需求！"
|
||||
|
||||
**进度同步 (Checkpoint): (2分钟)**
|
||||
|
||||
**师：** 时间到！快速检查——谁来读一下你的"解决什么问题"那句话？【诊断点：需求描述是否完整包含"谁+场景+问题+期望"四要素】【应用层】
|
||||
|
||||
【请2位学生分享】
|
||||
|
||||
**【分支A】若学生的描述完整具体：**
|
||||
**师：** 非常清晰！听你这句话，我就知道你要做什么、给谁用、解决什么问题。这样的需求描述，AI也能一下子听懂。
|
||||
|
||||
**【分支B】若学生只描述了功能没有说清问题（如"我要做一个记账的工具"）：**
|
||||
**师：** 你说要"记账"，但为什么要记账？是因为"不知道零花钱花到哪了"？还是"想攒够钱买一样东西"？搞清楚你要解决的问题，功能自然就出来了。
|
||||
|
||||
**【分支C】若学生的需求太大太复杂：**
|
||||
**师：** 你的想法很大！但今天只有20分钟开发时间。我们缩小一点——这么多功能里，哪一个功能单独拿出来就已经能帮到你了？先做这一个！
|
||||
|
||||
---
|
||||
|
||||
**【分段三：快速开发——把需求交给AI】(20分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M4：做工具跟做游戏方法完全不同
|
||||
- M5：AI做出来的工具肯定能直接用
|
||||
- M3：工具要做得很复杂才有用
|
||||
|
||||
**讲解与演示 (Teach & Demo): (5分钟)**
|
||||
|
||||
**师：** 需求文档写好了！现在到了交给AI开发的时刻。流程跟第7课做游戏是一样的——把需求文档翻译成AI能理解的开发指令。工具和游戏的开发流程是一样的！【诊断点：激发M4——学生是否以为工具需要不同的开发方式】【理解层】
|
||||
|
||||
**师：** 我来示范，把我的"作业倒计时器"需求文档翻译成提示词——
|
||||
|
||||
【教师现场在AI编程工具中输入】
|
||||
|
||||
```
|
||||
请帮我用HTML/CSS/JS开发一个叫"作业倒计时器"的实用工具，要求如下：
|
||||
|
||||
## 项目信息
|
||||
- 解决的问题：做作业时不知道花了多少时间，容易在一道题上磨太久
|
||||
- 目标用户：小学生做作业时使用
|
||||
- 视觉风格：简洁大方，大字号显示，让人一眼就能看到剩余时间
|
||||
|
||||
## 核心功能（只做这些）
|
||||
1. 用户可以设定倒计时分钟数（提供几个常用选项：5分钟、10分钟、15分钟、20分钟，也可以自定义输入）
|
||||
2. 点击"开始"后，屏幕正中央大字号显示倒计时（分:秒格式）
|
||||
3. 最后30秒倒计时数字变红色，并且每秒闪烁一次
|
||||
4. 时间到了：屏幕背景变成醒目颜色，显示"时间到！"的大字提示
|
||||
5. 有"重新开始"按钮
|
||||
|
||||
## 技术要求
|
||||
- 单个HTML文件，内联CSS和JS
|
||||
- 倒计时数字要非常大，占屏幕主要位置
|
||||
- 适配电脑浏览器
|
||||
- 界面要简洁，操作要直觉——打开就知道怎么用
|
||||
```
|
||||
|
||||
**师：** 大家注意——跟做游戏不同的一点，工具的提示词里我特别强调了"打开就知道怎么用"。为什么？因为工具的用户可能很着急，没时间研究怎么操作。这就是"用户思维"——你做的东西要让用户一看就会用。
|
||||
|
||||
【等待AI生成，预览效果】
|
||||
|
||||
**师：** 看！AI做出来了。我来现场验收——我设5分钟，点开始。数字在倒计时……嗯，数字够大、能看清。等到最后30秒看看会不会变红……（如果有时间可以快进演示）。好，基本功能有了！
|
||||
|
||||
**师：** 但这只是第一版。等下你们自己试的时候，要用"真实场景"来验收——不是看看能不能跑，而是真的拿它来计时做一道题，看看好不好用！
|
||||
|
||||
**师：** 现在轮到你们了。我给你们提示词框架——
|
||||
|
||||
【投屏展示】
|
||||
|
||||
```
|
||||
请帮我用HTML/CSS/JS开发一个叫"[工具名称]"的实用工具，
|
||||
要求如下：
|
||||
|
||||
## 项目信息
|
||||
- 解决的问题：[从需求文档"解决什么问题"那句话复制过来]
|
||||
- 目标用户：[你的目标用户]
|
||||
- 视觉风格：[你选的风格]
|
||||
|
||||
## 核心功能（只做这些）
|
||||
1. [功能1]
|
||||
2. [功能2]
|
||||
3. [功能3]
|
||||
|
||||
## 技术要求
|
||||
- 单个HTML文件，内联CSS和JS
|
||||
- 适配电脑浏览器
|
||||
- 界面简洁，操作直觉——打开就知道怎么用
|
||||
```
|
||||
|
||||
**学生实践 (Practice): (13分钟)**
|
||||
|
||||
**师：** 动手吧！步骤和做游戏一样：
|
||||
|
||||
1. 把需求文档翻译到提示词框架里
|
||||
2. 用慢思考模型发送给AI
|
||||
3. 等AI生成后打开预览
|
||||
4. **关键**：不是看看就行——用你的真实数据/真实场景试一遍！
|
||||
- 做倒计时器的同学：设一个真实时间试试
|
||||
- 做记账本的同学：记一笔你真的花过的钱
|
||||
- 做单词卡的同学：输入你正在背的单词
|
||||
- 做错题本的同学：记一道你真的做错过的题
|
||||
|
||||
给大家13分钟。如果核心功能有问题，先修核心功能，别急着加新东西！
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 学生是否用了需求文档框架而不是随便一句话 → 对比效果
|
||||
- AI生成后学生是否在"用真实数据试"还是"只看了一眼" → 提醒："拿真实数据试一遍！"
|
||||
- 是否有学生的工具核心功能跑不起来 → 帮助诊断提示词问题
|
||||
- 是否有学生急着加花哨功能 → 提醒："你的工具解决问题了吗？先保证有用！"
|
||||
- 做得快的学生 → 鼓励用更多真实数据测试边界情况
|
||||
|
||||
**进度同步 (Checkpoint): (2分钟)**
|
||||
|
||||
**师：** 暂停！快速检查——你的工具核心功能跑起来了吗？举手告诉我！【诊断点：完成度分布】
|
||||
|
||||
**师：** 更重要的问题——你用真实数据/场景试过了吗？试过的举手！【诊断点：学生是否有"真实验收"意识，而不是"能跑就行"】【应用层】
|
||||
|
||||
**【分支A】若大部分学生完成且试过：**
|
||||
**师：** 太好了！那我再问——用真实数据试的时候，有没有发现什么问题？是不是AI做出来的跟你想的不太一样？
|
||||
|
||||
**【分支B】若有学生完成但没有用真实数据测试：**
|
||||
**师：** "能跑"不等于"好用"！这是工具和游戏最大的区别。游戏你看着好玩就行，工具你必须拿真实场景试——因为工具的目的是解决问题，不试怎么知道问题解决了没？现在花1分钟，用你的真实数据试一遍。
|
||||
|
||||
**【分支C】若有学生还没完成：**
|
||||
**师：** 没关系！如果AI生成的不对，用Bug描述三要素告诉它修。如果完全卡住了，举手我来帮你看看提示词。
|
||||
|
||||
---
|
||||
|
||||
**【分段四：试用与修复——它真的好用吗？】(15分钟)** ✨
|
||||
|
||||
**预设误概念：**
|
||||
- M5：AI做出来的工具肯定能直接用
|
||||
- M1：工具就是无聊的东西（反转时刻：发现自己做的工具真的有用）
|
||||
|
||||
**讲解与演示 (Teach & Demo): (3分钟)**
|
||||
|
||||
**师：** 大部分人的工具核心功能已经跑起来了。现在进入最关键的环节——**真实验收**。做工具的验收，跟做游戏不一样。游戏的验收是"好不好玩"，工具的验收是——
|
||||
|
||||
**师：** 三个问题！我叫它"工具验收三问"——【在白板上写】
|
||||
|
||||
```
|
||||
工具验收三问：
|
||||
1. 能解决问题吗？ —— 拿真实场景试，问题真的被解决了吗？
|
||||
2. 用起来方便吗？ —— 操作步骤多不多？会不会迷路？第一次用能马上上手吗？
|
||||
3. 还想继续用吗？ —— 下次遇到同样的问题，你会打开这个工具吗？
|
||||
```
|
||||
|
||||
**师：** 我来示范验收我的"作业倒计时器"——
|
||||
|
||||
1. **能解决问题吗？** 我设了10分钟倒计时来做一道数学题。时间到了，屏幕变红提醒我了。嗯，确实帮我控制了时间。但是——我发现时间到了之后，我还想再看一分钟把题做完，可是没有"延长时间"的按钮，只能重新设定。这是一个需要改的地方！
|
||||
|
||||
2. **用起来方便吗？** 打开就看到时间选择，点一下就开始——很方便。但我设完时间之后，页面没有显示"我总共设了几分钟"，等倒计时开始后我忘了自己设了多久。需要加一行小字"本次倒计时：10分钟"。
|
||||
|
||||
3. **还想继续用吗？** 说实话，如果把"延长时间"按钮加上，我是真的想用它来做作业。所以——这个工具有真实价值！
|
||||
|
||||
**师：** 看到了吗？验收不是"能跑就打勾"，而是"认真用一遍，发现真实使用中的问题"。我发现了两个问题，现在就告诉AI修——
|
||||
|
||||
```
|
||||
我的作业倒计时器有两个体验问题需要修改：
|
||||
|
||||
问题1：时间到了之后，我想再多给自己一两分钟做完。
|
||||
请加一个"延长1分钟"按钮，在时间到了的界面上显示，
|
||||
点击后继续倒计时1分钟。
|
||||
|
||||
问题2：倒计时开始后，我忘了自己设了多久。
|
||||
请在倒计时画面上方加一行小字，显示"本次倒计时：XX分钟"。
|
||||
|
||||
不要改动其他已有功能。
|
||||
```
|
||||
|
||||
**师：** 发现问题→描述清楚→让AI修→再验收。这个循环你们已经很熟了！
|
||||
|
||||
**学生实践 (Practice): (10分钟)**
|
||||
|
||||
**师：** 现在你们来验收自己的工具！步骤：
|
||||
|
||||
1. **用真实数据认真使用你的工具至少2分钟**——不是看看就行，是真的用起来
|
||||
2. **用"工具验收三问"检查**——能解决问题吗？方便吗？还想用吗？
|
||||
3. **找出最需要改的1-2个问题**——不要一次改太多
|
||||
4. **告诉AI修改**——具体描述"现在怎么样"和"我希望怎么样"
|
||||
5. **改完再试一遍**——看看是不是真的好用了
|
||||
|
||||
给大家10分钟。记住——今天的目标不是功能最多，是**真的解决问题**。一个只有3个功能但真的好用的工具，比一个有10个功能但什么都不好使的工具强一百倍！
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 学生是否在认真试用自己的工具 → 鼓励"你已经在当自己工具的第一个用户了！"
|
||||
- 学生发现的问题是否具体（"输入框太小"vs"不好用"）→ 引导描述具体
|
||||
- 是否有学生体验到"我做的工具真的有用！"的瞬间 → 放大这个时刻："你现在体验到的，就是真正的产品成就感！"
|
||||
- 是否有学生开始给同学试用 → 大力鼓励："让别人用你的工具，看看他们怎么说！"
|
||||
- 做得快的学生 → 建议："让你旁边的同学也试试你的工具，看看他们能不能'打开就知道怎么用'。"
|
||||
|
||||
**进度同步 (Checkpoint): (2分钟)**
|
||||
|
||||
**师：** 最后一分钟！用手势告诉我你的工具状态：
|
||||
- 竖大拇指 = 核心功能好用，真的能解决我的问题
|
||||
- 平手 = 基本能用但还需要调
|
||||
- 往下 = 还没跑起来
|
||||
|
||||
【快速统计】
|
||||
|
||||
**【分支A】若大部分学生竖大拇指：**
|
||||
**师：** 太棒了！你们今天做了一件跟之前完全不同的事——做了一个"有用"的东西，而不只是"好玩"的东西。你们做的不是玩具，是工具！
|
||||
|
||||
**【分支B】若不少学生是平手：**
|
||||
**师：** 基本能用就已经很好了！工具和游戏不一样——工具需要在真实使用中不断打磨。你今天发现的问题，就是下一步优化的方向。最重要的是，你已经知道"从哪里找需求"和"怎么验收一个工具"了。
|
||||
|
||||
**【分支C】若有学生往下：**
|
||||
**师：** 没关系！今天你完成了最有价值的一步——找到了一个真实的需求，写出了需求文档。这比盲目做一个工具有意义多了。下节课路演的时候，你也可以展示你的需求文档和设计思路。
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟** 🤔
|
||||
|
||||
**【环节】成果展示 (6分钟)**
|
||||
|
||||
**师：** 展示时间！今天的展示特别重要——我不只想看你做了什么工具，我更想知道**你解决了什么问题**。请2-3位同学上来，告诉我们：
|
||||
|
||||
1. 你发现了什么"不方便"？这个问题困扰你多久了？
|
||||
2. 你做了什么工具来解决？核心功能是什么？
|
||||
3. 你用真实数据试过了吗？真的解决问题了吗？有什么需要改进的？
|
||||
|
||||
【请2-3位学生展示，优先选择：】
|
||||
- 一位找到了真实且独特需求的（突出"需求发现"能力）
|
||||
- 一位工具核心功能确实好用的（正面案例）
|
||||
- 一位在验收中发现问题并成功修复的（体现迭代能力）
|
||||
|
||||
**师：** 大家注意——他/她做的工具可能看起来很简单，但它解决了一个真实的问题。这比做一个酷炫但没用的东西，有价值多了！
|
||||
|
||||
**【环节】互评与讨论 (4分钟)**
|
||||
|
||||
**师：** 看了这几位同学的展示，谁有想法？格式还是"一个优点 + 一个建议"。
|
||||
|
||||
【请2-3位学生互评】
|
||||
|
||||
**师：** 最后问大家一个问题——今天做的"工具"和之前做的"游戏"，哪个让你更有成就感？【诊断点：学生是否体验到"解决问题的成就感"不亚于"玩游戏的快感"——从M1误概念中走出来】【迁移层】
|
||||
|
||||
**【分支A】若有学生说"工具！因为它真的有用"：**
|
||||
**师：** 说得太好了！游戏给你"玩"的快乐，工具给你"解决了问题"的成就感。而且——你做的工具不只对你有用，可能你的同学、你的家人也需要！
|
||||
|
||||
**【分支B】若有学生说"还是游戏好玩"：**
|
||||
**师：** 游戏当然好玩！但你想想——如果你做的工具被全班同学都用上了呢？如果你做的错题本帮你考试提高了分数呢？那种成就感，可能比打通一关游戏更厉害。"有用"和"好玩"不矛盾，很多伟大的产品两者兼备！
|
||||
|
||||
**【分支C】若学生说不出来：**
|
||||
**师：** 没关系！你现在可能还没感受到区别。但你记住一件事——今天你用AI编程解决了一个自己真实的烦恼。这意味着以后遇到任何"不方便"的事，你都可以想："我是不是可以做一个工具来解决？"这个思维方式，比任何一个工具本身都有价值。
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟** 🚀
|
||||
|
||||
**【环节】抽象总结 (3分钟)**
|
||||
|
||||
**师：** 今天我们学了三个核心知识点——
|
||||
|
||||
**第一：从"好玩"到"好用"。** 编程不只是做游戏。发现问题、解决问题，这才是编程最强大的力量。游戏让人快乐，工具让人高效——两者都有价值，但"有用"的东西往往影响更深远。
|
||||
|
||||
**第二：需求发现。** 做工具的第一步不是打开编程工具，而是从自己的生活中找到"不方便"。场景扫描法——早上、上学、做作业、回家、社交、零花钱——每个场景里都藏着工具的种子。
|
||||
|
||||
**第三：真实验收。** 工具不是"能跑就行"——必须用真实数据、真实场景去试。工具验收三问：能解决问题吗？方便吗？还想用吗？
|
||||
|
||||
**师：** 这三个能力不只在AI编程里有用。以后你长大了，不管做什么工作，"从生活中发现需求、设计解决方案、用真实场景验证"——这就是创业者和产品经理做的事！你们今天已经在体验了。【迁移诊断】
|
||||
|
||||
**【环节】下节预告 + 5分钟挑战 (2分钟)**
|
||||
|
||||
**师：** 下节课预告——第10课"产品路演与同行评审"。你今天做的工具（或者前面做的游戏），要在全班面前做一次3分钟的"路演"——就像产品发布会一样！你要告诉大家：你做了什么、解决了什么问题、为什么别人也需要它。所以这周好好打磨你的作品，下周要上台展示！
|
||||
|
||||
**师：** 本周5分钟AI挑战来了！
|
||||
|
||||
**5分钟AI挑战：让别人试试你的工具**
|
||||
|
||||
把你今天做的工具发给一个朋友或家人（发HTML文件或者用浏览器打开让他们用），观察他们的反应：
|
||||
1. 他们打开后知道怎么用吗？（不解释的情况下）
|
||||
2. 他们用完后说了什么？觉得有用吗？
|
||||
3. 他们提了什么建议？
|
||||
|
||||
把他们的反馈写在你的需求文档背面，拍照发到班级群。下节课路演的时候，你可以说："我不只自己试了，我还让XX试了，他觉得……"
|
||||
|
||||
**师：** 记住今天这句话——**生活中的每一个"不方便"，都是你的下一个产品！** 下课！
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师演示用提示词：**
|
||||
|
||||
**课前准备——生成示范工具（作业倒计时器）：**
|
||||
```
|
||||
请帮我用HTML/CSS/JS开发一个叫"作业倒计时器"的实用工具，要求如下：
|
||||
|
||||
## 项目信息
|
||||
- 解决的问题：做作业时不知道花了多少时间，容易在一道题上磨太久
|
||||
- 目标用户：小学生做作业时使用
|
||||
- 视觉风格：简洁大方，适合孩子使用，浅色系背景
|
||||
|
||||
## 核心功能
|
||||
1. 提供常用时间选项（5分钟、10分钟、15分钟、20分钟），也可以自定义输入分钟数
|
||||
2. 点击"开始"后，屏幕正中央用超大字号显示倒计时（分:秒格式）
|
||||
3. 最后30秒数字变红色，每秒闪烁一次提示紧迫
|
||||
4. 时间到了：屏幕背景变成醒目的橙红色，显示"时间到！"大字
|
||||
5. 有"重新开始"按钮回到时间选择界面
|
||||
6. 倒计时进行中显示"本次倒计时：XX分钟"的小字提示
|
||||
|
||||
## 技术要求
|
||||
- 单个HTML文件，内联CSS和JS
|
||||
- 倒计时数字要非常大（至少100px字号），占屏幕主体位置
|
||||
- 界面极简，没有多余元素
|
||||
- 适配电脑浏览器
|
||||
```
|
||||
|
||||
**学生保底提示词（当学生完全不知道怎么写时）：**
|
||||
|
||||
**保底方案A：作业倒计时器**
|
||||
```
|
||||
请帮我用HTML/CSS/JS做一个简单的作业倒计时器。可以选择5/10/15/20分钟，点开始后大字显示倒计时，最后30秒字变红色，时间到了屏幕变色显示"时间到！"。有重新开始按钮。单个HTML文件，界面简洁。
|
||||
```
|
||||
|
||||
**保底方案B：错题记录本**
|
||||
```
|
||||
请帮我用HTML/CSS/JS做一个简单的错题记录本。可以输入科目、题目内容、正确答案。点"保存"后显示在下方的错题列表里。有一个"随机抽查"按钮，随机显示一道错题让我回忆答案。单个HTML文件。
|
||||
```
|
||||
|
||||
**保底方案C：零花钱记账本**
|
||||
```
|
||||
请帮我用HTML/CSS/JS做一个简单的零花钱记账本。可以记录收入和支出（输入金额和说明），自动计算余额。下方显示所有记录的列表。顶部大字显示当前余额。单个HTML文件，界面可爱。
|
||||
```
|
||||
|
||||
**保底方案D：单词速记卡**
|
||||
```
|
||||
请帮我用HTML/CSS/JS做一个单词速记卡工具。可以输入英文单词和中文意思，保存后生成卡片。点击卡片正面显示英文，翻转显示中文。有"下一个"和"上一个"按钮。单个HTML文件。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**进阶提示词（学有余力的学生）：**
|
||||
|
||||
```
|
||||
在我现有工具的基础上，请帮我增加以下体验优化：
|
||||
1. 使用localStorage保存数据，关闭浏览器后数据不丢失
|
||||
2. 添加简单的统计功能（比如倒计时器统计"今天用了几次"，记账本统计"本月总支出"）
|
||||
3. 添加一个"导出"功能，把数据显示为可以复制的文本
|
||||
请在现有代码基础上修改，不要重新写。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**本课技术备注：**
|
||||
|
||||
1. **工具类项目与游戏类项目的技术差异：** 游戏以Canvas动画和实时交互为核心，工具以表单输入、数据存储和界面展示为核心。工具类项目更多用到HTML表单元素（input、select、button）和DOM操作（创建元素、修改内容），代码结构通常比游戏简单，AI生成质量也更高。
|
||||
|
||||
2. **localStorage本地存储：** 这是浏览器提供的简单存储方案，可以让数据在关闭浏览器后仍然保留。在保底提示词中没有使用localStorage（为了降低复杂度），但进阶学生可以加上。教师只需知道：提示词中加一句"使用localStorage保存数据，下次打开时自动加载"即可。
|
||||
|
||||
3. **工具类项目常见问题：** 输入框没有校验（输入文字到数字框不报错）——提示词加"请做基本的输入校验"；列表数据刷新后丢失——引入localStorage；界面在不同屏幕尺寸下变形——提示词加"响应式布局"。这些问题在今天课堂上不需要全部解决，核心是让学生体验完整的"需求→开发→验收"流程。
|
||||
|
||||
4. **"真实验收"的教学意义：** 本课首次引入"用真实数据验收"的概念。之前做游戏时，验收更多是"能不能玩、好不好玩"。工具的验收必须用真实场景——这是本课教学重点的体现，也是"从好玩到好用"思维转变的关键支撑。
|
||||
|
||||
5. **学生选题预期分布：** 基于试教经验，学习工具类（倒计时、错题本、单词卡）约50-60%，生活管理类（记账、打卡）约20-30%，社交/其他类（生日提醒、借还记录）约10-20%。所有方向在技术上都可行，不需要限制。
|
||||
|
||||
**常见问题 FAQ：**
|
||||
|
||||
| 学生问题 | 应对方式 |
|
||||
|---------|---------|
|
||||
| "我找不到不方便的事情" | 用场景引导法："你今天早上出门前做了什么？有没有忘带过东西？你做作业的时候最讨厌什么？" 如果实在想不到，可以从参考方向里选一个 |
|
||||
| "我想做的工具AI做不出来" | "可能是需求太复杂了。我们简化一下——这个工具最核心的一个功能是什么？只做这一个试试" |
|
||||
| "工具好无聊，我想做游戏" | "你觉得如果你做一个能帮全班同学记错题的工具，大家会不会觉得你很厉害？做有用的东西，影响力比游戏更大！当然你也可以把工具做得好看、有趣——谁说工具不能好看？" |
|
||||
| "关掉浏览器数据就没了" | "今天先不管这个问题——我们先确保工具好用。如果你有余力，可以让AI加一个localStorage保存功能。" |
|
||||
| "我做的工具跟网上的一样" | "没关系！重要的是你自己发现了这个需求，自己设计了解决方案。而且你的工具是为你量身定做的——网上的工具可做不到这一点" |
|
||||
| "我能不能做一个游戏化的工具？" | "当然可以！比如错题本加上'连续答对奖励'，记账本加上'存钱进度条'。但记住——先保证核心功能好用，再加好玩的元素" |
|
||||
|
||||
**课堂风险预案：**
|
||||
|
||||
- **如果AI服务不可用：** 本课前半段（分段一、二）完全不依赖AI——学生可以正常做"不方便清单"和写需求文档。如果后半段AI仍不可用，将分段三改为"互审需求文档+口头描述你的工具"，让同学互相扮演"用户"提需求反馈。把AI开发推迟到下节课课前15分钟。
|
||||
- **如果学生进度差异过大：** 快的学生进入真实验收和迭代优化阶段，甚至可以让旁边同学试用自己的工具收集反馈；慢的学生使用保底提示词快速生成基础工具。关键是每个学生都要完成"不方便清单"和需求文档——即使工具没做出来，需求发现能力本身就是核心教学目标。
|
||||
- **如果大部分学生都选了同一个方向（如倒计时器）：** 这很正常，不需要强制分散。可以在展示环节对比不同学生的"同类工具"——"同样是倒计时器，你们解决的问题一样吗？功能设计有什么不同？"这本身就是很好的讨论话题。
|
||||
- **如果有学生的需求不适合做工具（如"我想让作业变少"）：** 温和引导："作业变少这个事情，工具帮不了你。但'做作业更高效'，工具可以帮！比如用倒计时器控制时间，或者用错题本减少重复犯错。你觉得哪个更实际？"
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周挑战：让别人试试你的工具**
|
||||
|
||||
**挑战说明：** 把你今天做的工具发给一个朋友或家人，不做任何解释，让他们自己打开试用。然后观察和记录：
|
||||
|
||||
1. **他们打开后做的第一件事是什么？** 是不是马上知道怎么用了？
|
||||
2. **他们用完后怎么评价？** 觉得有用吗？有什么吐槽的？
|
||||
3. **他们提了什么改进建议？** 你觉得有道理吗？
|
||||
|
||||
把以上三个问题的回答写下来，拍照发到班级群。这就是专业产品经理做的"用户测试"！
|
||||
|
||||
**下节课分享：** 下周课上选2-3位同学展示用户测试结果，这将成为路演的精彩素材。
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**拓展一（推荐）：打磨你的工具**
|
||||
|
||||
回家后继续使用你今天做的工具，坚持用3天。每天记录一个"用的时候发现的问题"，然后让AI帮你修复。3天后看看你的工具是不是变得越来越好用了。
|
||||
|
||||
提示：这就是真正的产品开发过程——"用→发现问题→修→再用→再发现→再修"，循环往复，产品就越来越好。
|
||||
|
||||
**拓展二（挑战）：做第二个工具**
|
||||
|
||||
翻出你的"不方便清单"，选第二个"不方便"，再做一个工具。这次挑战自己——能不能做一个"给别人用"的工具？比如：
|
||||
- 给妈妈做一个"买菜清单"工具
|
||||
- 给弟弟妹妹做一个"认字卡片"工具
|
||||
- 给全班做一个"值日表查询器"
|
||||
|
||||
做给别人用比做给自己用更难——因为你要站在别人的角度想"他们需要什么"。这就是"用户思维"的进阶训练！
|
||||
620
3-lessons/AICODE-03/旧版本/AICODE03-10 产品路演与同行评审 v1.md
Normal file
620
3-lessons/AICODE-03/旧版本/AICODE03-10 产品路演与同行评审 v1.md
Normal file
@@ -0,0 +1,620 @@
|
||||
---
|
||||
课时: 10
|
||||
主题: 产品路演与同行评审
|
||||
核心能力: [表达力, 审美力]
|
||||
核心工具: [穹狼 Code / Trae]
|
||||
时长: 90分钟
|
||||
透明化层级: 过程层
|
||||
适用路线: 共享
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 理解"路演"的含义：路演不是"给你看看"，而是"卖点展示 + 现场演示 + 回应问题"的完整流程
|
||||
- 掌握3分钟路演的四段结构：问题引入（30秒）→ 核心功能演示（60秒）→ 技术亮点/设计巧思（60秒）→ 下一步计划（30秒）
|
||||
- 理解"建设性反馈"的结构：不是"好棒"或"不好"，而是"我觉得XX很棒，如果能XX会更好"
|
||||
|
||||
**能力目标：**
|
||||
- 能用3分钟路演结构完整展示自己的一个作品，包含问题引入、功能演示、亮点讲解和未来计划（表达力）
|
||||
- 能用"创意、完成度、体验"三个维度给同伴的作品打分并写出一句话建设性反馈（审美力）
|
||||
- 能从收到的反馈中筛选出最有价值的一条，制定改进方向（审美力+表达力）
|
||||
|
||||
**情感目标：**
|
||||
- 体验"站在台前展示自己作品"的成就感与紧张感——这是产品设计师的核心能力
|
||||
- 建立"好的反馈能让作品变得更好"的信念——批评不是攻击，而是礼物
|
||||
- 回顾阶段二的成长：从"一句话做游戏"到"3分钟路演自己的产品"，感受能力跃迁
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 概念 | 学生类比 | 认知层级 |
|
||||
|------|---------|---------|
|
||||
| 路演 | 就像参加"班级才艺展示"——不只是表演，还要告诉大家你为什么练这个才艺、练了多久、下一步想挑战什么 | 理解层→应用层 |
|
||||
| 3分钟路演结构 | 就像讲一个故事：开头抓人（问题引入）→ 高潮（功能演示）→ 幕后揭秘（技术亮点）→ 预告下集（未来计划） | 应用层 |
|
||||
| 建设性反馈 | 就像好朋友帮你看作文：不只是说"写得好"或"不好看"，而是说"开头很吸引人，如果结尾能加个转折就更精彩了" | 理解层→应用层 |
|
||||
| 评审维度 | 就像给餐厅打分——不只看"好不好吃"（体验），还看"菜品新不新"（创意）和"上菜齐不齐"（完成度） | 应用层→迁移层 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | **路演就是把作品打开给大家看一下** | 路演是有结构的展示：要讲清楚"解决什么问题""核心功能""设计巧思""未来计划"，不是无声地打开网页 | 对比演示：教师先做一个"无声展示"（打开网页5秒什么都不说），再做一个完整路演——让学生直观感受差异 |
|
||||
| M2 | **反馈就是说"好棒"或者"不好"** | 建设性反馈 = 具体优点 + 改进建议。"好棒"没有信息量，"不好"没有帮助；"XX功能很酷，如果能加个音效会更有感觉"才是有用的反馈 | 让学生体验收到"好棒"vs 收到具体反馈的感受差异 |
|
||||
| M3 | **路演要把所有功能都说一遍** | 3分钟时间有限，只展示最核心、最有亮点的1-2个功能。路演的目标是让人记住你的作品，不是列功能清单 | 教师演示"功能清单式路演"——学生发现听完什么都记不住 |
|
||||
| M4 | **别人的建议是在批评我** | 建设性反馈是帮你的作品变得更好，不是在说你不行。专业的产品团队每天都在互相提建议，这是合作的方式 | 教师率先接受学生对教师作品的"建设性反馈"，示范如何坦然接受 |
|
||||
| M5 | **我的作品不够好，不敢展示** | 每个作品都有值得展示的亮点——可能是创意独特、可能是解决了一个真实问题、可能是经历了有趣的调试过程。路演不是比赛，是分享 | 在准备环节帮助每个学生找到自己作品的至少一个亮点 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- 每位学生的电脑（用于展示自己的作品）
|
||||
- 教师电脑 + 投影（用于教师示范路演和投影学生作品）
|
||||
- 计时器（手机或投影计时器，路演和彩排用）
|
||||
- 打印版"同行评审表"（每人6-8张，根据班级人数准备）
|
||||
- 打印版"3分钟路演结构卡"（每人1张）
|
||||
|
||||
**教学资源：**
|
||||
- 教师准备：一个自己的作品（建议用第7-8课做的架构设计项目），准备好完整的3分钟路演示范
|
||||
- 教师准备：一个"反面路演案例"——打开作品看5秒什么都不说（用于对比演示）
|
||||
- 学生资源：过去5课积累的作品（第5-6课游戏、第7-8课架构设计项目、第9课工具项目），每人选一个最得意的
|
||||
|
||||
**3分钟路演结构卡（打印版）：**
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────┐
|
||||
│ 3分钟路演结构卡 │
|
||||
│ │
|
||||
│ 第一段·问题引入（30秒） │
|
||||
│ "你有没有遇到过______的问题？" │
|
||||
│ "如果有一个工具/游戏能______，是不是很酷？" │
|
||||
│ │
|
||||
│ 第二段·核心功能演示（60秒） │
|
||||
│ 现场打开作品，展示最核心的1-2个功能 │
|
||||
│ 边操作边讲解："你看，当我______的时候，它会______" │
|
||||
│ │
|
||||
│ 第三段·技术亮点/设计巧思（60秒） │
|
||||
│ "这个作品最巧妙的地方是______" │
|
||||
│ "我在做的过程中发现了一个有趣的问题______" │
|
||||
│ "我是这样解决的______" │
|
||||
│ │
|
||||
│ 第四段·下一步计划（30秒） │
|
||||
│ "接下来我想加______功能" │
|
||||
│ "如果有更多时间，我想把它做成______" │
|
||||
│ │
|
||||
│ 总计：3分钟 │
|
||||
└──────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**同行评审表（打印版）：**
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────┐
|
||||
│ 同行评审表 │
|
||||
│ │
|
||||
│ 路演者姓名：___________ │
|
||||
│ 作品名称：___________ │
|
||||
│ 评审者姓名：___________ │
|
||||
│ │
|
||||
│ 评分（每项1-5分）： │
|
||||
│ 创意（新不新） ：☆ ☆ ☆ ☆ ☆ │
|
||||
│ 完成度（能不能用）：☆ ☆ ☆ ☆ ☆ │
|
||||
│ 体验（好不好用） ：☆ ☆ ☆ ☆ ☆ │
|
||||
│ │
|
||||
│ 一句话建设性反馈： │
|
||||
│ "我觉得______很棒，如果能______会更好" │
|
||||
│ │
|
||||
└──────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**教师备课体验任务：**
|
||||
> 备课前，教师必须亲自完成以下操作：
|
||||
> 1. 选择自己的一个示范作品，用3分钟路演结构卡准备一次完整的路演，并计时确认在3分钟以内
|
||||
> 2. 准备一个"反面路演"——打开作品看5秒什么都不说，体验对比效果
|
||||
> 3. 对自己的示范作品写一条建设性反馈，示范"我觉得XX很棒，如果能XX会更好"的句式
|
||||
> 4. 确认每位学生至少有一个可展示的作品（检查第5-9课的作品保存情况）
|
||||
> 5. 准备好计时器、打印好路演结构卡和评审表
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟** 🔗
|
||||
|
||||
**【环节】阶段回顾 (4分钟)**
|
||||
|
||||
**师：** 同学们，今天是阶段二的最后一课！从第5课到现在，我们做了多少东西了？谁来帮我数一数？【诊断点：检测学生对阶段二作品的记忆和归属感】【识别层】
|
||||
|
||||
**【分支A】若学生能回忆起多个作品：**
|
||||
**师：** 对！第5课一句话做游戏、第6课迭代升级、第7-8课从头设计自己的项目、第9课还做了实用工具。你们手里至少有2-3个完整的作品了！这已经比很多成年人的作品集还丰富了。
|
||||
|
||||
**【分支B】若学生记忆零散：**
|
||||
**师：** 我来帮你们回忆。第5课——一句话做游戏，还记得那个震撼时刻吗？第6课——给游戏加了计分、倒计时。第7-8课——你们自己选方向、写需求文档、做了一个全新的项目。第9课——做了解决真实问题的小工具。你们手里有好几个作品了！
|
||||
|
||||
**【分支C】若有学生说"我的作品不太好"：**
|
||||
**师：** 每个作品都是你的创造。不管它完不完美，它代表了你的一个想法变成了现实。今天的主题就是——让你有机会把最得意的那个作品展示给大家看！
|
||||
|
||||
**【环节】情景导入 (6分钟)**
|
||||
|
||||
**师：** 今天我们要做一件你们从来没做过的事。你们知道苹果公司每年发新手机的时候会做什么吗？
|
||||
|
||||
**生：** 发布会！/ 那个很酷的演讲！/ 站在台上介绍！
|
||||
|
||||
**师：** 对！那叫"路演"——站在台上，把你的产品最酷的地方展示给所有人看。乔布斯站在台上说"今天我要给你们展示一个革命性的产品"，全世界的人都在看。
|
||||
|
||||
**师：** 今天，你们每个人就是自己作品的"乔布斯"！你要站起来，用3分钟时间，让所有同学记住你的作品。听起来刺激不刺激？
|
||||
|
||||
**生：** 刺激！/ 有点紧张……/ 我可以吗？
|
||||
|
||||
**师：** 有点紧张是正常的。但我告诉你们——紧张说明你在意。而且今天不只是展示，你还要做另一件事——给别人的作品打分、提建议。你既是"演讲者"也是"评委"。这叫**同行评审**——专业产品团队都这么做。【诊断点：观察学生对"路演"和"评审"的情绪反应——是兴奋还是畏惧】
|
||||
|
||||
**【分支A】若学生表现兴奋：**
|
||||
**师：** 很好！这种"想要展示"的感觉就对了。但路演可不是随便打开作品看看——它是有套路的。我先给你们演示一下。
|
||||
|
||||
**【分支B】若有学生表现畏惧（"我不敢/我的作品不好"）（M5的早期表现）：**
|
||||
**师：** 你做了这么多课的项目，一定有一个你觉得最有意思的！不一定是最完美的，但一定是最有感觉的那个。路演不是比赛——没有谁最好谁最差，每个人讲自己的故事就行。一会儿我教你们一个套路，跟着套路讲就不会紧张了。
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟** 🛠️
|
||||
|
||||
**【分段一：路演速成——3分钟的魔力】(15分钟)**
|
||||
|
||||
**预设误概念：**
|
||||
- M1：路演就是把作品打开给大家看一下
|
||||
- M3：路演要把所有功能都说一遍
|
||||
|
||||
**讲解与演示 (Teach & Demo): (8分钟)**
|
||||
|
||||
**师：** 我先做一个"路演"给你们看。但我要做两遍——一遍"坏的"，一遍"好的"。你们来当评委，看看有什么区别。
|
||||
|
||||
**师：** 第一遍——【教师打开自己的作品，沉默5秒钟，鼠标随便点了几下，然后说"嗯……就是这个，挺好的"】
|
||||
|
||||
**师：** ……好，第一遍结束了。你们对我的作品有什么印象？
|
||||
|
||||
**生：** 没什么印象…… / 不知道它是干什么的 / 你都没介绍
|
||||
|
||||
**师：** 对吧！我做了很多天的作品，结果你们什么都不知道。这就是"没有路演"的效果——你的好东西，别人看不见。
|
||||
|
||||
**师：** 现在看第二遍——【教师做完整的3分钟路演示范】
|
||||
|
||||
**师：** 大家好！你们有没有遇到过这样的问题——课间想玩个小游戏，但手机里的游戏不是要联网就是太复杂，等加载完课间就结束了？【30秒·问题引入】
|
||||
|
||||
**师：** 我做了一个叫"太空躲避大师"的小游戏，打开就能玩，不用联网。你看——【现场打开游戏，演示操作】飞船可以左右移动，陨石从上面掉下来，你要躲开它们。碰到陨石就结束，会告诉你存活了多少秒。还有一个重新开始的按钮——手指一点，马上再来一局。【60秒·核心功能演示】
|
||||
|
||||
**师：** 这个游戏最巧妙的地方在哪里呢？第一，我用了"速度递增"——你玩的时间越长，陨石掉得越快，所以你永远觉得"再坚持一下就能破记录"。第二，我在做的时候发现一个有趣的问题——AI第一次做出来的碰撞检测不准，飞船明明没碰到陨石也会死。我是这样跟AI说的："请把碰撞判定区域缩小到精灵图的80%"，这样就好了。【60秒·技术亮点】
|
||||
|
||||
**师：** 接下来，我想给这个游戏加一个排行榜功能——把你每次的成绩存下来，看看你的历史最高分。如果有更多时间，我想做一个"双人模式"，两个人可以在同一个屏幕上比赛谁活得更久。谢谢大家！【30秒·下一步计划】
|
||||
|
||||
**师：** 好，第二遍结束。现在你们对我的作品有什么印象？【诊断点：学生是否感受到两种展示方式的巨大差异】【理解层】
|
||||
|
||||
**【分支A】若学生能说出"第二遍知道了游戏是干什么的""第二遍有故事""第二遍想试试"：**
|
||||
**师：** 完全对！同一个作品，路演和不路演，效果天差地别。路演不是"给你看看"，路演是——让别人记住你的作品，想试试你的作品。
|
||||
|
||||
**【分支B】若学生说"第二遍讲得多"：**
|
||||
**师：** 不只是讲得多——是讲得有结构。你注意到了吗？我先说了一个问题让你们有共鸣，然后演示功能让你们看到效果，接着讲了幕后故事让你们觉得有趣，最后说了未来计划让你们期待。这四步就是路演的"套路"！
|
||||
|
||||
**【分支C】若学生关注到具体细节（"碰撞检测那个有趣"）：**
|
||||
**师：** 你注意到了"技术亮点"那一段！很多人做路演只展示功能，但讲一个你遇到的问题和你怎么解决的，会让听众觉得更有意思。因为每个人都喜欢听"遇到困难→解决困难"的故事。
|
||||
|
||||
**师：** 好，这就是3分钟路演的四段结构——【投影展示路演结构卡】
|
||||
|
||||
```
|
||||
第一段·问题引入（30秒）—— 让听众产生共鸣
|
||||
第二段·核心功能演示（60秒）—— 让听众看到你的作品能做什么
|
||||
第三段·技术亮点/设计巧思（60秒）—— 让听众觉得你很厉害
|
||||
第四段·下一步计划（30秒）—— 让听众期待你的作品变得更好
|
||||
```
|
||||
|
||||
**师：** 注意——3分钟很短！你不能把所有功能都说一遍。只挑最亮的1-2个功能展示就好。路演的目标是让人记住你，不是给人看说明书。【诊断点：是否有学生仍然想"什么都说"（M3）】【理解层】
|
||||
|
||||
**学生实践 (Practice): (5分钟)**
|
||||
|
||||
**师：** 现在你们做三件事，5分钟内完成：
|
||||
|
||||
**第一步（1分钟）：** 选作品。想想你从第5课到第9课做的所有作品——游戏、架构设计项目、工具——选一个你最得意的。没有"最好"，只有"你最想展示的"。
|
||||
|
||||
**第二步（3分钟）：** 填路演结构卡。每个人面前都有一张路演结构卡，按四段结构写下你要说的关键词。不用写完整的句子，写关键词就行——等会儿你是对着关键词讲，不是读稿子。
|
||||
|
||||
**第三步（1分钟）：** 在心里默默过一遍。想象你站在大家面前，从第一段讲到第四段。
|
||||
|
||||
提示：
|
||||
- "问题引入"不知道怎么写？想想你为什么做这个作品——它解决了什么问题？或者它让你觉得什么事情变酷了？
|
||||
- "技术亮点"不知道怎么写？想想你做这个作品时印象最深的一个瞬间——AI翻车了你怎么修的？你想到了一个巧妙的设计？
|
||||
|
||||
开始！
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 谁还没选好作品 → 帮助聚焦："你做的哪个作品自己玩/用得最多？"
|
||||
- 谁在"问题引入"卡住 → 给脚手架："想想你同学可能遇到过什么问题，你的作品刚好能解决"
|
||||
- 谁在"技术亮点"卡住 → 引导："做这个作品的时候有没有遇到什么好玩的事？或者AI犯了什么有趣的错？"
|
||||
- 谁觉得自己的作品"不够好"展示（M5）→ 帮他找到一个亮点："你这个创意就很独特啊！别人都没做过这个"
|
||||
|
||||
**进度同步 (Checkpoint): (2分钟)**
|
||||
|
||||
**师：** 好，5分钟到！快速检查——路演结构卡四段都填了的举手！好，大部分都填了。有哪段还空着的？【诊断点：哪一段是学生最难填的——通常是"技术亮点"或"问题引入"】【应用层】
|
||||
|
||||
**【分支A】若大部分学生都填好了：**
|
||||
**师：** 非常好！接下来我们要做一件事——彩排。你的路演不能第一次就在全班面前讲，得先练一遍。
|
||||
|
||||
**【分支B】若不少学生"技术亮点"没写：**
|
||||
**师：** "技术亮点"写不出来很正常。它可以是——你在做的过程中遇到的一个Bug怎么修好的、你跟AI说了一句什么巧妙的话让效果变好了、或者你的设计跟别人不一样的地方。想不到"技巧"就讲"故事"——你做这个作品最有趣的经历是什么？
|
||||
|
||||
**【分支C】若有学生"问题引入"没写：**
|
||||
**师：** "问题引入"最简单的写法——想想谁会用你的作品？他们为什么需要它？"你有没有遇到过XXX的问题？我做了一个XXX来解决它。"如果是游戏，可以说"你有没有想过只用XX秒就能玩到一个超刺激的游戏？"
|
||||
|
||||
---
|
||||
|
||||
**【分段二：彩排——同桌练习】(10分钟)**
|
||||
|
||||
**预设误概念：**
|
||||
- M1：路演就是把作品打开看一下（实际做起来发现比想象的难）
|
||||
- M5：我的作品不够好，不敢展示
|
||||
|
||||
**讲解与演示 (Teach & Demo): (2分钟)**
|
||||
|
||||
**师：** 现在进入彩排环节！你们要跟旁边的同学互相做一次练习路演。每人3分钟。
|
||||
|
||||
规则：
|
||||
1. **A先讲，B当听众。** A打开自己的作品，对着路演结构卡讲3分钟。我会计时！
|
||||
2. **B给A反馈。** 注意——这里要用"建设性反馈"！不是说"好棒"，而是说"我觉得XX很棒，如果能XX会更好"。比如："我觉得你的问题引入很有趣，但功能演示的时候你一直在看屏幕没看我，如果能看着听众会更好。"
|
||||
3. **然后A和B交换。**
|
||||
|
||||
**师：** 彩排的目的是——第一，你练一遍不紧张了；第二，你能从同学那里拿到改进建议。好，开始！A先讲！3分钟倒计时开始！
|
||||
|
||||
**学生实践 (Practice): (7分钟)**
|
||||
|
||||
【A路演3分钟 + B给反馈30秒，然后交换。教师同时走动观察。】
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 谁讲得有结构感（四段都覆盖了）→ 点头鼓励
|
||||
- 谁只是打开作品不说话（M1的实际表现）→ 轻声提醒："看看你的结构卡，从问题引入开始"
|
||||
- 谁的反馈只是"好棒"（M2的表现）→ 轻声提醒："试试说'我觉得XX很棒，如果能XX会更好'"
|
||||
- 谁因为紧张讲不出来 → 安慰："没关系，就当跟朋友聊天，不用背台词"
|
||||
- 谁超过3分钟了 → 提醒："时间到了！正式路演也是3分钟，要学会控制时间"
|
||||
|
||||
**进度同步 (Checkpoint): (1分钟)**
|
||||
|
||||
**师：** 彩排完了！举手告诉我——彩排之后，你觉得自己的路演比刚才心里想的好还是差？【诊断点：彩排是否帮助学生建立了信心，还是增加了焦虑】【理解层】
|
||||
|
||||
**【分支A】若学生说"比想象的好"：**
|
||||
**师：** 很好！其实一旦开口讲了，就没那么紧张了。正式路演跟彩排一样，放松讲就行。
|
||||
|
||||
**【分支B】若学生说"发现了一些问题"：**
|
||||
**师：** 太好了！发现问题就是彩排的目的。你现在知道正式路演的时候要注意什么了。比如——有没有人发现自己时间不够或者超时了？记住，3分钟很快，只讲最重要的！
|
||||
|
||||
**【分支C】若有学生说"我更紧张了"：**
|
||||
**师：** 紧张说明你在意你的作品。我告诉你一个秘密——你上去讲的时候，台下的同学都在想"他/她做的是什么？好有意思！"没有人在想"他/她讲得不好"。放心上！
|
||||
|
||||
---
|
||||
|
||||
**【分段三：正式路演——每人3分钟展示 + 1分钟同伴评审】(30分钟)**
|
||||
|
||||
**预设误概念：**
|
||||
- M2：反馈就是说"好棒"或者"不好"
|
||||
- M4：别人的建议是在批评我
|
||||
|
||||
**讲解与演示 (Teach & Demo): (3分钟)**
|
||||
|
||||
**师：** 好，正式路演要开始了！在开始之前，我要讲两个规则。
|
||||
|
||||
**路演者规则：**
|
||||
1. 路演时间3分钟。我会计时，2分30秒的时候我会举手提醒你"还剩30秒"
|
||||
2. 路演结束后，台下同学有1分钟时间提一个问题。你要当场回答
|
||||
3. 打开你的作品，面对大家讲——不要一直看屏幕，要看听众
|
||||
|
||||
**评审者规则：**
|
||||
1. 每个人都要填同行评审表——三个维度打分 + 一句话建设性反馈
|
||||
2. 打分标准：
|
||||
- **创意（新不新）：** 这个作品的想法独特吗？是不是你没见过的？
|
||||
- **完成度（能不能用）：** 核心功能能正常运作吗？有没有明显的Bug？
|
||||
- **体验（好不好用）：** 用起来/玩起来的感觉好吗？界面好看吗？操作顺畅吗？
|
||||
3. **一句话建设性反馈——必须用这个句式：** "我觉得______很棒，如果能______会更好"
|
||||
|
||||
**师：** 我来示范一下什么是好的建设性反馈、什么是坏的。【诊断点：激发M2和M4】
|
||||
|
||||
坏的反馈：
|
||||
- "好棒！" —— 这等于什么都没说，路演者不知道哪里好
|
||||
- "不好看。" —— 这是攻击，不是帮助
|
||||
- "我觉得一般。" —— 没有任何可执行的信息
|
||||
|
||||
好的反馈：
|
||||
- "我觉得你的游戏创意很新颖，如果能加个音效反馈会更有感觉"
|
||||
- "我觉得你的工具解决了一个真实的问题，如果界面颜色搭配得更统一会更专业"
|
||||
- "我觉得你路演时的演示很流畅，如果能多看看听众会更有感染力"
|
||||
|
||||
**师：** 注意——反馈里的"如果能XX会更好"不是批评，是帮助。你收到的每一条"如果能"都是让你的作品变得更好的线索！
|
||||
|
||||
**师：** 准备好了吗？谁想第一个上来路演？
|
||||
|
||||
【如果没人主动，教师可以用轻松的方式指定："那我们从XX开始！你刚才彩排讲得很好，来！"】
|
||||
|
||||
**学生实践 (Practice): (25分钟)**
|
||||
|
||||
**师：** 好，路演开始！每个人4分钟（3分钟路演 + 1分钟问答/写评审表）。
|
||||
|
||||
【按照班级人数6-8人，约24-32分钟。教师负责以下工作：】
|
||||
|
||||
**教师串场话术——每位路演者上台前：**
|
||||
- "好，感谢XX的精彩展示！下一位——XX，准备好了吗？大家掌声欢迎！"
|
||||
- "在XX上台之前，大家赶紧把刚才那张评审表写完。"
|
||||
|
||||
**教师串场话术——路演进行中：**
|
||||
- 2分30秒时举手示意 → 路演者知道"还剩30秒"
|
||||
- 3分钟到时 → "时间到！谢谢XX！大家有一个问题要问吗？"
|
||||
|
||||
**教师引导提问——如果没人提问：**
|
||||
- "我来问一个——你做这个作品最大的挑战是什么？"
|
||||
- "你觉得你的作品跟别人做的最不一样的地方在哪里？"
|
||||
- "如果你还有一天时间，你最想改哪一个地方？"
|
||||
|
||||
**教师引导反馈——如果评审表上反馈太空泛：**
|
||||
- 在前1-2位路演者结束后，教师可以暂停读一条好的反馈作为示范
|
||||
- "我看到XX同学写了一条非常好的反馈：'我觉得你的倒计时设计很紧张刺激，如果能在最后5秒加个屏幕变红的效果会更刺激'——这就是建设性反馈！具体、可操作、有帮助。"
|
||||
|
||||
**路演过程中的诊断观察：**
|
||||
- 学生是否使用了四段结构 → 大部分学生会按结构讲，少数可能跳过某段
|
||||
- 学生的功能演示是否流畅 → 有些学生可能演示时作品出Bug，这是正常的
|
||||
- 评审表上的反馈是否具体 → 前几位反馈可能空泛，教师示范后会改善
|
||||
- 学生收到反馈时的反应 → 观察是否有学生感到不安（M4的表现）
|
||||
|
||||
**进度同步 (Checkpoint): (2分钟)**
|
||||
|
||||
【所有路演结束后】
|
||||
|
||||
**师：** 所有人的路演都结束了！给自己和所有同学一个大大的掌声！你们刚才做了一件了不起的事——站在大家面前，用3分钟展示了自己的作品。不管紧不紧张，你们都做到了！
|
||||
|
||||
**师：** 我来问一个问题——听了所有人的路演，你印象最深的是哪个作品？不是说谁最好，而是哪个让你最想试试？【诊断点：学生能否基于路演效果而非单纯"谁是好朋友"来评价作品——这是审美力的体现】【迁移层】
|
||||
|
||||
**【分支A】若学生能说出具体原因（"XX的游戏创意很新颖""XX的工具真的解决了一个问题"）：**
|
||||
**师：** 你说出了具体原因——"创意新颖""解决了问题"。这就是审美力！你不只是说"好"或"不好"，你能说清楚"好在哪里"。
|
||||
|
||||
**【分支B】若学生只说"XX的很好玩"：**
|
||||
**师：** "好玩"是一个感受。能再具体一点吗——它哪个功能让你觉得好玩？是创意独特？还是操作流畅？还是画面好看？
|
||||
|
||||
**【分支C】若有学生说"我觉得我的不如别人"：**
|
||||
**师：** 每个人的作品都有不同的亮点。有的人创意独特，有的人完成度高，有的人体验做得好。你的作品也一定有别人没有的东西。一会儿我们看看你收到了什么反馈——说不定别人注意到了你自己没看到的优点！
|
||||
|
||||
---
|
||||
|
||||
**【分段四：反馈汇总——收获与行动】(10分钟)**
|
||||
|
||||
**预设误概念：**
|
||||
- M4：别人的建议是在批评我
|
||||
- M2：反馈就是说"好棒"
|
||||
|
||||
**讲解与演示 (Teach & Demo): (2分钟)**
|
||||
|
||||
**师：** 现在每个人手里应该都有好几张来自同学的评审表。这些是你今天最宝贵的收获——你做了一个作品，但你是从自己的角度看它的。现在你第一次从"别人的角度"看到了你的作品。
|
||||
|
||||
**师：** 我要教你们做一件事——**反馈整理**。不是每一条反馈都需要立刻行动，但你要从中找到最有价值的那一条。
|
||||
|
||||
步骤：
|
||||
1. 把所有评审表铺开看一遍
|
||||
2. 找到被提到最多的那个"如果能XX会更好"——这说明不止一个人注意到了这个问题
|
||||
3. 从中选出你最想改的一条——不一定是被提到最多的，可以是你自己也觉得"对，这个确实该改"的
|
||||
4. 在路演结构卡的背面写下："我要改的一件事：______"
|
||||
|
||||
**学生实践 (Practice): (6分钟)**
|
||||
|
||||
**师：** 现在花5分钟整理你收到的反馈。把评审表都翻出来，看看同学们给你打了多少分、写了什么建议。然后在路演结构卡背面写下你"最想改的一件事"。
|
||||
|
||||
【教师巡场观察，重点关注：】
|
||||
- 谁在认真阅读每一张评审表 → 好现象，不打扰
|
||||
- 谁看到低分有些失落（M4的表现）→ 轻声安慰："看看他们写的建议——低分不是说你不好，是说这个地方还能变更好"
|
||||
- 谁发现了有趣的反馈 → 鼓励分享
|
||||
- 谁不知道选哪一条改 → 帮助聚焦："这些建议里，哪一个你自己做的时候也隐约觉得不太对？那就是它！"
|
||||
|
||||
**进度同步 (Checkpoint): (2分钟)**
|
||||
|
||||
**师：** 好，时间到！谁来分享一下——你收到的反馈里，最让你惊喜或者最有用的一条是什么？你决定改什么？【诊断点：学生能否从反馈中提炼出可执行的改进方向——这是表达力和审美力的综合体现】【迁移层】
|
||||
|
||||
**【分支A】若学生能说出具体的改进计划（"有三个同学都说我的界面颜色太乱，我准备统一成蓝色系"）：**
|
||||
**师：** 非常好！你看，三个人同时说了同一个问题，说明这是一个真实的体验问题。你的改进方向非常精准。这就是同行评审的价值——你自己可能看不到的问题，别人帮你看到了。
|
||||
|
||||
**【分支B】若学生说"大家都说好棒"：**
|
||||
**师：** "好棒"说明你的作品给大家留下了好印象！但你有没有收到"如果能XX会更好"的建议？那些才是帮你进步的宝贝。如果真的没有——那你自己玩自己的作品时，有没有觉得哪里还不够好？
|
||||
|
||||
**【分支C】若学生对反馈有些不开心：**
|
||||
**师：** 收到"如果能XX会更好"的时候，有时候会觉得不舒服——这很正常。但你想想，如果你做了一个蛋糕请朋友吃，朋友说"蛋糕很好吃，如果奶油再少一点就完美了"，你会生气吗？不会吧？这就是建设性反馈——因为在乎你的作品，所以认真给你建议。
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟** 🤔
|
||||
|
||||
**【环节】阶段二回顾 (6分钟)**
|
||||
|
||||
**师：** 今天的路演结束了。但在我们离开之前，我想带你们回顾一下整个阶段二——从第5课到第10课，你们走过了一段了不起的旅程。
|
||||
|
||||
【在白板上写出阶段二的六课脉络】
|
||||
|
||||
```
|
||||
第5课：一句话做出了一个可玩的游戏 → "我能创造"
|
||||
第6课：给游戏迭代升级，加了计分、倒计时 → "我能让它更好"
|
||||
第7课：自己选方向、写需求文档 → "我能规划"
|
||||
第8课：打磨体验、发布作品 → "我能交付"
|
||||
第9课：做解决真实问题的工具 → "我能解决问题"
|
||||
第10课：3分钟路演、给别人反馈 → "我能展示，我能评审"
|
||||
```
|
||||
|
||||
**师：** 看看这六课——你们从"一句话让AI做"进化到了"自己规划、自己开发、自己打磨、自己展示、还能给别人提建议"。你们现在不只是AI的用户，你们是**产品设计师**。
|
||||
|
||||
**师：** 我想问你们一个问题——如果用一句话总结阶段二最大的收获，你会说什么？【诊断点：学生能否抽象出阶段性的成长认知】【迁移层】
|
||||
|
||||
**【分支A】若学生说出能力层面的总结（"学会了怎么规划项目""学会了路演"）：**
|
||||
**师：** 你总结了一个具体技能。很好！但如果再往上一层想想——你现在跟第5课之前的自己比，最大的变化是什么？
|
||||
|
||||
**【分支B】若学生说出心态层面的总结（"我发现AI不只是好玩的，还能做有用的东西""我更敢展示自己了"）：**
|
||||
**师：** 这个总结太棒了。你说的不只是一个技能，而是一种态度的变化。这种变化比任何具体技术都重要。
|
||||
|
||||
**【分支C】若学生说不出来：**
|
||||
**师：** 我来帮你们总结。阶段二教会你们的最核心的一件事是——**你有能力把一个想法变成现实，并且让别人看到它的价值。** 这就是"产品设计师"的核心能力。
|
||||
|
||||
**【环节】互评与讨论 (4分钟)**
|
||||
|
||||
**师：** 最后一个环节——今天你们既当了"路演者"也当了"评审者"。哪个角色更难？为什么？
|
||||
|
||||
**生：** （各种回答）
|
||||
|
||||
**师：** 有人说路演更难，因为紧张。有人说评审更难，因为不知道怎么给建设性反馈。其实这两个能力都很重要——
|
||||
|
||||
**表达力**：能把你做的东西讲清楚、讲精彩，让别人理解你的价值。
|
||||
**审美力**：能看出别人作品的优点和改进空间，给出有帮助的反馈。
|
||||
|
||||
**师：** 这两个能力以后会越来越有用。不管你以后做什么——上课做展示、参加比赛、甚至找工作面试——"清楚表达"和"给出好反馈"都是超级技能。
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟** 🚀
|
||||
|
||||
**【环节】抽象总结 (3分钟)**
|
||||
|
||||
**师：** 今天学了三个核心能力，我帮你们提炼成三句话——
|
||||
|
||||
**第一句：路演 = 有结构的展示。** 不是打开给人看，而是"问题引入→功能演示→技术亮点→未来计划"。3分钟让人记住你的作品。
|
||||
|
||||
**第二句：建设性反馈 = 具体优点 + 改进建议。** "我觉得XX很棒，如果能XX会更好"——这比"好棒"和"不好"都有用一万倍。
|
||||
|
||||
**第三句：反馈是礼物，不是批评。** 每一条"如果能XX会更好"都是让你的作品进步的线索。收到反馈不是被攻击，是被帮助。
|
||||
|
||||
**师：** 这三个能力不只在做产品的时候有用。以后你做任何展示——科学课汇报、班会发言、参加演讲比赛——都可以用今天的路演结构。以后你给任何人提建议——同学的作文、朋友的画——都可以用建设性反馈的句式。这就是"表达力"和"审美力"。【迁移诊断】
|
||||
|
||||
**【环节】下节预告 + 5分钟挑战 (2分钟)**
|
||||
|
||||
**师：** 下节课开始阶段三——"跨学科AI应用"！你们已经证明了自己能做游戏、能做工具。下一步，你们要用AI编程做一个跟学校科目有关的互动应用——比如英语单词闪卡、数学闯关游戏、科学实验模拟。听起来是不是很酷？而且你们已经有了规划、开发、路演的全套能力，阶段三会更顺手！
|
||||
|
||||
**师：** 本周的5分钟挑战来了！
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师演示用提示词：**
|
||||
|
||||
**课前准备——生成示范路演作品（如果教师没有现成作品）：**
|
||||
```
|
||||
请帮我用HTML/CSS/JS开发一个叫"太空躲避大师"的小游戏，要求如下：
|
||||
|
||||
## 项目信息
|
||||
- 目标用户：想在课间玩两分钟的小学生
|
||||
- 视觉风格：像素风格，深蓝色太空背景
|
||||
|
||||
## 核心功能
|
||||
1. 飞船用左右方向键移动，不能移出屏幕
|
||||
2. 陨石从顶部随机位置不断掉落，速度随时间递增
|
||||
3. 碰到陨石游戏结束，显示存活秒数和"重新开始"按钮
|
||||
4. 页面顶部实时显示存活时间
|
||||
|
||||
## 技术要求
|
||||
- 单个HTML文件，内联CSS和JS
|
||||
- 使用Canvas绘制
|
||||
- 游戏区域800x600像素，居中显示
|
||||
```
|
||||
|
||||
**学生保底提示词（当学生所有作品都丢失时）：**
|
||||
|
||||
如果有学生没有任何可展示的作品，教师可以在路演准备阶段帮助学生用5分钟快速生成一个简单作品：
|
||||
```
|
||||
请帮我用HTML/CSS/JS做一个简单的反应速度测试器：
|
||||
- 屏幕中间显示一个红色圆圈
|
||||
- 随机1-5秒后圆圈变绿
|
||||
- 玩家看到绿色立刻点击，显示反应时间（毫秒）
|
||||
- 可以重复测试，显示"最佳成绩"
|
||||
- 视觉风格简洁清爽
|
||||
- 单个HTML文件
|
||||
```
|
||||
|
||||
**进阶提示词（路演准备辅助）：**
|
||||
```
|
||||
我有一个叫"[作品名]"的[游戏/工具]，我要做3分钟路演。请帮我：
|
||||
1. 写一个吸引人的"问题引入"开场白（30秒能讲完）
|
||||
2. 列出最值得展示的2个核心功能亮点
|
||||
3. 帮我总结一个"技术巧思"——我在开发过程中[描述一个有趣的经历]
|
||||
4. 写一个简短的"下一步计划"结尾
|
||||
|
||||
请用小学四年级能理解的语言。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**本课技术备注：**
|
||||
|
||||
1. **本课几乎不涉及技术操作。** 核心是表达力和审美力的训练。唯一的技术需求是学生能打开自己的作品进行演示。教师需在课前确认每位学生至少有一个可运行的作品。
|
||||
|
||||
2. **作品丢失的应对策略：** 如果有学生因为电脑重装、文件删除等原因丢失了所有作品，有三个应对方案：①让学生在路演准备阶段用保底提示词快速生成一个简单作品（5分钟）；②让学生路演自己印象最深的那个作品，用口头描述代替现场演示（"我之前做过一个XX，虽然现在打不开了，但它最酷的地方是……"）；③让学生在路演时专注分享"我的开发经历"而非作品本身。
|
||||
|
||||
3. **计时器的重要性：** 3分钟路演必须严格计时。学生第一次做路演容易超时（通常会讲5-6分钟）。教师需要在2分30秒时举手提醒，3分钟时果断喊停。这不是为了严格，而是训练学生"在有限时间内讲清楚最重要的事"——这本身就是表达力的核心。
|
||||
|
||||
4. **路演顺序的建议：** 建议让比较外向、表达能力较强的学生先上——他们的路演可以给后面的同学做示范、降低紧张感。最紧张的学生放在中间（不是第一个也不是最后一个）。
|
||||
|
||||
5. **评审表的回收与利用：** 课后教师应收回所有评审表做简要统计——哪些学生的创意得分高、哪些学生的完成度得分高、哪些学生的体验得分高。这些数据可用于学期末的能力评估报告。
|
||||
|
||||
**常见问题 FAQ：**
|
||||
|
||||
| 学生问题 | 应对方式 |
|
||||
|---------|---------|
|
||||
| "我不敢上台讲" | "紧张是正常的！记住，台下的同学都在好奇你做了什么，没人在等你犯错。你就对着路演结构卡，一段一段讲就好了。" |
|
||||
| "我的作品Bug很多，演示的时候会出错怎么办" | "演示出Bug完全正常！苹果发布会上都出过Bug。如果出了Bug，你可以说'看，这就是我下一步要修的地方'——把Bug变成故事的一部分。" |
|
||||
| "我不知道怎么给别人打分" | "问自己三个问题：这个想法我以前见过吗？（创意）功能能正常用吗？（完成度）用起来/玩起来感觉怎么样？（体验）然后按感觉打1-5分就行。" |
|
||||
| "我的作品跟别人的比起来太简单了" | "简单不代表不好。猜数字游戏比3D射击游戏简单得多，但猜数字也能做得很有趣。路演的时候讲你的设计思路——为什么选这个、你怎么解决问题的——这些比功能数量重要。" |
|
||||
| "我给别人打了低分，他会不会生气" | "评审表是匿名的，不写评审者名字也可以。而且打分低配上具体的改进建议，对方会感谢你的——因为你帮他看到了可以变更好的地方。" |
|
||||
| "3分钟太短了，我说不完" | "这就是路演的挑战——用最少的时间讲最重要的事。只挑1-2个最亮的功能展示，其他的省略。能在3分钟内讲清楚一件事，比10分钟讲十件事厉害得多。" |
|
||||
|
||||
**课堂风险预案：**
|
||||
|
||||
- **如果AI服务不可用：** 本课几乎不需要AI服务。唯一可能用到的场景是有学生所有作品都丢失需要临时生成——这种情况下，让该学生用口头描述代替现场演示即可。
|
||||
- **如果学生进度差异过大：** 路演本身就是个性化的——每个人展示不同的作品。进度差异体现在路演质量上，这完全可以接受。教师通过提问和串场话术来平衡——对表达能力弱的学生多问引导性问题，帮助他们表达出来。
|
||||
- **如果有学生拒绝上台：** 不要强迫。可以让该学生"坐在座位上讲"而非站到台前，或者让他/她只做30秒的"一句话介绍"而非完整3分钟路演。目标是让每个人都有"展示"的体验，形式可以灵活。
|
||||
- **如果路演时间不够（学生超过8人）：** 方案一：将路演缩短为2分钟 + 30秒问答。方案二：分成两组同时进行（需要两台投影或两个展示区域）。方案三：部分学生在反思环节做简短展示。
|
||||
- **如果评审表反馈质量太低（全是"好棒"）：** 在前2位路演结束后暂停，教师现场示范写一条高质量的建设性反馈并朗读。然后要求后续的评审表必须在"如果能"后面写至少5个字。
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周挑战：30秒电梯演讲**
|
||||
|
||||
**挑战说明：** 今天你做了3分钟路演。现在更难的挑战来了——你能用30秒讲清楚你的作品吗？
|
||||
|
||||
1. 回家后，对着镜子（或者手机录像）练习一段30秒的"电梯演讲"——想象你在电梯里遇到一个人，电梯到站之前你只有30秒时间让他对你的作品感兴趣
|
||||
2. 30秒里只说两件事：**它解决什么问题** + **它最酷的一个功能**
|
||||
3. 把你的30秒演讲录音或录像发到班级群
|
||||
|
||||
**评选标准：**
|
||||
- 30秒以内讲完了吗？
|
||||
- 听完之后你想试试这个作品吗？
|
||||
|
||||
**下节课分享：** 下周课上播放2-3段最精彩的30秒电梯演讲
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**拓展一（推荐）：根据反馈迭代你的作品**
|
||||
|
||||
翻出你今天收到的评审表，选出"最想改的一件事"，打开你的作品，告诉AI帮你修改。
|
||||
|
||||
改完后对比改之前和改之后的效果——拍两张截图发到班级群，配文说"收到同学的反馈后，我改了______，效果对比如下"。
|
||||
|
||||
这就是真正的产品迭代循环：开发 → 路演 → 收集反馈 → 改进 → 下一轮。
|
||||
|
||||
**拓展二（挑战）：给一个你没用过的App写评审**
|
||||
|
||||
下载一个你从来没用过的App（或者玩一个从来没玩过的小游戏），用今天学的三个评审维度给它打分：
|
||||
|
||||
| 维度 | 评分（1-5） | 理由 |
|
||||
|------|------------|------|
|
||||
| 创意（新不新） | | |
|
||||
| 完成度（能不能用） | | |
|
||||
| 体验（好不好用） | | |
|
||||
|
||||
然后写一条建设性反馈："我觉得这个App的______很棒，如果能______会更好"
|
||||
|
||||
把你的评审发到班级群。这个练习训练的是"用审美力的眼光看世界"——以后你看到任何产品，都会自动想"它好在哪里？哪里还能更好？"
|
||||
Reference in New Issue
Block a user