30 KiB
课时, 主题, 核心能力, 核心工具, 时长, 透明化层级, 适用路线
| 课时 | 主题 | 核心能力 | 核心工具 | 时长 | 透明化层级 | 适用路线 | |||
|---|---|---|---|---|---|---|---|---|---|
| 3 | Solo Coder 迭代深化 |
|
|
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 超能力抽签机）
教师备课体验任务：
备课前，教师必须亲自完成以下操作：
- 打开上节课做的"未来职业预测器"项目，使用内置浏览器预览
- 使用元素选择功能：点 Select → 点页面上的标题 → 在 Solo Coder 中说"把这个标题改大一倍"
- 连续进行 5 轮迭代，记录每轮改了什么、效果如何
- 故意制造一个"改坏了"的情况（比如把布局搞乱），练习用 Solo Coder 修复
- 测试"一次说一个修改" 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 里找到 内置浏览器预览 的入口——
操作步骤：
- 在文件管理器里找到
index.html - 右键点击 → 选择"在内置浏览器中预览"（或者使用命令面板搜索"Preview"）
（教师展示内置浏览器面板出现在 IDE 右侧或下方）
师： 看到了吗？网页直接显示在 Trae 里面了！以后改代码，Accept 之后，这个预览会自动刷新。不需要手动切换、不需要手动刷新。
师： 从现在开始，我们的工作流变成：Solo Coder 说修改 → Accept → 内置浏览器自动看效果。全程不离开 Trae。
学生实践 (4分钟):
师： 现在你们来做：
- 用 Trae 打开你上节课的项目文件夹（桌面上的"未来职业预测器"或"超能力抽签机"）
- 找到
index.html，右键 → 内置浏览器预览 - 确认你在 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分钟):
师： 现在你们来试！用元素选择改你的作品。
操作步骤：
- 确认已经切到 Solo Coder 模式
- 确认内置浏览器预览已打开
- 点内置浏览器工具栏的 Select 按钮
- 点击你想改的元素
- 在 Solo Coder 中描述修改
- 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 → 页面布局混乱）
师： 看！改坏了。别慌——两个办法：
- Reject：如果还没 Accept，直接点 Reject 拒绝这次修改
- 让 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位同学来展示你的作品。展示时说三件事：
- 简单演示你的作品（现在的样子）
- 你做了几轮迭代？印象最深的一次修改是什么？
- 有没有"改坏了"的经历？你是怎么修复的？
（选3位学生展示，每人2分钟。尽量选：一个改了很多轮效果很好的、一个改坏又修好的、一个做了创新功能的）
拍照发群： 拍学生作品迭代前后的对比截图，配文字"第三节课，同学们学会了'迭代深化'——同一个项目，一轮轮打磨，越改越好！"发家长群。
互评与讨论 (4分钟)
师： 看完了三位同学的作品。我们来想一个问题——
师： 你觉得今天学的"元素选择"和"直接在 Solo Coder 里打字"，什么时候用哪个更好？【诊断点：检测学生能否根据场景选择合适的交互方式】【应用层】
（收集回答）
【分支A】若学生能区分场景： 师： 总结得很好。简单改视觉——点一下最快。加新功能——打字说清楚。两种方式配合使用，效率最高。
【分支B】若学生说不清楚： 师： 记住这个口诀：看得见的点一下，想出来的打字说。你能在页面上看到的东西（标题、按钮、卡片），用元素选择最快。你脑子里想的新功能（加计数器、加历史记录），用打字描述。
第四幕：延续 (Continue) — 5分钟 🚀
本幕目标：总结迭代三步走，预告下节课的独立作品
抽象总结 (3分钟)
师： 今天我们学到的核心能力：
（板书/投屏）
两个新工具：
🖥️ 内置浏览器 → 改完自动刷新，不用切窗口
👆 元素选择 → 点哪改哪，不用知道代码名字
迭代三步走：
🔧 修 Bug → 🎯 加体验 → 🎨 美化视觉
口诀：
"看得见的点一下，想出来的打字说"
"每次只改一个，改坏了让AI修"
师： 今天最重要的一句话是：好作品是改出来的，不是一次做出来的。 这个道理不只适用于编程，做PPT、写作文、画画，都一样。先做出来，再一轮轮打磨。
5分钟挑战发布 + 下节预告 (2分钟)
师： 本周5分钟挑战：
5分钟AI挑战： 把你的"未来职业预测器"或"超能力抽签机"再迭代 5 轮，让它变成你觉得"可以拿给全班同学用"的水平。 用元素选择 + Solo Coder 配合使用。
截图清单（至少交3张）：
- 迭代前的截图
- 迭代过程中的截图（内置浏览器 + Solo Coder 对话）
- 最终版本的截图
评价标准：
- 基础：完成了5轮迭代，有前后对比
- 进阶：迭代包含修 Bug + 加体验 + 美化三个维度
- 挑战：给3个以上的同学/家人试用，收集他们的反馈
师： 下节课——我的第一个Web作品。这次你不是改旧项目了，而是从零开始做一个全新的作品。你来决定做什么、怎么做。你前三节课学的所有东西——Builder 从零建、Solo Coder 精准改、元素选择点哪改哪——全部用上。你将独立完成一个可以展示的完整作品。
生： （预期反应积极）
师： 提前想好你想做什么——游戏、工具、还是创意页面都行。想不到的话下节课我会给你灵感。下节课见！
5. AI助教使用指南
教师演示用提示词（元素选择后的修改示例）：
把这个标题改大 50%，加一个金色发光文字阴影效果
把这个按钮改成圆形，加一个鼠标悬停时缩放1.1倍的动画
给这个卡片加一个渐变色边框，从紫色到蓝色，有发光效果
教师演示用提示词（功能迭代示例）：
给"再测一次"按钮加一个功能：每次预测后在下方显示"你已经预测了X次"的计数
加一个预测历史功能：
每次预测结果显示后，把职业名称和emoji存到一个列表里。
在页面底部显示"预测历史"区域，列出所有预测过的职业。
加一个"分享结果"功能：
在预测结果下方显示一行文字："🔮 [名字] 的未来职业是 [职业emoji] [职业名称]！"
这行文字用特殊样式显示，方便截图分享。
学生保底提示词（修 Bug 类）：
我的网页有个问题：点击"再测一次"后，旧的结果没有消失，新结果叠在下面了。请修复，让每次预测前清空之前的结果。
学生保底提示词（美化类）：
给整个页面加一个动态背景效果——缓慢变化的渐变色，从深紫到深蓝来回循环
修复类提示词（改坏了时用）：
刚才的修改导致页面布局出问题了，[具体描述问题]。请恢复正常并保留之前的功能。
6. 教师指南
本课技术备注：
- 内置浏览器：Trae 的内置浏览器基于 Chromium 内核，与 Chrome 渲染效果基本一致。某些高级 CSS 动画在内置浏览器中可能有轻微差异，但对课堂教学无影响。
- 元素选择原理：点击 Select 按钮后，内置浏览器进入"检查模式"。点击页面元素时，Trae 会识别该元素在 HTML 中的位置（类似浏览器的 DevTools 元素检查器），并将信息传递给 Solo Coder，让 AI 知道你要修改哪个元素。
- 元素选择的局限性：动态生成的元素（如通过 JavaScript 动态创建的内容）可能在某些情况下选择不到。这种情况下退回文字描述即可。
- Accept/Reject 与撤销：Accept 后代码已写入文件。如果需要撤回，可以用 Ctrl+Z 撤销文件改动，或让 AI 修复。Reject 则完全不改动文件。
- 单文件迭代策略：当前所有代码在一个 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 版"
操作步骤：
- 打开你今天迭代过的"未来职业预测器"或"超能力抽签机"
- 按"修 Bug → 加体验 → 美化"顺序，再迭代 5 轮
- 目标：做到你觉得"可以拿给全班同学玩"的水平
- 截图保存：迭代前 → 迭代中 → 最终版本
评价标准：
- 基础：完成了5轮迭代，有前后对比截图
- 进阶：三个维度（修 Bug、加体验、美化）都有涉及
- 挑战：给3个以上的人试用，收集反馈并根据反馈再改一轮
8. 拓展任务
拓展一（推荐）：极限迭代挑战
对你的作品再进行 10 轮迭代，看看你能把它打磨到什么程度。每轮迭代前先想清楚"这一轮要改什么"，不要随便乱改。记录每轮改了什么，做一份"迭代日志"。
拓展二（挑战）：给别人做迭代
跟一个同学交换作品。用元素选择和 Solo Coder 帮别人的作品迭代 3 轮。你需要先理解别人的作品"在做什么"，然后判断"哪里可以更好"。改完后跟同学分享你改了什么、为什么这样改。