35 KiB
课时, 主题, 核心能力, 核心工具, 时长, 透明化层级, 适用路线
| 课时 | 主题 | 核心能力 | 核心工具 | 时长 | 透明化层级 | 适用路线 | |||
|---|---|---|---|---|---|---|---|---|---|
| 5 | 我的个人主页（下） |
|
|
90分钟 | 结果层 | AICODE-06（有扣子/低代码经验的学生） |
1. 课程目标
知识目标：
- 理解"交互元素"的概念：页面不只是看的，还可以有动态效果和用户操作
- 理解"设计一致性"的概念：整个页面的配色、字体、间距要统一协调
- 理解"发布"的含义：作品从"自己电脑上看"变成"别人也能看"
能力目标：
- 能根据同学建议有针对性地优化页面（审美力）
- 能用自然语言描述想要的交互效果并让 AI 实现（共创力）
- 能用 3 分钟向全班展示并介绍自己的个人主页（表达力）
情感目标：
- 体验从"半成品"到"完整作品"的蜕变带来的成就感
- 建立"作品要经得起别人看"的产品意识
- 感受"我的作品即将发布到真实网站"的兴奋与自豪
2. 核心概念与误概念预设
核心概念认知层级：
| 概念 | 学生类比 | 认知层级 |
|---|---|---|
| 交互效果 = 页面能"动"能"响应" | 像游乐场——不是只能看的风景画，而是能坐的旋转木马 | 理解层 |
| 设计一致性 = 统一风格 | 像穿衣搭配——上衣、裤子、鞋子要搭配，不能运动衫配西裤 | 应用层 |
| 同伴反馈 = 最好的改进来源 | 自己觉得好看不算，要别人也觉得好才是真的好 | 理解层 |
| 路演 = 作品展示 + 设计思路讲解 | 像参加画展——不只是挂一幅画，还要跟观众讲你为什么这么画 | 应用层 |
| 发布 = 从"自己看"到"全世界看" | 像把日记变成公开发表的文章——内容要经得起别人看 | 迁移层 |
典型误概念表：
| 编号 | 误概念 | 正确认知 | 激发策略 |
|---|---|---|---|
| M1 | "加特效越多越好，越炫越好" | 好的设计是克制的，3个精致的效果胜过10个花哨的 | 展示两个页面对比：一个特效堆满但杂乱，一个精致克制但高级 |
| M2 | "同学的建议不靠谱，还是自己的好" | 用户（读者）的感受比设计者的想法更重要 | 让学生用别人的电脑看自己的页面，发现"我觉得好看"和"别人觉得好看"的差距 |
| M3 | "交互效果很难，我做不了" | 用自然语言告诉 AI 就行，跟之前改样式一样简单 | 教师现场用一句话让 AI 加出 hover 效果，打消畏难情绪 |
| M4 | "发布前不用检查，能打开就行" | 发布前要完整检查：文字有没有错、图片有没有加载、手机上能不能看 | 展示一个"能打开但有明显错误"的反面案例（假文字、空白区域） |
| M5 | "路演就是把页面打开给大家看" | 路演要讲设计思路：为什么选这个主题？为什么这样设计？有什么巧思？ | 对比两段路演：一个只展示、一个讲思路，让学生投票哪个更好 |
3. 教学准备
工具与环境：
- 每台电脑已预装 Trae IDE，已登录校区账号
- 网络环境正常
- 学生上节课的个人主页项目文件夹仍在桌面
- 学生上节课创建的"个人主页设计师"自定义智能体仍可用
教学资源：
- 教师准备：1个"半成品→完成版"的 before/after 对比页面（课前用自己的个人主页做好两个版本）
- 教师准备：上节课学生互评时收集到的建议纸条/照片（备用，防止学生忘带）
- 教师准备：发布前检查清单（投屏用，打印几份备用）
- 教师准备：2-3 段验证过的交互效果代码片段（hover、轮播、滚动动画各一段，作为保底方案）
- 教师准备：路演计时器（手机倒计时或投屏计时器，3分钟）
- 学生资源：上节课的个人主页 HTML 文件 + 收到的同学建议
教师备课体验任务：
备课前，教师必须亲自完成以下操作：
- 用自然语言分别实现 hover、滚动渐入、Tab 切换三种交互效果，记录成功率并准备保底代码片段
- 做一个"半成品 vs 完成品"的 before/after 对比页面，和一个"特效堆满但杂乱"的反面教材
- 练习一遍 3 分钟路演，掐好时间
- 确认校区每台电脑能正常打开上节课的学生项目文件
4. 教学流程
第一幕：联系 (Connect) — 10分钟 🔗
本幕目标：回顾上节课的成果，用 before/after 对比激发"从还行到惊艳"的升级欲望，明确今天的最终目标
【环节】上节课回顾 (4分钟)
师： 上节课我们做了一件很重要的事——每个人都有了自己的个人主页。谁来说说，上节课你的页面上有哪些板块？
生： （预期：自我介绍、兴趣爱好、喜欢的东西、梦想……）
师： 很好。上节课我们做了三件事：第一，用内容清单把你想放的信息都整理出来了。第二，用你自己创建的"个人主页设计师"智能体生成了第一版页面。第三，你们互相看了对方的页面，每个人都收到了同学的建议。
师： 现在，把你上节课收到的同学建议拿出来。纸条也好、笔记也好——找到了吗？
（等待学生翻找。如果有人忘带，教师可以说"没关系，一会儿我们有办法"）
【环节】情景导入 (6分钟)
师： 在看你的建议之前，先看一个东西。
（教师投屏，左右分屏展示同一个个人主页的两个版本）
师： 左边，是上节课结束时的样子。右边，是经过今天这样的优化之后的样子。大家看看区别在哪里？
（逐一指出差异）
- 左边：鼠标放上去没反应 → 右边：鼠标悬停时照片放大、按钮变色
- 左边：内容一股脑全显示 → 右边：往下滚的时候内容一段段渐入
- 左边：有一段自我介绍还是 AI 编的假内容 → 右边：全部替换成了真实信息
- 左边：配色有点杂 → 右边：统一了色调，整体更协调
师： 右边的页面，哪里让你觉得"这个更专业"？【诊断点：探测学生对"完成品质量"的直觉判断】【理解层】
【分支A】若学生说"鼠标放上去会动"或"有动画"： 师： 你注意到了交互效果！页面不是一张静态的海报——它能"动"、能"回应"你的操作。今天我们就学怎么加这种效果。
【分支B】若学生说"配色更好看"或"更整齐"： 师： 你看出了设计一致性！就像穿衣服要搭配一样，页面的颜色、字体、间距也要搭配。今天有一个环节专门帮你检查这个。
【分支C】若学生说不上来具体区别： 师： 没关系，我帮你总结——右边比左边多了三样东西：会动的效果、统一的风格、真实的内容。今天我们就要把你的页面也升级到这个水平。
师： 今天的目标很明确：你的个人主页要从半成品变成完成品——一个你愿意让全校同学、让你爸妈、让全世界看到的作品。而且——你们的作品最终会发布到我们公司的网站上，真的有人会看到！
师： 继续用你上节课创建的"个人主页设计师"智能体。打开 Trae，打开你的项目，切到 Solo Coder，我们开始！
第二幕：建构 (Construct) — 60分钟 🛠️
【分段一：响应同学建议】(15分钟)
本段重点：根据真实的用户反馈有针对性地改进作品，建立"用户视角"意识
预设误概念：
- M2: 同学的建议不靠谱，还是自己的好
- M4: 发布前不用检查，能打开就行
讲解与演示 (5分钟):
师： 你们手上有上节课收到的同学建议。现在我问你们一个问题——你觉得同学的建议有用吗？【诊断点：检测学生是否重视同伴反馈】【理解层】
【分支A】若学生说"有用，他说的确实是个问题"： 师： 很好！你已经有产品思维了。自己觉得好不算好，别人觉得好才是真的好。因为你的页面不是做给自己看的——是做给别人看的。
【分支B】若学生说"我觉得我的已经很好了，不用改"： 师： 我理解。但你想一个场景——你写了一篇作文，自己读觉得很棒。但老师帮你看了之后，指出了三个你没注意到的问题。是你眼瞎了吗？不是——是因为写的人和看的人视角不一样。同学的建议就是"读者视角"。
【分支C】若学生建议纸条找不到了： 师： 没关系。你现在请旁边的同学看看你的页面，给你说一个优点和一个可以改进的地方。30秒搞定。
师： 我来演示怎么把建议变成修改。假设我收到的建议是"你的自我介绍太长了，看不完"。
（教师打开自己的个人主页项目，在 Solo Coder 中使用"个人主页设计师"智能体）
师： 我在 Solo Coder 里这样说：
同学反馈说自我介绍太长了。请把自我介绍板块改成折叠式：
默认只显示前两句话，下面有一个"展开阅读更多"的按钮，
点击后展开显示全部内容。
（等待 AI 生成，Accept，预览效果）
师： 看！建议变成了一个具体的改进。注意我做了什么——我不是简单地说"把自我介绍改短"，而是想了一个具体的解决方案："用折叠来解决太长的问题"。这就是把模糊的反馈变成明确的修改需求。
师： 现在看你的建议纸条，选 1-2 条你觉得有道理的。然后想想：怎么改能解决这个问题？ 想好了就告诉你的智能体。
学生实践 (8分钟):
学生操作步骤：
- 看同学建议，选 1-2 条要改的
- 想出具体的解决方案
- 用 Solo Coder + 智能体描述修改
- Accept → 预览 → 确认效果
- 改完一条再改下一条
师： 8分钟。记住——改完一条验证一条，不要一口气说五条修改。开始！
（教师走动观察）
（教师走动重点关注：）
- 谁在认真参考建议？谁跳过了建议直接自己改？
- 修改描述是否具体？"改好看点" vs "把标题颜色从红色改成深蓝色"
- 是否改完一条就验证效果？
- 有没有学生建议纸条丢了又不好意思问同学？主动引导
快学生应对： 两条建议都改完了？看看还有没有其他建议可以采纳。或者自己再审视一遍页面，找一个你不满意的地方改掉。
慢学生应对： 如果学生不知道怎么把建议变成修改需求，教师帮他翻译一条："同学说你的颜色太花了——你可以跟 AI 说'请把整个页面的配色统一成蓝白色调'"。
进度同步 (2分钟):
师： 根据同学建议成功修改了至少一处的举手！
师： 有没有人改完之后觉得"同学说得确实有道理"的？【诊断点：检测学生是否通过实践认识到同伴反馈的价值】【理解层】
【分支A】若学生说"确实，改完好多了"： 师： 对吧？别人的眼睛就是你的镜子。以后做任何作品，都找人帮你看看再发布。这叫用户测试——专业的产品团队每天都在做这件事。
【分支B】若学生说"我觉得改之前也挺好的"： 师： 那也没关系。有些建议你可以采纳，有些可以保留自己的想法。重要的是你认真考虑过了，不是没想就拒绝。
【分段二：交互升级】(20分钟)
本段重点：学会用自然语言为页面添加交互效果，这是本课最核心的新技能
预设误概念：
- M1: 加特效越多越好，越炫越好
- M3: 交互效果很难，我做不了
讲解与演示 (7分钟):
师： 现在进入今天的重头戏——交互效果。
师： 什么是交互效果？简单说就是——你的页面不只是一张"海报"，它能"动"、能"回应"你的操作。就像游乐场和风景画的区别——风景画你只能看，游乐场你可以坐旋转木马、滑滑梯、碰碰车。
师： 我来演示几种适合个人主页的交互效果，你看看哪个你喜欢。
效果一：hover 悬停
师： 第一种——hover 悬停。就是鼠标放到某个东西上面的时候，它会有变化。
（教师在 Solo Coder 中输入）
给页面上所有的兴趣爱好卡片加一个 hover 悬停效果：
鼠标放上去的时候，卡片轻微放大到 1.05 倍，同时加一个淡淡的阴影，
移开后恢复原样。过渡动画要平滑，大概 0.3 秒。
（Accept → 预览 → 鼠标悬停演示）
师： 看！鼠标放上去——卡片稍微放大了、出现了阴影。移开——恢复。就这一句话，AI 就做出来了。
效果二：滚动渐入
师： 第二种——滚动渐入。就是你往下滚页面的时候，内容不是一下子全显示，而是一段段"淡入"出现。
给页面加一个滚动渐入效果：
每个板块在用户滚动到它的位置时，从下方淡入出现。
还没滚到的板块先隐藏，滚到的时候用 0.6 秒的动画从下往上滑入并淡入。
（Accept → 预览 → 滚动演示）
师： 看！我往下滚——内容一段段出来，是不是比一股脑全显示更有节奏感？
效果三：Tab 标签切换
师： 第三种——Tab 标签切换。如果你的页面内容很多，可以分类放在不同的标签页里。
把"我的兴趣爱好"板块改成 Tab 标签切换的形式：
上面有三个标签按钮："运动"、"音乐"、"阅读"，
点不同的标签显示对应类别的内容。
当前选中的标签有高亮效果，切换时有淡入过渡动画。
（Accept → 预览 → 点击切换演示）
师： 三种效果，我每种只用了一句自然语言就让 AI 做出来了。跟之前改颜色、改文字是一样的流程——说人话就能做。
师： 但是！注意一个重要原则——【诊断点：主动暴露 M1 误概念】
师： 你觉得这三种效果，我应该全部都加到页面上吗？【识别层】
【分支A】若学生说"全加上更酷"： 师： 我来给你看一个"全加上"的反面教材。（打开一个特效堆满的页面——到处在闪、到处在动、眼花缭乱）这个好看吗？
生： （预期：太花了/看不清/眼睛累）
师： 对！好的设计是克制的。就像穿衣服——你不会把衣柜里最亮的10件全穿上吧？选 1-2 个最适合你页面的效果就够了。3 个精致的效果胜过 10 个花哨的。
【分支B】若学生说"选适合的就行"： 师： 你已经有设计师思维了！没错，选 1-2 个最适合你内容的效果。不是越多越好，而是越合适越好。
师： 现在你来选。你觉得你的个人主页最适合哪种交互效果？选 1-2 个就好。
学生实践 (10分钟):
学生操作步骤：
- 从 hover 悬停、滚动渐入、Tab 标签切换中选 1-2 个
- 参考教师演示的提示词，根据自己页面的情况修改
- 用 Solo Coder + 智能体实现
- Accept → 预览 → 验证效果
师： 10分钟。选 1-2 个效果，不要贪多。做完一个验证一个。如果效果不对，跟 AI 说"刚才加的交互效果有问题，XX不正常，请修复"。开始！
（教师走动观察）
（教师走动重点关注：）
- 学生选了几个效果？超过 2 个的要提醒"先做好这两个再说"
- 交互效果是否正常工作？hover 不生效？滚动动画卡顿？
- 有没有学生加了效果后页面布局乱了？引导描述问题让 AI 修复
- 谁还在犹豫不知道选哪个？建议从 hover 悬停开始——最简单、成功率最高
快学生应对： 两个效果都做好了？试试加一个更有创意的——比如"点击我的头像，弹出一段自我介绍动画"。
慢学生应对： 如果学生的智能体加交互效果失败了，让学生直接在 Solo Coder 里说（不通过智能体）："给页面上的卡片加一个鼠标悬停放大效果，放上去放大到1.05倍，加阴影，0.3秒过渡"。如果还是失败，教师给出保底代码片段让 AI 整合。
进度同步 (3分钟):
师： 成功给页面加了交互效果的举手！加了一个的？两个的？
师： 谁来演示一下你加了什么效果？
（选 1-2 个学生投屏快速演示，每人 30 秒）
师： 你们发现了吗？加了交互效果之后，页面的"高级感"一下子就上来了。这就是交互的魔力——页面从一张"图片"变成了一个"产品"。【诊断点：检测学生是否理解交互效果对产品品质的提升】【理解层】
【分支A】若有学生加了太多效果导致页面卡或乱： 师： 看，这位同学的页面加了好多效果——但看起来怎么样？有点乱对吧？这就是我刚才说的——克制。现在跟 AI 说"请去掉XX效果，只保留XX效果"，简化一下。
【分支B】若有学生效果做得很精致： 师： 大家看——这位同学只加了一个 hover 效果，但做得很精致，跟页面风格完全统一。少而精，胜过多而杂。
【分段三：最终打磨】(12分钟)
本段重点：用检查清单进行系统性最终审查，建立"发布前必检查"的产品意识
预设误概念：
- M4: 发布前不用检查，能打开就行
- M1: 加特效越多越好（残留）
讲解与演示 (3分钟):
师： 现在你的页面有内容、有交互了。但我问你——它能发布了吗？
师： 我给你看一个"能打开但不能发布"的例子。
（教师投屏一个有明显问题的页面）
师： 看这个页面——它能打开吗？
生： （预期：能）
师： 能打开。但你仔细看——
（逐一指出问题）
- 这里写着"在此输入你的姓名"——还是 AI 生成时的占位文字，没换成真名
- 这个板块是空的——"我的作品展示"下面什么都没有
- 标题用了蓝色，按钮用了绿色，卡片用了红色——三种颜色打架
- 这个 emoji 在这台电脑上显示不出来，变成了一个方框
师： 如果这个页面直接发布出去，别人看到会怎么想？
生： （预期：不认真/没做完/很业余）
师： 对。"能打开"和"能发布"是两回事。就像交作业——你不会把草稿纸交上去吧？发布之前，要做一次完整检查。
（教师投屏发布前检查清单）
📋 发布前检查清单：
1. ✅ 所有文字都是真实的我的信息（没有 AI 编的假内容、没有占位文字）
2. ✅ 图片/emoji 都能正常显示（没有方框、没有裂图）
3. ✅ 每个板块都有内容（没有空白区域）
4. ✅ 配色看着舒服、统一（不刺眼、不打架）
5. ✅ 交互效果正常工作（hover 有反应、动画能播放）
6. ✅ 从头到尾浏览一遍，没有明显问题
师： 这六条，一条条检查。发现问题就修。
学生实践 (7分钟):
师： 现在对照清单，逐条检查你的页面。发现问题就用 Solo Coder 修。
（教师投屏保持检查清单）
师： 9分钟。按清单一条条过。特别注意第一条——翻遍你的页面，有没有还是 AI 编的假信息？比如"热爱学习，成绩优异"——这是你自己写的还是 AI 瞎编的？如果是瞎编的，现在改成真实的。开始！
（教师走动观察）
（教师走动重点关注：）
- 有没有学生页面上还有明显的 AI 占位文字？提醒他换成真实内容
- 配色是否统一？如果一个页面用了五六种颜色，建议说"请把整个页面的配色统一成XX色调"
- 交互效果是否正常？hover 没反应的、动画卡住的，帮学生排查
- 有没有空白板块？"我的作品展示"下面什么都没有的，要么填内容要么删板块
快学生应对： 六条都过了？帮旁边同学检查一遍——你帮他看，往往能发现他自己看不到的问题。
慢学生应对： 如果问题太多改不完，优先改第1条（假内容）和第3条（空白区域）。配色不统一可以用一句话修："请把整个页面的配色统一成蓝白色调，保持简洁。"
进度同步 (2分钟):
师： 六条清单全过的举手？过了四条以上的？
师： 检查的时候有没有发现"天哪原来这里还有问题"的？【诊断点：检测学生是否建立了"发布前检查"的意识】【应用层】
【分支A】若学生说"发现了好几个没注意到的问题"： 师： 这就是检查清单的价值！你以为做完了，其实还有很多细节。专业的产品经理发布前要过几十条检查项呢。我们六条已经是简化版了。
【分支B】若学生说"我的没什么问题"： 师： 很好！说明你上节课就做得很仔细。但养成习惯——每次发布前都过一遍清单，哪怕你觉得没问题。因为有些问题你看习惯了就注意不到了。
【分段四：路演准备与练习】(13分钟)
本段重点：学会结构化表达自己的作品和设计思路，为第三幕路演做准备
预设误概念：
- M5: 路演就是把页面打开给大家看
讲解与演示 (5分钟):
师： 页面做好了、检查过了。最后一步——你要把它讲给别人听。
师： 这就像你参加画展。你不会只把画挂在墙上就走了吧？你得站在画旁边，跟观众说：我为什么画这幅画？我想表达什么？哪里是我最得意的地方？
师： 这叫路演。不是"展示"——展示是给你看。路演是给你看，还要讲给你听。
师： 路演 3 分钟。我给你一个标准结构：
（教师投屏路演结构）
🎤 路演结构（3分钟）：
1️⃣ 开场（15秒）：我是谁，这是我的个人主页
"大家好，我是XXX，今天给大家看我的个人主页。"
2️⃣ 亮点展示（90秒）：最得意的 2-3 个板块，讲设计思路
"我最喜欢的是这个板块——我放了XXX，因为我觉得……"
"这里我加了一个悬停效果，鼠标放上去会……"
3️⃣ 技术分享（45秒）：用了什么方法？踩了什么坑？
"做这个页面我用了自己设计的智能体，规则是……"
"中间有一次翻车了——我加了XX效果结果页面乱了，后来我跟AI说……"
4️⃣ 结尾（30秒）：我最想让大家记住的一点
"如果你只能记住一个关于我的事情，我希望是……"
师： 我来做一遍示范。
（教师用自己的个人主页做 3 分钟路演示范——完整走一遍四个部分，语气自然，有停顿有互动）
师： 看到了吗？我不是在念稿——我是在讲故事。讲我为什么做这个、我怎么想的、我遇到了什么问题。这比单纯展示有意思多了。【诊断点：检测学生是否理解路演和单纯展示的区别】【应用层】
【分支A】若学生说"要讲为什么这样设计"： 师： 对！"为什么"比"是什么"重要十倍。观众看到你的页面能自己判断好不好看，但他们不知道你为什么这样设计——这才是路演要讲的。
【分支B】若学生看起来有点紧张： 师： 别紧张！你就当跟好朋友聊天——"来看看我做的东西，这里我觉得特别酷因为……"。不需要背稿，用你自己的话说就行。
学生实践 (8分钟):
师： 现在准备你的路演。两件事：
- 花 3 分钟列提纲——在纸上或脑子里想好：开场说什么、展示哪 2-3 个亮点、分享什么技术经验、结尾说什么
- 花 5 分钟跟同桌互练——你讲给他听，他讲给你听。互相计时，3 分钟。超了就帮对方砍内容，不够就帮对方加内容
师： 提纲不用写得很详细——几个关键词就行。重要的是练一遍。第一次讲永远比你想象的长或短，练过一次就知道怎么控制时间了。开始！
（教师走动观察）
（教师走动重点关注：）
- 有没有学生只准备了"打开页面给你看"而没有准备讲解？提醒他路演结构
- 互练时有没有超时的？帮他们砍内容——"3 分钟，只讲最精华的 2 个亮点"
- 有没有学生完全不知道讲什么？给他一个起手句："我的页面主题是XX，我最得意的板块是XX，因为……"
进度同步 (2分钟):
师： 跟同桌互练过一遍的举手？很好。
师： 练完之后，你觉得 3 分钟够不够？【识别层】
生： （预期：有人说够/有人说不够/有人说太长了）
师： 3 分钟很短——所以要精挑细选，只讲最精华的。如果你什么都想讲，反而什么都讲不清楚。少就是多。 好，准备好了，下面就是正式路演！
第三幕：反思 (Contemplate) — 15分钟 🤔
本幕目标：正式路演展示，通过结构化互评巩固表达力和审美力。时间比标准多5分钟，因为这是双课项目的总结
成果展示——路演 (10分钟)
师： 现在是激动人心的路演时间！我们选 4 位同学上台，每人 3 分钟。
（选 4 位学生。选人策略：尽量涵盖不同风格——1个设计精致的、1个交互效果做得好的、1个内容很有个性的、1个迭代过程值得分享的）
师： 台下的同学，每个路演结束后，你要准备两样东西：
- 一个赞：你觉得他的页面或者路演哪里最棒
- 一个建议：如果他还能再改一轮，你觉得可以改什么
（第 1 位学生路演——3 分钟）
师： （路演结束后）谢谢！台下谁来说——你最喜欢他页面的哪个地方？
生： （收集 1-2 个"赞"）
师： 有没有改进建议？
生： （收集 1 个建议）
师： （教师点评——重点不只看效果，更表扬设计思路和迭代过程） 例如："我特别喜欢的是，XX同学讲了他加滚动动画的过程——第一次翻车了，他跟 AI 说了什么修好的。这个解决问题的过程比最终效果更值得学习。"
（依次完成 4 位学生的路演 + 互评 + 教师点评。每人约 2.5 分钟路演 + 互评）
拍照发群： 拍学生路演的照片和作品截图，配文字"AI编程创新课第5课，同学们完成了自己的个人主页并进行了产品路演！每一个页面都独一无二。"发家长群。
互评总结 (5分钟)
师： 四位同学的路演都很棒。我来总结一下今天看到的几个共同的亮点：
（根据实际情况总结，以下为预设方向）
师： 第一，你们的页面每一个都不一样——有人走简约风、有人走炫酷风、有人内容为王。这说明什么？说明你们不是在"照着模板做"，而是在表达自己。这就是个人主页的意义。
师： 第二，交互效果大家都加上了。但我注意到——做得好的同学不是效果最多的，而是效果最合适的。XX同学只加了一个 hover，但跟他的页面风格完美统一。克制是一种高级的审美能力。
师： 第三，路演讲得好的同学有一个共同点——他们不只是说"你看我的页面"，而是说"我为什么这样做"。讲设计思路比展示结果更有说服力。
第四幕：延续 (Continue) — 5分钟 🚀
本幕目标：收集作品文件，总结双课项目的完整流程，引导方法论迁移
收集作品 + 发布说明 (1分钟)
师： 现在最重要的一步——请所有人把你的 index.html 文件提交给我。
（说明提交方式：拷贝到教师U盘 / 上传到指定文件夹 / 根据校区实际情况调整）
师： 你们的个人主页会发布到我们穹狼科创的网站上。真的会有人看到！ 你的爸妈、你的朋友、其他校区的同学——都能看到你做的页面。所以，最后确认一遍——你页面上的所有信息都是你愿意公开的吗？有没有不想让别人看到的内容？有的话现在改。
抽象总结 (2分钟)
师： 我们用两节课完成了一个完整的项目。来回顾一下整个流程：
（投屏）
两课完整流程：
📝 第4课：内容清单 → 设计智能体 → 生成第一版 → 填入真实内容 → 视觉调整 → 收集同学建议
🚀 第5课：响应建议 → 交互升级 → 最终打磨 → 路演展示 → 发布
核心方法论：
先规划 → 再创建 → 再打磨 → 再发布
师： 这套流程——"先规划、再创建、再打磨、再发布"——除了做网页，还能用在哪里？【诊断点：检测学生能否将方法论迁移到其他场景】【迁移层】
【分支A】若学生说"做PPT"/"写作文"/"画画"： 师： 完全正确！做PPT也是先想好讲什么（规划）→做出来（创建）→改好看（打磨）→上台讲（发布）。你已经掌握了一个通用的创作方法。
【分支B】若学生想不出来： 师： 想想你上周交的作文——你是不是先想好写什么、再写初稿、再修改、最后誊抄交上去？其实就是同一套流程。这个方法用在任何创作上都好使。
5分钟挑战 + 下节预告 (2分钟)
师： 本周5分钟挑战：给你的个人主页加一个新板块——"给未来的自己的一封信"。写一段话给10年后的自己，再给这个板块加一个特别的视觉效果。具体要求课后看群里发的说明。
师： 下节课我们进入新的阶段。前五节课你们学了 Trae 的操作、三种模式、迭代、智能体设计、个人主页项目。接下来要挑战更有野心的东西——不只是展示型页面，而是有真正功能的应用。
师： 具体做什么？下节课揭晓。这周好好欣赏你发布在网站上的个人主页——那可是你的第一个真正发布的作品。下节课见！
5. AI助教使用指南
教师演示用提示词： 见教学流程分段二中的三段演示提示词（hover、滚动渐入、Tab 切换），可直接使用。
学生保底提示词（智能体不好用时，直接在 Solo Coder 里说）：
给我的页面加一个简单的效果：鼠标放到卡片上的时候卡片稍微放大，移开恢复。
给页面加滚动动画：往下滚的时候内容从下面淡入出现。
把一个板块改成标签页切换，点不同按钮显示不同内容。
保底代码片段（教师验证过的交互效果代码）：
如果 AI 生成的交互效果不生效，教师可以让学生这样说：
请把下面的 CSS 代码加到我的页面的 <style> 标签里，
并给所有需要 hover 效果的卡片加上 class="hover-card"：
.hover-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-card:hover {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
路演话术模板（给不知道怎么讲的学生）：
"大家好，我是[名字]。这是我的个人主页。
我的主题是[XX]，因为我觉得[XX]最能代表我。
我最喜欢的板块是[XX]，你们看——[演示操作]。
这里我加了一个[XX效果]，鼠标放上去会[XX]。
做这个页面的时候，我踩了一个坑——[XX]，
后来我跟 AI 说[XX]，就修好了。
如果你只记住一件关于我的事，我希望是：[XX]。谢谢大家！"
6. 教师指南
本课技术备注（含国产模型成功率）：
| 交互效果 | 技术原理 | 成功率 | 备注 |
|---|---|---|---|
| hover 悬停 | CSS :hover 伪类 + transition |
95%+ | 最稳，优先推荐 |
| CSS 过渡/动画 | transition（A→B）/ animation（关键帧） |
85-90% | 纯 CSS，不需 JS |
| 滚动渐入 | JS Intersection Observer API | 75% | 偶尔观察器配置不对 |
| Tab 标签切换 | JS 控制显隐 | 70% | 偶尔点击不切换 |
| 图片轮播 | JS 定时器 + 索引管理 | 60% | 失败就退回 hover |
学生翻车时的应对顺序： 让 AI 修复 → 换更简单的效果 → 用保底代码片段 → 去掉效果恢复原状
发布流程说明：
- 学生提交 HTML 文件后，由教师/技术人员统一部署到公司网站
- 建议课后检查一遍所有学生的 HTML 文件：确认无不适当内容、文件能正常打开
- 发布后将链接发到家长群，配截图和说明文字
常见问题 FAQ：
| 学生问题 | 建议回答 |
|---|---|
| "交互效果加了但没反应" | 先检查——鼠标有没有放到对的元素上？有时候 hover 加在了外层容器而不是卡片本身。跟 AI 说"hover 效果加了但没反应，请检查是不是选择器写错了" |
| "页面在别的电脑上显示不一样" | 正常现象！不同电脑的屏幕大小、字体、emoji 样式都不一样。重要的是主体内容和布局没问题。以后我们会学"响应式设计"来解决这个问题 |
| "我想加背景音乐" | 可以试试，但浏览器默认会阻止自动播放音频。可以加一个"播放音乐"按钮让用户手动点击播放。如果实现有困难就暂时不加 |
| "路演 3 分钟太短了讲不完" | 说明你的内容很丰富！但路演的核心是"精选最亮的 2-3 个点"，不是面面俱到。练习砍内容——只留最想让人记住的 |
| "我不想在网站上发布" | 完全尊重你的意愿。如果有隐私顾虑，可以把真名换成昵称，或者不发布个人照片 |
| "同学的建议我都不同意" | 这很正常，设计没有标准答案。但建议你至少认真思考一下——如果3个人都说"配色太花了"，可能真的值得考虑 |
课堂风险预案：
- 如果学生上节课的智能体找不到了：直接在 Solo Coder 里操作，不通过智能体。教学目标不变
- 如果学生上节课的项目文件丢失了：用 Builder 快速重建一个基础个人主页（5分钟），使用保底提示词，跳过分段一直接进入分段二
- 如果路演时间不够（学生太多）：只选 3 位路演，其余学生课后录 3 分钟视频提交
- 如果AI服务不可用：让学生专注做路演准备和互评，交互效果留到下节课补
7. 5分钟日常AI挑战
本周挑战：
"给未来的自己的一封信"
操作步骤：
- 打开你的个人主页项目
- 用 Solo Coder 加一个新板块，标题是"给未来的自己"
- 写一段话——你想对10年后的自己说什么？（梦想、期望、现在的心情……）
- 给这个板块设计一个特别的视觉效果（信封打开动画？手写字体？老照片风格？你来决定）
- 截图保存最终效果
评价标准：
- 基础：成功加了新板块，内容是自己写的真心话
- 进阶：视觉效果跟页面整体风格统一，不突兀
- 挑战：让家人读你写的信，记录他们的反应（文字或截图）
8. 拓展任务
拓展一（推荐）：手机端适配
用外部浏览器打开你的个人主页，然后按 F12 打开开发者工具，切换到手机视图。你的页面在手机上好看吗？如果不好看，跟 AI 说"请让我的页面在手机上也能正常显示，做响应式适配"。截图对比电脑版和手机版的效果。
拓展二（挑战）：为别人做个人主页
找一个家人或朋友，帮他/她做一个个人主页。你需要先"采访"他——了解他的兴趣、梦想、特长，然后用你学到的全部技能（内容清单→智能体→生成→迭代→交互→检查）做出一个完整的页面。做完后让他看，记录他的反应。这是一次完整的"为用户做产品"的体验。