Initial commit from WSL migration

3-lessons/AICODE-06/AICODE06-05 我的个人主页（下）.md

@@ -0,0 +1,693 @@
+---
+课时: 5
+主题: 我的个人主页（下）
+核心能力: [审美力, 表达力]
+核心工具: [Trae IDE]
+时长: 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 文件 + 收到的同学建议
+
+**教师备课体验任务：**
+> 备课前，教师必须亲自完成以下操作：
+>
+> 1. 用自然语言分别实现 hover、滚动渐入、Tab 切换三种交互效果，记录成功率并准备保底代码片段
+> 2. 做一个"半成品 vs 完成品"的 before/after 对比页面，和一个"特效堆满但杂乱"的反面教材
+> 3. 练习一遍 3 分钟路演，掐好时间
+> 4. 确认校区每台电脑能正常打开上节课的学生项目文件
+
+---
+
+### 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. 看同学建议，选 1-2 条要改的
+2. 想出具体的解决方案
+3. 用 Solo Coder + 智能体描述修改
+4. Accept → 预览 → 确认效果
+5. 改完一条再改下一条
+
+**师：** 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分钟):**
+
+学生操作步骤：
+1. 从 hover 悬停、滚动渐入、Tab 标签切换中选 1-2 个
+2. 参考教师演示的提示词，根据自己页面的情况修改
+3. 用 Solo Coder + 智能体实现
+4. 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分钟):**
+
+**师：** 现在准备你的路演。两件事：
+
+1. **花 3 分钟列提纲**——在纸上或脑子里想好：开场说什么、展示哪 2-3 个亮点、分享什么技术经验、结尾说什么
+2. **花 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挑战
+
+**本周挑战：**
+
+> **"给未来的自己的一封信"**
+>
+> **操作步骤：**
+> 1. 打开你的个人主页项目
+> 2. 用 Solo Coder 加一个新板块，标题是"给未来的自己"
+> 3. 写一段话——你想对10年后的自己说什么？（梦想、期望、现在的心情……）
+> 4. 给这个板块设计一个特别的视觉效果（信封打开动画？手写字体？老照片风格？你来决定）
+> 5. 截图保存最终效果
+>
+> **评价标准：**
+> - 基础：成功加了新板块，内容是自己写的真心话
+> - 进阶：视觉效果跟页面整体风格统一，不突兀
+> - 挑战：让家人读你写的信，记录他们的反应（文字或截图）
+
+---
+
+### 8. 拓展任务
+
+**拓展一（推荐）：手机端适配**
+> 用外部浏览器打开你的个人主页，然后按 F12 打开开发者工具，切换到手机视图。你的页面在手机上好看吗？如果不好看，跟 AI 说"请让我的页面在手机上也能正常显示，做响应式适配"。截图对比电脑版和手机版的效果。
+
+**拓展二（挑战）：为别人做个人主页**
+> 找一个家人或朋友，帮他/她做一个个人主页。你需要先"采访"他——了解他的兴趣、梦想、特长，然后用你学到的全部技能（内容清单→智能体→生成→迭代→交互→检查）做出一个完整的页面。做完后让他看，记录他的反应。这是一次完整的"为用户做产品"的体验。