---
课时: 3
主题: Solo Coder 迭代深化
核心能力: [提问力, 审美力]
核心工具: [Trae IDE]
时长: 90分钟
透明化层级: 结果层
适用路线: AICODE-06（有扣子/低代码经验的学生）
---

### 1. 课程目标

**知识目标：**
- 理解 Trae 内置浏览器的作用：不用切换窗口，直接在 IDE 里预览网页效果
- 掌握元素选择功能的原理：点击网页上的元素 → 自动定位到代码 → 发送给 AI 修改
- 理解"迭代深化"的含义：每一轮修改都让作品更完善，而不是推倒重来

**能力目标：**
- 能使用内置浏览器预览网页，替代外部浏览器的手动刷新流程
- 能使用元素选择功能：点击 Select 按钮 → 点击页面元素 → 在 Solo Coder 中描述修改需求
- 能对上节课的作品进行至少 3 轮有效迭代，从"能用"升级到"好用又好看"

**情感目标：**
- 感受到"点哪改哪"带来的掌控感——不需要懂代码也能精准修改
- 建立"好作品是改出来的"迭代意识，不追求一次完美
- 对自己作品的持续进化感到自豪

---

### 2. 核心概念与误概念预设

**核心概念认知层级：**

| 概念 | 学生类比 | 认知层级 |
|------|---------|---------|
| 内置浏览器 = IDE 里的预览窗口 | 像画板旁边放了一面镜子，画一笔就能看到效果 | 识别层 |
| 元素选择 = 点哪改哪 | 像用手指着一幅画说"这朵花的颜色要改"，画家立刻就知道你说的是哪里 | 识别层 |
| 迭代深化 = 一轮轮打磨 | 像雕塑家——先雕大形，再雕细节，再打磨光滑 | 理解层 |
| 功能迭代 vs 视觉迭代 | 功能迭代 = 加新能力（加按钮、加功能）；视觉迭代 = 变好看（改颜色、加动画） | 理解层 |
| 迭代节奏：功能→体验→美化 | 先确保能用，再确保好用，最后确保好看 | 应用层 |

**典型误概念表：**

| 编号 | 误概念 | 正确认知 | 激发策略 |
|------|--------|---------|---------|
| M1 | "元素选择就是改颜色用的" | 元素选择可以用于任何修改——改文字、改大小、改功能、改布局，不只是颜色 | 演示用元素选择改功能逻辑，不只是改样式 |
| M2 | "改来改去会把网页改坏" | 每次 Accept 之前可以预览效果，不满意可以 Reject。改坏了也能用 Solo Coder 修复 | 故意改出一个问题，演示修复流程 |
| M3 | "迭代就是不停加新功能" | 迭代包括加功能、修问题、改体验、美化视觉，不只是加新东西 | 展示一个"功能很多但很丑"的反面案例 |
| M4 | "一次说很多修改，AI能全做对" | 每次只说一个修改最稳定。一次说太多，AI容易顾此失彼 | 演示一次说5个修改 vs 分5次各说1个的对比 |
| M5 | "内置浏览器和外面的浏览器一样" | 内置浏览器方便预览，但某些复杂效果可能显示不同。最终验收建议用外部浏览器 | 提一句即可，本课以内置浏览器为主 |

---

### 3. 教学准备

**工具与环境：**
- 每台电脑已预装 Trae IDE，已登录校区账号
- 网络环境正常
- 学生上节课的项目文件夹仍在桌面（"未来职业预测器"或"超能力抽签机"）

**教学资源：**
- 教师准备：1个"未来职业预测器"的基础版 → 迭代完善版的对比（展示迭代前后差异）
- 教师准备：元素选择功能的操作录屏或截图（备用，万一投屏看不清）
- 教师准备：一份"迭代清单"模板（打印或投屏）
- 学生资源：上节课完成的作品（未来职业预测器 or 超能力抽签机）

**教师备课体验任务：**
> 备课前，教师必须亲自完成以下操作：
> 1. 打开上节课做的"未来职业预测器"项目，使用内置浏览器预览
> 2. 使用元素选择功能：点 Select → 点页面上的标题 → 在 Solo Coder 中说"把这个标题改大一倍"
> 3. 连续进行 5 轮迭代，记录每轮改了什么、效果如何
> 4. 故意制造一个"改坏了"的情况（比如把布局搞乱），练习用 Solo Coder 修复
> 5. 测试"一次说一个修改" vs "一次说多个修改"的效果差异

---

### 4. 教学流程

---

**第一幕：联系 (Connect) — 10分钟** 🔗

*本幕目标：展示 L02 课外挑战成果，用基础版 vs 完善版的对比引出"迭代深化"的价值*

**【环节】上节课回顾 + 课外挑战展示 (4分钟)**

**师：** 上节课我们学了 Trae 的三种模式——谁来说说分别是哪三个、各自干什么？

**生：** （预期：Chat 问问题、Builder 从零做、Solo Coder 改已有的）

**师：** 对！还学了一个酷功能——跟随模式，可以看 AI 实时工作。上周的5分钟挑战是"给作品加两个新功能"，有谁做了的？

（选1-2位学生快速展示课外挑战成果，30秒/人）

**师：** 不错！你们已经在用 Solo Coder 迭代了。

**【环节】情景导入 (6分钟)**

**师：** 现在我给你们看两个版本的"未来职业预测器"。

（教师投屏展示两个版本——左边是 L02 的基础版，右边是经过多轮迭代的完善版）

**师：** 左边是我们上节课做出来的基础版。右边是我花了十几分钟迭代出来的版本。看看区别——

（逐一指出差异）

- 基础版：结果直接蹦出来 → 完善版：先有加载动画，再翻转显示
- 基础版：只有一个"再测一次"按钮 → 完善版：加了预测次数统计、历史记录
- 基础版：背景是简单渐变 → 完善版：有星空粒子动画效果
- 基础版：标题普通大小 → 完善版：标题有发光呼吸效果

**师：** 同样的项目，基础版和完善版差别大不大？

**生：** （预期：差很多！）

**师：** 差别很大。但是——我有没有重新做一个？

**生：** （预期：没有）

**师：** 没有！我就是在原来的基础上，**一轮一轮地改**。每次只改一个地方。改了十几轮，就变成这样了。这就叫**迭代深化**——好作品不是一次做出来的，是一轮轮改出来的。【诊断点：探测学生对"迭代"的理解深度】【理解层】

**师：** 今天我们就用 Solo Coder 的两个超强功能——**内置浏览器**和**元素选择**——来把你上节课的作品从"基础版"升级成"完善版"。

**师：** 上节课我预告过的——今天你可以**直接点网页上的某个东西**，告诉 AI "改这个"。不需要知道代码在哪里，直接指就行。我们开始！

---

**第二幕：建构 (Construct) — 65分钟** 🛠️

---

**【分段一：内置浏览器预览】(10分钟)**

*本段重点：学会用内置浏览器替代外部浏览器，建立更高效的预览习惯*

**预设误概念：**
- M5: 内置浏览器和外面的浏览器一样

**讲解与演示 (4分钟):**

**师：** 上节课你们预览网页的时候，是不是要切到外部浏览器，双击文件，或者刷新页面？

**生：** （预期：是的）

**师：** 每改一次就切出去刷新一次，累不累？

**生：** （预期：累/麻烦）

**师：** Trae 有一个内置浏览器——不需要切出去，直接在 Trae 里面就能预览。我来演示。

（教师操作）

**师：** 打开你上节课的项目文件夹。然后在 Trae 里找到 **内置浏览器预览** 的入口——

操作步骤：
1. 在文件管理器里找到 `index.html`
2. 右键点击 → 选择"在内置浏览器中预览"（或者使用命令面板搜索"Preview"）

（教师展示内置浏览器面板出现在 IDE 右侧或下方）

**师：** 看到了吗？网页直接显示在 Trae 里面了！以后改代码，Accept 之后，这个预览会**自动刷新**。不需要手动切换、不需要手动刷新。

**师：** 从现在开始，我们的工作流变成：**Solo Coder 说修改 → Accept → 内置浏览器自动看效果**。全程不离开 Trae。

**学生实践 (4分钟):**

**师：** 现在你们来做：
1. 用 Trae 打开你上节课的项目文件夹（桌面上的"未来职业预测器"或"超能力抽签机"）
2. 找到 `index.html`，右键 → 内置浏览器预览
3. 确认你在 Trae 里面看到了你的网页

**师：** 看到内置预览的同学举手。

（教师走动协助找不到内置浏览器入口的学生）

**进度同步 (2分钟):**

**师：** 打开了的举手？好。从现在开始，我们所有的预览都用内置浏览器。再也不用切出去了。【诊断点：确认学生能打开内置浏览器】【识别层】

**【分支A】若大部分学生打开了：**
**师：** 很好！接下来学今天的重头戏——元素选择。

**【分支B】若有学生找不到：**
**师：** 没关系，找不到的同学跟着我再做一遍。（快速重新演示入口位置）

---

**【分段二：元素选择——点哪改哪】(20分钟)**

*本段重点：学会使用元素选择功能，体验"不用看代码也能精准修改"的威力*

**预设误概念：**
- M1: 元素选择就是改颜色用的
- M4: 一次说很多修改AI能全做对

**讲解与演示 (7分钟):**

**师：** 上节课用 Solo Coder 的时候，你得自己描述"把标题改大"、"把按钮颜色换了"。但如果你不知道那个东西叫什么呢？比如你想改页面上的某段文字，但你不知道它在代码里叫什么名字。

**师：** 今天学的这个功能就解决了这个问题——**元素选择**。你直接**用鼠标点**网页上你想改的那个东西，Trae 会自动把它发给 AI，然后你只要说"改成什么样"就行。

**师：** 看我操作：

（教师投屏演示，步骤清晰放慢）

**第一步：打开元素选择**

**师：** 在内置浏览器的工具栏上，找到一个 **Select（选择）按钮**——通常是一个光标/箭头图标。点它。

（点击 Select 按钮，按钮高亮表示已激活）

**师：** 看到了吗？按钮亮了，说明"选择模式"已经打开。现在你的鼠标变成了"选择器"——你点网页上的任何东西，它都会被选中。

**第二步：点击你想修改的元素**

**师：** 比如我想改这个标题"🔮 未来职业预测器"的大小。我直接**点它**。

（鼠标点击标题文字，元素被高亮框选）

**师：** 看！标题被框选了，而且——注意看 Solo Coder 的输入框——它自动把这个元素的信息发过去了。

**第三步：描述你要怎么改**

**师：** 现在我在 Solo Coder 里输入我的修改需求：

```
把这个标题改大 50%，加一个发光效果，颜色改成金色
```

（发送，跟随模式展示 AI 实时修改）

**师：** 看内置浏览器——标题变大了、变金色了、还在发光！

**师：** 整个过程：**点 Select → 点元素 → 说怎么改 → Accept → 看效果**。你全程不需要知道代码在哪里、代码长什么样。你只需要指着它说"改这个"——就像你指着墙壁跟装修工人说"这面墙换个颜色"。

（再演示一次不同类型的修改）

**师：** 我再演示一个。这次我选中这个"开始预测"按钮——

（点 Select → 点击按钮）

```
把这个按钮改成圆形，加一个鼠标悬停时放大的效果
```

（展示修改后的效果——按钮变圆、悬停放大）

**师：** 两个关键原则：

**原则一：每次只改一个地方。** 不要一次说"改标题、改按钮、改背景、加动画"——AI 容易顾此失彼。一个一个来最稳。

**原则二：说清楚"改成什么样"。** 不要只说"改好看一点"——要说"改成金色发光"、"按钮变圆"、"字体加大50%"。越具体越好。

**学生实践 (10分钟):**

**师：** 现在你们来试！用元素选择改你的作品。

**操作步骤：**
1. 确认已经切到 **Solo Coder** 模式
2. 确认**内置浏览器**预览已打开
3. 点**内置浏览器工具栏的 Select 按钮**
4. **点击**你想改的元素
5. 在 Solo Coder 中**描述修改**
6. **Accept** → 看效果

**练习任务：用元素选择完成至少 2 次修改**

修改建议（每次选一个）：

| 选中什么 | 说什么修改 |
|---------|-----------|
| 标题文字 | "把标题字体改大，加发光/阴影效果" |
| 按钮 | "把按钮改成圆角/圆形，加悬停动画" |
| 结果卡片 | "给卡片加一个边框发光效果" |
| 背景 | "把背景改成动态渐变/加星空粒子效果" |
| 任意文字 | "把这段文字改成你想要的内容" |

**师：** 记住——**每次只改一个**，改完看效果，再选下一个。10分钟内至少完成2次修改。

（教师走动观察）

（教师走动重点关注：）
- 是否找到了 Select 按钮
- 点击元素后是否正确发送到了 Solo Coder
- 修改描述是否够具体（"改好看点" vs "加发光效果"）
- 是否记得 Accept
- 是否只改一个（有学生可能贪心一次说很多）

**快学生应对：** 2次改完后继续改——挑战完成5次修改，让作品焕然一新。

**慢学生应对：** 如果找不到 Select 按钮，教师手把手指一次。如果元素选择不生效，退回到直接在 Solo Coder 里文字描述修改需求。

**进度同步 (3分钟):**

**师：** 用元素选择成功修改了2次以上的举手！

**师：** 你们觉得元素选择厉害在哪里？跟上节课直接在 Solo Coder 里打字描述相比，有什么不同？【诊断点：检测学生是否理解元素选择的优势】【理解层】

**【分支A】若学生说"不用知道代码叫什么"：**
**师：** 对！这就是最大的优势。你不需要知道"标题"在代码里叫 `<h1>` 还是 `<div>`，你直接指着它就行。AI 知道你指的是哪个。

**【分支B】若学生说"更快/更方便"：**
**师：** 对！快在哪里呢？——你不用花时间描述"页面顶部的那个大标题"，直接点一下就选中了。省了描述的时间。

**【分支C】若学生说"但我还是喜欢打字描述"：**
**师：** 两种方式都可以！简单的修改用元素选择最快，复杂的逻辑修改（比如"加一个新功能"）用文字描述更合适。工具越多，选择越灵活。

---

**【分段三：迭代深化实战——从"能用"到"好用又好看"】(26分钟)**

*本段重点：运用元素选择 + 文字描述，对作品进行系统性迭代，建立迭代节奏感*

**预设误概念：**
- M2: 改来改去会把网页改坏
- M3: 迭代就是不停加新功能

**讲解与演示 (6分钟):**

**师：** 刚才你们练习了元素选择。现在我们进入今天的核心——**迭代深化**。

**师：** 什么是迭代深化？打个比方——你画了一幅画的草稿，然后你一遍遍地改：第一遍描线条，第二遍上颜色，第三遍加细节，第四遍调光影。每一遍都让画更完善。做产品也一样。

**师：** 迭代有个节奏，不是乱改的。我推荐这个顺序：

（投屏）

```
迭代三步走：
🔧 第一步：修 Bug —— 有没有东西不能用、显示不对？先修好
🎯 第二步：加体验 —— 加载动画、操作反馈、过渡效果
🎨 第三步：美化视觉 —— 颜色、字体、间距、阴影、动画
```

**师：** 为什么这个顺序？因为——如果功能还有 bug，你先去美化，等 bug 修了界面可能又变了，白美化了。**先确保能用，再确保好用，最后确保好看。**

**师：** 我来演示一轮完整的迭代。（打开教师的基础版项目）

**第一步（修 Bug）：** 我发现点"再测一次"之后，旧的结果没有清除，新结果直接叠在下面了。

（用元素选择点击"再测一次"按钮）

```
点击"再测一次"按钮后，要先清除之前的预测结果，再重新开始。现在的问题是旧结果没有消失。
```

（Accept → 验证修复）

**第二步（加体验）：** 结果出来太突然，加个过渡。

```
预测结果显示时，加一个从下方弹入的动画效果，持续0.5秒
```

（Accept → 看效果）

**第三步（美化）：** 标题不够突出。

（用元素选择点击标题）

```
给这个标题加文字阴影发光效果，像霓虹灯一样
```

（Accept → 看效果）

**师：** 三轮迭代，每轮只改一个点，但作品明显变好了。这就是迭代深化的威力。

**师：** 还有一个重要的事——**如果改坏了怎么办？**

（教师故意做一个会出问题的修改）

```
把整个页面的布局改成左右分栏
```

（Accept → 页面布局混乱）

**师：** 看！改坏了。别慌——两个办法：
1. **Reject**：如果还没 Accept，直接点 Reject 拒绝这次修改
2. **让 AI 修复**：如果已经 Accept 了，直接在 Solo Coder 里说——

```
刚才的布局修改有问题，页面乱了。请恢复成原来的单列居中布局。
```

（Accept → 恢复正常）

**师：** 看到了吗？修回来了。所以不要怕改坏——**改坏了就让 AI 修**，这本身就是迭代的一部分。

**学生实践 (18分钟):**

**师：** 现在是今天最重要的环节——你要对你的作品进行**系统性迭代**。

**任务：按"修 Bug → 加体验 → 美化"的顺序，完成至少 3 轮迭代。**

（投屏迭代清单模板）

```
我的迭代清单：

🔧 修 Bug（检查一遍你的作品，有没有不对的地方）
- [ ] 改动1：__________

🎯 加体验（让操作过程更流畅、更有感觉）
- [ ] 改动2：__________

🎨 美化（让视觉效果更好看）
- [ ] 改动3：__________

⭐ 加分项（如果时间够，再改）
- [ ] 改动4：__________
```

**师：** 先花1分钟检查你的作品，想好你要改什么，然后开始。

**修改灵感参考：**

| 类别 | 未来职业预测器 | 超能力抽签机 |
|------|-------------|-------------|
| 🔧 修 Bug | 重复预测没清空结果？按钮点了没反应？ | 抽到重复超能力？动画没播完就显示结果？ |
| 🎯 加体验 | 加预测次数统计、加"分享结果"文字、加加载音效描述 | 加"已收集X个超能力"计数、加稀有度排行、加连续抽签动画 |
| 🎨 美化 | 标题发光效果、卡片翻转动画、背景星空/粒子 | 霓虹灯边框、卡片发光脉冲、暗色主题加亮色点缀 |
| ⭐ 加分项 | 加"预测历史"列表 | 加"超能力图鉴"（记录所有抽到的） |

**师：** 记住：
- **用元素选择**改视觉类的东西（颜色、大小、样式）
- **用文字描述**加功能类的东西（计数器、新按钮、新逻辑）
- **每次只改一个**，Accept 后看效果再改下一个
- 改坏了不要怕，**告诉 AI 修复**就行

**师：** 18分钟！至少完成3轮迭代。开始！

（教师走动观察）

（教师走动重点关注：）
- 学生是否按节奏迭代（先修 bug 再加功能再美化），还是一上来就美化
- 修改描述是否具体
- 是否每次只改一个（贪心一次改太多的要提醒）
- 有没有学生"改坏了"但不知道怎么修复——引导他们用 Solo Coder 描述问题
- 进度差异：快学生可能已经迭代5-6轮，慢学生可能才改了1-2处

**快学生应对：** 完成3轮基础迭代后，挑战"加一个全新功能"——比如预测器加"输入生日影响预测结果"、抽签机加"超能力图鉴"。

**慢学生应对：** 如果学生不知道改什么，教师直接给一个具体指令："用元素选择点你的标题，然后跟 AI 说'把标题加大，加一个发光效果'"。一轮成功后信心就来了。

**进度同步 (2分钟):**

**师：** 时间到！迭代了3轮以上的举手？5轮以上的呢？

**师：** 现在回头看一下你的作品——跟上节课结束时的版本比，变化大不大？【诊断点：检测学生是否感知到迭代的价值】【理解层】

**生：** （预期：大/变好看了/功能多了）

**师：** 你今天重新做了一个新项目吗？

**生：** （预期：没有）

**师：** 没有！你只是在原来的基础上，一轮一轮地改。但结果却好了很多。**这就是迭代的力量——不推倒重来，每次改好一点点，累积起来就是质变。**

---

**第三幕：反思 (Contemplate) — 10分钟** 🤔

*本幕目标：展示迭代前后对比，巩固"元素选择+迭代深化"的核心认知*

**成果展示 (6分钟)**

**师：** 请3位同学来展示你的作品。展示时说三件事：
1. 简单演示你的作品（现在的样子）
2. 你做了几轮迭代？印象最深的一次修改是什么？
3. 有没有"改坏了"的经历？你是怎么修复的？

（选3位学生展示，每人2分钟。尽量选：一个改了很多轮效果很好的、一个改坏又修好的、一个做了创新功能的）

> **拍照发群：** 拍学生作品迭代前后的对比截图，配文字"第三节课，同学们学会了'迭代深化'——同一个项目，一轮轮打磨，越改越好！"发家长群。

**互评与讨论 (4分钟)**

**师：** 看完了三位同学的作品。我们来想一个问题——

**师：** 你觉得今天学的"元素选择"和"直接在 Solo Coder 里打字"，什么时候用哪个更好？【诊断点：检测学生能否根据场景选择合适的交互方式】【应用层】

（收集回答）

**【分支A】若学生能区分场景：**
**师：** 总结得很好。简单改视觉——点一下最快。加新功能——打字说清楚。两种方式配合使用，效率最高。

**【分支B】若学生说不清楚：**
**师：** 记住这个口诀：**看得见的点一下，想出来的打字说**。你能在页面上看到的东西（标题、按钮、卡片），用元素选择最快。你脑子里想的新功能（加计数器、加历史记录），用打字描述。

---

**第四幕：延续 (Continue) — 5分钟** 🚀

*本幕目标：总结迭代三步走，预告下节课的独立作品*

**抽象总结 (3分钟)**

**师：** 今天我们学到的核心能力：

（板书/投屏）

```
两个新工具：
🖥️ 内置浏览器 → 改完自动刷新，不用切窗口
👆 元素选择 → 点哪改哪，不用知道代码名字

迭代三步走：
🔧 修 Bug → 🎯 加体验 → 🎨 美化视觉

口诀：
"看得见的点一下，想出来的打字说"
"每次只改一个，改坏了让AI修"
```

**师：** 今天最重要的一句话是：**好作品是改出来的，不是一次做出来的。** 这个道理不只适用于编程，做PPT、写作文、画画，都一样。先做出来，再一轮轮打磨。

**5分钟挑战发布 + 下节预告 (2分钟)**

**师：** 本周5分钟挑战：

> **5分钟AI挑战：**
> 把你的"未来职业预测器"或"超能力抽签机"再迭代 **5 轮**，让它变成你觉得"可以拿给全班同学用"的水平。
> 用元素选择 + Solo Coder 配合使用。
>
> **截图清单（至少交3张）：**
> 1. 迭代前的截图
> 2. 迭代过程中的截图（内置浏览器 + Solo Coder 对话）
> 3. 最终版本的截图
>
> **评价标准：**
> - 基础：完成了5轮迭代，有前后对比
> - 进阶：迭代包含修 Bug + 加体验 + 美化三个维度
> - 挑战：给3个以上的同学/家人试用，收集他们的反馈

**师：** 下节课——**我的第一个Web作品**。这次你不是改旧项目了，而是**从零开始做一个全新的作品**。你来决定做什么、怎么做。你前三节课学的所有东西——Builder 从零建、Solo Coder 精准改、元素选择点哪改哪——全部用上。你将独立完成一个可以展示的完整作品。

**生：** （预期反应积极）

**师：** 提前想好你想做什么——游戏、工具、还是创意页面都行。想不到的话下节课我会给你灵感。下节课见！

---

### 5. AI助教使用指南

**教师演示用提示词（元素选择后的修改示例）：**

```
把这个标题改大 50%，加一个金色发光文字阴影效果
```

```
把这个按钮改成圆形，加一个鼠标悬停时缩放1.1倍的动画
```

```
给这个卡片加一个渐变色边框，从紫色到蓝色，有发光效果
```

**教师演示用提示词（功能迭代示例）：**

```
给"再测一次"按钮加一个功能：每次预测后在下方显示"你已经预测了X次"的计数
```

```
加一个预测历史功能：
每次预测结果显示后，把职业名称和emoji存到一个列表里。
在页面底部显示"预测历史"区域，列出所有预测过的职业。
```

```
加一个"分享结果"功能：
在预测结果下方显示一行文字："🔮 [名字] 的未来职业是 [职业emoji] [职业名称]！"
这行文字用特殊样式显示，方便截图分享。
```

**学生保底提示词（修 Bug 类）：**

```
我的网页有个问题：点击"再测一次"后，旧的结果没有消失，新结果叠在下面了。请修复，让每次预测前清空之前的结果。
```

**学生保底提示词（美化类）：**

```
给整个页面加一个动态背景效果——缓慢变化的渐变色，从深紫到深蓝来回循环
```

**修复类提示词（改坏了时用）：**

```
刚才的修改导致页面布局出问题了，[具体描述问题]。请恢复正常并保留之前的功能。
```

---

### 6. 教师指南

**本课技术备注：**

1. **内置浏览器**：Trae 的内置浏览器基于 Chromium 内核，与 Chrome 渲染效果基本一致。某些高级 CSS 动画在内置浏览器中可能有轻微差异，但对课堂教学无影响。
2. **元素选择原理**：点击 Select 按钮后，内置浏览器进入"检查模式"。点击页面元素时，Trae 会识别该元素在 HTML 中的位置（类似浏览器的 DevTools 元素检查器），并将信息传递给 Solo Coder，让 AI 知道你要修改哪个元素。
3. **元素选择的局限性**：动态生成的元素（如通过 JavaScript 动态创建的内容）可能在某些情况下选择不到。这种情况下退回文字描述即可。
4. **Accept/Reject 与撤销**：Accept 后代码已写入文件。如果需要撤回，可以用 Ctrl+Z 撤销文件改动，或让 AI 修复。Reject 则完全不改动文件。
5. **单文件迭代策略**：当前所有代码在一个 index.html 中。随着迭代次数增多，文件会越来越长（可能超过500行），AI 仍然能正常处理，但响应速度可能略慢。

**常见问题 FAQ：**

| 学生问题 | 建议回答 |
|---------|---------|
| "元素选择选不到我想改的东西" | 有些元素可能被其他元素盖住了，或者是动态生成的。没关系，直接在 Solo Coder 里用文字描述你想改什么——比如"页面底部的那个按钮" |
| "我改了好多轮，网页变得越来越慢了" | 代码可能变多了。跟 AI 说"请检查一下代码，去掉重复的或者没用到的部分，优化一下性能" |
| "我想回到几步之前的版本" | 目前最简单的办法是跟 AI 说"请把XX恢复成之前的样子"。以后我们会学更强大的版本管理方法 |
| "内置浏览器显示的和外部浏览器不一样" | 偶尔会有小差异。最终验收用外部浏览器双击 index.html 打开看一下 |
| "我改了一个地方，其他地方也变了" | 这可能是因为 AI 修改了公共样式。跟 AI 说"只修改XX那个元素的样式，不要影响其他元素" |
| "迭代清单写不出来" | 试试这个思路：先看有没有 bug → 操作起来顺不顺畅 → 好不好看。每个方向找一个可以改的地方 |

**课堂风险预案：**
- 如果元素选择功能不可用（版本兼容问题）：全程使用 Solo Coder 文字描述修改，教学目标不变
- 如果内置浏览器不可用：使用外部浏览器手动刷新，多花10秒但不影响核心教学
- 如果学生上节课的作品文件找不到了：用 Builder 快速重建一个基础版（5分钟），使用保底提示词
- 如果学生进度差异过大：慢学生确保完成2轮迭代即可，快学生挑战"加一个全新功能模块"

**备课体验任务清单：**

- [ ] 打开上节课的"未来职业预测器"项目，使用内置浏览器预览
- [ ] 用元素选择功能修改标题样式、按钮样式、卡片样式各一次
- [ ] 按"修 Bug → 加体验 → 美化"顺序完成5轮迭代
- [ ] 故意制造一个"改坏了"的情况，用 Solo Coder 修复
- [ ] 测试"一次说一个修改" vs "一次说三个修改"的效果对比
- [ ] 确认校区每台电脑的 Trae 内置浏览器和元素选择功能可正常使用

---

### 7. 5分钟日常AI挑战

**本周挑战：**

> **"我的作品 3.0 版"**
>
> **操作步骤：**
> 1. 打开你今天迭代过的"未来职业预测器"或"超能力抽签机"
> 2. 按"修 Bug → 加体验 → 美化"顺序，再迭代 **5 轮**
> 3. 目标：做到你觉得"可以拿给全班同学玩"的水平
> 4. 截图保存：迭代前 → 迭代中 → 最终版本
>
> **评价标准：**
> - 基础：完成了5轮迭代，有前后对比截图
> - 进阶：三个维度（修 Bug、加体验、美化）都有涉及
> - 挑战：给3个以上的人试用，收集反馈并根据反馈再改一轮

---

### 8. 拓展任务

**拓展一（推荐）：极限迭代挑战**
> 对你的作品再进行 **10 轮迭代**，看看你能把它打磨到什么程度。每轮迭代前先想清楚"这一轮要改什么"，不要随便乱改。记录每轮改了什么，做一份"迭代日志"。

**拓展二（挑战）：给别人做迭代**
> 跟一个同学交换作品。用元素选择和 Solo Coder 帮**别人的作品**迭代 3 轮。你需要先理解别人的作品"在做什么"，然后判断"哪里可以更好"。改完后跟同学分享你改了什么、为什么这样改。
