ClassFeedback/.claude/lesson/AI03/AICODE-06/AICODE06-05 我的个人主页（下）.md

课时, 主题, 核心能力, 核心工具, 时长, 透明化层级, 适用路线

课时	主题	核心能力	核心工具	时长	透明化层级	适用路线
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 说"请让我的页面在手机上也能正常显示，做响应式适配"。截图对比电脑版和手机版的效果。

拓展二（挑战）：为别人做个人主页

找一个家人或朋友，帮他/她做一个个人主页。你需要先"采访"他——了解他的兴趣、梦想、特长，然后用你学到的全部技能（内容清单→智能体→生成→迭代→交互→检查）做出一个完整的页面。做完后让他看，记录他的反应。这是一次完整的"为用户做产品"的体验。