697 lines
35 KiB
Markdown
697 lines
35 KiB
Markdown
# AI03-008 我的个人主页（上）
|
||
|
||
---
|
||
|
||
**课时**: 第8课时
|
||
**主题**: 我的个人主页（上）
|
||
**核心能力**: [拆解力, 审美力]
|
||
**核心工具**: [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 实现切换功能。
|
||
|
||
---
|
||
|
||
*课程版本：v1.0*
|
||
*创建日期：2026-04-25*
|
||
*适用学期：2026春季学期*
|
||
*课程路线：AICODE-06（有扣子/低代码经验的学生）*
|