--- 课时: 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】若学生说"不用知道代码叫什么"：** **师：** 对！这就是最大的优势。你不需要知道"标题"在代码里叫 `

` 还是 `
`，你直接指着它就行。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 轮。你需要先理解别人的作品"在做什么"，然后判断"哪里可以更好"。改完后跟同学分享你改了什么、为什么这样改。