--- 课时: 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 用 `