Initial commit from WSL migration
This commit is contained in:
Rocky
567
3-lessons/AICODE-06/旧版本/AICODE06-02 提示词工程进阶 v1.md
Normal file
567
3-lessons/AICODE-06/旧版本/AICODE06-02 提示词工程进阶 v1.md
Normal file
@@ -0,0 +1,567 @@
|
||||
---
|
||||
课时: 2
|
||||
主题: 提示词工程进阶
|
||||
核心能力: [提问力, 拆解力]
|
||||
核心工具: [Trae IDE]
|
||||
时长: 90分钟
|
||||
透明化层级: 结果层
|
||||
适用路线: AICODE-06（有扣子/低代码经验的学生）
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 理解"模糊提示词"和"精确提示词"的本质区别：碰运气 vs 精确控制
|
||||
- 掌握四种编程级提示词技巧：分步编号法、具体化描述、交互描述法、上下文迭代法
|
||||
- 知道单文件 HTML 项目的能力边界（能做什么、不能做什么）
|
||||
|
||||
**能力目标：**
|
||||
- 能将一个模糊的项目想法拆解成 3-5 条有编号的精确指令
|
||||
- 能用"用户做什么→程序做什么"的句式描述交互逻辑
|
||||
- 能在 Trae Builder 中对已有代码进行至少 2 轮有效迭代，而不是每次重新开始
|
||||
- 能独立完成一个自选主题的小项目（游戏/工具/创意页面任选其一）
|
||||
|
||||
**情感目标：**
|
||||
- 体验"说得越具体，AI做得越像我想要的"带来的掌控感
|
||||
- 建立"我是创作者，AI是执行者"的主体意识
|
||||
- 愿意主动拆解复杂需求，而不是依赖"碰运气"
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 概念 | 六年级类比 | 认知层级 |
|
||||
|------|----------|---------|
|
||||
| 分步编号法 | 像菜谱：第一步切菜，第二步热油，每步只做一件事 | 理解层 |
|
||||
| 具体化描述 | 不说"好看的衣服"，说"红色圆领T恤" | 理解层 |
|
||||
| 交互描述法 | "你按开关→灯亮了"的因果描述 | 应用层 |
|
||||
| 上下文迭代法 | 像跟朋友聊天接着说，不是每次重新自我介绍 | 应用层 |
|
||||
| 能力边界 | 知道这个工具能做什么、不能做什么 | 理解层 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | "提示词写得越长越好" | 长不等于精确，关键是结构清晰、每句话只说一件事 | 展示又长又乱 vs 简短但结构清晰的提示词效果对比 |
|
||||
| M2 | "AI看得懂我的意思，不用说那么细" | AI没有读心术，只能按字面意思执行 | 用"做个好看的游戏"实验，看AI的随机发挥 |
|
||||
| M3 | "每次想改都要重新发一遍所有要求" | 可以在已有对话基础上追加修改，AI记得上下文 | 演示"重新来" vs "追加修改"的效率差异 |
|
||||
| M4 | "我想做什么AI就能做什么" | 单文件HTML有明确的能力边界 | 展示"能做/不能做"清单 |
|
||||
| M5 | "提示词技巧是语文课，和编程没关系" | 提示词的"1.2.3.步骤"和代码的顺序执行是同一个逻辑 | 类比提示词结构和程序执行逻辑 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- Trae IDE（已安装，版本与第1课一致）
|
||||
- Chrome 浏览器
|
||||
- 每人一台电脑，Win10，8GB RAM
|
||||
- 教师机连接投影
|
||||
|
||||
**教学资源：**
|
||||
- 教师准备：2个对比演示文件（模糊提示词 vs 精确提示词生成的同主题项目）
|
||||
- 教师准备：3个"卡住时的救场提示词"（见第5章）
|
||||
- 教师准备："能做/不能做"能力边界清单（见第6章，建议投影展示）
|
||||
- 学生资源：无需提前准备
|
||||
|
||||
**教师备课体验任务：**
|
||||
> 备课前，教师必须亲自完成以下操作：
|
||||
> 1. 用"做个好玩的游戏"在 Trae Builder 生成一次，截图保存结果（演示 demo-bad）
|
||||
> 2. 用分步编号法写一段精确提示词，生成同主题游戏，截图保存（演示 demo-good）
|
||||
> 3. 尝试在已有对话中用"追加修改"而不是"重新开始"进行迭代
|
||||
> 4. 确认"能做/不能做"清单中的每一条都亲自验证过
|
||||
> 5. 准备至少3个"卡住时的救场提示词"并验证可用
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
---
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟**
|
||||
|
||||
*本幕目标：激活第1课经验，用对比实验制造认知冲突，引出"精确提示词"的必要性*
|
||||
|
||||
**上节课回顾 + 情景导入 (10分钟)**
|
||||
|
||||
**师：** 同学们，上节课我们用 Trae 做了第一个项目。还记得那种感觉吗？你们说，AI帮你做出来的东西，每次都是你想要的那个样子吗？
|
||||
|
||||
**生：** （预期：有时候是/有时候差一点/跟我想的不一样）
|
||||
|
||||
**师：** 对！这就是今天要解决的问题。来，看这两个东西。
|
||||
|
||||
（投影展示教师课前用模糊提示词生成的结果）
|
||||
|
||||
**师：** 这是我昨天告诉AI——"帮我做一个好玩的游戏"——生成的。大家觉得怎么样？
|
||||
|
||||
**生：** （预期：有点奇怪/看不懂在玩什么/颜色好丑）
|
||||
|
||||
（投影切换，展示精确提示词生成的同主题结果）
|
||||
|
||||
**师：** 这也是我昨天生成的，同一个主题。区别只是我换了一种"说法"。差距大吗？
|
||||
|
||||
**生：** （预期：这个好多了！/看起来像真的游戏！）
|
||||
|
||||
**师：** 所以今天这节课，我们只做一件事——学会怎么"说清楚"。**说得越清楚，AI做得越像你想要的。** 这件事有个专业名字，叫做**提示词工程**。别被名字吓到，就是"好好说话的艺术"。【诊断点：学生是否能说出第1课遇到过的"AI没做对"的经历】【理解层】
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟**
|
||||
|
||||
---
|
||||
|
||||
**【分段一：四个秘密武器】(20分钟)**
|
||||
|
||||
*本段重点：传授四种编程级提示词技巧，建立"结构化表达"的意识*
|
||||
|
||||
**讲解与演示 (12分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M1: 提示词写得越长越好
|
||||
- M2: AI看得懂我的意思
|
||||
|
||||
**师：** 好，现在我来教你们四个"说清楚"的秘密武器。不用背，一会儿你们要用它们做项目。
|
||||
|
||||
**武器一：分步编号法**
|
||||
|
||||
**师：** 第一个武器叫**分步编号法**。把你想要的东西列成1、2、3、4步，每步只说一件事。
|
||||
|
||||
（投影展示对比）
|
||||
|
||||
```
|
||||
❌ 模糊版：帮我做一个猜数字游戏，要好玩一点
|
||||
|
||||
✅ 精确版：
|
||||
帮我做一个猜数字游戏，要求如下：
|
||||
1. 页面背景是深蓝色
|
||||
2. 游戏随机生成一个1到100之间的数字
|
||||
3. 玩家在输入框里输入猜测，点击"猜一猜"按钮提交
|
||||
4. 如果猜大了，显示红色文字"猜大了！"
|
||||
5. 如果猜小了，显示蓝色文字"猜小了！"
|
||||
6. 猜对了，显示撒花动画，告诉玩家用了几次猜到
|
||||
```
|
||||
|
||||
**师：** 精确版有几条？
|
||||
|
||||
**生：** 六条。
|
||||
|
||||
**师：** 对。每一条只说一件事。AI按照1、2、3的顺序做，就不会漏掉细节。这跟写代码的逻辑一样——代码也是一步一步执行的。
|
||||
|
||||
**武器二：具体化描述**
|
||||
|
||||
**师：** 第二个武器叫**具体化描述**。凡是你用了"好看的""大的""漂亮的"这种词，AI都会自己猜——猜的不一定是你想要的。
|
||||
|
||||
（投影展示）
|
||||
|
||||
```
|
||||
❌ 模糊版：按钮要好看一点，大一点
|
||||
|
||||
✅ 精确版：按钮颜色是橙色，大小大概是"确认"这两个字的三倍宽，
|
||||
字体要比正文大一圈，有圆角
|
||||
```
|
||||
|
||||
**师：** 记住一个原则：**颜色说色名，大小打比方**。AI能理解"大概是XX的三倍"这种比喻，比"大一点"精确多了。
|
||||
|
||||
**武器三：交互描述法**
|
||||
|
||||
**师：** 第三个武器叫**交互描述法**。当你的项目有互动时——比如点按钮会发生什么——按照"**用户做什么→程序做什么**"来描述。
|
||||
|
||||
（投影展示）
|
||||
|
||||
```
|
||||
❌ 模糊版：点击按钮要有反应
|
||||
|
||||
✅ 精确版：
|
||||
- 用户点击"开始"按钮→倒计时从10开始，每秒减1，显示在屏幕中央
|
||||
- 用户点击"暂停"按钮→倒计时停止，按钮文字变成"继续"
|
||||
- 倒计时归零→播放红色闪烁效果，显示"时间到！"
|
||||
```
|
||||
|
||||
**师：** 注意这个箭头"→"，左边是"用户做什么"，右边是"程序做什么"。记住这个箭头，特别好用。
|
||||
|
||||
**武器四：上下文迭代法**
|
||||
|
||||
**师：** 第四个武器叫**上下文迭代法**。最简单——当AI已经做了一部分，你想改或加东西，**不要重新开始**，直接在对话里追加。
|
||||
|
||||
（投影展示）
|
||||
|
||||
```
|
||||
❌ 错误做法：重新发一段超长提示词，把所有要求再写一遍
|
||||
|
||||
✅ 正确做法：
|
||||
[第一轮] 帮我做一个猜数字游戏（基础版）
|
||||
[第二轮] 很好！现在在页面顶部加一个分数显示，每次猜对加10分
|
||||
[第三轮] 把背景颜色改成星空主题，有几个会动的小星星
|
||||
```
|
||||
|
||||
**师：** AI记得你们的对话历史，它知道你们在做什么。你只需要告诉它"改这里""加这个"就行。就像让朋友帮你画画，画好了你说"加一朵云"——不需要让他重新画。
|
||||
|
||||
**学生实践 (5分钟):**
|
||||
|
||||
**师：** 四个武器都讲完了。现在投影上有这四个武器的速查表，等一下做项目随时可以看。我们先做一个小练习——
|
||||
|
||||
（投影展示一段模糊提示词）
|
||||
|
||||
```
|
||||
帮我做一个倒计时器，好看一点，能用的
|
||||
```
|
||||
|
||||
**师：** 谁能用今天学的武器，把这段话改成精确版？
|
||||
|
||||
（请2-3个学生口头改写，教师在投影上实时记录，引导补充）
|
||||
|
||||
**进度同步 (3分钟):**
|
||||
|
||||
**师：** 大家注意刚才的改写过程——从一句模糊的话变成5-6条具体指令。这就是今天最核心的能力。
|
||||
|
||||
【诊断点：学生能否用交互描述法中的"→"来描述一个交互】【理解层】
|
||||
|
||||
---
|
||||
|
||||
**【分段二：选项目 + 能力边界确认】(10分钟)**
|
||||
|
||||
*本段重点：学生自选项目方向，教师快速判断可行性，明确"能做/不能做"*
|
||||
|
||||
**讲解与演示 (5分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M4: 我想做什么AI就能做什么
|
||||
|
||||
**师：** 在你们开始做项目之前，我要先告诉你们一个很重要的事——我们今天能做什么，不能做什么。
|
||||
|
||||
（投影展示能力边界清单）
|
||||
|
||||
```
|
||||
✅ 今天能做的：
|
||||
各种小游戏（猜数字、打地鼠、打飞机、记忆翻牌、贪吃蛇……）
|
||||
工具类（计算器、倒计时器、秒表、单位换算……）
|
||||
创意页面（互动贺卡、选择冒险故事、趣味测验、表情包生成器……）
|
||||
动画效果（粒子动画、烟花、下雪、流星……）
|
||||
|
||||
⚠️ 有风险的：
|
||||
需要联网查数据的（查天气、查快递——本地文件无法联网）
|
||||
需要保存数据的（关浏览器数据就没了——能接受就没问题）
|
||||
|
||||
❌ 今天做不了的：
|
||||
手机App / 多人实时联机对战 / 微信小程序
|
||||
真正的AI对话功能（需要API密钥）
|
||||
```
|
||||
|
||||
**师：** 看到这个清单，谁已经有想法了？
|
||||
|
||||
**学生实践 (3分钟):**
|
||||
|
||||
**师：** 每个人在心里确定一个项目想法，想好了举手告诉我，我帮你判断能不能做。
|
||||
|
||||
（教师快速巡场，针对学生想法做快速判断）
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 大家基本都有方向了。记住：今天的目标不是做出"完美作品"，而是练习用**精确提示词**来做。做出来能玩，比做出来好看更重要。
|
||||
|
||||
【诊断点：学生提出的项目想法是否在能力边界内】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**【分段三：对比实验——坏提示词 vs 好提示词】(10分钟)**
|
||||
|
||||
*本段重点：学生亲自体验模糊vs精确的差距，建立"提示词质量决定结果质量"的认知*
|
||||
|
||||
**讲解与演示 (2分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M2: AI看得懂我的意思
|
||||
|
||||
**师：** 现在每个人打开Trae，新建一个项目文件夹。第一步，我要你们做一件反常的事——先用**模糊提示词**来问AI，越随意越好。
|
||||
|
||||
**学生实践 (6分钟):**
|
||||
|
||||
（学生用一句话模糊描述自己的项目，等AI生成约2分钟）
|
||||
|
||||
**师：** 生成出来了，先不要Accept，看看——和你想象的一样吗？
|
||||
|
||||
**生：** （预期：各种反应——差不多/完全不一样/不知道这是什么）
|
||||
|
||||
**师：** 记住你现在的感受。现在，不要Accept。我们用今天学的四个武器，写一段**精确提示词**，重新告诉AI你想要什么。至少用两个武器。
|
||||
|
||||
（给学生5分钟重写，教师巡场辅助，鼓励使用分步编号法和交互描述法）
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 比较一下两次的结果，感觉怎么样？
|
||||
|
||||
**生：** （预期：第二次更像我想要的！/细节多很多！/原来写清楚真的有用！）
|
||||
|
||||
**师：** 这就是今天最重要的发现——**说得越具体，AI做得越像你想要的**。好，现在Accept第二次的代码，我们继续。
|
||||
|
||||
【诊断点：学生写的精确提示词是否包含至少一个交互描述（"用户做X→程序做Y"）】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**【分段四：自由创作 + 上下文迭代】(25分钟)**
|
||||
|
||||
*本段重点：学生自由创作自选项目，练习上下文迭代（至少2轮追加修改）*
|
||||
|
||||
**讲解与演示 (2分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M3: 每次想改都要重新来
|
||||
- M5: 做不出来就放弃
|
||||
|
||||
**师：** 接下来是今天最重要的时间——你们自己做项目。规则只有三条：
|
||||
|
||||
1. 每次发提示词，至少用一个"秘密武器"
|
||||
2. 做出基础版后，必须做**至少两轮迭代**（追加修改，不要重新开始）
|
||||
3. 做完了要能在浏览器里给我演示
|
||||
|
||||
**学生实践 (21分钟):**
|
||||
|
||||
（学生开始自由创作，教师持续巡场）
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 是否有学生在重新发送完整提示词而不是追加修改 → 提醒使用上下文迭代法
|
||||
- 是否有学生提示词太模糊 → 帮助用分步编号法改写
|
||||
- 是否有学生陷入"做不出来"的挫败感 → 使用第5章的救场提示词
|
||||
- 是否有学生做得特别好 → 邀请他们准备在反思幕分享
|
||||
|
||||
**快学生应对：** 做完基础版+2轮迭代后，尝试在Chat模式问AI"这段代码里哪一部分控制颜色"——预习下下课的代码审查概念。
|
||||
|
||||
**慢学生应对：** 如果10分钟还没有产出，教师提供保底提示词：
|
||||
|
||||
```
|
||||
帮我做一个猜数字游戏：
|
||||
1. 电脑随机一个1-100的数字
|
||||
2. 玩家输入猜的数字，点"猜"按钮
|
||||
3. 猜大了显示红色"太大了"，猜小了显示蓝色"太小了"
|
||||
4. 猜对了显示"恭喜你！用了X次猜对了"
|
||||
5. 有"重新开始"按钮
|
||||
6. 深色背景，按钮是圆角橙色
|
||||
所有代码放在单个 index.html 文件中。
|
||||
```
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 还有大约5分钟。每个人要有一个"能在浏览器里打开、能演示基本功能"的版本。还没到这个状态的同学，先做最核心的功能，样式美化可以课后继续。
|
||||
|
||||
【诊断点：学生是否完成了至少2轮有效迭代，且迭代是"追加修改"而非"重新开始"】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟**
|
||||
|
||||
*本幕目标：展示成果，巩固"精确提示词→好结果"的认知*
|
||||
|
||||
**成果展示 (6分钟)**
|
||||
|
||||
**师：** 谁来分享？规则是告诉大家三件事：
|
||||
1. 你做的是什么
|
||||
2. 你用了哪个秘密武器
|
||||
3. 你发现了什么
|
||||
|
||||
（邀请2-3名学生展示，每人2分钟。尽量选不同方向——游戏、工具、创意页面各一个）
|
||||
|
||||
**互评与讨论 (4分钟)**
|
||||
|
||||
**师：** 看完了同学们的作品。最后一个问题——今天和上节课相比，你对Trae的掌控感有没有变化？
|
||||
|
||||
**生：** （预期：变多了/知道怎么说了/交互描述还不太会）
|
||||
|
||||
**师：** 核心发现总结：
|
||||
- AI不是神，它只能按你说的做
|
||||
- 你说得越具体，它做得越对
|
||||
- 迭代比重新来更高效
|
||||
- 提示词的结构 = 程序的逻辑
|
||||
|
||||
【诊断点：学生是否能说出自己用了哪种技巧，以及它解决了什么问题】【理解层】
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟**
|
||||
|
||||
*本幕目标：布置迭代作业，预告下节课*
|
||||
|
||||
**抽象总结 (3分钟)**
|
||||
|
||||
**师：** 今天学的四个武器，帮你从"碰运气"升级成了"精确控制"：
|
||||
|
||||
（板书/投屏）
|
||||
|
||||
```
|
||||
四个秘密武器：
|
||||
① 分步编号法：1、2、3、4，每步一件事
|
||||
② 具体化描述：颜色说色名，大小打比方
|
||||
③ 交互描述法：用户做什么→程序做什么
|
||||
④ 上下文迭代法：不重新来，接着说
|
||||
```
|
||||
|
||||
**师：** 记住今天最重要的一句话——**你说得越清楚，AI就越听话**。
|
||||
|
||||
**5分钟挑战发布 + 下节预告 (2分钟)**
|
||||
|
||||
**师：** 本周课外小挑战：
|
||||
|
||||
> **5分钟AI挑战：给你的项目加一个新功能**
|
||||
> 回家后打开今天的项目文件夹，在Trae里继续做一轮迭代。
|
||||
> 用"交互描述法"加一个新的互动功能。
|
||||
> 把迭代用的提示词截图保存，下节课带来分享。
|
||||
>
|
||||
> **评价标准：**
|
||||
> - 基础：完成一轮迭代，新功能能运行
|
||||
> - 进阶：提示词使用了交互描述法（有"→"）
|
||||
> - 挑战：对比改前改后截图，能说出提示词哪里可以更具体
|
||||
|
||||
**师：** 下节课我们做一个更完整的作品——从"小片段"升级到"拿得出手的完整产品"。今天的项目文件夹保留好，下节课还要用！
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师提示词模板（课前准备演示用）：**
|
||||
|
||||
```
|
||||
模糊版提示词（用于演示"坏提示词"）：
|
||||
帮我做一个好玩的游戏
|
||||
|
||||
精确版提示词（用于演示"好提示词"）：
|
||||
帮我做一个猜数字游戏，要求如下：
|
||||
1. 页面背景是深蓝色（#1a1a2e），标题"猜数字游戏"居中显示，白色大字
|
||||
2. 游戏开始时随机生成一个1到100之间的整数
|
||||
3. 页面中央有白色输入框让玩家输入猜测，旁边是橙色的"猜一猜"按钮
|
||||
4. 用户点击按钮→如果猜大了，显示红色文字"猜大了！再小一点"
|
||||
5. 用户点击按钮→如果猜小了，显示蓝色文字"猜小了！再大一点"
|
||||
6. 猜对了→页面出现金色撒花动画，显示"恭喜！你用了X次猜到了！"和"再来一局"按钮
|
||||
所有代码放在单个 index.html 文件中，内联CSS和JS。
|
||||
```
|
||||
|
||||
**课堂救场提示词（学生卡住时使用）：**
|
||||
|
||||
```
|
||||
情况1：学生页面一片空白
|
||||
→ 检查一下代码，页面显示空白的原因，把问题修复好
|
||||
|
||||
情况2：按钮点击没反应
|
||||
→ 检查按钮的点击事件，确保点击后能正确执行并显示结果
|
||||
|
||||
情况3：学生想加功能但不知道怎么说
|
||||
→ 教师帮学生用"交互描述法"口述，学生自己打字发送
|
||||
```
|
||||
|
||||
**学生提示词模板（参考）：**
|
||||
|
||||
模板A：游戏类（分步编号法）
|
||||
```
|
||||
帮我做一个[游戏名称]，要求如下：
|
||||
1. 页面背景颜色是[颜色]，标题是[标题文字]
|
||||
2. [游戏核心规则，一句话说清楚]
|
||||
3. [用户看到的主要界面元素：按钮/输入框/显示区]
|
||||
4. 用户[做什么操作]→程序[显示/发生什么]
|
||||
5. 用户[做什么操作]→程序[显示/发生什么]
|
||||
6. [特别效果，如动画/颜色变化]
|
||||
所有代码放在单个 index.html 文件中，内联CSS和JS。
|
||||
```
|
||||
|
||||
模板B：工具类（具体化描述法）
|
||||
```
|
||||
帮我做一个[工具名称]，要求如下：
|
||||
1. 页面整体风格：[简洁白色/科技感黑色/活泼彩色]
|
||||
2. 主要功能：[用户输入什么，得到什么结果]
|
||||
3. 界面元素：
|
||||
- 输入区域：[输入框或滑块]
|
||||
- 操作按钮：[颜色]的按钮，文字是[按钮文字]
|
||||
- 结果显示区：[在哪显示、字体大小/颜色]
|
||||
4. 用户点击按钮→[计算/处理]→显示[结果]
|
||||
所有代码放在单个 index.html 文件中，内联CSS和JS。
|
||||
```
|
||||
|
||||
模板C：迭代追加（上下文迭代法）
|
||||
```
|
||||
第一轮迭代：在刚才做好的基础上，增加一个功能：[新功能描述]
|
||||
第二轮迭代：保持其他不变，把[某元素]的颜色改成[颜色]，大小改成[描述]
|
||||
修复用语：页面有个问题：[描述问题]。请检查并修复，其他部分保持不变。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**技术备注（教师备课知识补充）：**
|
||||
|
||||
1. **Trae Builder 的上下文限制**：单次对话超过10轮后，生成质量可能下降。建议学生新开Builder对话，但把当前 index.html 代码粘贴给AI作为起点。
|
||||
2. **浏览器缓存问题**：学生说"改了代码但浏览器没变"时，让他们按 Ctrl+Shift+R 强制刷新。
|
||||
3. **中文字符问题**：如代码中有中文显示乱码，在提示词中加"在HTML head中加入 meta charset=UTF-8"。
|
||||
4. **Accept机制提醒**：AI展示的代码预览不等于已保存，必须点Accept才生效。
|
||||
|
||||
**能力边界 FAQ（教师快速判断用）：**
|
||||
|
||||
| 学生想法 | 判断 | 应对策略 |
|
||||
|---------|------|---------|
|
||||
| 打地鼠游戏 | ✅ 完全可以 | 引导用游戏模板 |
|
||||
| 贪吃蛇 | ✅ 可以 | 稍复杂，建议先做基础版再迭代 |
|
||||
| 计算器 | ✅ 完全可以 | 适合用工具模板 |
|
||||
| 倒计时炸弹 | ✅ 完全可以 | 交互描述法的好例子 |
|
||||
| 选择冒险故事 | ✅ 完全可以 | 关闭浏览器数据就没了，能接受就行 |
|
||||
| 查实时天气 | ❌ 本地文件无法联网 | 改为"输入城市名，随机生成有趣的天气预报" |
|
||||
| 多人联机对战 | ❌ 需要服务器 | 改为"双人本地对战"（两人共用一台电脑） |
|
||||
| 做微信机器人 | ❌ 完全不行 | 引导改为"有趣问答测验页面" |
|
||||
| 画图工具 | ✅ 可以用Canvas | 建议只做"点击涂色"而非完整绘图板 |
|
||||
| 音乐播放器 | ⚠️ 有限制 | 可做界面，本地音频路径可能有问题 |
|
||||
| 登录系统 | ❌ 需要后端 | 改为"假登录页面，任何密码都能进" |
|
||||
|
||||
**课堂节奏应急预案：**
|
||||
|
||||
- **大多数人10分钟还没开始**：教师投影上实时示范一次"模板填写"，用学生说的项目想法当例子
|
||||
- **个别学生超前完成**：给拓展任务，或请他们帮助旁边同学
|
||||
- **AI生成速度很慢**：让等待的学生先在纸上写好下一轮迭代的提示词
|
||||
- **有学生做出意外精彩的东西**：立即请他展示，引导全班关注"他的提示词写了什么"
|
||||
|
||||
**备课体验任务清单：**
|
||||
|
||||
- [ ] 用"做个好玩的游戏"生成一次，截图保存（demo-bad）
|
||||
- [ ] 用精确版生成同主题游戏，截图保存（demo-good）
|
||||
- [ ] 完整体验"上下文迭代"流程，做至少3轮迭代
|
||||
- [ ] 尝试学生最常选的3种项目类型（游戏/工具/故事），确认能正常生成
|
||||
- [ ] 验证"能做/不能做"清单中的边界案例
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周任务：**
|
||||
|
||||
> **"给你的项目加一个新功能"**
|
||||
>
|
||||
> **操作步骤：**
|
||||
> 1. 打开今天课上保存的项目文件夹
|
||||
> 2. 在 Trae Builder 里，不要开新对话（或把代码粘贴到新对话里）
|
||||
> 3. 用"交互描述法"写一条提示词：`用户[做什么]→程序[做什么]`
|
||||
> 4. Accept代码，在浏览器中验证新功能
|
||||
> 5. 截图保存（提示词截图 + 效果截图）
|
||||
>
|
||||
> **评价标准：**
|
||||
> - 基础：完成一轮迭代，新功能能运行
|
||||
> - 进阶：提示词使用了"用户→程序"的交互描述格式
|
||||
> - 挑战：对比改前改后截图，能说出提示词哪里可以更具体
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**进阶挑战（适合学有余力的学生）：**
|
||||
|
||||
**挑战一：提示词翻译官**
|
||||
> 下面有一段"烂提示词"，改写成"精确提示词"，然后用两个版本都在Trae里生成一次，截图对比。
|
||||
>
|
||||
> 原始烂提示词：`做一个好玩的测验，主题是动物，要有图，好看一点，有互动`
|
||||
>
|
||||
> 改写要求：至少4条编号、至少2个具体颜色、至少2个"用户→程序"交互描述。
|
||||
|
||||
**挑战二：帮同学加功能**
|
||||
> 找班里一个同学的项目，帮他写一段迭代提示词，加一个他没想到的新功能。用"上下文迭代法"的格式。
|
||||
|
||||
**挑战三：提示词说明书**
|
||||
> 为你今天的项目写一份"提示词说明书"，记录每一轮提示词和对应结果：
|
||||
> - 第一轮提示词 → 满意/不满意，原因
|
||||
> - 第二轮提示词 → 满意/不满意，原因
|
||||
> - 总结：我学到了什么
|
||||
540
3-lessons/AICODE-06/旧版本/AICODE06-03 我的第一个Web作品 v1.md
Normal file
540
3-lessons/AICODE-06/旧版本/AICODE06-03 我的第一个Web作品 v1.md
Normal file
@@ -0,0 +1,540 @@
|
||||
---
|
||||
课时: 3
|
||||
主题: 我的第一个Web作品
|
||||
核心能力: [拆解力, 审美力]
|
||||
核心工具: [Trae IDE]
|
||||
时长: 90分钟
|
||||
透明化层级: 结果层
|
||||
适用路线: AICODE-06（有扣子/低代码经验的学生）
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 理解"完整作品"和"半成品"的区别：有核心功能、有交互反馈、有视觉设计
|
||||
- 掌握需求拆解的基本方法：把一个大想法拆成"核心功能→交互细节→视觉美化"三层
|
||||
- 了解多轮迭代的工作节奏：每一轮都有明确目标，而不是随机修改
|
||||
|
||||
**能力目标：**
|
||||
- 能用自己的语言描述"我要做什么"，并拆解成至少3个可操作的步骤
|
||||
- 能完成三轮迭代：第一轮出基础功能，第二轮修问题加功能，第三轮美化打磨
|
||||
- 能用已学的提示词技巧（分步编号法、具体化描述、交互描述法）驱动AI完成一个完整项目
|
||||
|
||||
**情感目标：**
|
||||
- 体验从"想法"到"作品"的完整创作过程，建立"我能做出真正的东西"的自信
|
||||
- 感受自己的作品和别人的作品都是独一无二的
|
||||
- 培养"产品思维"：先想清楚要什么，再让AI帮你做
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 概念 | 六年级类比 | 认知层级 |
|
||||
|------|----------|---------|
|
||||
| 完整作品 vs 半成品 | 像装修房子：只刷了墙 vs 家具灯具全装好了 | 理解层 |
|
||||
| 需求拆解 | 像做菜前先列采购清单：必须买的/最好有的/以后再买的 | 应用层 |
|
||||
| 三轮迭代 | 像画画：先画轮廓→再上色→最后加细节 | 应用层 |
|
||||
| 产品思维 | 先想清楚"做给谁用""解决什么问题"，再动手做 | 分析层 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | "一句话就能做出完整作品" | 越具体、越分步，AI做出来的东西越符合想法 | 展示模糊vs拆解后的结果对比 |
|
||||
| M2 | "AI第一次就能做对" | 第一轮有问题是正常的，迭代才是真正的工作方式 | 教师故意展示自己第一轮有问题的结果 |
|
||||
| M3 | "好看比能用更重要" | 先让功能跑起来，再谈美化 | 强调三轮顺序：功能第一，美化最后 |
|
||||
| M4 | "改一个地方不会影响其他" | 修改时要告诉AI"保留原有功能，只修改XX" | 演示不说"保留"时AI可能改掉好的部分 |
|
||||
| M5 | "做得复杂才厉害" | 一个功能做好比十个功能做烂更有价值 | 引导用"必须有/最好有/以后再加"筛选 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- Trae IDE（已安装并登录）
|
||||
- Chrome 浏览器
|
||||
- 每人一台电脑，Win10，8GB RAM
|
||||
- 教师机连接投影
|
||||
|
||||
**教学资源：**
|
||||
- 教师准备：`demo_bad.html`——一个"半成品"（功能能跑但没样式、按钮很丑、没分数显示）
|
||||
- 教师准备：`demo_good.html`——同一项目的"完整版"（好看界面、完整功能、结束画面）
|
||||
- 教师准备：`demo_sample.html`——另一个方向的完整作品（展示多样性，如番茄钟或问答）
|
||||
- 需求拆解工作纸（三栏：必须有 / 最好有 / 以后再加）——投影展示即可
|
||||
- 学生资源：无需提前准备
|
||||
|
||||
**教师备课体验任务：**
|
||||
> 备课前，教师必须亲自完成以下操作：
|
||||
> 1. 用 Trae 完整做一遍 `demo_good.html`，记录用了几轮迭代、遇到了什么问题
|
||||
> 2. 故意写模糊提示词（如"帮我做个游戏"），感受AI随机发挥的结果
|
||||
> 3. 测试"保留原有功能，只修改XX"这类提示词是否有效
|
||||
> 4. 预想5种学生可能选的项目，各想一下第一轮提示词怎么写
|
||||
> 5. 确认所有演示文件在Chrome中能正常运行
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
---
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟**
|
||||
|
||||
*本幕目标：用"半成品vs完整作品"的对比，建立"完整度"的评判标准*
|
||||
|
||||
**情景导入 (10分钟)**
|
||||
|
||||
教师先打开 `demo_bad.html`，投影给全班看，不做任何解释，直接操作。
|
||||
|
||||
**师：** 同学们，看，这是一个用AI做出来的网页小游戏。（演示操作）能玩吗？
|
||||
|
||||
**生：** 能玩。/ 能用。
|
||||
|
||||
**师：** 那它算"做完了"吗？
|
||||
|
||||
（停顿3秒）
|
||||
|
||||
**生：** （预期：好像做完了？/感觉还差点什么/太丑了）
|
||||
|
||||
**师：** 从1到10，你会打几分？
|
||||
|
||||
（收集几个分数）
|
||||
|
||||
**师：** 好，现在看这个。
|
||||
|
||||
（打开 `demo_good.html`，同样的操作）
|
||||
|
||||
**师：** 也是同一个游戏，也是AI做的。有什么不一样？
|
||||
|
||||
**生：** （预期：好看多了/有分数了/有颜色了/像真的游戏）
|
||||
|
||||
**师：** 这两个的区别，不是"AI更厉害了"，而是做这个的人多做了两件事：第一，把**功能做完整**；第二，把**样子打磨好**。今天我们要做的，就是从"能用"走到"**拿得出手**"。
|
||||
|
||||
（打开 `demo_sample.html`）
|
||||
|
||||
**师：** 还有——今天每个人做的东西都不一样。这是另一个方向的作品。你们的作品都会是独一无二的。【诊断点：学生是否理解"半成品"和"完整作品"的差距不在AI能力，而在人的要求和打磨】【理解层】
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟**
|
||||
|
||||
---
|
||||
|
||||
**【分段一：选方向 + 需求拆解】(15分钟)**
|
||||
|
||||
*本段重点：学生确定项目方向，学会用"三栏拆解法"把大想法变成可执行步骤*
|
||||
|
||||
**讲解与演示 (7分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M1: 一句话就能做出完整作品
|
||||
- M5: 做得复杂才厉害
|
||||
|
||||
**师：** 现在你要做一个决定：你的作品是什么？这里有6个方向参考，但不是限制——你可以选别的。
|
||||
|
||||
（投影展示项目方向卡）
|
||||
|
||||
| 方向 | 一些例子 |
|
||||
|------|---------|
|
||||
| 互动游戏 | 打地鼠、记忆翻牌、反应速度测试、太空射击 |
|
||||
| 实用工具 | 番茄计时器、随机分组器、班级点名器、成绩计算器 |
|
||||
| 创意展示 | 个人介绍页、班级纪念册、互动故事书 |
|
||||
| 学科应用 | 数学闯关、英语单词卡、科学小百科 |
|
||||
| 趣味测试 | 性格测试、知识问答、今日运势生成器 |
|
||||
| 艺术创意 | 画板工具、音乐节拍器、彩色文字生成器 |
|
||||
|
||||
**师：** 方向选好之后，最重要的一步——**需求拆解**。
|
||||
|
||||
（投影展示三栏表格）
|
||||
|
||||
```
|
||||
我要做的东西：_______________
|
||||
|
||||
必须有（没有它就不算完成）：
|
||||
1.
|
||||
2.
|
||||
3.
|
||||
|
||||
最好有（有了更好，没有也行）：
|
||||
1.
|
||||
2.
|
||||
|
||||
以后再加（今天先不做）：
|
||||
1.
|
||||
```
|
||||
|
||||
**师：** 比如我要做一个"反应速度测试"。必须有什么？
|
||||
|
||||
**生：** （预期：一个按钮/计时/显示成绩）
|
||||
|
||||
**师：** 对！按钮出现→你点击→告诉你反应了多少毫秒——这三件事缺一个都不行，这就是"必须有"。"最好有"呢？
|
||||
|
||||
**生：** （预期：历史记录/排名/好看的颜色）
|
||||
|
||||
**师：** "以后再加"呢？
|
||||
|
||||
**生：** （预期：多人对战/换主题）
|
||||
|
||||
**师：** 你看，一句"做个反应测试"拆成了三层。现在你知道今天做什么、做到什么程度了。
|
||||
|
||||
**学生实践 (5分钟):**
|
||||
|
||||
学生独立填写需求拆解（可以在纸上或脑子里）。
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 想法太大（如"做个RPG游戏"）→ 引导缩小范围
|
||||
- 想法太模糊（如"做个好玩的东西"）→ 追问"好玩体现在哪里"
|
||||
- 想法超出边界 → 参考教师指南的可行性清单
|
||||
|
||||
**进度同步 (3分钟):**
|
||||
|
||||
**师：** 谁来说一下你要做什么，以及你的"必须有"？
|
||||
|
||||
（抽2-3人回答，给简短正面反馈）
|
||||
|
||||
**师：** 好，现在开始动手。第一轮目标——把"必须有"的功能做出来，**先不管好不好看**。
|
||||
|
||||
【诊断点：学生能否区分"必须有"和"最好有"】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**【分段二：第一轮迭代——把核心功能跑起来】(20分钟)**
|
||||
|
||||
*本段重点：用分步编号法写第一轮提示词，生成基础版，验证核心功能*
|
||||
|
||||
**讲解与演示 (3分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M3: 好看比能用更重要
|
||||
|
||||
**师：** 第一轮的目标只有一个：**核心功能能跑**。记得第2课的分步编号法。
|
||||
|
||||
（投影展示第一轮提示词模板）
|
||||
|
||||
```
|
||||
我要做一个[项目名称]，请帮我创建一个完整的 index.html 文件，
|
||||
内联所有CSS和JS，不需要外部文件。
|
||||
|
||||
功能要求：
|
||||
1. [核心功能1]
|
||||
2. [核心功能2]
|
||||
3. [核心功能3]
|
||||
|
||||
现在先实现基本功能，样式之后再改。
|
||||
```
|
||||
|
||||
**师：** 注意最后这句话："现在先实现基本功能，样式之后再改。"这是在帮你控制AI，让它先做最重要的事。
|
||||
|
||||
**学生实践 (15分钟):**
|
||||
|
||||
学生写第一轮提示词，在Builder中发送，Accept后在浏览器中测试。
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- AI给了代码但不知道怎么看效果 → 提醒保存为index.html，用Chrome打开
|
||||
- AI只给了一部分代码 → 追问"请给出完整的index.html，把CSS和JS都包含在里面"
|
||||
- 功能跑不了 → 让学生告诉AI"运行之后[具体问题]，请检查并修复"
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 核心功能跑起来的举手！哪怕很丑，只要功能能用就算过关。
|
||||
|
||||
（统计人数）
|
||||
|
||||
**师：** 跑起来的同学，先不要改颜色字体，先看看功能上有没有问题。没跑起来的同学，把问题告诉AI让它帮你修。
|
||||
|
||||
【诊断点：学生是否能写出包含分步编号的有效第一轮提示词】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**【分段三：第二轮迭代——修问题 + 加功能】(15分钟)**
|
||||
|
||||
*本段重点：在原对话基础上修复bug、添加"最好有"的功能，练习上下文迭代*
|
||||
|
||||
**讲解与演示 (3分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M4: 改一个地方不会影响其他
|
||||
|
||||
**师：** 记得第2课的上下文管理吗？现在特别重要——不要开新对话，在原来的对话里继续。
|
||||
|
||||
（投影展示第二轮提示词格式）
|
||||
|
||||
```
|
||||
保留原有的[主要功能]，在此基础上：
|
||||
1. 修复：[具体问题，如"点击开始按钮后没反应"]
|
||||
2. 增加：[从"最好有"里选的新功能]
|
||||
```
|
||||
|
||||
**师：** 为什么要说"保留原有的XX"？因为AI不知道你在乎什么，如果你不说，它可能帮你改的时候把原来好的东西也动了。
|
||||
|
||||
**学生实践 (10分钟):**
|
||||
|
||||
学生进行第二轮迭代：
|
||||
- 把发现的功能问题告诉AI修复
|
||||
- 从"最好有"里挑1-2个功能加上去
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 学生是否开了新对话（提醒：在原对话继续）
|
||||
- 学生是否同时提了太多修改要求（建议一次不超过3条）
|
||||
- 学生能否描述具体问题（"点击后没反应"比"有问题"有用得多）
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 功能完整的同学，进入最后一轮——美化。功能还有问题的同学，继续修，不着急去改样式。
|
||||
|
||||
【诊断点：学生能否正确描述bug并让AI修复，而不是说"有问题"】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**【分段四：第三轮迭代——美化打磨】(15分钟)**
|
||||
|
||||
*本段重点：用具体化描述让AI做视觉美化，从"能用"升级到"好看又好用"*
|
||||
|
||||
**讲解与演示 (3分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M3: 好看比能用更重要（这里是反过来：终于到了美化的时候）
|
||||
|
||||
**师：** 终于到美化了！但美化不是说"让它变好看"，那AI不知道你要什么风格。
|
||||
|
||||
（投影展示美化提示词参考）
|
||||
|
||||
```
|
||||
风格描述词（选1-2个组合）：
|
||||
颜色系：深色主题 / 明亮活泼 / 柔和清新 / 赛博朋克 / 中国红
|
||||
感觉类：像游戏界面 / 像手机App / 像卡片 / 简洁专业
|
||||
具体要求：圆角按钮 / 渐变背景 / 动画效果（点击时有反馈）
|
||||
|
||||
美化提示词示例：
|
||||
"保留所有功能不变，只修改视觉样式：
|
||||
1. 整体改成深色背景，主色调用紫色和蓝色的渐变
|
||||
2. 按钮改成圆角，点击时有轻微缩放动画
|
||||
3. 标题字体加大，加上发光效果
|
||||
4. 整体布局居中，看起来像游戏主界面"
|
||||
```
|
||||
|
||||
**师：** 看到了吗？没有说"更好看"，而是说了具体的颜色、感觉、效果。AI才知道你要什么。
|
||||
|
||||
**学生实践 (10分钟):**
|
||||
|
||||
学生进行第三轮美化迭代。
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 学生不知道要什么风格 → 问"你见过哪个游戏/App的界面是你喜欢的样子"
|
||||
- 美化后功能坏了 → 让学生加"保留所有功能，只修改CSS样式部分"
|
||||
- 时间快到了还在美化 → 提醒"先保存当前版本"
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 不管什么进度，先停手。保存你的 index.html。现在的版本就是你今天的作品——有完整功能的，有做到一半的，都没关系，我们一起看。
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟**
|
||||
|
||||
*本幕目标：展示成果，强化"迭代"概念和"每个人做不同东西"的认知*
|
||||
|
||||
**成果展示 (6分钟)**
|
||||
|
||||
**师：** 展示时间。每个人30秒，说一句话——"我做的是什么，我觉得最好的一个地方是什么"。
|
||||
|
||||
（随机选3-5名学生展示，每个展示后追问一个问题）
|
||||
|
||||
**师：** 这个[功能/设计]是你在哪一轮做的？第一轮、第二轮还是第三轮？
|
||||
|
||||
（目的：强化"作品是一轮一轮做出来的"概念）
|
||||
|
||||
**互评与讨论 (4分钟)**
|
||||
|
||||
**师：** 你们有没有发现，每个人做的东西完全不一样？用的都是同一个AI、同一个工具。为什么？
|
||||
|
||||
**生：** （预期：因为想法不一样/选的方向不一样）
|
||||
|
||||
**师：** 对！AI是帮你实现想法的工具，但**想法必须是你的**。拆解得越清楚，AI帮你做出来的越像你想要的。
|
||||
|
||||
**师：** 今天我们学了一件很重要的事——做一个完整作品的节奏：
|
||||
|
||||
```
|
||||
① 想清楚：需求拆解（必须有 / 最好有 / 以后再加）
|
||||
② 先能用：第一轮做核心功能
|
||||
③ 再完善：第二轮修bug加功能
|
||||
④ 最后美化：第三轮打磨视觉
|
||||
```
|
||||
|
||||
【诊断点：学生是否理解三轮迭代的节奏，而不是"一次做到完美"】【理解层】
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟**
|
||||
|
||||
*本幕目标：布置"用户测试"作业，预告代码审查*
|
||||
|
||||
**抽象总结 (3分钟)**
|
||||
|
||||
**师：** 今天你们完成了从"想法"到"作品"的完整过程。核心方法：
|
||||
|
||||
（板书/投屏）
|
||||
|
||||
```
|
||||
产品开发三步曲：
|
||||
① 拆解需求：必须有 → 最好有 → 以后再加
|
||||
② 三轮迭代：功能 → 完善 → 美化
|
||||
③ 关键提示词：保留原有功能，只修改/增加XX
|
||||
```
|
||||
|
||||
**5分钟挑战发布 + 下节预告 (2分钟)**
|
||||
|
||||
**师：** 本周课外小挑战：
|
||||
|
||||
> **5分钟AI挑战：让家人当你的"用户"**
|
||||
> 1. 回家后把你的 index.html 打开给家人看
|
||||
> 2. 让他们自己用，你不要帮忙操作
|
||||
> 3. 观察他们在哪里卡住或有疑惑
|
||||
> 4. 记下来一条反馈
|
||||
>
|
||||
> **评价标准：**
|
||||
> - 基础：给家人展示了你的作品
|
||||
> - 进阶：记录了一条具体反馈（"XX按钮不知道是干嘛的"）
|
||||
> - 挑战：根据反馈自己再改一轮，展示改进前后对比
|
||||
|
||||
**师：** 下节课我们学一个新技能——**看代码**。不是写代码，是学会"看"。当你想改一个小细节，不用每次都麻烦AI，自己直接动手改。这就是下节课的"代码审查入门"。
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师提示词模板：**
|
||||
|
||||
情形1：学生想法太大，帮助缩小范围
|
||||
```
|
||||
一个小学五年级的学生说他想做"一个RPG游戏"，但只有一节课时间，
|
||||
所有代码在一个HTML文件里。
|
||||
给出3个同样有趣的替代方向，每个方向说明核心功能有哪些（不超过3个）。
|
||||
```
|
||||
|
||||
情形2：学生代码报错，快速诊断
|
||||
```
|
||||
这是一个学生的 index.html 代码，他说[具体问题]。
|
||||
请找出最可能的问题，用一句话说明原因，然后给出修复后的完整代码。
|
||||
[粘贴代码]
|
||||
```
|
||||
|
||||
情形3：课堂演示对比案例
|
||||
```
|
||||
帮我生成两个版本的"记忆翻牌游戏" index.html：
|
||||
第一个版本：只有基本功能，没有样式，HTML默认外观
|
||||
第二个版本：完整版，有好看的界面、翻牌动画、计时和步数统计
|
||||
两个文件都要是单文件，CSS和JS内联。
|
||||
```
|
||||
|
||||
**学生提示词模板：**
|
||||
|
||||
第一轮（核心功能）：
|
||||
```
|
||||
我要做一个[项目名称]，请帮我创建一个完整的 index.html 文件，
|
||||
内联所有CSS和JS，不需要外部文件。
|
||||
功能要求：
|
||||
1. [核心功能1]
|
||||
2. [核心功能2]
|
||||
3. [核心功能3]
|
||||
现在先实现基本功能，样式之后再改。
|
||||
```
|
||||
|
||||
第二轮（修复与增强）：
|
||||
```
|
||||
保留原有的[主要功能]，在此基础上：
|
||||
1. 修复：[具体问题描述]
|
||||
2. 增加：[新功能描述]
|
||||
```
|
||||
|
||||
第三轮（美化）：
|
||||
```
|
||||
保留所有功能不变，只修改视觉样式：
|
||||
1. 整体风格：[如"深色背景，蓝紫渐变"]
|
||||
2. 按钮效果：[如"圆角，点击时有弹跳动画"]
|
||||
3. 布局：[如"整体居中，标题加大"]
|
||||
```
|
||||
|
||||
遇到问题时：
|
||||
```
|
||||
运行后出现了问题：[描述，如"计时器到0不停止"]
|
||||
请检查代码，找出原因并修复。保留其他功能不变。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**技术备注（教师备课知识补充）：**
|
||||
|
||||
1. **文件保存路径**：确保学生把 index.html 保存在固定文件夹里，不要散放桌面。建议每人在桌面建以自己名字命名的文件夹。
|
||||
2. **Chrome打开方式**：双击 index.html 默认用Chrome打开即可。不需要本地服务器。
|
||||
3. **Trae代码不完整**：Trae有时只给代码片段。让学生追问"请给出完整的 index.html 文件内容，不要省略"。
|
||||
4. **代码太长AI中途停了**：让学生说"请继续，从上次停止的位置继续输出"。
|
||||
5. **版本管理**：建议每轮迭代前把当前版本另存一份（复制 index.html 重命名为 index_v1.html）。
|
||||
|
||||
**学生项目可行性快速判断清单：**
|
||||
|
||||
| 类别 | 例子 | 处理方式 |
|
||||
|------|------|---------|
|
||||
| ✅ 能做 | 打地鼠、记忆翻牌、番茄计时器、知识问答、画板、随机分组器、运势生成器 | 直接支持，帮助拆解需求 |
|
||||
| ⚠️ 能做但需缩小范围 | 贪吃蛇（只做基础版）、RPG（改成"选择支故事"）、班级相册（用emoji代替真实图片） | 和学生一起重新定义"必须有"后放行 |
|
||||
| ⚠️ 有技术风险 | 需要音频（用Web Audio API生成音效）、摄像头/麦克风（权限问题） | 提前告知限制，找替代方案 |
|
||||
| ❌ 不建议做 | 多人联机（需要服务器）、账号系统（需要数据库）、AI聊天机器人（需要API key） | 明确说明原因，帮转向可行方向 |
|
||||
|
||||
**常见问题 FAQ：**
|
||||
|
||||
| 学生问题 | 建议回答 |
|
||||
|---------|---------|
|
||||
| "AI一直在转，不给代码" | 先检查网络，然后缩短提示词，去掉不必要描述只保留核心需求 |
|
||||
| "做得特别快，第三轮都做完了" | 做"用户测试"——让旁边同学用你的作品，观察他们卡在哪里 |
|
||||
| "第一轮都跑不起来" | 主动介入，帮他把需求再简化——"先只做一个最核心功能" |
|
||||
| "AI做的不满意，有点泄气" | "第一轮几乎都是这样的。说出具体哪里不对，写进第二轮提示词" |
|
||||
| "两个人想做一样的东西" | 好事！可以"比赛"——同方向看谁更好用更好看 |
|
||||
|
||||
**备课体验任务清单：**
|
||||
|
||||
- [ ] 亲自跑完三轮迭代，做出 demo_good.html
|
||||
- [ ] 做出 demo_bad.html（故意做差但能运行）
|
||||
- [ ] 做出 demo_sample.html（另一个方向的完整作品）
|
||||
- [ ] 测试Chrome打开本地html文件，确认演示正常
|
||||
- [ ] 熟悉"可行性判断清单"，能快速判断学生想法
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周任务：**
|
||||
|
||||
> **"让家人当你的用户"**
|
||||
>
|
||||
> **操作步骤：**
|
||||
> 1. 回家后打开你的 index.html，给家里一个大人看
|
||||
> 2. 让他们自己用，你不要帮忙操作
|
||||
> 3. 观察他们在哪里卡住或说"这是什么意思"
|
||||
> 4. 记下来一条反馈
|
||||
>
|
||||
> **下节课带来：**
|
||||
> 你听到的一条反馈，以及你打算怎么用这条反馈改进作品
|
||||
>
|
||||
> **追加挑战（选做）：**
|
||||
> 根据家人反馈自己再改一轮，下节课展示改进前后对比
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**进阶挑战（适合学有余力的学生）：**
|
||||
|
||||
**Level 1：功能拓展**
|
||||
> 选一个"以后再加"的功能，自己尝试加进去。提示词要说清楚：现在有什么，要加什么，保留什么。
|
||||
|
||||
**Level 2：主题切换**
|
||||
> 给你的作品增加"主题切换"功能：比如白天/夜晚模式。提示AI帮你加一个按钮，点击后切换整体配色。
|
||||
|
||||
**Level 3：作品说明书**
|
||||
> 在你的页面里加一个"关于"按钮，点击后显示一个弹窗，介绍这个作品是做什么的、怎么用、有哪些功能。
|
||||
|
||||
**Level 4：互评改造**
|
||||
> 和一个同学交换作品，以对方的作品为基础加一个新功能。写完了给他看，听反馈——这是最接近真实软件协作的体验。
|
||||
618
3-lessons/AICODE-06/旧版本/AICODE06-04 代码审查入门 v1.md
Normal file
618
3-lessons/AICODE-06/旧版本/AICODE06-04 代码审查入门 v1.md
Normal file
@@ -0,0 +1,618 @@
|
||||
---
|
||||
课时: 4
|
||||
主题: 代码审查入门
|
||||
核心能力: [韧性力, 拆解力]
|
||||
核心工具: [Trae IDE]
|
||||
时长: 90分钟
|
||||
透明化层级: 结果层
|
||||
适用路线: AICODE-06（有扣子/低代码经验的学生）
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 能识别一个 index.html 文件中 HTML、CSS、JavaScript 三个部分的物理位置（`<body>` / `<style>` / `<script>` 标签范围）
|
||||
- 知道三部分各自负责什么：骨架（有什么东西）/ 装修（颜色大小位置）/ 电路（交互逻辑）
|
||||
- 理解"改代码的某一行→保存→刷新浏览器→看到变化"这条因果链
|
||||
|
||||
**能力目标：**
|
||||
- 能在陌生代码中用 Ctrl+F "寻宝"方式定位控制某个效果的代码行
|
||||
- 能手动修改颜色值、文字内容、简单数值，保存后验证效果
|
||||
- 能描述 bug 时说出"问题可能在哪一部分"（而不只是"坏了"）
|
||||
|
||||
**情感目标：**
|
||||
- 体验"我不只是AI的用户，我还能直接动代码"的掌控感
|
||||
- 建立"代码不可怕，可以一段一段读"的信心
|
||||
- 感受寻宝竞赛的乐趣，愿意主动探索代码
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 概念 | 六年级类比 | 认知层级 |
|
||||
|------|----------|---------|
|
||||
| HTML = 页面的骨架 | 房子的家具——有什么东西摆在那里 | 识别层 |
|
||||
| CSS = 页面的装修 | 房子的油漆和装饰——颜色、大小、位置 | 理解层 |
|
||||
| JavaScript = 页面的电路 | 房子的开关和电路——按按钮灯会亮 | 理解层 |
|
||||
| Ctrl+F 搜索定位 | 在一本书里用目录找到某一页 | 应用层 |
|
||||
| 改代码→保存→刷新→验证 | 改了文档→保存→重新打开看效果 | 应用层 |
|
||||
| Bug定位三区域 | "没颜色"→看装修，"没反应"→看电路 | 分析层 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | "改代码会把项目弄坏，不敢动" | 改错了 Ctrl+Z 就能撤销，代码有后悔药 | 演示Ctrl+Z撤销；当场故意改错再改回来 |
|
||||
| M2 | "要看懂每一行才能改" | 只需要找到目标行，不需要读懂全部 | 类比"不用读懂整本书才能改封面标题" |
|
||||
| M3 | "CSS和HTML一样，都是控制内容的" | CSS只管外观，HTML管结构 | HTML=家具（有什么），CSS=油漆（什么颜色） |
|
||||
| M4 | "JavaScript就是让东西动起来" | JS负责所有逻辑和交互，不只是动画 | 举例：分数计算、按钮点击判断都是JS |
|
||||
| M5 | "AI改了代码我就不需要看了" | AI改完你要会验证，还要会手动微调 | 本课核心：AI做大框架，你精调细节 |
|
||||
| M6 | "颜色只能写red/blue这样的英文" | 颜色还可以写 #FF6B6B 十六进制格式 | 展示多种颜色写法 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- Trae IDE（已安装）
|
||||
- Chrome 浏览器
|
||||
- 每台学生电脑准备好一个可运行的 index.html（建议用第1课的反应力测试，或教师统一分发）
|
||||
- 教师机连接投影
|
||||
|
||||
**教学资源：**
|
||||
- 教师准备：一份"反应力测试"index.html（代码中 style/body/script 三部分清晰），课前确认在本机可运行
|
||||
- 教师准备：寻宝任务清单（投影展示，见教学流程）
|
||||
- 教师准备：好看的颜色参考表（投影展示，见教师指南）
|
||||
- 学生资源：每人电脑上有一份可运行的 index.html
|
||||
|
||||
**教师备课体验任务：**
|
||||
> 备课前，教师必须亲自完成以下操作：
|
||||
> 1. 打开反应力测试 index.html，在Trae中记录三部分的起止行号
|
||||
> 2. 手动改背景颜色为 `#1a1a2e`，保存刷新看效果，再改回来
|
||||
> 3. 手动改按钮文字从"开始游戏"改为"点我！"，保存刷新看效果，再改回来
|
||||
> 4. 用 Ctrl+F 搜索 `background`，找到所有相关行
|
||||
> 5. 故意把 `background-color` 改成错误值（如 `reddd`），看浏览器如何忽略它（不会崩溃）
|
||||
> 6. 用AI生成一个新小游戏，然后手动改颜色和文字，体验"混合开发"节奏
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
---
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟**
|
||||
|
||||
*本幕目标：激活前几课经验，用"房子"类比建立代码三部分的初步认知*
|
||||
|
||||
**情景导入 (10分钟)**
|
||||
|
||||
教师打开投影，展示一个前几课做过的小项目，让浏览器和代码并排显示。
|
||||
|
||||
**师：** 同学们，这是你们第1课做的反应力测试，还记得吗？上次你们已经在代码里改过颜色。今天我要问一个问题——
|
||||
|
||||
（教师点开代码文件，故意让代码滚动得很快，营造"一大堆字符"的视觉感）
|
||||
|
||||
**师：** AI帮你改颜色的时候，它改的是代码里的哪一部分？
|
||||
|
||||
**生：** （预期：不知道/全部？/好像是style那边？）
|
||||
|
||||
**师：** 有同学说style那边——很好！今天我们来验证这个猜想。我告诉你们一个秘密：这一大堆代码，其实只有**三个部分**。就像一栋房子——
|
||||
|
||||
（教师在白板上画简单的房子轮廓，分三层）
|
||||
|
||||
```
|
||||
╔══════════════════╗
|
||||
║ <script> ║ ← 电路系统（点击、计算、逻辑）
|
||||
║ JavaScript ║
|
||||
╠══════════════════╣
|
||||
║ <style> ║ ← 装修（颜色、大小、位置）
|
||||
║ CSS ║
|
||||
╠══════════════════╣
|
||||
║ <body> ║ ← 骨架（标题、按钮、图片）
|
||||
║ HTML ║
|
||||
╚══════════════════╝
|
||||
```
|
||||
|
||||
**师：** HTML是骨架——房子里有什么家具、什么按钮、什么标题。CSS是装修——这个按钮是红色还是蓝色，字多大，在哪个位置。JavaScript是电路——你按下开关灯亮了，你点击按钮分数+1。
|
||||
|
||||
**师：** 今天这节课，我们不是要学写代码。我们要学的是——**在代码里找东西**。就像寻宝一样。
|
||||
|
||||
【诊断点：学生是否记得第1课已接触过 style/body/script 三个标签】【识别层】
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟**
|
||||
|
||||
---
|
||||
|
||||
**【分段一：代码解剖——找到三部分的边界】(15分钟)**
|
||||
|
||||
*本段重点：用Ctrl+F定位三部分的起止位置，建立"代码有结构"的认知*
|
||||
|
||||
**讲解与演示 (8分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M2: 要看懂每一行才能改
|
||||
- M3: CSS和HTML分不清
|
||||
|
||||
教师在 Trae IDE 中打开反应力测试的 index.html，全屏展示。
|
||||
|
||||
**师：** 现在来做一件事——给代码找边界。我先教你们怎么找三个部分。
|
||||
|
||||
（教师边讲边用鼠标指出）
|
||||
|
||||
**师：** 看这里——`<style>` 标签。从 `<style>` 开始，到 `</style>` 结束，中间所有内容都是 CSS，**装修部分**。
|
||||
|
||||
**师：** 再往下——`<body>` 标签。从 `<body>` 到 `</body>`，这是**骨架部分**。
|
||||
|
||||
**师：** 最后——`<script>` 标签。从 `<script>` 到 `</script>`，这是**电路部分**。
|
||||
|
||||
**师：** 在代码里找东西有一个神器——**Ctrl+F**，搜索框。
|
||||
|
||||
（教师演示 Ctrl+F 搜索 `<style`，代码直接跳到CSS部分开头）
|
||||
|
||||
**师：** 看，直接跳过去了！你们也试一下。
|
||||
|
||||
**学生实践 (5分钟):**
|
||||
|
||||
学生在自己电脑上打开同一个文件，用 Ctrl+F 分别搜索：
|
||||
- `<style` → 找到 CSS 部分开头
|
||||
- `<body` → 找到 HTML 部分开头
|
||||
- `<script` → 找到 JavaScript 部分开头
|
||||
|
||||
**师：** 现在每个人都知道三个部分在哪了。谁来说一下，CSS从第几行开始？
|
||||
|
||||
（请学生报行号，全班对比）
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 记住：不需要读懂里面写了什么，只需要知道"这一块是装修的，那一块是骨架的"。就像你去一栋楼，不需要看懂设计图，但要知道一楼是大厅、二楼是卧室。
|
||||
|
||||
【诊断点：学生是否能独立用Ctrl+F定位三部分边界】【理解层】
|
||||
|
||||
---
|
||||
|
||||
**【分段二：寻宝游戏——定位修改点】(20分钟)**
|
||||
|
||||
*本段重点：通过竞赛形式练习"根据效果→判断属于哪部分→搜索关键词→定位代码行"*
|
||||
|
||||
**讲解与演示 (5分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M2: 要从第一行读到最后一行才能找
|
||||
|
||||
**师：** 现在进入今天最好玩的环节——**寻宝游戏！** 规则很简单：我说一个效果，你来找控制这个效果的代码在哪一行。不需要改，不需要写，只要找到那一行就举手。
|
||||
|
||||
**师：** 第1题——找到"控制页面背景颜色"的代码。
|
||||
|
||||
（给学生30秒思考）
|
||||
|
||||
**师：** 背景颜色，是视觉效果，还是内容，还是交互？
|
||||
|
||||
**生：** 视觉效果！
|
||||
|
||||
**师：** 视觉效果在哪一部分？
|
||||
|
||||
**生：** CSS！装修部分！
|
||||
|
||||
**师：** 对！所以我们去CSS部分找。背景颜色的英文是什么？你们第1课用AI改过——
|
||||
|
||||
**生：** `background`！
|
||||
|
||||
**师：** Ctrl+F 搜索 `background`，找到了吗？
|
||||
|
||||
（大部分学生举手）
|
||||
|
||||
**师：** 看到那个 `#0a0a1a` 了吗？这就是背景颜色的值。这是"十六进制颜色"的写法，你们不需要记，但要能认出来。
|
||||
|
||||
**学生实践 (13分钟):**
|
||||
|
||||
学生独立完成寻宝清单（可以同桌讨论）：
|
||||
|
||||
| 题号 | 任务 | 提示 |
|
||||
|------|------|------|
|
||||
| 第1题 | ✅ 控制页面背景颜色 | （已完成） |
|
||||
| 第2题 | 找按钮上的文字内容 | 去 `<body>` 部分，搜索"开始"或"游戏" |
|
||||
| 第3题 | 找控制按钮颜色的代码 | CSS部分，搜索 `button` 或 `background` |
|
||||
| 第4题（挑战） | 找计算反应时间的代码 | JS部分，搜索 `time` 或 `Date` |
|
||||
|
||||
**竞赛规则：** 每找到一题，举手报告行号。教师在白板上记录"第一个找到的同学"。
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 有没有学生不知道从哪里搜起 → 先判断属于哪个区域再搜
|
||||
- 有没有学生搜索关键词太宽泛导致结果太多 → 引导缩小关键词
|
||||
- 有没有学生在死读代码而不用Ctrl+F → 提醒用搜索神器
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 寻宝技巧总结——1. 先判断属于哪部分（装修/骨架/电路）；2. 再用Ctrl+F搜关键词。不需要读懂每一行，只需要找到那一行。
|
||||
|
||||
【诊断点：学生能否正确将"视觉效果"归类到CSS，"文字内容"归类到HTML，"点击行为"归类到JS】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**【分段三：手动微调挑战——建立因果感】(15分钟)**
|
||||
|
||||
*本段重点：学生第一次不通过AI直接改代码，建立"改代码→看到效果"的因果链*
|
||||
|
||||
**讲解与演示 (5分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M1: 改代码会弄坏，不敢动
|
||||
- M5: AI改了就行，我不需要看
|
||||
|
||||
**师：** 刚才我们找到了很多东西。现在来做一件更厉害的事——**不通过AI，直接用手改代码！**
|
||||
|
||||
（故意用夸张语气）
|
||||
|
||||
**师：** 但在改之前，先给你们一颗定心丸——
|
||||
|
||||
（教师演示 Ctrl+Z）
|
||||
|
||||
**师：** 看好了。我现在把背景颜色改成一个奇怪的值……
|
||||
|
||||
（将 `#0a0a1a` 改成 `#FF0000`，Ctrl+S保存，在浏览器刷新）
|
||||
|
||||
**师：** 哇，变红色了！现在……我按 Ctrl+Z 撤销——
|
||||
|
||||
（代码恢复，Ctrl+S保存，浏览器刷新，变回原来颜色）
|
||||
|
||||
**师：** **代码有后悔药！** 改错了随时撤销。所以——不要怕改代码。
|
||||
|
||||
（投影展示安全区域）
|
||||
|
||||
```
|
||||
✅ 安全区（随便改，改错了 Ctrl+Z）：
|
||||
颜色值：把 #FF6B6B 改成 #00FF00，或把 red 改成 blue
|
||||
文字内容：把"开始游戏"改成"点我试试"
|
||||
字体大小：把 font-size: 24px 改成 font-size: 32px
|
||||
边框圆角：把 border-radius: 8px 改成 20px
|
||||
|
||||
⚠️ 小心区（改太大可能影响体验）：
|
||||
游戏速度、分数、时间限制等数字参数
|
||||
|
||||
❌ 别碰区（这节课不动）：
|
||||
HTML标签结构（<div>、<button>这些尖括号里的东西）
|
||||
JavaScript的计算逻辑
|
||||
```
|
||||
|
||||
**学生实践 (8分钟):**
|
||||
|
||||
学生独立完成三个手动微调任务（每完成一个，Ctrl+S保存，刷新浏览器验证）：
|
||||
|
||||
**任务A（必做）：** 改变页面背景颜色——用Ctrl+F找到 `background-color`，把颜色值改成你喜欢的颜色。可以写英文色名（如 `purple`、`orange`），也可以随便写一个 `#` 加6个数字字母。
|
||||
|
||||
**任务B（必做）：** 改变按钮文字——找到按钮的文字内容，改成你想要的文字。
|
||||
|
||||
**任务C（选做）：** 改变某个元素的字体大小——找到一个 `font-size`，把数字调大或调小，看效果。
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 是否能成功保存（Ctrl+S）
|
||||
- 是否知道要刷新浏览器（部分学生会忘记刷新）
|
||||
- 是否有学生改了HTML结构导致显示异常（立刻演示Ctrl+Z救场）
|
||||
|
||||
**关键"哇"时刻捕捉：** 当学生第一次直接改代码、按Ctrl+S、刷新浏览器看到变化时——教师要放大这个瞬间：
|
||||
|
||||
**师：** XXX同学，你刚才是怎么做到的？（让学生自己说出来，强化成就感）
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 你们刚才没有告诉AI要改什么，直接改了代码，看到了变化。这就是"直接控制代码"。**AI帮你做大的事，你来调小的细节。**
|
||||
|
||||
【诊断点：学生是否建立了"改代码→保存→刷新→看效果"的完整操作循环】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**【分段四：AI+手动混合开发——自由创作】(15分钟)**
|
||||
|
||||
*本段重点：用AI生成新项目+手动精调细节，体验"混合开发"的工作方式*
|
||||
|
||||
**讲解与演示 (3分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M5: 要么全靠AI，要么全靠自己
|
||||
|
||||
**师：** 最后一个环节——自由创作。流程是这样的：
|
||||
|
||||
（投影展示流程图）
|
||||
|
||||
```
|
||||
第一步：用AI生成一个新的小项目（2-3分钟）
|
||||
↓
|
||||
第二步：在浏览器里试玩，找出想改的地方（1分钟）
|
||||
↓
|
||||
第三步：用寻宝法定位那段代码（2分钟）
|
||||
↓
|
||||
第四步：手动改颜色/文字/数值，保存，刷新验证（5分钟）
|
||||
↓
|
||||
第五步（可选）：再告诉AI做更大的修改
|
||||
```
|
||||
|
||||
**师：** 项目主题你们自己决定。小游戏（猜数字、打地鼠、点击计分）、工具（倒计时、随机选择器）、创意页面（个人名片、生日贺卡）都可以。
|
||||
|
||||
**师：** 提示词模板——
|
||||
|
||||
```
|
||||
帮我做一个[项目类型]，功能要求：
|
||||
1. [功能1]
|
||||
2. [功能2]
|
||||
所有代码放在单个 index.html 文件里，HTML/CSS/JS都写在这一个文件中。
|
||||
```
|
||||
|
||||
**学生实践 (10分钟):**
|
||||
|
||||
学生自由选主题，用AI生成后完成以下步骤：
|
||||
|
||||
1. 生成项目，在浏览器中测试
|
||||
2. 用Ctrl+F找到 `<style>`、`<body>`、`<script>` 三部分边界
|
||||
3. 找到至少两处想改的地方，手动修改
|
||||
4. 能说出：我改了什么，在哪一部分
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 项目提示词是否符合单文件规范
|
||||
- 学生是否卡在"代码太长找不到边界" → 提醒用Ctrl+F
|
||||
- 是否有学生误改了JS逻辑导致功能失效 → 引导Ctrl+Z并讨论"这在哪一部分"
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 很多同学已经在手动改了。有人改了颜色，有人改了文字，有人已经在问AI要新功能——很好！这就是今天的目标：**AI做大框架，你来精调细节。**
|
||||
|
||||
【诊断点：学生是否能将"我想改这个效果"翻译成"我去哪一部分找代码"】【分析层】
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟**
|
||||
|
||||
*本幕目标：通过Bug诊断练习巩固三区域认知，展示成果*
|
||||
|
||||
**成果展示 + Bug诊断练习 (6分钟)**
|
||||
|
||||
**师：** 今天学了寻宝和手动改代码。现在来做一个诊断练习——我说一个现象，你告诉我应该去代码的**哪一部分**找问题。
|
||||
|
||||
```
|
||||
Bug 1："按钮点击了没反应，分数没变化"
|
||||
→ 在哪找？（答：<script> JavaScript 电路部分）
|
||||
|
||||
Bug 2："页面出来了，但背景全是白色，按钮也是灰色"
|
||||
→ 在哪找？（答：<style> CSS 装修部分）
|
||||
|
||||
Bug 3："页面打开是空白的，什么都看不见"
|
||||
→ 在哪找？（答：<body> HTML 骨架部分）
|
||||
```
|
||||
|
||||
**师：** 这就是今天最重要的收获——以后遇到问题，先判断：是"看起来不对"（CSS），"少了东西"（HTML），还是"点了没反应"（JavaScript）。
|
||||
|
||||
**互评与讨论 (4分钟)**
|
||||
|
||||
**师：** 谁来说说今天的收获？
|
||||
|
||||
（引导学生总结三个关键点）
|
||||
|
||||
**师：** 最后一件事——把你手动改过的那段代码，告诉旁边同学：你改了什么，在哪一部分，什么效果。
|
||||
|
||||
（两两分享，1分钟）
|
||||
|
||||
【诊断点：学生能否用"HTML/CSS/JS"框架来描述bug或自己的改动】【分析层】
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟**
|
||||
|
||||
*本幕目标：巩固今天成果，布置手动改代码的课外任务*
|
||||
|
||||
**抽象总结 (3分钟)**
|
||||
|
||||
**师：** 今天你们做到了一件厉害的事——不通过AI，直接改了代码。代码不是只有程序员才能动的东西。
|
||||
|
||||
（板书/投屏）
|
||||
|
||||
```
|
||||
代码三部分：
|
||||
<style> = 装修（颜色、大小、位置）
|
||||
<body> = 骨架（标题、按钮、图片）
|
||||
<script> = 电路（点击、计算、逻辑）
|
||||
|
||||
寻宝三步法：
|
||||
① 判断属于哪部分
|
||||
② Ctrl+F 搜关键词
|
||||
③ 找到那一行
|
||||
|
||||
改代码操作循环：
|
||||
修改 → Ctrl+S 保存 → 刷新浏览器 → 验证效果
|
||||
改错了？→ Ctrl+Z 撤销
|
||||
```
|
||||
|
||||
**5分钟挑战发布 + 下节预告 (2分钟)**
|
||||
|
||||
**师：** 本周课外小挑战：
|
||||
|
||||
> **5分钟AI挑战：手动改造挑战**
|
||||
> 找到你今天或以前做的任何一个项目（index.html文件）：
|
||||
> 1. 用 Ctrl+F 找到三个标签，写下各在哪一行
|
||||
> 2. 找到三处想改的地方，手动改掉，每次改完 Ctrl+S + 刷新
|
||||
> 3. 截图发到群里，写一句："我改了XX，在[HTML/CSS/JS]部分"
|
||||
>
|
||||
> **评价标准：**
|
||||
> - 基础：成功手动改了一处，截图证明
|
||||
> - 进阶：改了三处，能说出每处在哪个部分
|
||||
> - 挑战：用Bug描述格式写一个你项目里的问题
|
||||
|
||||
**师：** 第5课开始，我们就和03路线的同学合流了。你们已经掌握了Trae操作、提示词工程、完整作品开发、代码审查——这些都是03路线的同学也在学的。合流之后，我们一起做更大更有趣的项目！
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师提示词模板：**
|
||||
|
||||
情景1：快速生成适合课堂演示的项目（三部分结构清晰）
|
||||
```
|
||||
帮我生成一个适合小学高年级演示的反应力测试小游戏，要求：
|
||||
1. 功能：屏幕随机出现彩色圆圈，玩家点击后显示反应时间（毫秒）
|
||||
2. 界面简洁，有"开始"按钮和反应时间显示
|
||||
3. 所有代码放在单个 index.html 文件里
|
||||
4. <style>、<body>、<script> 结构清晰，三部分之间加注释标记
|
||||
```
|
||||
|
||||
情景2：帮学生定位代码（不修改，只定位）
|
||||
```
|
||||
以下是一段 index.html 代码。学生想找"控制[具体效果]的代码在哪里"。
|
||||
请告诉我：
|
||||
1. 在哪一部分（HTML/CSS/JS）
|
||||
2. 大概在哪个标签或关键词附近
|
||||
3. 用一句话解释那段代码做什么
|
||||
不要修改代码，只需要定位和解释。
|
||||
[粘贴代码]
|
||||
```
|
||||
|
||||
情景3：学生改坏了代码，急救
|
||||
```
|
||||
以下代码出了问题：[粘贴代码]
|
||||
现象是：[描述]
|
||||
请找出问题在哪一部分（HTML/CSS/JS），只修复这一个问题，不改其他地方。
|
||||
```
|
||||
|
||||
**学生提示词模板：**
|
||||
|
||||
生成新项目：
|
||||
```
|
||||
帮我做一个[项目名称]，功能要求：
|
||||
1. [功能1]
|
||||
2. [功能2]
|
||||
界面要求：[颜色风格/布局]
|
||||
所有代码放在单个 index.html 文件里，HTML/CSS/JS都在一个文件中。
|
||||
```
|
||||
|
||||
手动改完一部分，让AI改另一部分：
|
||||
```
|
||||
这是我的 index.html 代码：[粘贴代码]
|
||||
我已经手动把[XX]改成了[YY]。
|
||||
现在请帮我：[具体需求]
|
||||
注意：不要改我已经改过的[XX]部分。
|
||||
```
|
||||
|
||||
Bug报告模板（养成习惯）：
|
||||
```
|
||||
我的项目出现了一个问题：
|
||||
现象：[具体描述]
|
||||
我猜问题在：[HTML/CSS/JavaScript]部分
|
||||
代码是：[粘贴代码]
|
||||
请找出原因并修复。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**技术备注（教师备课知识补充）：**
|
||||
|
||||
1. **保存与刷新**：学生改完代码后必须 Ctrl+S 保存，再切到Chrome刷新（F5或Ctrl+R）。部分学生会忘记刷新，看不到变化误以为改错了。
|
||||
2. **颜色值写法**：
|
||||
- 英文色名：`red`、`blue`、`green` 等约140个
|
||||
- 十六进制：`#FF6B6B`（粉红）、`#4ECDC4`（青绿）——学生觉得神秘但好用
|
||||
- RGB函数：`rgb(255, 107, 107)` —— 遇到时简单解释即可
|
||||
3. **好看的颜色参考表**（课堂投影用）：
|
||||
```
|
||||
#FF6B6B 暖红色 #4ECDC4 清新青绿
|
||||
#45B7D1 天蓝色 #96CEB4 薄荷绿
|
||||
#FFEAA7 奶油黄 #DDA0DD 薰衣草紫
|
||||
#2D3436 深灰黑 #6C5CE7 亮紫色
|
||||
```
|
||||
4. **Ctrl+Z撤销的边界**：Trae的撤销历史有限（通常几十步）。建议课前把演示素材文件备份一份。
|
||||
5. **文件路径**：双击 index.html 默认用Chrome打开时路径是 `file:///C:/...`，这是正常的。
|
||||
|
||||
**学生弹性边界——手动修改安全清单：**
|
||||
|
||||
```
|
||||
✅ 安全改（随便改，改错了Ctrl+Z）：
|
||||
颜色值（background-color、color、border-color等）
|
||||
文字内容（按钮文字、标题文字、提示语）
|
||||
字体大小（font-size的数字，px单位不要改）
|
||||
间距（margin、padding的数字）
|
||||
边框圆角（border-radius的数字）
|
||||
背景渐变的颜色部分
|
||||
|
||||
⚠️ 小心改（可以改，但改太大可能影响体验）：
|
||||
游戏速度参数（setTimeout里的数字）
|
||||
分数倍率（score += 10里的10）
|
||||
时间限制（timeLeft = 30里的30）
|
||||
动画时长（transition: 0.3s里的0.3）
|
||||
|
||||
❌ 别碰（本课不动，以后学）：
|
||||
HTML标签结构（<div>、<button>的开合标签）
|
||||
HTML标签的class和id属性
|
||||
JavaScript的函数名、变量名
|
||||
JavaScript的运算符和逻辑判断（if/else、===等）
|
||||
```
|
||||
|
||||
**常见问题 FAQ：**
|
||||
|
||||
| 学生问题 | 建议回答 |
|
||||
|---------|---------|
|
||||
| "改了HTML结构页面乱了，Ctrl+Z撤不回来" | 从备份文件复制覆盖即可。"这就是为什么建议只在安全区操作" |
|
||||
| "项目太简单只有几行，找不到三部分" | 好机会！"这个文件只有HTML，连CSS和JS都没有。如果要加交互，我们要去哪加？" |
|
||||
| "代码太长，几百行看不过来" | "不需要读完。找三个边界标签，然后Ctrl+F搜关键词。越长越需要寻宝技巧" |
|
||||
| "JS里那些花括号是什么" | "是函数的写法，像一个任务包。今天不需要读懂，只知道那是'当XX发生时做YY'的逻辑" |
|
||||
| "改了JS里的数字，游戏逻辑异常了" | "来看看你改了什么。这个数字参与计算，不只是显示。Ctrl+Z撤回来" |
|
||||
| "为什么AI生成的代码每次不一样" | "AI每次重新创作，像你每次画的画不一样。所以我们要会看代码，不管AI怎么写都能找到想改的地方" |
|
||||
|
||||
**备课体验任务清单：**
|
||||
|
||||
- [ ] 打开演示项目，记录三部分起止行号
|
||||
- [ ] Ctrl+F 搜索 `<style`、`<body`、`<script`，验证定位
|
||||
- [ ] 手动改背景颜色，保存刷新验证，再改回来
|
||||
- [ ] 手动改按钮文字，保存刷新验证，再改回来
|
||||
- [ ] 故意改错误值（如 `reddd`），验证浏览器不会崩溃
|
||||
- [ ] 演练 Ctrl+Z 多步撤销
|
||||
- [ ] 用AI生成新项目，完整走一遍"生成→定位三部分→手动改两处→验证"
|
||||
- [ ] 准备备份文件
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周任务：**
|
||||
|
||||
> **"手动改造挑战"**
|
||||
>
|
||||
> **操作步骤：**
|
||||
> 1. 找到你今天或以前做的任何一个项目（index.html文件）
|
||||
> 2. 用 Ctrl+F 找到 `<style>`、`<body>`、`<script>` 三个标签，记下大概行号
|
||||
> 3. 在代码里找到三处想改的地方（在安全区里），手动改掉
|
||||
> 4. 每次改完 Ctrl+S 保存，刷新浏览器看效果
|
||||
> 5. 截图发到群里，写一句："我改了XX，在[HTML/CSS/JS]部分，把XX改成了YY"
|
||||
>
|
||||
> **加分挑战（选做）：**
|
||||
> 用Bug描述格式描述你项目里的一个问题：
|
||||
> ```
|
||||
> 现象：[具体描述]
|
||||
> 我猜在[HTML/CSS/JS]部分
|
||||
> 因为：[你的推断]
|
||||
> ```
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**进阶挑战（适合学有余力的学生）：**
|
||||
|
||||
**挑战一：三色注释法**
|
||||
> 在你的 index.html 三个部分开头各加一行注释，标注这是什么区域：
|
||||
> - CSS区域：`/* ===== 装修区 (CSS) ===== */`
|
||||
> - HTML区域：`<!-- ===== 骨架区 (HTML) ===== -->`
|
||||
> - JS区域：`// ===== 电路区 (JavaScript) =====`
|
||||
> 加完后以后再打开这个文件，就能一眼看到三个区域。
|
||||
|
||||
**挑战二：Bug侦探**
|
||||
> 以下三段代码各有一个问题，找出来并说明怎么改：
|
||||
>
|
||||
> 片段1（CSS拼写问题）：`background-colour: #FF6B6B;` → 哪里错了？
|
||||
> 片段2（HTML标签问题）：`<button>开始游戏<button>` → 哪里错了？
|
||||
> 片段3（数值实验）：`border-radius: 50%;` 加在一个正方形div上会变成什么形状？
|
||||
|
||||
**挑战三：给朋友讲解**
|
||||
> 用你自己的话，向一个完全不懂代码的同学解释：
|
||||
> - HTML、CSS、JavaScript分别是什么？（用房子比喻或你自己的比喻）
|
||||
> - 如果页面按钮点击没反应，应该去代码哪一部分找？为什么？
|
||||
Reference in New Issue
Block a user