Initial commit from WSL migration

3-lessons/AICODE-06/AICODE06-03 Solo Coder迭代深化.md

@@ -0,0 +1,662 @@
+---
+课时: 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 轮。你需要先理解别人的作品"在做什么"，然后判断"哪里可以更好"。改完后跟同学分享你改了什么、为什么这样改。