efa1e6aa60
- 更新K4课程README与课程目录 - 更新AI03 SOLO模式体验课程内容 - 补录各班级学生出勤登记 - 更新课评汇总归档 - 新增CSP03 string使用课程笔记 - 新增备份脚本与逐字稿输出
648 lines
30 KiB
Markdown
648 lines
30 KiB
Markdown
cluadecc---
|
||
课时: 2
|
||
主题: SOLO模式初体验
|
||
核心能力: [提问力, 拆解力]
|
||
核心工具: [Trae IDE]
|
||
时长: 90分钟
|
||
透明化层级: 结果层
|
||
适用路线: AICODE-06（有扣子/低代码经验的学生）
|
||
---cladue
|
||
|
||
|
||
### 1. 课程目标
|
||
|
||
**知识目标：**
|
||
- 理解 Trae 三种模式的区别：Chat（问问题）、Builder（从零创建）、Solo Coder（在已有项目上迭代）
|
||
- 理解"跟随模式"的含义：实时观看 AI 编写代码的过程
|
||
- 知道什么场景用什么模式：新项目用 Builder，改项目用 Solo Coder，问问题用 Chat
|
||
|
||
**能力目标：**
|
||
- 能根据任务场景选择正确的模式（Chat / Builder / Solo Coder）
|
||
- 能使用 Builder 模式从零创建一个有交互功能的网页应用
|
||
- 能切换到 Solo Coder 模式，开启跟随模式，观看 AI 实时工作并接受修改
|
||
|
||
**情感目标：**
|
||
- 感受到"跟随模式"带来的"AI在帮我干活"的实时反馈感
|
||
- 建立"不同工具解决不同问题"的工具选择意识
|
||
- 对自己做出的趣味应用产生成就感和分享欲
|
||
|
||
---
|
||
|
||
### 2. 核心概念与误概念预设
|
||
|
||
**核心概念认知层级：**
|
||
|
||
| 概念 | 学生类比 | 认知层级 |
|
||
|------|---------|---------|
|
||
| Chat 模式 = 问问题 | 像微信问朋友一个问题，朋友回答你，但不帮你动手 | 识别层 |
|
||
| Builder 模式 = 从零创建 | 像跟装修公司说"帮我从毛坯房开始装修" | 识别层 |
|
||
| Solo Coder 模式 = 在已有项目上改 | 像跟装修公司说"我家已经装修好了，帮我把客厅墙换个颜色" | 识别层 |
|
||
| 跟随模式 = 实时观看AI工作 | 像站在装修工人旁边看他施工，他刷一笔你看一笔 | 理解层 |
|
||
| 模式选择 = 根据场景选工具 | 像吃饭选餐具：喝汤用勺子，吃面用筷子，切牛排用刀叉 | 应用层 |
|
||
|
||
**典型误概念表：**
|
||
|
||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||
|------|--------|---------|---------|
|
||
| M1 | "三种模式都差不多，随便用哪个" | 不同场景用不同模式，效果完全不同 | 演示用 Chat 让它改代码——它只回答不动手 |
|
||
| M2 | "Solo Coder 就是高级版 Builder" | Builder 从零开始，Solo Coder 在已有代码上改。Builder 每次重写，Solo Coder 精准修改 | 对比演示：同一个修改需求，Builder 重写 vs Solo Coder 精改 |
|
||
| M3 | "跟随模式没什么用，反正我看不懂代码" | 跟随模式让你实时看到AI在干嘛，即使看不懂代码，也能看到文件在变化、进度在推进 | 打开跟随模式体验，感受"AI在帮我干活"的实时感 |
|
||
| M4 | "用 emoji 做图标会很丑" | emoji 可以放很大、配 CSS 动画效果后非常炫 | 展示成品——大号 emoji + 发光/弹跳效果 |
|
||
| M5 | "做完基础版就算完成了" | 基础版只是起点，真正好的产品是一轮一轮迭代出来的 | 展示基础版 vs 迭代版的对比 |
|
||
|
||
---
|
||
|
||
### 3. 教学准备
|
||
|
||
**工具与环境：**
|
||
- 每台电脑已预装 Trae IDE，已登录校区账号
|
||
- 网络环境正常
|
||
- 内置浏览器可用（Trae 自带预览功能）
|
||
|
||
**教学资源：**
|
||
- 教师准备：1个用 Solo Coder 做的"未来职业预测器"成品（课前演示用）
|
||
- 教师准备：1个用 Builder 做的基础版（展示 Builder → Solo Coder 的切换过程）
|
||
- 教师准备：2套保底提示词（未来职业预测器 + 超能力抽签机各一套）
|
||
- 学生资源：上节课的 Trae 操作经验
|
||
|
||
**教师备课体验任务：**
|
||
> 备课前，教师必须亲自完成以下操作：
|
||
> 1. 用 Builder 创建"未来职业预测器"基础版，记录提示词和生成结果
|
||
> 2. 切换到 Solo Coder 模式，开启跟随模式，给它一个修改需求，观察实时工作过程
|
||
> 3. 同样流程做一遍"超能力抽签机"，确保两个项目的保底提示词都能稳定产出
|
||
> 4. 故意用 Chat 模式让AI修改代码，观察它"只回答不动手"的表现，准备对比演示
|
||
> 5. 测试大号 emoji + CSS 动画效果是否正常显示
|
||
|
||
---
|
||
|
||
### 4. 教学流程
|
||
|
||
---
|
||
|
||
**第一幕：联系 (Connect) — 10分钟** 🔗
|
||
|
||
*本幕目标：回顾 Builder 经验，引出"已有项目怎么改"的需求，制造模式选择的认知冲突*
|
||
|
||
**【环节】上节课回顾 (3分钟)**
|
||
|
||
**师：** 上节课我们学了 Trae 的基本操作。谁来帮我回忆一下，用 Trae 做一个网页分几步？
|
||
|
||
**生：** （预期：建文件夹→Builder说话→Accept→预览）
|
||
|
||
**师：** 对！五步操作法。上节课你们都用哪个模式做的？
|
||
|
||
**生：** （预期：Builder）
|
||
|
||
**师：** Builder 模式。它是"从零开始"帮你建一个项目。上节课的5分钟挑战，有谁回家做了"家庭小工具"的？来展示一下。
|
||
|
||
（选1-2位学生快速展示课外挑战作品，30秒/人）
|
||
|
||
**【环节】情景导入 (7分钟)**
|
||
|
||
**师：** 上节课我们用 Builder 做了网页。但是我现在问你们一个问题——
|
||
|
||
（教师打开一个用 Builder 做的简单网页）
|
||
|
||
**师：** 比如这个网页，我觉得背景颜色不好看，想换一个。我有两个选择：
|
||
- **选择一：** 在 Builder 里重新说一遍"帮我做一个网页，但是背景换成蓝色"
|
||
- **选择二：** 有没有一种方式，我只说"把背景换成蓝色"，AI就精准地帮我改这一个地方？
|
||
|
||
你们觉得哪种更方便？【诊断点：探测学生对"迭代"和"重建"的区分意识】【识别层】
|
||
|
||
**【分支A】若学生说"选择二更方便"：**
|
||
**师：** 对！每次都重新来一遍太浪费了。那你知道怎么做到"选择二"吗？
|
||
|
||
**【分支B】若学生说"用 Builder 继续说不就行了"：**
|
||
**师：** Builder 可以继续对话，但有时候它会把整个文件重写一遍。有没有更精准的方式？
|
||
|
||
**师：** 今天我们就来解锁 Trae 的新能力。上节课我们只用了一种模式——Builder。但其实 Trae 有**三种模式**，就像你手机上有不同的 App，干不同的事。今天学完，你就知道什么时候该用哪个了。
|
||
|
||
**师：** 而且今天有一个超酷的功能——**跟随模式**。你可以**实时看到 AI 在帮你写代码**，像看直播一样。一会儿你们就知道有多爽了。
|
||
|
||
**师：** 今天你们每个人会做一个好玩的东西——你可以选"未来职业预测器"或者"超能力抽签机"。先用 Builder 搭出基础版，再用新模式来升级它。我们开始！
|
||
|
||
---
|
||
|
||
**第二幕：建构 (Construct) — 65分钟** 🛠️
|
||
|
||
---
|
||
|
||
**【分段一：认识 Trae 三种模式】(12分钟)**
|
||
|
||
*本段重点：建立三种模式的认知区分，知道各自的用途*
|
||
|
||
**预设误概念：**
|
||
- M1: 三种模式都差不多
|
||
- M2: Solo Coder 就是高级版 Builder
|
||
|
||
**讲解与演示 (7分钟):**
|
||
|
||
**师：** 上节课我们说过，Trae 有 Builder 和 Chat 两种模式。其实还有第三种——**Solo Coder**。今天我们把三种模式搞清楚。
|
||
|
||
**师：** 我打个比方。你们都去过餐厅吧？
|
||
|
||
- **Chat 模式** = 问服务员问题。"这道菜辣不辣？""有没有推荐？"——服务员回答你，但不帮你做菜。
|
||
- **Builder 模式** = 跟厨师说"帮我做一桌菜"。厨师从头开始做，做完端上来。
|
||
- **Solo Coder 模式** = 菜已经端上来了，你说"这个汤太淡了加点盐"。厨师精准地帮你调整，不用重新做一桌。
|
||
|
||
（教师投屏，逐一打开三个模式，让学生看到界面）
|
||
|
||
**师：** 我们来做一个实验。我现在有一个上节课做的网页，我想把标题颜色改成红色。
|
||
|
||
（实验一：用 Chat 模式）
|
||
|
||
**师：** 先试 Chat 模式。我输入："把标题颜色改成红色"。
|
||
|
||
（展示 Chat 的回应——它会告诉你怎么改，给你代码片段，但不会直接修改文件）
|
||
|
||
**师：** 看到了吗？Chat 说了一堆，但文件有没有变？
|
||
|
||
**生：** （预期：没有）
|
||
|
||
**师：** 对！Chat 只聊天，不动手。它是"顾问"——给建议但不干活。
|
||
|
||
（实验二：用 Solo Coder 模式）
|
||
|
||
**师：** 现在换 Solo Coder。同样的话："把标题颜色改成红色"。
|
||
|
||
（展示 Solo Coder——它直接修改文件，标题颜色变了）
|
||
|
||
**师：** 看！文件直接被改了。Solo Coder 是"施工队"——你说哪里要改，它直接帮你改。
|
||
|
||
**师：** 那 Builder 呢？Builder 也能改，但它更适合"从零开始建"。如果你的项目已经有了，用 Solo Coder 更精准。
|
||
|
||
（投屏总结表格）
|
||
|
||
| 模式 | 像什么 | 适合干什么 | 会不会改文件 |
|
||
|------|--------|-----------|-------------|
|
||
| Chat | 顾问 | 问问题、学知识 | ❌ 不改 |
|
||
| Builder | 建筑队 | 从零创建整个项目 | ✅ 创建新文件 |
|
||
| Solo Coder | 装修队 | 在已有项目上精准修改 | ✅ 修改已有文件 |
|
||
|
||
**师：** 记住这个表格。以后选模式就问自己：我是想**问问题**、**从零做**、还是**改已有的**？
|
||
|
||
**学生实践 (3分钟):**
|
||
|
||
**师：** 快速测试！我说场景，你们告诉我用什么模式：
|
||
|
||
1. "我想做一个全新的游戏" —— 用什么？
|
||
2. "我想问 AI 这段代码是什么意思" —— 用什么？
|
||
3. "我的游戏背景颜色不好看，想换一个" —— 用什么？
|
||
|
||
（学生回答）
|
||
|
||
**进度同步 (2分钟):**
|
||
|
||
**师：** 刚才三个场景，答对两个以上的举手？【诊断点：检测学生是否建立了模式选择意识】【识别层】
|
||
|
||
**【分支A】若大部分学生答对：**
|
||
**师：** 很好！记住这个判断方法。我们马上用 Builder 做一个好玩的东西，然后切 Solo Coder 来升级它。
|
||
|
||
**【分支B】若较多学生搞混：**
|
||
**师：** 没关系，一会儿我们亲手用 Builder 和 Solo Coder 各做一遍，你就彻底分清了。
|
||
|
||
---
|
||
|
||
**【分段二：Builder 创建基础版】(22分钟)**
|
||
|
||
*本段重点：用 Builder 模式创建项目基础版，建立"先做出来再说"的意识*
|
||
|
||
**预设误概念：**
|
||
- M4: 用 emoji 做图标会很丑
|
||
- M5: 做完基础版就算完成了
|
||
|
||
**讲解与演示 (5分钟):**
|
||
|
||
**师：** 好，现在我们用 Builder 做一个好玩的东西。今天你有**两个方向**可以选：
|
||
|
||
| 方向 | 说明 | 预览 |
|
||
|------|------|------|
|
||
| 🔮 **未来职业预测器** | 输入你的名字，点按钮，AI帮你"预测"未来职业 | 有动画、有大emoji、有搞笑描述 |
|
||
| ⚡ **超能力抽签机** | 点按钮抽签，随机获得一个超能力 | 有翻转动画、有超能力描述、有稀有度 |
|
||
|
||
**师：** 两个项目难度一样，结构一样——都是"点按钮→随机结果→好看的动画"。选你觉得更好玩的。
|
||
|
||
**师：** 我先做一个"未来职业预测器"给你们看。注意看我的提示词怎么写的：
|
||
|
||
（教师在 Builder 中输入）
|
||
|
||
```
|
||
帮我创建一个 index.html 文件，做一个"未来职业预测器"趣味网页：
|
||
1. 页面顶部有一个大标题"🔮 未来职业预测器"，用大号 emoji 做图标
|
||
2. 中间有一个输入框，让用户输入自己的名字
|
||
3. 有一个"开始预测"按钮
|
||
4. 点击按钮后，显示一个随机职业结果，包括：
|
||
- 一个大号 emoji 代表这个职业（比如 👨🚀 太空探险家）
|
||
- 职业名称（大字）
|
||
- 一段搞笑的职业描述（2-3句话）
|
||
5. 至少准备 10 个不同的职业结果，每次随机显示一个
|
||
6. 结果出现时有一个好看的动画效果（比如淡入、缩放弹出）
|
||
7. 有"再测一次"按钮
|
||
8. 整体用好看的渐变色背景，圆角卡片，有阴影效果
|
||
9. 所有视觉效果用 emoji 和 CSS 实现，不要使用外部图片
|
||
```
|
||
|
||
（等待AI生成）
|
||
|
||
**师：** 注意我最后一条写了"用 emoji 和 CSS 实现，不要使用外部图片"——因为纯 CSS 做出来的效果最稳定，emoji 放大后也很好看。
|
||
|
||
（Accept 代码，在内置浏览器中预览）
|
||
|
||
**师：** 来，谁来试一下？
|
||
|
||
（邀请1位学生试用——输入名字，点预测，看结果）
|
||
|
||
**师：** 看到了吗？那个大 emoji 一弹出来，效果很好对吧？这就是 emoji + CSS 动画的威力。不需要图片也能很好看。
|
||
|
||
**学生实践 (15分钟):**
|
||
|
||
**师：** 现在你们来做。**选一个方向**——未来职业预测器或者超能力抽签机。
|
||
|
||
**步骤：**
|
||
1. 在桌面新建文件夹（"未来职业预测器"或"超能力抽签机"）
|
||
2. Trae 打开文件夹
|
||
3. 切到 **Builder 模式**
|
||
4. 输入提示词（可以参考我的，也可以自己写——**你的提示词写得越具体，出来的效果越好**）
|
||
5. Accept 代码 → 预览效果
|
||
|
||
**如果你选超能力抽签机，参考这个提示词：**
|
||
|
||
```
|
||
帮我创建一个 index.html 文件，做一个"超能力抽签机"趣味网页：
|
||
1. 页面顶部有大标题"⚡ 超能力抽签机"，用大号 emoji 图标
|
||
2. 中间有一个大按钮"抽取超能力！"
|
||
3. 点击按钮后，显示随机抽到的超能力，包括：
|
||
- 一个大号 emoji 代表这个超能力（比如 🔥 火焰掌控）
|
||
- 超能力名称（大字）
|
||
- 超能力等级（用星星表示：⭐⭐⭐⭐⭐）
|
||
- 一段有趣的超能力描述（2-3句话）
|
||
4. 至少准备 10 个不同的超能力，每次随机显示一个
|
||
5. 抽到结果时有一个炫酷的动画（比如卡片翻转、发光效果）
|
||
6. 有"再抽一次"按钮
|
||
7. 整体用深色炫酷风格，有光效和渐变
|
||
8. 所有视觉效果用 emoji 和 CSS 实现，不要使用外部图片
|
||
```
|
||
|
||
**师：** 15分钟。做完基础版后先让旁边同学试用一下。等会儿我们要用 Solo Coder 来升级它！
|
||
|
||
（教师走动观察）
|
||
|
||
（教师走动重点关注：）
|
||
- 是否切到了 Builder 模式（不是 Chat 或 Solo Coder）
|
||
- 提示词是直接照抄的还是有自己的改动
|
||
- 生成结果是否正常运行
|
||
- 学生是否点了 Accept
|
||
- 预览是否成功
|
||
|
||
**快学生应对：** 基础版做完后，试着在 Builder 里继续说"加一个XX功能"——比如"加一个历史记录"、"加背景音效"。
|
||
|
||
**慢学生应对：** 如果10分钟还没有产出，直接把上面的保底提示词给学生用。
|
||
|
||
**进度同步 (2分钟):**
|
||
|
||
**师：** 做出基础版并且在浏览器里看到效果的同学举手！
|
||
|
||
（统计）
|
||
|
||
**师：** 好！现在每个人手上都有一个"已经做好的项目"。下面问你们——如果我想给这个项目加一个新功能，或者改一下样式，我应该用什么模式？【诊断点：检测学生能否在实际场景中选择正确模式】【应用层】
|
||
|
||
**生：** （预期：Solo Coder）
|
||
|
||
**师：** 对！项目已经有了，要改就用 Solo Coder。我们现在就切过去，而且——要开启一个超酷的功能。
|
||
|
||
---
|
||
|
||
**【分段三：Solo Coder + 跟随模式初体验】(22分钟)**
|
||
|
||
*本段重点：切换到 Solo Coder 模式，开启跟随模式，体验实时观看 AI 工作的感觉*
|
||
|
||
**预设误概念：**
|
||
- M2: Solo Coder 就是高级版 Builder
|
||
- M3: 跟随模式没什么用
|
||
|
||
**讲解与演示 (7分钟):**
|
||
|
||
**师：** 现在我们解锁今天的重头戏——**Solo Coder 模式**。
|
||
|
||
**师：** 先找到它。看 AI 面板上方——除了 Chat 和 Builder，还有一个 **Solo Coder**。点它切换过去。
|
||
|
||
（教师投屏演示切换到 Solo Coder）
|
||
|
||
**师：** 进来了。看到界面的变化了吗？Solo Coder 的界面和 Builder 不太一样——
|
||
|
||
**师：** 但最酷的功能是这个——**跟随模式**。看面板上有一个眼睛图标（或者"Follow"按钮），点一下。
|
||
|
||
（教师打开跟随模式）
|
||
|
||
**师：** 跟随模式打开了。现在我给它一个修改指令，你们注意看——
|
||
|
||
（教师在 Solo Coder 中输入）
|
||
|
||
```
|
||
给"开始预测"按钮加一个点击后的加载动画效果：
|
||
- 点击后按钮文字变成"正在预测中..."，加一个旋转的 emoji ⏳
|
||
- 等待1.5秒后再显示结果
|
||
- 这样看起来更像真的在"计算"
|
||
```
|
||
|
||
（发送后，跟随模式实时展示 AI 修改代码的过程——文件自动跳转、代码实时变化）
|
||
|
||
**师：** 看到了吗？！这就是跟随模式——你可以**实时看到 AI 在修改你的代码**！它跳到哪个文件、改了哪一行，你都能看到。就像看直播一样。
|
||
|
||
（等 AI 完成，预览效果）
|
||
|
||
**师：** 好，改完了。我们在浏览器里刷新看看——
|
||
|
||
（展示加载动画效果）
|
||
|
||
**师：** 点"开始预测"——看！先是"正在预测中..."转了一会儿，然后才出结果。是不是比之前直接蹦出来更有感觉？
|
||
|
||
**师：** 这就是 Solo Coder 的威力——**精准修改**。我没有重新描述整个项目，只说了"给按钮加个动画"，它就精准地改了那一个地方。如果用 Builder 呢？它可能把整个文件重写一遍。
|
||
|
||
**师：** 还有一个关键区别——Solo Coder 改完后也需要你 **Accept**。看到变更了吗？绿色是新加的代码，红色是删掉的。满意就点 Accept。
|
||
|
||
**学生实践 (12分钟):**
|
||
|
||
**师：** 现在你们来试！
|
||
|
||
**步骤：**
|
||
1. 切换到 **Solo Coder** 模式
|
||
2. 打开**跟随模式**（找到那个眼睛/Follow 按钮，点亮它）
|
||
3. 给你的项目提一个修改需求
|
||
|
||
**修改建议（选一个或自己想）：**
|
||
|
||
如果你做的是**未来职业预测器**：
|
||
- "加一个点击后的加载动画，显示'正在预测中...'，等1.5秒再显示结果"
|
||
- "在结果卡片下面加一行小字：'预测准确率 99.9%（仅供娱乐）'"
|
||
- "把结果卡片的背景改成跟职业相关的颜色（太空探险家用深蓝，美食家用橙色）"
|
||
|
||
如果你做的是**超能力抽签机**：
|
||
- "加一个抽签动画：点击后卡片先快速闪烁几个超能力，最后停在一个上面"
|
||
- "在超能力描述下面加一句'拥有率：0.01% 的人拥有此超能力'"
|
||
- "加一个'收集图鉴'功能：记录你抽到过的所有超能力"
|
||
|
||
**师：** 记住两件事：
|
||
1. **开跟随模式**——看 AI 实时帮你改代码
|
||
2. **改完后点 Accept**——然后刷新浏览器看效果
|
||
|
||
**师：** 12分钟，开始！
|
||
|
||
（教师走动观察）
|
||
|
||
（教师走动重点关注：）
|
||
- 是否成功切换到 Solo Coder（而不是还在 Builder 里）
|
||
- 是否打开了跟随模式
|
||
- AI 修改后是否点了 Accept
|
||
- 修改结果是否正常——如果 AI 改坏了，引导学生说"刚才的修改有问题，标题显示不出来了，帮我修一下"
|
||
- 跟随模式的体验反馈——学生看到实时变化时的反应
|
||
|
||
**Plan B：** 如果某个学生的 Solo Coder 修改导致页面出错，教师引导学生在 Solo Coder 里描述问题："页面打开后是空白的/按钮不见了/样式乱了，帮我修复"。这本身就是一次很好的"迭代修复"体验。
|
||
|
||
**进度同步 (3分钟):**
|
||
|
||
**师：** 成功用 Solo Coder 改了项目的举手！
|
||
|
||
**师：** 跟随模式感觉怎么样？看到 AI 实时改代码的时候，你什么感觉？【诊断点：检测学生对跟随模式的体验认知】【理解层】
|
||
|
||
（收集2-3个回答）
|
||
|
||
**【分支A】若学生说"很酷/很有意思"：**
|
||
**师：** 对吧！跟随模式就是让你看到"AI正在帮你干活"。以后做复杂的修改，一定要开跟随模式——既能看进度，也能及时发现问题。
|
||
|
||
**【分支B】若学生说"代码看不懂"：**
|
||
**师：** 完全正常！你不需要看懂每一行。跟随模式的重点不是让你读代码，而是让你**看到进度**——AI改到哪了、改了几个地方。就像你看装修工人干活，你不用懂每个工序，但你能看到"他在刷墙了"、"他在装灯了"。
|
||
|
||
**【分支C】若学生说"我的改坏了"：**
|
||
**师：** 太好了！这正是我要说的——**翻车是正常的**。重要的是你怎么跟 AI 说"这里出问题了"。你试着在 Solo Coder 里告诉它"刚才的修改导致XX问题，帮我修复"。
|
||
|
||
**师：** 好，我们来总结一下今天学的三种模式。（投屏）
|
||
|
||
| 你想做什么？ | 用哪个模式？ | 为什么？ |
|
||
|-------------|------------|---------|
|
||
| 我有个问题想问AI | **Chat** | 它只回答，不改你的代码 |
|
||
| 我要从零做一个新项目 | **Builder** | 它会帮你创建整个项目 |
|
||
| 我的项目已经有了，想改一个地方 | **Solo Coder** | 它会精准修改，不重写整个文件 |
|
||
|
||
**师：** 以后每次用 Trae，先问自己这个问题："我是要问问题、从零做、还是改已有的？"答案就告诉你该用哪个模式。
|
||
|
||
---
|
||
|
||
**第三幕：反思 (Contemplate) — 10分钟** 🤔
|
||
|
||
*本幕目标：展示作品，巩固三种模式的区分，强化跟随模式的体验*
|
||
|
||
**成果展示 (6分钟)**
|
||
|
||
**师：** 请3位同学来展示你的作品。展示时说三件事：
|
||
1. 你选的是哪个方向——职业预测器还是超能力抽签机？
|
||
2. 简单演示一下你的作品
|
||
3. 你用 Solo Coder 加了什么功能？跟随模式的感觉怎么样？
|
||
|
||
（选3位学生展示，每人2分钟。尽量选两个方向各有代表）
|
||
|
||
> **拍照发群：** 教师拍学生作品的精彩截图，配文字"第二节课，同学们做出了自己的趣味小应用——未来职业预测器和超能力抽签机！"发家长群。
|
||
|
||
**互评与讨论 (4分钟)**
|
||
|
||
**师：** 今天我们学了三种模式。最后做一个快速测试——
|
||
|
||
**师：** 如果你现在想把"预测器"变成"全班版"——每个同学的名字都预存进去，打开网页自动显示全班同学的名字列表。这个需求，你会用什么模式？为什么？【诊断点：检测学生的模式选择迁移能力】【应用层】
|
||
|
||
（收集回答）
|
||
|
||
**师：** 对——用 Solo Coder，因为项目已经有了，你只是想"加一个功能"。而且别忘了开跟随模式，看AI怎么帮你加的。
|
||
|
||
---
|
||
|
||
**第四幕：延续 (Continue) — 5分钟** 🚀
|
||
|
||
*本幕目标：总结三种模式+跟随模式，预告下节课的元素选择功能*
|
||
|
||
**抽象总结 (3分钟)**
|
||
|
||
**师：** 今天我们学到的核心能力是什么？
|
||
|
||
（板书/投屏）
|
||
|
||
```
|
||
Trae 三种模式：
|
||
📋 Chat → 问问题（不改代码）
|
||
🏗️ Builder → 从零创建
|
||
🔧 Solo Coder → 精准修改已有项目
|
||
|
||
跟随模式：
|
||
👁️ 实时看AI工作 → 像看直播一样
|
||
```
|
||
|
||
**师：** 记住一句话：**做新的用 Builder，改旧的用 Solo Coder，问问题用 Chat。** 这就是工具选择的智慧——不是越高级越好，而是**最合适的就是最好的**。
|
||
|
||
**5分钟挑战发布 + 下节预告 (2分钟)**
|
||
|
||
**师：** 本周5分钟挑战：
|
||
|
||
> **5分钟AI挑战：**
|
||
> 回家用 Solo Coder 给你今天做的作品加**两个新功能**。
|
||
> 比如：加背景音乐、加倒计时、加排行榜、加分享按钮。
|
||
> 记住开跟随模式！截图你看到的 AI 实时工作画面。
|
||
>
|
||
> **评价标准：**
|
||
> - 基础：成功用 Solo Coder 加了1个新功能
|
||
> - 进阶：加了2个新功能，且效果正常
|
||
> - 挑战：给家人试用你的"预测器"或"抽签机"，截图他们的反应
|
||
|
||
**师：** 下节课预告——Solo Coder 还有一个超级厉害的功能我今天没教你们。下节课你可以**直接点击网页上的某个元素**，然后告诉 AI "把这个按钮变大"或者"把这段文字的颜色改了"——不需要知道代码在哪里，直接点就行。想不想学？
|
||
|
||
**生：** （预期：想！）
|
||
|
||
**师：** 那下节课见！
|
||
|
||
---
|
||
|
||
### 5. AI助教使用指南
|
||
|
||
**教师演示用提示词（未来职业预测器）：**
|
||
|
||
```
|
||
帮我创建一个 index.html 文件，做一个"未来职业预测器"趣味网页：
|
||
1. 页面顶部有一个大标题"🔮 未来职业预测器"，用超大号 emoji 做图标
|
||
2. 中间有一个输入框（placeholder "输入你的名字"）和一个"开始预测"按钮
|
||
3. 点击按钮后，在下方用卡片展示随机职业结果：
|
||
- 一个超大号 emoji 代表这个职业
|
||
- 职业名称（大字加粗）
|
||
- 一段搞笑的职业描述（2-3句话，幽默风格）
|
||
4. 预设至少 12 个职业，包括：太空探险家👨🚀、时间旅行导游⏰、美食评论家🍜、动物翻译官🐶、云朵设计师☁️、彩虹工程师🌈、恐龙考古学家🦕、海底城市建筑师🏗️、外星语言学家👽、魔法药水调配师🧪、梦境导演🎬、星球命名师⭐
|
||
5. 结果出现时有缩放弹出 + 淡入动画
|
||
6. 有"再测一次"按钮，点击后清空结果重新预测
|
||
7. 整体用渐变背景（紫色到深蓝），卡片白色圆角阴影
|
||
8. 所有视觉效果用 emoji 和 CSS 实现，不要使用任何外部图片或图片链接
|
||
9. 整个页面适合在浏览器中直接打开运行
|
||
```
|
||
|
||
**教师演示用提示词（超能力抽签机）：**
|
||
|
||
```
|
||
帮我创建一个 index.html 文件，做一个"超能力抽签机"趣味网页：
|
||
1. 页面顶部有大标题"⚡ 超能力抽签机"，深色炫酷风格
|
||
2. 中间有一个大按钮"抽取超能力！"（有发光效果）
|
||
3. 点击按钮后，用卡片展示随机超能力：
|
||
- 一个超大号 emoji 代表这个超能力
|
||
- 超能力名称（大字加粗发光）
|
||
- 稀有度等级（用 ⭐ 表示，1-5星随机）
|
||
- 一段有趣的超能力描述（2-3句话）
|
||
4. 预设至少 12 个超能力，包括：火焰掌控🔥、时间暂停⏱️、隐身术👻、读心术🧠、瞬间移动🌀、万有引力控制🪐、动物对话🦁、天气操控🌪️、超级记忆📚、金属操控⚙️、光速奔跑💨、植物生长🌿
|
||
5. 抽到结果时有卡片翻转 + 发光动画效果
|
||
6. 有"再抽一次"按钮
|
||
7. 整体深色主题（黑紫渐变），有霓虹灯光效
|
||
8. 所有视觉效果用 emoji 和 CSS 实现，不要使用任何外部图片或图片链接
|
||
9. 整个页面适合在浏览器中直接打开运行
|
||
```
|
||
|
||
**学生保底提示词（未来职业预测器简化版）：**
|
||
|
||
```
|
||
帮我创建一个 index.html 文件，做一个"未来职业预测器"：
|
||
1. 有一个输入框输入名字
|
||
2. 有一个"预测"按钮
|
||
3. 点按钮随机显示一个职业，用大号 emoji 做图标
|
||
4. 准备10个有趣的职业
|
||
5. 有动画效果，界面好看
|
||
6. 不要用外部图片，用 emoji 和 CSS
|
||
```
|
||
|
||
**学生保底提示词（超能力抽签机简化版）：**
|
||
|
||
```
|
||
帮我创建一个 index.html 文件，做一个"超能力抽签机"：
|
||
1. 有一个"抽签"按钮
|
||
2. 点按钮随机显示一个超能力，用大号 emoji 做图标
|
||
3. 显示超能力名称和有趣的描述
|
||
4. 准备10个超能力
|
||
5. 有动画效果，深色炫酷风格
|
||
6. 不要用外部图片，用 emoji 和 CSS
|
||
```
|
||
|
||
**Solo Coder 迭代用提示词示例：**
|
||
|
||
```
|
||
给"开始预测"按钮加一个加载动画：
|
||
点击后按钮显示"正在预测中... ⏳"，1.5秒后再显示结果
|
||
```
|
||
|
||
```
|
||
在结果卡片下面加一行小字："预测准确率 99.9%（仅供娱乐）"
|
||
```
|
||
|
||
---
|
||
|
||
### 6. 教师指南
|
||
|
||
**本课技术备注：**
|
||
|
||
1. **三种模式的底层区别**：Chat 模式只在对话中回复，不会修改文件系统中的文件。Builder 模式会创建新文件或完整重写文件。Solo Coder 模式会在现有文件基础上做增量修改（diff），改动更精准。
|
||
2. **跟随模式（Follow Mode）**：开启后，Trae 会自动跳转到 AI 正在编辑的文件和行号，让你实时看到变化。关闭后 AI 仍然在工作，只是你看不到实时过程。跟随模式不影响 AI 的工作质量，只影响你的观看体验。
|
||
3. **Accept/Reject 机制**：Solo Coder 修改后同样需要 Accept。如果不满意可以 Reject 拒绝，代码会恢复到修改前的状态。
|
||
4. **emoji 渲染**：emoji 在不同操作系统上显示样式略有不同（Windows 的 emoji 和 Mac 的不一样），但功能一致。通过 CSS 的 `font-size` 可以将 emoji 放到任意大小，不会模糊。
|
||
5. **为什么不用外部图片**：纯 AI 编程模型不能生成图片文件，用外部图片链接需要联网且链接可能失效。emoji + CSS 方案完全离线可用、永不失效，是当前阶段最稳定的视觉方案。
|
||
|
||
**常见问题 FAQ：**
|
||
|
||
| 学生问题 | 建议回答 |
|
||
|---------|---------|
|
||
| "Solo Coder 和 Builder 到底什么区别？" | Builder 是造房子——从地基开始建。Solo Coder 是装修——房子已经有了，你只改你想改的地方 |
|
||
| "跟随模式在哪里打开？" | 进入 Solo Coder 后，在面板上找眼睛图标或"Follow"按钮，点一下就打开了 |
|
||
| "我用 Solo Coder 改了之后页面变空白了" | 没关系！先试试点 Reject 撤销修改。如果已经 Accept 了，在 Solo Coder 里说"页面变空白了，帮我修复回正常状态" |
|
||
| "我可以在 Solo Coder 里加全新的功能吗？" | 可以！Solo Coder 不仅能改，也能加新功能。只要项目已经存在，用 Solo Coder 加功能比 Builder 更精准 |
|
||
| "emoji 好小怎么办？" | 在提示词里说"用超大号 emoji"，AI 会用 CSS 把 emoji 放大。如果还不够大，跟 AI 说"emoji 再大一倍" |
|
||
| "我想用真的图片不用 emoji 行吗？" | 目前我们用 emoji 是最稳定的方案——不需要网络、不会失效。以后我们学到更高级的技术会用真实图片 |
|
||
| "三种模式可以随时切换吗？" | 可以！随时切换。但建议养成习惯：做新的用 Builder，改旧的用 Solo Coder |
|
||
|
||
**课堂风险预案：**
|
||
- 如果 Solo Coder 不可用（版本问题）：退回 Builder 模式做迭代，Builder 也能对已有文件追加修改，只是不够精准
|
||
- 如果跟随模式打不开：不影响核心教学，Solo Coder 的核心功能是精准修改，跟随模式是锦上添花
|
||
- 如果学生进度差异过大：快学生挑战"用 Solo Coder 加3个新功能"，慢学生确保 Builder 基础版能运行即可
|
||
|
||
**备课体验任务清单：**
|
||
|
||
- [ ] 用 Builder 做一个"未来职业预测器"完整版
|
||
- [ ] 切换到 Solo Coder + 跟随模式，做一次修改
|
||
- [ ] 用 Builder 做一个"超能力抽签机"完整版
|
||
- [ ] 切换到 Solo Coder + 跟随模式，做一次修改
|
||
- [ ] 用 Chat 模式试一次修改请求，确认它"只回答不动手"的表现
|
||
- [ ] 故意让 Solo Coder 改出一个 bug，练习"描述问题让AI修复"的流程
|
||
- [ ] 确认校区每台电脑的 Trae 三种模式都可正常切换
|
||
|
||
---
|
||
|
||
### 7. 5分钟日常AI挑战
|
||
|
||
**本周挑战：**
|
||
|
||
> **"我的作品 2.0 版"**
|
||
>
|
||
> **操作步骤：**
|
||
> 1. 打开你今天做的"未来职业预测器"或"超能力抽签机"
|
||
> 2. 切换到 **Solo Coder** 模式，打开**跟随模式**
|
||
> 3. 给它加**两个新功能**（自选），比如：
|
||
> - 加背景音效
|
||
> - 加预测/抽签次数统计
|
||
> - 加"分享给朋友"的文字
|
||
> - 加夜间模式切换
|
||
> - 加更多职业/超能力选项
|
||
> 4. 截图跟随模式的实时工作画面 + 最终效果
|
||
>
|
||
> **评价标准：**
|
||
> - 基础：成功用 Solo Coder 加了1个新功能
|
||
> - 进阶：加了2个新功能，且效果正常
|
||
> - 挑战：给家人或朋友试用，截图他们的反应
|
||
|
||
---
|
||
|
||
### 8. 拓展任务
|
||
|
||
**拓展一（推荐）：合体版**
|
||
> 把"未来职业预测器"和"超能力抽签机"合并成一个页面——先预测未来职业，再抽一个超能力，组合成"你的超级英雄档案"。用 Solo Coder 在已有项目上扩展。
|
||
|
||
**拓展二（挑战）：自定义主题**
|
||
> 用同样的"随机结果"框架，做一个完全不同主题的抽签器——比如"今日幸运色"、"晚饭吃什么决定器"、"下课后干什么抽签"。从零用 Builder 创建，然后用 Solo Coder 打磨。
|