Files
ClassFeedback/.claude/lesson/AI03/AICODE-06/AICODE06-03 Solo Coder迭代深化.md
chengzi e542f013b9 更新 AI03 课程内容,替换为 AICODE-03 和 AICODE-06 课程体系
- 删除旧的 AI03 课程文件(第4-5课)
- 新增 AICODE-03 课程体系(AI是怎么想的、AI训练师、我是大作家等)
- 新增 AICODE-06 课程体系(从扣子到代码、个人主页、涂鸦PK等)
2026-04-14 21:31:13 +08:00

29 KiB
Raw Blame History

课时, 主题, 核心能力, 核心工具, 时长, 透明化层级, 适用路线
课时 主题 核心能力 核心工具 时长 透明化层级 适用路线
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 轮。你需要先理解别人的作品"在做什么",然后判断"哪里可以更好"。改完后跟同学分享你改了什么、为什么这样改。