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

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

课时	主题	核心能力	核心工具	时长	透明化层级	适用路线
4	我的个人主页（上）	拆解力 审美力	Trae IDE	90分钟	结果层	AICODE-06（有扣子/低代码经验的学生）

1. 课程目标

知识目标：

• 理解"内容先行"原则：先想清楚要展示什么，再让 AI 动手做
• 理解个人主页的板块化结构：把一个页面拆成多个独立区域
• 理解 Trae 自定义智能体的概念：给 AI 设定角色和规则，让它更懂你的需求

能力目标：

• 能列出至少 8 个板块的个人信息清单（拆解力）
• 能在 Trae 中创建一个自定义智能体并编写系统提示词（提问力）
• 能用智能体生成个人主页并逐块替换为真实内容（共创力）

情感目标：

• 激发"我要向世界展示自己"的表达欲——这个页面真的会被别人看到
• 建立"好作品的核心是内容，不是技术"的认知
• 感受从扣子智能体到 Trae 智能体的能力迁移——"我之前学的东西没白学"

---

2. 核心概念与误概念预设

核心概念认知层级：

概念	学生类比	认知层级
内容先行 = 先想好写什么再让 AI 做	像写作文先列提纲，不是拿起笔就写	理解层
板块化设计 = 把页面拆成独立区域	像报纸分版面——头版、体育版、娱乐版各管各的	理解层
自定义智能体 = 给 AI 设定角色和规则	像在扣子里创建智能体一样，只不过现在是在 Trae 里给 AI 定规矩	应用层
占位内容 vs 真实内容	AI 先用假文字搭架子，像样板间的假家具，你要换成自己真正的东西	理解层

典型误概念表：

编号	误概念	正确认知	激发策略
M1	"直接告诉 AI '帮我做个主页'就行了"	没有内容的主页是空壳，AI 不知道你的爱好和经历	演示一个"空壳主页"——全是 AI 编的假信息，问学生"这是你吗？"
M2	"内容想到什么写什么就好，不需要组织"	有结构地组织内容，读者才能快速了解你（板块化思维）	对比：一篇流水账 vs 一份分板块的个人简介，哪个看得更清楚？
M3	"AI 生成的文字够用了，不需要换成真实的"	占位内容是 AI 编的假信息，别人看了不知道真实的你	展示 AI 生成的"爱好：画画、弹钢琴"，问学生"这是你的真实爱好吗？"
M4	"智能体的提示词随便写写就行"	提示词越清楚，AI 出的效果越稳定（跟扣子一样的道理）	对比：一句话提示词 vs 详细规则的提示词，生成效果差异明显
M5	"图片太麻烦了，纯文字就行"	视觉元素让页面生动，可以用 emoji、网络图片、或 AI 生成 SVG 图标	展示纯文字版 vs emoji 装饰版的同一个主页，视觉差距一目了然

---

3. 教学准备

工具与环境：

• 每台电脑已预装 Trae IDE，已登录校区账号
• 网络环境正常
• 内置浏览器可用（Trae 自带预览功能）

教学资源：

• 教师准备：2-3 个优秀个人主页截图（风格各异）、1 个"空壳主页"（全是假内容，用于激发误概念）
• 教师准备：1 份教师自己的内容清单（12 条以上）、已验证的智能体提示词、1 份保底 HTML 模板
• 学生资源：上节课的 Trae 操作经验（三种模式、元素选择、迭代深化）

教师备课体验任务：

备课前，教师必须亲自完成以下操作：

1. 在 Trae 中创建自定义智能体，确认创建入口和操作路径
2. 用智能体生成个人主页 index.html，验证效果正常
3. 用 Solo Coder 逐块替换占位内容，确认流程顺畅
4. 准备"空壳主页"截图（AI 随便生成的假信息页面）

---

4. 教学流程

---

第一幕：联系 (Connect) — 10分钟 🔗

本幕目标：回顾前三课技能，用优秀个人主页案例激发"我要展示自己"的表达欲，引出"内容先行"的核心理念

【环节】上节课回顾 (3分钟)

师： 前三节课我们学了不少本事。谁能帮我回忆一下——你现在会用 Trae 做什么？

生： （预期：Builder 从零做项目 / Solo Coder 改代码 / 元素选择点哪改哪 / 跟随模式看 AI 工作 / 迭代深化）

师： 说得很全！三种模式会用了，元素选择会用了，迭代也练过了。上节课的5分钟挑战是"把作品再迭代5轮"，有谁做了的？

（选1位学生快速展示课外挑战成果，30秒）

师： 好，前三节课你们做了"未来职业预测器"和"超能力抽签机"。这些都是——好玩的小工具。今天开始，我们做一个不一样的东西。

【环节】情景导入 (7分钟)

（教师投屏展示 2-3 个优秀个人主页截图，风格各异——逐个指着介绍）

师： 这个——一打开就知道这个人叫什么、喜欢什么。这个——暗黑科技风，酷不酷？这个——可爱风，满屏 emoji。这些都是什么？——个人主页。一个专门介绍"你是谁"的网页。

师： 现在我问你们一个问题——如果全世界的人都能看到你的网站，你会在上面放什么？【诊断点：探测学生对"自我展示"的初始意愿和内容意识】【识别层】

（让 3-4 个学生快速回答）

【分支A】若学生说出具体内容（"我的名字""我喜欢的游戏""我的荣誉"）： 师： 很好！你已经在想"内容"了。这就是今天最重要的事。

【分支B】若学生说"不知道放什么"或"放好看的图片"： 师： 放好看的图片当然可以，但别人打开你的页面，最想知道的是——你是谁？你喜欢什么？你做过什么？"好看"是加分项，"内容"才是核心。

【分支C】若学生说"让 AI 帮我写"： 师： AI 可以帮你做页面，但 AI 知道你最好的朋友是谁吗？知道你最喜欢的歌是什么吗？——不知道。所以内容必须你自己想、自己填。

师： 告诉你们一个重要消息——你们做的个人主页，最终会发布到穹狼科创的网站上。真的会有人看到。所以这不是练习——这是你面向真实观众的作品。今天做内容和基础版，下节课做设计升级和正式路演发布。

师： 但是——我们今天不急着打开 Trae。为什么？先看一个反面教材。

（教师投屏展示 AI 生成的"空壳主页"——全是假内容）

师： 这是我让 AI 做的个人主页——名字叫"小明"，爱好是"画画、弹钢琴、踢足球"。但我不叫小明，我不会弹钢琴。AI编的全是假的。 直接跟 AI 说"帮我做个主页"，它就会编假信息。所以今天第一件事不是写代码——而是先想清楚你要展示什么。

---

第二幕：建构 (Construct) — 65分钟 🛠️

---

【分段一：我要展示什么？— 个人内容清单】(15分钟)

本段重点：用结构化引导帮学生梳理个人信息，建立"内容先行"的意识。不打开 Trae！

预设误概念：

• M1: "直接告诉 AI '帮我做个主页'就行了"——没有内容的主页是空壳
• M2: "内容想到什么写什么就好，不需要组织"——缺乏板块化思维

讲解与演示 (5分钟):

师： 写作文之前，语文老师会让你干什么？

生： （预期：列提纲 / 打草稿）

师： 对——列提纲。做个人主页也一样。你不能拿起来就做，得先想清楚"我要展示什么"。这就叫内容先行——先想好内容，再让 AI 做页面。【理解层】

师： 而且内容不能乱写，得分板块。什么叫板块？——就像报纸有头版、体育版、娱乐版，每个版面放不同的内容。你的个人主页也一样，每个区域放不同类型的信息。这样别人一看就很清楚。

师： 我先给你们看我的内容清单。

（教师投屏展示自己的内容清单，逐条念）

我的内容清单：

1. 名字：武老师 / Mr. Wu
2. 一句话介绍：一个相信 AI 能改变教育的编程老师
3. 出生年份 / 星座：1990 / 天秤座 ♎
4. 最擅长的三件事：写代码、讲课、做饭
5. 最好的朋友：小李（因为我们从小学就认识，到现在20多年了）
6. 最喜欢的歌：《晴天》—— 周杰伦
7. 最喜欢的电影：《星际穿越》
8. 最喜欢的书：《小王子》
9. 荣誉和证书：编程比赛一等奖、优秀教师
10. 我的梦想：让每个孩子都能用 AI 创造自己的作品
11. 我的作品：穹狼科创网站、AI编程课程体系
12. 想用什么图片：用 emoji 先占位，课后换真实照片

师： 12 条。每一条都是真实的我。如果 AI 帮我编，它绝对编不出"最好的朋友是小李，认识了20多年"这种细节。

师： 现在轮到你们了。

学生实践 (8分钟):

师： 拿出一张纸，或者打开电脑的记事本。不要打开 Trae！ 现在只写内容。

（教师投屏显示问题清单，逐条引导）

师： 我一条条问，你一条条写。跟上节奏！

（教师逐条引导，每条停顿等学生写完后再下一条）

师： 第一条——你的名字。中文名加英文名或昵称。比如"张小明 / 大明同学"。

师： 第二条——用一句话介绍自己。让陌生人听完就能记住你。比如"一个痴迷乐高和编程的六年级男生"。不要写"我是一个好学生"——太无聊了，没人记得住。

师： 第三条——出生日期或星座。第四条——你最擅长的三件事，不一定是学习上的！第五条——你最好的朋友，写名字和"为什么是最好的"。

师： 第六条——最喜欢的歌或歌手。第七条——最喜欢的电影或动画。第八条——最喜欢的书，漫画也行。

师： 第九条——荣誉和证书，没有就写"正在努力中"。第十条——你的梦想。第十一条——你的作品展示（编程/画画/手工/乐高）。第十二条——想用什么图片？今天先用 emoji 占位。

师： 写好 8 条以上的举手！

进度同步 (2分钟):

师： 我来走一圈看看。

（教师走动检查每位学生的内容清单）

【诊断点：谁写了 8 条以上？谁只写了两三条就停了？内容是否足够具体？】

【分支A】若大部分学生写了 8 条以上： 师： 很好！内容够丰富了。有些同学写了 10 条以上，非常棒。一会儿 AI 做出来的主页才会是"真正的你"。

【分支B】若有学生只写了三四条就停了： 师： （走到旁边）你卡在哪了？是不知道写什么？还是觉得没什么好写的？ ——（如果不知道写什么）看看投屏上的问题清单，一条条往下写。不用想太多，真实就好。 ——（如果觉得没什么好写）每个人都有值得展示的东西。你最喜欢什么？平时放学后做什么？这些都是内容。

【分支C】若有学生写的内容太简略（比如"爱好：打游戏"一笔带过）： 师： 你写了"打游戏"——很好。但能不能再具体一点？打什么游戏？段位多少？最厉害的一次是什么？越具体，别人看了越有感觉。

---

【分段二：创建"我的个人主页设计师"智能体】(15分钟)

本段重点：在 Trae 中创建自定义智能体，迁移扣子时代的"给 AI 设定角色"经验

预设误概念：

• M4: "智能体的提示词随便写写就行"——提示词越清楚出的效果越稳定
• M3: "AI 生成的文字够用了，不需要换成真实的"——占位内容是假信息

讲解与演示 (7分钟):

师： 内容准备好了。现在可以打开 Trae 了！

（学生打开 Trae）

师： 但是——我们今天不直接用 Builder 或 Solo Coder。我们先做一件事：创建一个自定义智能体。

师： 你们在扣子里创建过智能体对吧？给它一个名字、一个角色、一些规则，然后它就按照你定的规矩来干活。

生： （预期：对 / 做过）

师： Trae 里也能做一样的事！你可以创建一个"专属于你的 AI 助手"，给它设定角色和规则。这样每次跟它说话，它都会按照你的规则来。

师： 打个比方——你去理发店，每次跟不同理发师说"剪短一点"，效果都不一样。但你有一个固定理发师，他记住你喜欢的风格，每次都稳定。自定义智能体就是你的"固定理发师"。

师： 我来演示。（教师投屏操作）

师： 第一步——Trae AI 面板上找到"创建新智能体"按钮。第二步——起名字，我叫它"个人主页设计师"。第三步——最关键——写系统提示词，告诉 AI "你是谁、遵守什么规则"。

（教师输入系统提示词，投屏逐行念）

你是一个专业的个人主页设计师。请遵循以下规则：
- 所有文字必须用中文
- 页面风格：现代简约，清新活泼
- 配色不超过三种主色
- 每个板块之间有清晰的分隔
- 多使用 emoji 作为图标装饰
- 所有内容放在一个 HTML 文件中（内联 CSS 和 JS）
- 页面要适合在电脑浏览器中展示
- 页面需要有流畅的滚动体验

师： 8 条规则，每条都很具体。跟你在扣子里写智能体提示词是不是一模一样的道理？——对！扣子里学的东西没白学，同一套思路，换个平台照样用。

师： 你的智能体不需要和我的一样！你想做什么风格？

（投屏展示风格方向）

风格	提示词关键词
🌸 可爱风	粉色系、圆角卡片、可爱 emoji
🚀 科技风	深色背景、霓虹灯效果、代码感字体
🌙 暗黑风	黑色背景、渐变色文字、发光效果
🌈 彩虹风	多彩渐变、活泼动画、大量 emoji

师： 选一个你喜欢的风格，把关键词加到提示词里。比如暗黑风就把"现代简约，清新活泼"改成"暗黑风格、黑色背景、渐变色文字、发光效果"。

学生实践 (6分钟):

师： 现在你们来创建自己的智能体。打开 AI 面板 → 创建新智能体 → 起名字 → 写系统提示词（参考我的模板，改成你想要的风格）。提示词里必须保留：中文、单文件 HTML、内联 CSS 和 JS、emoji 装饰。风格随便改。6分钟！

（教师走动重点关注：是否找到创建入口、提示词是否够具体、是否保留技术规则）

快学生应对： 加更多个性化规则——"标题用手写字体感觉"、"悬停动画效果"等。

慢学生应对： 找不到入口手把手指一次。不知道写什么的直接抄教师模板，改一个风格关键词。

进度同步 (2分钟):

师： 创建好智能体的举手！

师： 我来抽查两位——你的智能体叫什么？提示词里写了几条规则？【诊断点：检测学生是否写了详细的系统提示词，还是只写了一两句话】【应用层】

（抽 2 位学生回答）

【分支A】若学生写了 5 条以上规则： 师： 很棒！规则越清楚，AI 出的效果越稳定。跟你在扣子里的经验一样对吧？

【分支B】若学生只写了一两句（M4 误概念暴露）： 师： 你只写了"帮我做一个好看的网页"——这跟扣子里只写"你是一个助手"一样，太模糊了。AI 不知道你要什么风格、什么颜色、什么布局。加几条具体规则——什么风格？什么配色？要不要 emoji？

【分支C】若有学生忘了保留技术规则： 师： 记得加上"所有内容放在一个 HTML 文件中，内联 CSS 和 JS"——不然 AI 可能会生成多个文件，我们现在还没学多文件项目。

---

【分段三：用智能体生成第一版 + 填入真实内容】(20分钟)

本段重点：把内容清单转化为结构化需求，用智能体生成主页，逐块替换占位内容

预设误概念：

• M1: "直接告诉 AI '帮我做个主页'就行了"——需要把内容清单整理成需求
• M3: "AI 生成的文字够用了，不需要换成真实的"——占位内容必须替换
• M5: "图片太麻烦了，纯文字就行"——emoji 让页面更生动

讲解与演示 (5分钟):

师： 智能体创建好了。现在我们要用它来生成个人主页。但不是直接说"帮我做主页"——还记得那个反面教材吗？全是假信息。

师： 正确的做法是：把你的内容清单整理成一条完整的需求，发给智能体。我来演示：

（教师投屏，使用自己创建的智能体，输入提示词——把内容清单按【基本信息】【我的特长】【我的好友】【我的最爱】【荣誉成就】【我的梦想】【我的作品】分板块整理，末尾加"每个板块用独立卡片，标题前加 emoji，顶部有大名字和一句话介绍作为 hero 区域"。完整提示词见第5章AI助教使用指南。）

（等待 AI 生成）

师： 看到了吗？我把内容清单按板块整理好，发给智能体。AI 知道每个板块放什么，生成出来就是真实的信息，不是假的。

（Accept 代码，在内置浏览器中预览）

师： 来看效果——名字对不对？介绍对不对？每个板块内容对不对？

（逐块检查）

师： 基本上都对！但是——你们仔细看，有些地方 AI 可能会自己加一些文字。比如这里写了"欢迎来到我的主页"——我没让它写这个。这就是占位内容，AI 自己编的。我们要用 Solo Coder 把这些假内容替换掉。

（演示用 Solo Coder 元素选择，点击一处占位文字）

把这段文字改成："写代码是我的工作，讲课是我的热爱，做饭是我的解压方式"

（Accept → 内容更新）

师： 这就是完整的流程：内容清单 → 结构化需求 → 智能体生成 → 逐块检查 → Solo Coder 替换假内容。

学生实践 (13分钟):

师： 现在你们来做！

步骤：

1. 桌面新建文件夹（用你的名字命名）→ Trae 打开 → 切换到你的智能体
2. 把内容清单整理成结构化需求（分板块、每条写清楚）→ 发送 → Accept → 预览
3. 对照内容清单逐条检查：哪些是真实的？哪些是 AI 编的？
4. 用 Solo Coder + 元素选择 逐块替换假内容

师： 13分钟。重点放在内容的真实性——每一条信息都必须是真的你。好不好看先不管，下一步再调。

如果你不知道怎么整理需求，用这个简化版：

请帮我创建一个 index.html 个人主页，包含以下板块：

1. 顶部大标题区：名字是[你的名字]，一句话介绍是[你的介绍]
2. 关于我：星座[你的星座]，最擅长[你的三件事]
3. 我的好友：[好友名字和原因]
4. 我的最爱：歌[你的歌]、电影[你的电影]、书[你的书]
5. 荣誉成就：[你的荣誉]
6. 我的梦想：[你的梦想]
7. 我的作品：[你的作品]

每个板块用独立卡片，标题前加 emoji 图标。

（教师走动重点关注：是否整理了结构化需求（M1）、是否检查内容真实性（M3）、替换操作是否顺畅）

快学生应对： 加更多板块——"我的宠物"、"去过最远的地方"。

慢学生应对： AI 跑不起来就启动兜底方案：教师发保底 HTML 模板，学生用 Solo Coder 逐块改内容。

进度同步 (2分钟):

师： 在浏览器里看到自己主页的举手！

师： 我来问一个关键问题——你的页面上，有没有 AI 编的假信息还没改过来的？【诊断点：检测学生是否有"内容真实性审查"的意识】【理解层】

【分支A】若学生说"都改了/检查过了"： 师： 好！逐条对照你的内容清单，确认每一条都是真的。

【分支B】若学生说"有几处还没改"： 师： 没关系，等下还有时间改。但记住——最终发布的时候，每一个字都得是真的你。AI编的假信息留在上面，别人看了会觉得奇怪。

【分支C】若学生承认"直接用了 AI 编的内容，没换"： 师： 你用了 AI 编的爱好？那我问你——AI 说你喜欢"画画和弹钢琴"，你真的喜欢吗？ 生： （预期：不喜欢 / 不太准） 师： 看吧！这就是为什么要替换。你的主页代表的是"你"，不是 AI 想象中的你。现在打开内容清单，一条条改过来。

---

【分段四：第一轮视觉调整】(15分钟)

本段重点：内容到位后开始视觉优化，用智能体 + Solo Coder 做至少 3 轮视觉迭代

预设误概念：

• M5: "图片太麻烦了，纯文字就行"——emoji 和视觉元素让页面更生动
• M4: "智能体的提示词随便写写就行"——通过智能体修改更高效

讲解与演示 (4分钟):

师： 内容填好了——你的主页上每条信息都是真实的你了。现在进入第二步——变好看。

师： 你上节课学过迭代三步走——修 Bug、加体验、美化。今天我们主要做"美化"这一步。

师： 我演示 3 个视觉修改：

（教师用自己的智能体 + Solo Coder 演示）

修改一：配色调整

（用元素选择点击页面背景）

把整个页面的背景色改成从深蓝到紫色的渐变，所有卡片改成半透明白色背景（带毛玻璃效果），文字改成白色

（Accept → 看效果）

师： 一改配色，整个感觉就不一样了。

修改二：标题区域强化

（用元素选择点击顶部名字区域）

把顶部名字区域改大，名字字体加到很大，加一个文字发光效果。一句话介绍放在名字下面，字号稍小，用浅色显示。整个顶部区域高度占屏幕的40%，内容垂直居中。

（Accept → 看效果）

修改三：板块间距和分隔

给每个板块卡片之间增加间距，每个卡片加一个微妙的悬停放大效果（鼠标移上去轻微放大1.02倍），板块标题的 emoji 放大一些

（Accept → 看效果）

师： 三轮修改，每次只改一个方面。注意——我用的是自己创建的智能体来修改的，因为它已经知道我的设计规则，出来的效果更统一。

师： 还有一个小技巧：视觉修改的描述要具体。不要说"变好看"——AI 不知道你觉得什么好看。说"背景用深蓝到紫色渐变"、"标题加发光效果"、"卡片加悬停放大"——越具体越好。

学生实践 (9分钟):

师： 现在你们来美化自己的主页。用你创建的智能体 + Solo Coder，完成至少 3 轮视觉修改。

修改灵感参考：

修改方向	具体描述示例
🎨 配色	"背景改成粉色渐变"、"卡片背景用淡黄色"、"标题用金色"
📐 布局	"顶部区域加大"、"卡片改成两列排列"、"增加板块间距"
✨ 动效	"卡片加悬停放大"、"标题加发光呼吸效果"、"页面加淡入动画"
🔤 字体	"标题字体加大"、"介绍文字用斜体"、"板块标题加粗加大"
😊 装饰	"每个板块加分隔线"、"页脚加一行小字"、"加一个回到顶部按钮"

师： 记住：

• 用你的智能体来修改（它知道你的设计规则）
• 每次只改一个方面
• 用元素选择点你想改的地方

师： 9分钟，至少完成 3 轮视觉修改。开始！

（教师走动重点关注：是否用自己的智能体、描述是否具体、是否每次只改一个、是否用元素选择）

快学生应对： 挑战暗黑/亮色主题切换或滚动动画。慢学生应对： 教师给指令："点页面背景，说'改成渐变色'"。

进度同步 (2分钟):

师： 做了 3 轮以上视觉修改的举手？5 轮以上的呢？

师： 你们现在回头看看自己的主页——跟 AI 刚生成的第一版比，变化大不大？【诊断点：检测学生是否感知到视觉迭代的价值】【理解层】

【分支A】若学生说"变化很大/好看多了"： 师： 对！而且你没有重新做，只是一轮轮改。好作品是改出来的。

【分支B】若学生说"改了但感觉还是不太好看"： 师： 没关系！这就是为什么我们有两节课。今天把内容和基础视觉搞定，下节课专门做设计升级。你越改越有感觉的。

---

第三幕：反思 (Contemplate) — 10分钟 🤔

本幕目标：同桌互看页面，收集改进建议，为下节课做准备

【环节】同桌互看 (6分钟)

师： 今天不做路演——路演留到下节课正式发布的时候。今天做一个更有用的事：同桌互看。

师： 请你和旁边的同学互相看对方的个人主页。看完之后，每人给对方写两条建议：

1. 一条内容建议：内容上还可以加什么？哪里写得不够具体？哪条信息特别有趣？
2. 一条设计建议：视觉上哪里可以更好？颜色搭不搭？哪个板块看着不舒服？

师： 写在纸上或者记事本里，等下交给对方。4分钟！

（学生互看，教师走动观察讨论情况）

【环节】建议分享 (4分钟)

师： 时间到。谁收到了一个特别好的建议，愿意分享？【诊断点：检测学生能否给出具体的、有建设性的反馈】【应用层】

（选 2-3 位学生分享收到的建议）

【分支A】若建议很具体（"你可以在'我的梦想'板块加一段解释"、"你的卡片间距太小了"）： 师： 这个建议非常具体！"卡片间距太小"——这就是一个可以直接交给 AI 的修改需求。下节课用起来！

【分支B】若建议很模糊（"挺好的"、"再好看一点"）： 师： "再好看一点"不够具体哦。试着说——哪个板块？哪个方面？比如"标题区域可以再大一点"、"背景颜色可以换一个"。具体的建议才能变成具体的修改。

师： 把同桌给你的建议记好——下节课第一件事就是按建议优化。

拍照发群： 教师拍 2-3 位学生个人主页的截图，配文字"第四节课，同学们开始制作自己的个人主页！真实的爱好、真实的梦想，每一个字都是他们自己的故事。下节课继续打磨，敬请期待最终发布！" 发家长群。

---

第四幕：延续 (Continue) — 5分钟 🚀

本幕目标：总结"内容先行"核心理念，预告下节课，发布课外挑战

【环节】抽象总结 (3分钟)

师： 今天我们做了一件跟前三节课完全不一样的事。前三节课——我们做的是"小工具"，职业预测器、抽签机。今天——我们做的是属于你自己的作品，每一个字都是真实的你。

师： 今天最重要的一课是什么？

（投屏）

今日核心：

📝 内容先行 → 先想清楚展示什么，再让 AI 动手做
🧩 板块化设计 → 把一个页面拆成独立区域，分块展示
🤖 自定义智能体 → 给 AI 设定角色和规则，效果更稳定
✅ 真实内容 → 占位假信息必须替换成真实的你

师： 记住一句话：好作品的核心是内容，不是技术。 AI 可以帮你做出炫酷的页面，但里面放什么——只有你自己知道。技术是工具，内容才是灵魂。

师： 这个道理不只适用于做网页。写作文、做 PPT、拍视频——都是一样的。先想清楚要说什么，再想怎么说。

【环节】下节预告 + 5分钟挑战 (2分钟)

师： 下节课——我的个人主页（下）。我们要做三件事：

1. 设计升级——根据同桌给你的建议做第二轮大优化
2. 交互效果——加滚动动画、暗黑模式切换等高级效果
3. 正式路演发布——3分钟路演，向全班介绍"你是谁"

师： 最终版本会发布到穹狼科创网站。所以下节课之前，你得把内容准备得更充分。

师： 本周5分钟挑战：回家把内容清单扩充到 15 条以上——最喜欢的食物、去过最远的地方、养的宠物……越丰富越好。每条写具体细节，问问家人"你觉得我有什么特别的？"。如果有照片，让爸妈发给你，下节课用。（详见第7章挑战说明）

师： 记住——内容越丰富，下节课你的主页就越精彩。准备得越充分，路演的时候就越有东西可说。下节课见！

---

5. AI助教使用指南

教师演示用提示词（智能体系统提示词）：

你是一个专业的个人主页设计师。请遵循以下规则：
- 所有文字必须用中文
- 页面风格：现代简约，清新活泼
- 配色不超过三种主色
- 每个板块之间有清晰的分隔
- 多使用 emoji 作为图标装饰
- 所有内容放在一个 HTML 文件中（内联 CSS 和 JS）
- 页面要适合在电脑浏览器中展示
- 页面需要有流畅的滚动体验

教师演示用提示词（主页生成）：

请根据以下个人信息，帮我创建一个 index.html 个人主页：

【基本信息】
- 名字：武老师 / Mr. Wu
- 一句话介绍：一个相信 AI 能改变教育的编程老师
- 星座：天秤座 ♎

【我的特长】最擅长：写代码、讲课、做饭
【我的好友】小李（从小学认识至今20多年的铁哥们）
【我的最爱】歌：《晴天》周杰伦 🎵 / 电影：《星际穿越》🎬 / 书：《小王子》📖
【荣誉成就】编程比赛一等奖 🏆、优秀教师 🎖️
【我的梦想】让每个孩子都能用 AI 创造自己的作品
【我的作品】穹狼科创网站、AI编程课程体系

请为每个板块设计独立卡片，从上到下排列，标题前用 emoji，顶部有大名字+一句话介绍作为 hero 区域。

学生保底提示词（简化版主页生成）：

请帮我创建一个 index.html 个人主页，包含以下板块：

1. 顶部大标题区：名字是[你的名字]，一句话介绍是[你的介绍]
2. 关于我：星座[你的星座]，最擅长[你的三件事]
3. 我的好友：[好友名字和原因]
4. 我的最爱：歌[你的歌]、电影[你的电影]、书[你的书]
5. 荣誉成就：[你的荣誉]
6. 我的梦想：[你的梦想]

每个板块用独立卡片，标题前加 emoji 图标。
背景用渐变色，整体风格清新活泼。
所有代码放在一个 HTML 文件中。

学生保底提示词（替换占位内容）：

页面上[具体位置]写的是"[AI编的假内容]"，请改成"[你的真实内容]"

进阶提示词（视觉增强，留给下节课或快学生）：

给页面加一个暗黑模式切换按钮：右上角放月亮/太阳 emoji，点击切换亮色/暗色主题

给页面加滚动动画效果：每个板块卡片滚动到可视区域时从下方淡入滑出，持续0.5秒

---

6. 教师指南

本课技术备注：

1. HTML 个人主页基本结构：单文件 index.html，包含 hero 区域 + 多个 section 板块。CSS 用 <style> 内联，JS 用 <script> 内联。AI 生成的结构通常规范，教师不需要手动调代码。
2. Trae 自定义智能体：本质是预设 System Prompt，每次对话自动附加。不同 Trae 版本入口可能不同，备课时必须确认。
3. emoji 作为视觉元素：直接输入即可，通过 CSS font-size 任意放大不失真，配合动画效果很好。
4. 照片方案：本课用 emoji 占位，课后家长发照片，下节课用 base64 或 URL 替换。

常见问题 FAQ：

学生问题	建议回答
"怎么加真实照片？"	今天先用 emoji 占位，课后让爸妈发照片，下节课教你放进去
"页面太长了怎么办？"	个人主页就是滚动着看的，长一点没关系。实在太长可以删不重要的板块
"AI 生成的打不开/空白"	检查是否 Accept 了。已 Accept 还空白就让 AI 修复。实在不行用保底模板
"创建智能体的按钮在哪？"	（根据当前 Trae 版本指引，通常在 AI 面板顶部的智能体选择区域）

课堂风险预案：

• 如果 Trae 自定义智能体功能不可用（版本不支持）：直接在 Builder/Solo Coder 对话开头手动粘贴系统提示词，效果类似，只是每次都要重复粘贴
• 如果 AI 生成的页面完全不能用：教师把提前准备的保底 HTML 模板文件发给学生，学生用 Solo Coder 逐块修改内容。核心教学目标（内容先行 + 真实内容填充）不受影响
• 如果学生进度差异过大：慢学生确保完成"内容清单 + 基础版生成 + 至少替换3处真实内容"即可。快学生做视觉优化 + 加额外板块
• 如果学生不愿意写个人信息（隐私顾虑）：完全尊重。可以用昵称、可以跳过不想写的条目、可以用虚构角色做主页（"给你最喜欢的动漫角色做主页"）。核心训练目标不变

备课体验任务清单：

• 确认 Trae 智能体创建入口，完整走一遍创建→生成→替换内容流程
• 准备"空壳主页"截图 + 2-3 个不同风格个人主页截图
• 测试保底 HTML 模板可正常打开
• 确认校区每台电脑的 Trae 智能体功能正常

---

7. 5分钟日常AI挑战

本周挑战：

"我的超级内容清单"

操作步骤：

1. 把你的内容清单从 8 条扩充到 15 条以上
2. 参考方向：最喜欢的食物、去过最远的地方、养的宠物、最喜欢的运动、一个关于你的冷知识、你最想学的技能
3. 每条写具体细节——不是"喜欢吃面"，是"最喜欢兰州拉面，加辣加蛋，每周至少吃两次"
4. 问家人："你觉得我有什么特别的地方？"把他们的回答也加进去
5. 如果有照片（自拍、作品照、旅行照），让家长发给你备用

评价标准：

• 基础：内容清单达到 12 条以上
• 进阶：每条都有具体细节描述
• 挑战：收集了家人对你的评价，并加入清单

下节课分享： 下节课开始时选 2-3 位同学展示扩充后的内容清单

---

8. 拓展任务

拓展一（推荐）：给好朋友做主页

用同样的方法——先列内容清单（问你的好朋友关于他/她的信息），再用你的智能体帮他/她生成一个个人主页。送给好朋友当礼物！这是一个很好的"板块化设计 + 内容先行"的迁移练习。

拓展二（挑战）：双语版个人主页

给你的个人主页加一个"中英文切换"按钮。点击后所有中文内容切换成英文版本，再点切回中文。需要你先把内容清单翻译成英文，再用 Solo Coder 实现切换功能。