Initial commit from WSL migration
This commit is contained in:
Rocky
33
3-lessons/AICODE-06/AICODE-06课程大纲.md
Normal file
33
3-lessons/AICODE-06/AICODE-06课程大纲.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# AICODE-06 课程大纲
|
||||
|
||||
> AI编程创新课 · 06路线 · 春季学期（前5课独立，合流时间点待定）
|
||||
> 适用对象：小学6年级起点，有扣子/低代码经验
|
||||
|
||||
---
|
||||
|
||||
## 独立阶段：代码编程衔接（第1-5课）
|
||||
|
||||
| 课时 | 课程主题 | 学习目标 | 知识点复习 | 知识点新知 |
|
||||
|:----:|---------|---------|-----------|-----------|
|
||||
| 1 | 从扣子到代码 | • 理解"扣子智能体"和"AI编程"的本质区别：配置 vs 创造<br>• 掌握 Trae IDE 界面布局和核心操作流程<br>• 理解 Vibe Coding：用自然语言驱动AI写代码 | 扣子智能体搭建经验 | Trae IDE 操作、Builder/Chat 模式、Vibe Coding 概念 |
|
||||
| 2 | SOLO模式初体验 | • 理解三种模式的区别：Chat（问问题）、Builder（从零创建）、Solo Coder（精准修改）<br>• 能根据场景选择正确模式<br>• 掌握跟随模式：实时观看AI编写代码 | Trae IDE 操作、Builder 模式 | Chat/Builder/Solo Coder 三种模式、跟随模式、模式选择策略 |
|
||||
| 3 | Solo Coder 迭代深化 | • 掌握内置浏览器预览和元素选择功能<br>• 能用"点击元素→描述修改"的方式精准迭代<br>• 完成从基础版到完善版的多轮迭代 | 三种模式、跟随模式 | 内置浏览器预览、元素选择、点击式精准修改、多轮迭代策略 |
|
||||
| 4 | 我的个人主页（上） | • 理解"内容先行"原则：先想清楚展示什么再让AI做<br>• 掌握板块化设计思维：把页面拆成独立区域<br>• 能在 Trae 中创建自定义智能体并编写系统提示词 | 三种模式、元素选择、迭代 | 内容清单方法、板块化设计、Trae 自定义智能体、占位内容替换 |
|
||||
| 5 | 我的个人主页（下） | • 能根据同学反馈有针对性地优化页面<br>• 能用自然语言让AI实现交互效果（hover、动画、轮播）<br>• 能用3分钟路演展示作品并讲解设计思路 | 自定义智能体、内容清单、Solo Coder 迭代 | 交互效果实现、设计一致性、发布前检查、产品路演 |
|
||||
|
||||
---
|
||||
|
||||
## 合流说明
|
||||
|
||||
> **合流时间点待定。** 原计划第5课合流，但考虑到 AICODE-03 学生打字和表达能力的成长节奏，合流点可能后延。
|
||||
>
|
||||
> AICODE-06 前5课的衔接设计确保学生具备以下基础：
|
||||
>
|
||||
> | AICODE-03 前期培养的能力 | AICODE-06 前5课对应的能力 |
|
||||
> |:---|:---|
|
||||
> | AI基本原理认知（Token、幻觉等） | 扣子→代码的认知跃迁（配置 vs 创造） |
|
||||
> | 提示词五要素模型 | 三种模式选择策略 + 自定义智能体系统提示词 |
|
||||
> | AI编程工具操作 + 审查三问 | Trae IDE 深度操作（跟随模式、元素选择、内置浏览器） |
|
||||
> | Bug描述三要素 + 迭代修复 | 多轮迭代 + 内容规划 + 交互效果 + 产品路演 |
|
||||
>
|
||||
> 合流后的课程内容详见 [AICODE-03课程大纲](../AICODE-03/AICODE-03课程大纲.md)。
|
||||
644
3-lessons/AICODE-06/AICODE06-01 从扣子到代码.md
Normal file
644
3-lessons/AICODE-06/AICODE06-01 从扣子到代码.md
Normal file
@@ -0,0 +1,644 @@
|
||||
---
|
||||
课时: 1
|
||||
主题: 从扣子到代码
|
||||
核心能力: [提问力, 拆解力]
|
||||
核心工具: [Trae IDE]
|
||||
时长: 90分钟
|
||||
透明化层级: 结果层
|
||||
适用路线: AICODE-06（有扣子/低代码经验的学生）
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 理解"扣子智能体"和"AI编程"的本质区别：配置 vs 创造
|
||||
- 掌握 Trae IDE 的界面布局和核心操作流程
|
||||
- 理解"Vibe Coding"的含义：用自然语言驱动AI写代码
|
||||
|
||||
**能力目标：**
|
||||
- 能独立完成 Trae 的完整操作流程：新建项目 → AI对话 → 接受代码 → 预览结果
|
||||
- 能使用 Trae 的 Builder 模式让AI生成一个完整的交互网页
|
||||
- 能在 Trae 中对AI生成的代码进行基本的迭代修改
|
||||
|
||||
**情感目标：**
|
||||
- 感受到"从配置到创造"的自由度跃迁
|
||||
- 对 Trae 工具产生"这个东西好用"的正面第一印象
|
||||
- 建立"我能用代码做出扣子做不到的东西"的信念
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 概念 | 六年级类比 | 认知层级 |
|
||||
|------|----------|---------|
|
||||
| Trae IDE = AI编程工作台 | 像一个超级画室：画布(编辑器)+颜料(代码)+AI助手都在里面 | 识别层 |
|
||||
| Builder 模式 = AI创建整个项目 | 像跟助手说"帮我画一幅画"，它直接画出来 | 识别层 |
|
||||
| Chat 模式 = 跟AI聊代码问题 | 像问助手"这笔颜色对不对"，它给你建议 | 识别层 |
|
||||
| 扣子 = 配置型工具 | 像乐高说明书，按步骤拼，只能拼出预定造型 | 识别层 |
|
||||
| AI编程 = 创造型工具 | 像拿到一堆零件+超强助手，想做什么都行 | 理解层 |
|
||||
| Vibe Coding | 用自然语言告诉AI你要什么，AI帮你写代码 | 理解层 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | "Trae和扣子差不多，换了个界面" | 本质不同：扣子产出对话，Trae产出可运行的程序 | 同一任务两个工具对比 |
|
||||
| M2 | "写代码要背很多语法，很难" | Vibe Coding用自然语言，你说中文AI写代码 | 当场演示一句话生成网页 |
|
||||
| M3 | "这个界面好复杂，我学不会" | 90%的按钮你不需要碰，只用3个区域就够了 | 界面引导时只聚焦核心区域 |
|
||||
| M4 | "AI帮我写代码，那我什么都不用学了" | 你是"产品经理"，AI是"程序员"，你要会提需求、会验收 | 展示模糊指令导致的糟糕结果 |
|
||||
| M5 | "代码我完全看不懂也没关系" | 不需要写，但需要能看一眼大概知道在干嘛 | 后续课程深入，本课只点到为止 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- 每台电脑已预装 Trae IDE（校区统一部署，教师课前验证可正常启动）
|
||||
- Trae 已登录校区账号（学生无需注册）
|
||||
- 网络环境正常（Trae AI功能需联网）
|
||||
- 浏览器 Chrome（用于预览生成的网页）
|
||||
|
||||
**教学资源：**
|
||||
- 教师准备：1个用 Trae 做的交互网页成品（开课展示用）
|
||||
- 教师准备：1个预制的 index.html 文件（AI翻车时的备用）
|
||||
- 教师准备：3个经过验证的"保底提示词"（学生想不出来时用）
|
||||
- 学生资源：无需提前准备
|
||||
|
||||
**教师备课体验任务：**
|
||||
> 备课前，教师必须亲自完成以下操作：
|
||||
> 1. 在 Trae IDE 中完整走一遍：打开 → 新建项目 → Builder 对话 → 接受代码 → 预览网页
|
||||
> 2. 用 Trae 做一个"反应力测试游戏"，记录全过程和遇到的问题
|
||||
> 3. 故意给 Trae 一个模糊指令（如"帮我做个游戏"），观察生成质量，准备对比演示
|
||||
> 4. 确认校区每台电脑的 Trae 可正常启动、AI功能可用
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
---
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟**
|
||||
|
||||
*本幕目标：用成品展示制造"哇"的冲击，激发学习动机*
|
||||
|
||||
**情景导入 (10分钟)**
|
||||
|
||||
**师：** 同学们，在正式上课之前，我先给你们看一个东西。
|
||||
|
||||
（教师打开浏览器，展示一个课前做好的交互网页——比如"反应力测试游戏"或"英语单词闯关"）
|
||||
|
||||
**师：** 来，谁来玩一下？
|
||||
|
||||
（邀请1-2位学生上台操作，全班观看）
|
||||
|
||||
**师：** 好玩吧？这个小游戏有按钮、有计时、有动画效果。你们觉得，做这个东西难吗？
|
||||
|
||||
**生：** （预期：难吧/不知道）
|
||||
|
||||
**师：** 告诉你们一个秘密——做这个东西，我**一行代码都没写**。我只是用中文跟AI说了我想要什么，AI就帮我生成了全部代码。整个过程不到5分钟。
|
||||
|
||||
（停顿）
|
||||
|
||||
**师：** 你们之前用扣子做过智能体对吧？扣子很好用，但它只能做"对话型"的东西——你问它答。而刚才这个游戏，有界面、能点击、有动画——这个在扣子里做得到吗？【诊断点：检测学生对扣子能力边界的认知】【识别层】
|
||||
|
||||
**生：** （预期：做不到）
|
||||
|
||||
**师：** 做不到。这就是我们今天要解锁的新工具——**Trae**。
|
||||
|
||||
**师：** 我跟你们说一下这学期我们要干什么。给你们剧透一下：
|
||||
|
||||
- **第3课**，你们每个人会做出一个完整的网页作品，可以分享给同学
|
||||
- **第8课**，你们会做出真正的游戏——有关卡、有计分、有特效的那种
|
||||
- **期末**，我们会开一场**发布会**——你上台展示你的作品，像真正的产品经理一样
|
||||
|
||||
这些软件全是你自己设计的，你想怎么设计就怎么设计。做完之后可以给你的爸爸妈妈用、给同学用、给老师用。
|
||||
|
||||
**师：** 你们只要跟着老师好好学，我会把你变成一个编程大师。你不需要记住任何代码，你只要能把你想要的东西说清楚——你想做什么、长什么样、怎么用——AI就帮你实现。**能说清楚 = 能做出来。** 这就是我们这门课的超能力。
|
||||
|
||||
**师：** 今天是第一步——你们每个人都会用 Trae 做出一个自己的交互网页。我们开始。
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟**
|
||||
|
||||
---
|
||||
|
||||
**【分段一：Trae 是什么 + 界面快速导览】(10分钟)**
|
||||
|
||||
*本段重点：最快速度认识 Trae 界面，消除恐惧感，把更多时间留给动手创作*
|
||||
|
||||
**讲解与演示 (5分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M3: 界面好复杂我学不会
|
||||
- M1: 跟扣子差不多
|
||||
|
||||
**师：** 大家打开桌面上的 Trae。
|
||||
|
||||
（等待全班打开，教师投屏同步展示）
|
||||
|
||||
**师：** 第一眼看到这个界面，你可能觉得"好复杂"。别担心——90%的按钮你都不需要碰。今天只需要认识**三个地方**：
|
||||
|
||||
（教师投屏，快速逐一指出）
|
||||
|
||||
**师：** 跟我一起看：
|
||||
|
||||
**① 左边：文件管理器**
|
||||
|
||||
**师：** 左边这个面板就是你的"文件夹"——你做的网页文件会出现在这里。
|
||||
|
||||
**② 中间：代码编辑器**
|
||||
|
||||
**师：** 中间最大的区域，AI帮你写的代码会显示在这里。五颜六色的文字不是乱码，是正常的。现在不需要看懂。
|
||||
|
||||
**③ 右边：AI对话面板（最重要！）**
|
||||
|
||||
**师：** 这是今天最重要的地方——**AI对话面板**。点左边的AI图标打开它。
|
||||
|
||||
（教师点开AI面板）
|
||||
|
||||
**师：** 这里有两个模式，很关键：
|
||||
- **Builder模式**：让AI帮你创建整个项目。像跟装修公司说"帮我装修整个房间"。
|
||||
- **Chat模式**：跟AI聊天、问问题。像问"这面墙颜色好不好看"。
|
||||
|
||||
**师：** 今天主要用 **Builder模式**——我们要从零开始，让AI帮我们写整个网页。
|
||||
|
||||
**师：** 还有一个关键操作——AI写完代码后，你会看到绿色的 **Accept（接受）** 按钮。点它就行，就像验收装修成果，满意就签字。
|
||||
|
||||
**学生实践 (3分钟):**
|
||||
|
||||
**师：** 现在跟我做三步，确认你找到了这些地方：
|
||||
|
||||
1. **点左边的AI图标** ——看到AI对话面板了吗？
|
||||
2. **在AI面板上方找到 Builder 和 Chat 两个标签**——点 Builder，确认切换到了 Builder 模式
|
||||
3. **再点左边的文件图标** ——看到文件管理器了吗？
|
||||
|
||||
（教师走动检查，重点关注找不到AI图标或分不清Builder/Chat的学生）
|
||||
|
||||
**师：** 有人找不到的举手，我来帮你。
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** Builder模式打开的同学举手？好。记住：**最重要的是右边的AI面板，用Builder模式**。其他的先不管。【诊断点：检测学生是否记住了核心区域】【识别层】
|
||||
|
||||
---
|
||||
|
||||
**【分段二：新建项目 + 第一次AI对话】(15分钟)**
|
||||
|
||||
*本段重点：走完"新建项目 → AI生成代码 → 预览网页"的完整流程*
|
||||
|
||||
**讲解与演示 (5分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M2: 写代码很难
|
||||
|
||||
**师：** 好，在我们动手之前，先搞清楚一个非常重要的概念——**"项目"**。
|
||||
|
||||
**师：** 你们平时在电脑上用文件夹存东西对吧？一个文件夹里放几张图片、几个文档。你也经常用浏览器上网，打开各种网页。那 Trae 里的"项目"和这些有什么区别？
|
||||
|
||||
（停顿，让学生思考）
|
||||
|
||||
**师：** 这样理解——文件夹就是一个抽屉，你把东西往里面一放就行。浏览器是一个窗户，你通过它看别人做的东西。但**项目**不一样，项目是一个**工作间**——你在里面创造东西。
|
||||
|
||||
**师：** 打个比方：你做手工的时候，需要一张工作台，把材料、工具都放在台上，然后在这上面做出你的作品。Trae 的"项目"就是这张工作台。你不在里面开一个项目，AI就不知道把代码往哪里放，你也没法预览你做的东西。
|
||||
|
||||
**师：** 所以记住：**每次做新东西，第一步永远是开一个新项目。** 不开项目就跟AI说话，就像站在空地上跟装修工人说"帮我装修"——装修哪里？没有房子你装修什么？
|
||||
|
||||
**师：** 好，现在我们来走一遍完整的流程。从零开始，做出一个网页。跟我一步一步来。
|
||||
|
||||
**第一步：新建项目文件夹**
|
||||
|
||||
**师：** 在 Trae 里，我们需要先给项目建一个"工作台"——就是在桌面上新建一个文件夹，然后让 Trae 打开它。
|
||||
|
||||
操作步骤：
|
||||
1. 点击菜单 **文件 → 打开文件夹**（或者用快捷键 Ctrl+K Ctrl+O）
|
||||
2. 在弹出的窗口里，导航到**桌面**
|
||||
3. 点右键 → **新建文件夹**，命名为 `我的第一个网页`
|
||||
4. 选中这个文件夹，点**确认/打开**
|
||||
|
||||
**师：** 看左边的文件管理器——现在应该显示了你的文件夹名字，里面还是空的。这就是你的"工作台"准备好了，等着AI往里面放东西。
|
||||
|
||||
（教师投屏同步演示每一步）
|
||||
|
||||
**第二步：在 Builder 里跟AI说话**
|
||||
|
||||
**师：** 现在切换到AI面板的 **Builder 模式**。在对话框里输入你想做的东西。
|
||||
|
||||
（教师演示输入）
|
||||
|
||||
**师：** 我先来示范。我输入这段话：
|
||||
|
||||
```
|
||||
帮我创建一个 index.html 网页文件，内容是一个自我介绍页面：
|
||||
- 大标题显示"你好，我是穹狼老师"
|
||||
- 下面有一段自我介绍文字
|
||||
- 背景用好看的渐变色
|
||||
- 要有一个按钮，点击后弹出一句鼓励的话
|
||||
```
|
||||
|
||||
（发送后等待AI响应）
|
||||
|
||||
**师：** 看！AI回复了。它帮我写了一段代码，还告诉我它做了什么。现在关键来了——
|
||||
|
||||
**第三步：接受代码**
|
||||
|
||||
**师：** 看到代码区域上方的按钮了吗？有一个绿色的 **Accept All（全部接受）**。点它——这就是告诉AI"好的，我接受你写的代码"。
|
||||
|
||||
（点击Accept，文件出现在左侧文件管理器中）
|
||||
|
||||
**师：** 看左边——`index.html` 文件出现了！
|
||||
|
||||
**第四步：预览网页**
|
||||
|
||||
**师：** 最后一步——在文件管理器里右键点击 `index.html`，选择 **"在默认浏览器中打开"**。或者你可以直接去桌面的文件夹里双击这个文件。
|
||||
|
||||
（浏览器打开，显示生成的网页）
|
||||
|
||||
**师：** 搞定！从打开Trae到看到网页，四步：**建文件夹 → Builder说话 → 接受代码 → 浏览器预览**。
|
||||
|
||||
**学生实践 (8分钟):**
|
||||
|
||||
**师：** 现在轮到你们了。按照刚才的四个步骤，做你自己的第一个网页。
|
||||
|
||||
**你的任务：** 在 Builder 里输入下面这段话（把名字换成你自己的）：
|
||||
|
||||
```
|
||||
帮我创建一个 index.html 网页文件，内容是一个自我介绍页面：
|
||||
- 大标题显示"你好，我是[你的名字]"
|
||||
- 下面写几句你想说的话
|
||||
- 背景用你喜欢的颜色
|
||||
- 加一个按钮，点击后显示一句你喜欢的话
|
||||
```
|
||||
|
||||
**师：** 做完四步（建文件夹→Builder说话→接受代码→浏览器预览）的同学，举手让我知道。
|
||||
|
||||
（教师走动协助）
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 有没有学生卡在"新建文件夹"步骤
|
||||
- 有没有学生没切换到 Builder 模式（用了Chat模式）
|
||||
- 有没有学生不知道点 Accept
|
||||
- 有没有学生找不到怎么预览文件
|
||||
- AI是否成功生成了代码（网络问题？）
|
||||
|
||||
**Plan B：** 如果某个学生的AI没有正确生成代码（网络超时/报错），教师直接帮忙在文件夹中创建 index.html，粘贴预制代码，先保证学生看到结果不掉队。
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 看到自己网页的同学举手！
|
||||
|
||||
（统计人数，目标：至少80%的学生成功）
|
||||
|
||||
**师：** 你们刚才完成了一件事——**没写一行代码，只用中文跟AI说了你想要什么，就得到了一个能在浏览器里打开的网页。** 这就是 Vibe Coding。
|
||||
|
||||
**师：** 跟扣子比比——在扣子里你能做出一个"有背景色、有按钮、能点击弹出消息"的网页吗？
|
||||
|
||||
**生：** （预期：不能）
|
||||
|
||||
**师：** 这就是区别。扣子做对话，Trae做产品。而我们才刚刚开始。
|
||||
|
||||
---
|
||||
|
||||
**【分段三：做一个交互式网页游戏】(25分钟)**
|
||||
|
||||
*本段重点：用 Trae 完成一个真正有交互、有视觉效果的作品——这是本课的核心"哇"时刻*
|
||||
|
||||
**讲解与演示 (5分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M4: AI帮我写了就行，我什么都不用管
|
||||
|
||||
**师：** 刚才的自我介绍页面是"入门级"。现在来点真正酷的——我们做一个**交互式网页游戏**。
|
||||
|
||||
**师：** 先看我怎么做。注意看我给AI的指令有多具体：
|
||||
|
||||
（教师在 Builder 中输入）
|
||||
|
||||
```
|
||||
帮我重新创建 index.html，这次做一个反应力测试小游戏：
|
||||
1. 页面中央有一个大圆形区域，初始是红色，上面写"等待..."
|
||||
2. 随机等待2-5秒后，圆形变成绿色，文字变成"点我！"
|
||||
3. 玩家点击绿色圆形后，显示反应时间（精确到毫秒）
|
||||
4. 如果在变绿之前就点了，显示"太早了！重新开始"
|
||||
5. 下方有"再来一次"按钮
|
||||
6. 页面整体深色主题，有渐变背景，圆形有阴影效果
|
||||
7. 显示历史最佳成绩
|
||||
```
|
||||
|
||||
（等待AI生成）
|
||||
|
||||
**师：** AI给我写好了。我先看看它的说明——它告诉我代码做了什么。没问题的话，我点 **Accept All**。
|
||||
|
||||
（接受代码，在浏览器中打开）
|
||||
|
||||
**师：** 来，谁来玩一下？
|
||||
|
||||
（邀请一个学生试玩，全班看效果）
|
||||
|
||||
**师：** 注意我刚才的提示词——我没说"帮我做个游戏"，我说了7条具体要求。**越具体，AI做出来的东西越接近你想要的。** 这就是你们之前学的提示词技巧，现在用在真正的编程上。
|
||||
|
||||
**师：** 但如果AI做的不完美怎么办？很简单——**继续跟它说**。关键是你要说清楚**哪里不对、你要什么效果**。比如：
|
||||
|
||||
- 觉得字太小？→ 跟AI说："把标题文字调大一倍，圆形区域也调大"
|
||||
- 颜色不好看？→ 跟AI说："背景换成深蓝色渐变，按钮换成橙色"
|
||||
- 功能没做对？→ 跟AI说："点击按钮后没有反应，我要的是点击后显示一段文字"
|
||||
|
||||
**师：** 注意——不要只说"不好看"或者"有问题"，要说清楚**哪里不好、你想要什么样的**。越具体，AI改得越准。这就是**迭代**——一遍遍优化直到满意。
|
||||
|
||||
**学生实践 (18分钟):**
|
||||
|
||||
**师：** 现在轮到你们了！你要在 Trae 里做一个自己的小作品。
|
||||
|
||||
**三个方向选一个：**
|
||||
|
||||
| 方向 | 说明 |
|
||||
|------|------|
|
||||
| **小游戏** | 有规则、有输赢、能玩起来的游戏 |
|
||||
| **小工具** | 解决一个小问题的实用工具 |
|
||||
| **创意页面** | 好看的、有动画效果的展示页面 |
|
||||
|
||||
**师：** 选好方向后，按这个框架写提示词：
|
||||
|
||||
```
|
||||
帮我创建一个 index.html 网页文件，做一个[你选的东西]：
|
||||
1. [最核心的功能是什么]
|
||||
2. [用户怎么操作——点什么、输入什么]
|
||||
3. [操作之后会发生什么]
|
||||
4. [界面风格——什么颜色、什么感觉]
|
||||
```
|
||||
|
||||
**师：** 比如你选"小游戏"方向，你可以写："做一个猜数字游戏：1. 电脑随机一个1-100的数字；2. 玩家输入数字点猜按钮；3. 显示猜大了还是猜小了，猜对了显示恭喜；4. 界面用蓝色主题。"
|
||||
|
||||
**师：** 操作流程跟刚才一样：**Builder说话 → Accept代码 → 浏览器预览**。
|
||||
|
||||
**关键提醒：**
|
||||
1. 提示词写到4条以上——越具体，AI做出来的东西越接近你想要的
|
||||
2. 做完后如果不满意，继续在Builder里跟AI说要改什么
|
||||
3. 做完的同学可以叫旁边的同学来试用你的作品
|
||||
|
||||
**师：** 时间18分钟。开始！
|
||||
|
||||
（教师走动观察和协助）
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 提示词质量：是否足够具体？太模糊的学生引导他们加细节
|
||||
- AI生成结果：是否能正常运行？不能的话帮助学生跟AI说"这里有问题"
|
||||
- 迭代意识：做完第一版的学生是否在继续优化？
|
||||
- 情绪状态：有没有学生因为AI翻车感到挫败？
|
||||
|
||||
**快学生应对：** 做完基础版后，试着跟AI说"加一个XX新功能"——比如加排行榜、加音效、加难度选择。体验"迭代"的感觉。
|
||||
|
||||
**慢学生应对：** 如果10分钟还没有产出，教师提供保底提示词：
|
||||
|
||||
```
|
||||
帮我做一个猜数字游戏：
|
||||
1. 电脑随机一个1-100的数字
|
||||
2. 玩家输入猜的数字，点"猜"按钮
|
||||
3. 如果猜大了显示"太大了"，猜小了显示"太小了"
|
||||
4. 猜对了显示"恭喜你！用了X次猜对了"
|
||||
5. 有"重新开始"按钮
|
||||
6. 界面好看，有颜色
|
||||
```
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 时间到！做出作品的同学举手！
|
||||
|
||||
（统计）
|
||||
|
||||
**师：** 你们用不到20分钟，做出了一个扣子里根本做不出来的东西。你现在回忆一下整个过程——你写代码了吗？
|
||||
|
||||
**生：** （预期：没有）
|
||||
|
||||
**师：** 你做了什么？
|
||||
|
||||
**生：** （预期：跟AI说了我想要什么）
|
||||
|
||||
**师：** 对！你做的是**想清楚要什么 → 告诉AI → 验收结果 → 不满意就迭代**。这就是 Vibe Coding 的核心循环。你是"产品经理"，AI是"程序员"。
|
||||
|
||||
---
|
||||
|
||||
**【分段四：回顾操作 + 掀开盖子看一眼】(10分钟)**
|
||||
|
||||
*本段重点：巩固操作流程，对代码建立初步感知*
|
||||
|
||||
**讲解与演示 (5分钟):**
|
||||
|
||||
**师：** 我们来回顾一下，今天你学会了 Trae 的核心操作流程：
|
||||
|
||||
```
|
||||
① 新建项目文件夹（文件 → 打开文件夹）
|
||||
② 在 Builder 模式跟AI说你要什么
|
||||
③ 点 Accept 接受AI写的代码
|
||||
④ 在浏览器中预览效果
|
||||
⑤ 不满意？回到 Builder 继续说要改什么（迭代）
|
||||
```
|
||||
|
||||
**师：** 这五步就是你以后每节课都会用到的基本流程。记住了吗？
|
||||
|
||||
**师：** 最后我们"掀开盖子看一眼"。点开你的 index.html 文件——这个文件就是你作品的**源代码**。什么是源代码？就是你做的这个网页的"配方"。浏览器拿到这个配方，就能做出你看到的页面。
|
||||
|
||||
**师：** 看看这些五颜六色的文字——这就是代码。你不需要看懂它。但我教你们一个以后永远用得上的方法——**不懂就问AI**。
|
||||
|
||||
（教师演示）
|
||||
|
||||
**师：** 比如我在代码里看到一个 `<style>` 标签，我不知道它是什么意思。怎么办？我不去百度，不去翻书——我直接复制这个标签，切换到 **Chat 模式**，粘贴进去，问AI：
|
||||
|
||||
（教师在Chat里输入）
|
||||
|
||||
```
|
||||
<style> 这个标签是什么意思？用一句话解释。
|
||||
```
|
||||
|
||||
（展示AI的回答）
|
||||
|
||||
**师：** 看到了吗？AI一句话就告诉你了。你在代码里看到任何不懂的东西，都可以这样做——复制、粘贴、问AI。**万事不懂问AI**，这是你们以后最重要的习惯。
|
||||
|
||||
**学生实践 (5分钟):**
|
||||
|
||||
**师：** 两个小任务，做完一个做下一个：
|
||||
|
||||
**任务一：问AI一个问题**
|
||||
|
||||
在代码里随便找一个你不认识的东西，复制它，切换到Chat模式，问AI它是什么意思。
|
||||
|
||||
**任务二：手动改一个颜色**
|
||||
|
||||
**师：** 接下来做一件更酷的事——你亲手改一下代码。
|
||||
|
||||
1. 在代码编辑器里按 **Ctrl+F**（搜索）
|
||||
2. 输入 `color`，看看代码里有几个跟颜色相关的地方
|
||||
3. 找到一个颜色值（比如 `#3498db`、`blue`、`red` 这样的词）
|
||||
4. 把它改成你喜欢的颜色（比如改成 `pink`、`gold`、`#ff6600`）
|
||||
5. 按 **Ctrl+S** 保存，然后去浏览器**刷新**页面
|
||||
|
||||
**师：** 看到变化了吗？你刚才做了一件事——**手动改了一行代码**。这证明代码不是黑盒子，你是可以碰它的。以后AI写的代码不满意，你甚至可以自己动手微调。
|
||||
|
||||
（教师走动协助，帮助找不到颜色值的学生）
|
||||
|
||||
**进度同步 (2分钟 - 从分段一省出的时间):**
|
||||
|
||||
**师：** 谁成功改了颜色？改成了什么颜色？
|
||||
|
||||
（让1-2个学生分享）
|
||||
|
||||
**师：** 记住两个方法——代码看不懂？**问AI**。代码想微调？**Ctrl+F搜索，手动改，Ctrl+S保存，刷新看效果**。【诊断点：检测学生是否掌握了"问AI"和"手动微调"两个习惯】【识别层】
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟**
|
||||
|
||||
*本幕目标：展示成果，巩固 Trae 操作流程和核心认知*
|
||||
|
||||
**成果展示 (6分钟)**
|
||||
|
||||
**师：** 请3位同学来前面展示你的作品。展示时说两件事：
|
||||
1. 你做了什么，简单演示一下
|
||||
2. 你跟AI说了什么（展示你的提示词）
|
||||
|
||||
（选3位学生展示，每人2分钟。尽量选不同方向——游戏、工具、创意页面各一个）
|
||||
|
||||
> **拍照发群：** 学生展示时，教师用手机快速拍1-2张学生作品屏幕画面。课后选最佳的配上文字"第一节课，同学们用AI做出了自己的第一个网页作品！"发到家长群。这是家长感知课程价值的关键触点——第一课就有产出，比任何宣传都有说服力。
|
||||
|
||||
**互评与讨论 (4分钟)**
|
||||
|
||||
**师：** 看完了三位同学的作品。我们今天用了一个新工具——Trae，做出了扣子里做不到的东西。
|
||||
|
||||
**师：** 最后一个问题：你觉得 Trae 跟扣子最大的区别是什么？一句话说。【诊断点：检测学生是否抓住了核心区别】【理解层】
|
||||
|
||||
（收集3-4个回答）
|
||||
|
||||
**师：** 总结得很好。用一句话说：**扣子让你做"对话"，Trae让你做"产品"。**
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟**
|
||||
|
||||
*本幕目标：总结核心操作流程，制造下节课期待*
|
||||
|
||||
**抽象总结 (3分钟)**
|
||||
|
||||
**师：** 今天我们认识了 Trae 这个新工具，学会了核心操作流程：
|
||||
|
||||
（板书/投屏）
|
||||
|
||||
```
|
||||
Trae 五步操作法：
|
||||
① 打开文件夹 → ② Builder对话 → ③ Accept代码 → ④ 浏览器预览 → ⑤ 不满意就迭代
|
||||
|
||||
你的角色 = 产品经理（想清楚要什么、说清楚、验收）
|
||||
AI的角色 = 程序员（根据你的描述写代码）
|
||||
```
|
||||
|
||||
**师：** 今天你们已经从"扣子用户"升级成了"Trae用户"——从"配置者"变成了"创造者"。记住今天最重要的一件事：**你不需要会写代码，你只需要能说清楚你想要什么。** 能表达 = 能实现。这学期我们会做出越来越厉害的东西，而你的"编程能力"其实就是你的"表达能力"。
|
||||
|
||||
**5分钟挑战发布 + 下节预告 (2分钟)**
|
||||
|
||||
**师：** 本周课外小挑战：
|
||||
|
||||
> **5分钟AI挑战：**
|
||||
> 回家用 Trae 做一个"家庭小工具"——给你的家人用。
|
||||
> 比如：家务分配转盘、做作业倒计时器、每日心情记录器。
|
||||
> 拍个截图或录个屏，下节课分享。
|
||||
>
|
||||
> **评价标准：**
|
||||
> - 基础：做出一个能运行的网页
|
||||
> - 进阶：网页有交互功能（能点击、能输入）
|
||||
> - 挑战：给家人实际用了，并收到他们的反馈
|
||||
|
||||
**师：** 下节课我们学"提示词工程进阶"——今天你们可能发现，有时候AI做的不是你想要的。下节课我们就来解决这个问题，让你成为更厉害的"产品经理"。
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师提示词模板（课前准备演示用）：**
|
||||
|
||||
```
|
||||
你是一个前端开发专家。请帮我创建一个 index.html 文件，包含一个简单的交互式网页游戏。
|
||||
要求：
|
||||
1. 所有代码在一个 index.html 文件中（内联CSS和JS）
|
||||
2. 界面简洁美观，有渐变背景
|
||||
3. 适合在浏览器中直接双击打开运行
|
||||
4. 不使用任何外部库或CDN
|
||||
5. [具体游戏描述]
|
||||
```
|
||||
|
||||
**学生提示词模板（参考）：**
|
||||
|
||||
```
|
||||
帮我创建一个 index.html 文件，做一个[什么东西]：
|
||||
1. [功能1]
|
||||
2. [功能2]
|
||||
3. [功能3]
|
||||
4. 界面要好看，用[你喜欢的风格]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**技术备注（教师备课知识补充）：**
|
||||
|
||||
1. **Trae 的 Builder vs Chat 区别**：Builder 模式可以直接创建/修改文件，代码变更需要点 Accept 确认；Chat 模式只是聊天，不会直接改文件。本课统一用 Builder。
|
||||
2. **Accept 机制**：AI 在 Builder 中生成代码后，会高亮显示变更的部分（绿色=新增，红色=删除）。学生需要点"Accept All"或逐个文件Accept。如果不满意可以点"Reject"拒绝。
|
||||
3. **文件预览方式**：最简单的方式是在文件资源管理器（Windows资源管理器，不是Trae内的）中找到 index.html 双击打开。也可以在Trae内右键文件选择"在浏览器中打开"。
|
||||
4. **"一个文件"策略**：本阶段所有代码都放在单个 index.html 中（内联CSS和JS），避免多文件管理增加复杂度。
|
||||
5. **网络依赖**：Trae 的AI功能需要联网。如果课堂网络不稳定，提前准备好离线备用的 index.html 文件。
|
||||
|
||||
**常见问题 FAQ：**
|
||||
|
||||
| 学生问题 | 建议回答 |
|
||||
|---------|---------|
|
||||
| "Builder 和 Chat 到底有什么区别？" | Builder 是干活的——它会帮你创建和修改文件。Chat 是聊天的——你问它问题，它回答，但不直接改文件。今天我们用 Builder |
|
||||
| "为什么AI做的和我说的不一样？" | 因为描述还不够具体。下节课我们专门学怎么说得更准确。现在你可以继续跟AI说"这里不对，我要的是XX" |
|
||||
| "代码看不懂怎么办？" | 完全正常！你是产品经理，不需要看懂每一行代码。就像你去餐厅点菜，不需要知道厨师怎么炒的 |
|
||||
| "Accept 了之后不满意怎么办？" | 在 Builder 里继续说你要改什么。AI会帮你修改。也可以用 Ctrl+Z 撤销 |
|
||||
| "我能在家里用Trae吗？" | 可以！Trae 是免费的，你回家可以下载安装继续用 |
|
||||
| "这个和ChatGPT有什么区别？" | ChatGPT 帮你写文字、回答问题。Trae 帮你写可以运行的程序——有界面、能点击、能互动的那种 |
|
||||
|
||||
**备课体验任务清单：**
|
||||
|
||||
- [ ] 在 Trae 中完整走一遍：新建文件夹 → Builder对话 → Accept → 预览
|
||||
- [ ] 做一个"反应力测试游戏"（课堂演示用）
|
||||
- [ ] 准备3个保底提示词（猜数字/倒计时器/个人介绍页）并验证可用
|
||||
- [ ] 准备1个预制 index.html（AI翻车时的备用）
|
||||
- [ ] 在校区每台电脑上确认 Trae 可正常启动、Builder可用
|
||||
- [ ] 测试校区网络环境下 Trae AI 的响应速度（如果超过30秒需要考虑备用方案）
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周任务：**
|
||||
|
||||
> **"我的家庭小工具"**
|
||||
>
|
||||
> **操作步骤：**
|
||||
> 1. 打开 Trae，创建一个新文件夹叫"家庭小工具"
|
||||
> 2. 在 Builder 里描述你想做的工具（倒计时器、分配转盘、心情日记等）
|
||||
> 3. 点 Accept 接受代码，在浏览器中打开看效果
|
||||
> 4. 不满意的地方跟AI说要改什么
|
||||
> 5. 给家人看你的作品
|
||||
>
|
||||
> **评价标准：**
|
||||
> - 基础：做出一个能在浏览器中打开的网页
|
||||
> - 进阶：网页有交互功能（能点击、能输入、能显示结果）
|
||||
> - 挑战：给家人实际使用并获得反馈，截图分享
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**进阶挑战（适合学有余力的学生）：**
|
||||
|
||||
**挑战一：迭代升级**
|
||||
> 回到你课堂上做的作品，在 Builder 里跟AI说"帮我加一个XX功能"。比如加排行榜、加音效、加深色/浅色模式切换。体验"迭代"的感觉。
|
||||
|
||||
**挑战二：换一个方向**
|
||||
> 如果课上做的是游戏，试着做一个工具；如果做的是工具，试着做一个创意页面。用同样的 Trae 五步操作法，感受不同类型项目的提示词差异。
|
||||
|
||||
**挑战三：代码考古**
|
||||
> 打开你的 index.html，在 `<style>` 区域找到控制背景颜色的代码，手动改成你喜欢的颜色，Ctrl+S 保存后刷新浏览器看效果。恭喜你完成了一次"手动编程"。
|
||||
646
3-lessons/AICODE-06/AICODE06-02 SOLO模式初体验.md
Normal file
646
3-lessons/AICODE-06/AICODE06-02 SOLO模式初体验.md
Normal file
@@ -0,0 +1,646 @@
|
||||
---
|
||||
课时: 2
|
||||
主题: SOLO模式初体验
|
||||
核心能力: [提问力, 拆解力]
|
||||
核心工具: [Trae IDE]
|
||||
时长: 90分钟
|
||||
透明化层级: 结果层
|
||||
适用路线: AICODE-06（有扣子/低代码经验的学生）
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 理解 Trae 三种模式的区别：Chat（问问题）、Builder（从零创建）、Solo Coder（在已有项目上迭代）
|
||||
- 理解"跟随模式"的含义：实时观看 AI 编写代码的过程
|
||||
- 知道什么场景用什么模式：新项目用 Builder，改项目用 Solo Coder，问问题用 Chat
|
||||
|
||||
**能力目标：**
|
||||
- 能根据任务场景选择正确的模式（Chat / Builder / Solo Coder）
|
||||
- 能使用 Builder 模式从零创建一个有交互功能的网页应用
|
||||
- 能切换到 Solo Coder 模式，开启跟随模式，观看 AI 实时工作并接受修改
|
||||
|
||||
**情感目标：**
|
||||
- 感受到"跟随模式"带来的"AI在帮我干活"的实时反馈感
|
||||
- 建立"不同工具解决不同问题"的工具选择意识
|
||||
- 对自己做出的趣味应用产生成就感和分享欲
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 概念 | 学生类比 | 认知层级 |
|
||||
|------|---------|---------|
|
||||
| Chat 模式 = 问问题 | 像微信问朋友一个问题，朋友回答你，但不帮你动手 | 识别层 |
|
||||
| Builder 模式 = 从零创建 | 像跟装修公司说"帮我从毛坯房开始装修" | 识别层 |
|
||||
| Solo Coder 模式 = 在已有项目上改 | 像跟装修公司说"我家已经装修好了，帮我把客厅墙换个颜色" | 识别层 |
|
||||
| 跟随模式 = 实时观看AI工作 | 像站在装修工人旁边看他施工，他刷一笔你看一笔 | 理解层 |
|
||||
| 模式选择 = 根据场景选工具 | 像吃饭选餐具：喝汤用勺子，吃面用筷子，切牛排用刀叉 | 应用层 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | "三种模式都差不多，随便用哪个" | 不同场景用不同模式，效果完全不同 | 演示用 Chat 让它改代码——它只回答不动手 |
|
||||
| M2 | "Solo Coder 就是高级版 Builder" | Builder 从零开始，Solo Coder 在已有代码上改。Builder 每次重写，Solo Coder 精准修改 | 对比演示：同一个修改需求，Builder 重写 vs Solo Coder 精改 |
|
||||
| M3 | "跟随模式没什么用，反正我看不懂代码" | 跟随模式让你实时看到AI在干嘛，即使看不懂代码，也能看到文件在变化、进度在推进 | 打开跟随模式体验，感受"AI在帮我干活"的实时感 |
|
||||
| M4 | "用 emoji 做图标会很丑" | emoji 可以放很大、配 CSS 动画效果后非常炫 | 展示成品——大号 emoji + 发光/弹跳效果 |
|
||||
| M5 | "做完基础版就算完成了" | 基础版只是起点，真正好的产品是一轮一轮迭代出来的 | 展示基础版 vs 迭代版的对比 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- 每台电脑已预装 Trae IDE，已登录校区账号
|
||||
- 网络环境正常
|
||||
- 内置浏览器可用（Trae 自带预览功能）
|
||||
|
||||
**教学资源：**
|
||||
- 教师准备：1个用 Solo Coder 做的"未来职业预测器"成品（课前演示用）
|
||||
- 教师准备：1个用 Builder 做的基础版（展示 Builder → Solo Coder 的切换过程）
|
||||
- 教师准备：2套保底提示词（未来职业预测器 + 超能力抽签机各一套）
|
||||
- 学生资源：上节课的 Trae 操作经验
|
||||
|
||||
**教师备课体验任务：**
|
||||
> 备课前，教师必须亲自完成以下操作：
|
||||
> 1. 用 Builder 创建"未来职业预测器"基础版，记录提示词和生成结果
|
||||
> 2. 切换到 Solo Coder 模式，开启跟随模式，给它一个修改需求，观察实时工作过程
|
||||
> 3. 同样流程做一遍"超能力抽签机"，确保两个项目的保底提示词都能稳定产出
|
||||
> 4. 故意用 Chat 模式让AI修改代码，观察它"只回答不动手"的表现，准备对比演示
|
||||
> 5. 测试大号 emoji + CSS 动画效果是否正常显示
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
---
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟** 🔗
|
||||
|
||||
*本幕目标：回顾 Builder 经验，引出"已有项目怎么改"的需求，制造模式选择的认知冲突*
|
||||
|
||||
**【环节】上节课回顾 (3分钟)**
|
||||
|
||||
**师：** 上节课我们学了 Trae 的基本操作。谁来帮我回忆一下，用 Trae 做一个网页分几步？
|
||||
|
||||
**生：** （预期：建文件夹→Builder说话→Accept→预览）
|
||||
|
||||
**师：** 对！五步操作法。上节课你们都用哪个模式做的？
|
||||
|
||||
**生：** （预期：Builder）
|
||||
|
||||
**师：** Builder 模式。它是"从零开始"帮你建一个项目。上节课的5分钟挑战，有谁回家做了"家庭小工具"的？来展示一下。
|
||||
|
||||
（选1-2位学生快速展示课外挑战作品，30秒/人）
|
||||
|
||||
**【环节】情景导入 (7分钟)**
|
||||
|
||||
**师：** 上节课我们用 Builder 做了网页。但是我现在问你们一个问题——
|
||||
|
||||
（教师打开一个用 Builder 做的简单网页）
|
||||
|
||||
**师：** 比如这个网页，我觉得背景颜色不好看，想换一个。我有两个选择：
|
||||
- **选择一：** 在 Builder 里重新说一遍"帮我做一个网页，但是背景换成蓝色"
|
||||
- **选择二：** 有没有一种方式，我只说"把背景换成蓝色"，AI就精准地帮我改这一个地方？
|
||||
|
||||
你们觉得哪种更方便？【诊断点：探测学生对"迭代"和"重建"的区分意识】【识别层】
|
||||
|
||||
**【分支A】若学生说"选择二更方便"：**
|
||||
**师：** 对！每次都重新来一遍太浪费了。那你知道怎么做到"选择二"吗？
|
||||
|
||||
**【分支B】若学生说"用 Builder 继续说不就行了"：**
|
||||
**师：** Builder 可以继续对话，但有时候它会把整个文件重写一遍。有没有更精准的方式？
|
||||
|
||||
**师：** 今天我们就来解锁 Trae 的新能力。上节课我们只用了一种模式——Builder。但其实 Trae 有**三种模式**，就像你手机上有不同的 App，干不同的事。今天学完，你就知道什么时候该用哪个了。
|
||||
|
||||
**师：** 而且今天有一个超酷的功能——**跟随模式**。你可以**实时看到 AI 在帮你写代码**，像看直播一样。一会儿你们就知道有多爽了。
|
||||
|
||||
**师：** 今天你们每个人会做一个好玩的东西——你可以选"未来职业预测器"或者"超能力抽签机"。先用 Builder 搭出基础版，再用新模式来升级它。我们开始！
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟** 🛠️
|
||||
|
||||
---
|
||||
|
||||
**【分段一：认识 Trae 三种模式】(12分钟)**
|
||||
|
||||
*本段重点：建立三种模式的认知区分，知道各自的用途*
|
||||
|
||||
**预设误概念：**
|
||||
- M1: 三种模式都差不多
|
||||
- M2: Solo Coder 就是高级版 Builder
|
||||
|
||||
**讲解与演示 (7分钟):**
|
||||
|
||||
**师：** 上节课我们说过，Trae 有 Builder 和 Chat 两种模式。其实还有第三种——**Solo Coder**。今天我们把三种模式搞清楚。
|
||||
|
||||
**师：** 我打个比方。你们都去过餐厅吧？
|
||||
|
||||
- **Chat 模式** = 问服务员问题。"这道菜辣不辣？""有没有推荐？"——服务员回答你，但不帮你做菜。
|
||||
- **Builder 模式** = 跟厨师说"帮我做一桌菜"。厨师从头开始做，做完端上来。
|
||||
- **Solo Coder 模式** = 菜已经端上来了，你说"这个汤太淡了加点盐"。厨师精准地帮你调整，不用重新做一桌。
|
||||
|
||||
（教师投屏，逐一打开三个模式，让学生看到界面）
|
||||
|
||||
**师：** 我们来做一个实验。我现在有一个上节课做的网页，我想把标题颜色改成红色。
|
||||
|
||||
（实验一：用 Chat 模式）
|
||||
|
||||
**师：** 先试 Chat 模式。我输入："把标题颜色改成红色"。
|
||||
|
||||
（展示 Chat 的回应——它会告诉你怎么改，给你代码片段，但不会直接修改文件）
|
||||
|
||||
**师：** 看到了吗？Chat 说了一堆，但文件有没有变？
|
||||
|
||||
**生：** （预期：没有）
|
||||
|
||||
**师：** 对！Chat 只聊天，不动手。它是"顾问"——给建议但不干活。
|
||||
|
||||
（实验二：用 Solo Coder 模式）
|
||||
|
||||
**师：** 现在换 Solo Coder。同样的话："把标题颜色改成红色"。
|
||||
|
||||
（展示 Solo Coder——它直接修改文件，标题颜色变了）
|
||||
|
||||
**师：** 看！文件直接被改了。Solo Coder 是"施工队"——你说哪里要改，它直接帮你改。
|
||||
|
||||
**师：** 那 Builder 呢？Builder 也能改，但它更适合"从零开始建"。如果你的项目已经有了，用 Solo Coder 更精准。
|
||||
|
||||
（投屏总结表格）
|
||||
|
||||
| 模式 | 像什么 | 适合干什么 | 会不会改文件 |
|
||||
|------|--------|-----------|-------------|
|
||||
| Chat | 顾问 | 问问题、学知识 | ❌ 不改 |
|
||||
| Builder | 建筑队 | 从零创建整个项目 | ✅ 创建新文件 |
|
||||
| Solo Coder | 装修队 | 在已有项目上精准修改 | ✅ 修改已有文件 |
|
||||
|
||||
**师：** 记住这个表格。以后选模式就问自己：我是想**问问题**、**从零做**、还是**改已有的**？
|
||||
|
||||
**学生实践 (3分钟):**
|
||||
|
||||
**师：** 快速测试！我说场景，你们告诉我用什么模式：
|
||||
|
||||
1. "我想做一个全新的游戏" —— 用什么？
|
||||
2. "我想问 AI 这段代码是什么意思" —— 用什么？
|
||||
3. "我的游戏背景颜色不好看，想换一个" —— 用什么？
|
||||
|
||||
（学生回答）
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 刚才三个场景，答对两个以上的举手？【诊断点：检测学生是否建立了模式选择意识】【识别层】
|
||||
|
||||
**【分支A】若大部分学生答对：**
|
||||
**师：** 很好！记住这个判断方法。我们马上用 Builder 做一个好玩的东西，然后切 Solo Coder 来升级它。
|
||||
|
||||
**【分支B】若较多学生搞混：**
|
||||
**师：** 没关系，一会儿我们亲手用 Builder 和 Solo Coder 各做一遍，你就彻底分清了。
|
||||
|
||||
---
|
||||
|
||||
**【分段二：Builder 创建基础版】(22分钟)**
|
||||
|
||||
*本段重点：用 Builder 模式创建项目基础版，建立"先做出来再说"的意识*
|
||||
|
||||
**预设误概念：**
|
||||
- M4: 用 emoji 做图标会很丑
|
||||
- M5: 做完基础版就算完成了
|
||||
|
||||
**讲解与演示 (5分钟):**
|
||||
|
||||
**师：** 好，现在我们用 Builder 做一个好玩的东西。今天你有**两个方向**可以选：
|
||||
|
||||
| 方向 | 说明 | 预览 |
|
||||
|------|------|------|
|
||||
| 🔮 **未来职业预测器** | 输入你的名字，点按钮，AI帮你"预测"未来职业 | 有动画、有大emoji、有搞笑描述 |
|
||||
| ⚡ **超能力抽签机** | 点按钮抽签，随机获得一个超能力 | 有翻转动画、有超能力描述、有稀有度 |
|
||||
|
||||
**师：** 两个项目难度一样，结构一样——都是"点按钮→随机结果→好看的动画"。选你觉得更好玩的。
|
||||
|
||||
**师：** 我先做一个"未来职业预测器"给你们看。注意看我的提示词怎么写的：
|
||||
|
||||
（教师在 Builder 中输入）
|
||||
|
||||
```
|
||||
帮我创建一个 index.html 文件，做一个"未来职业预测器"趣味网页：
|
||||
1. 页面顶部有一个大标题"🔮 未来职业预测器"，用大号 emoji 做图标
|
||||
2. 中间有一个输入框，让用户输入自己的名字
|
||||
3. 有一个"开始预测"按钮
|
||||
4. 点击按钮后，显示一个随机职业结果，包括：
|
||||
- 一个大号 emoji 代表这个职业（比如 👨🚀 太空探险家）
|
||||
- 职业名称（大字）
|
||||
- 一段搞笑的职业描述（2-3句话）
|
||||
5. 至少准备 10 个不同的职业结果，每次随机显示一个
|
||||
6. 结果出现时有一个好看的动画效果（比如淡入、缩放弹出）
|
||||
7. 有"再测一次"按钮
|
||||
8. 整体用好看的渐变色背景，圆角卡片，有阴影效果
|
||||
9. 所有视觉效果用 emoji 和 CSS 实现，不要使用外部图片
|
||||
```
|
||||
|
||||
（等待AI生成）
|
||||
|
||||
**师：** 注意我最后一条写了"用 emoji 和 CSS 实现，不要使用外部图片"——因为纯 CSS 做出来的效果最稳定，emoji 放大后也很好看。
|
||||
|
||||
（Accept 代码，在内置浏览器中预览）
|
||||
|
||||
**师：** 来，谁来试一下？
|
||||
|
||||
（邀请1位学生试用——输入名字，点预测，看结果）
|
||||
|
||||
**师：** 看到了吗？那个大 emoji 一弹出来，效果很好对吧？这就是 emoji + CSS 动画的威力。不需要图片也能很好看。
|
||||
|
||||
**学生实践 (15分钟):**
|
||||
|
||||
**师：** 现在你们来做。**选一个方向**——未来职业预测器或者超能力抽签机。
|
||||
|
||||
**步骤：**
|
||||
1. 在桌面新建文件夹（"未来职业预测器"或"超能力抽签机"）
|
||||
2. Trae 打开文件夹
|
||||
3. 切到 **Builder 模式**
|
||||
4. 输入提示词（可以参考我的，也可以自己写——**你的提示词写得越具体，出来的效果越好**）
|
||||
5. Accept 代码 → 预览效果
|
||||
|
||||
**如果你选超能力抽签机，参考这个提示词：**
|
||||
|
||||
```
|
||||
帮我创建一个 index.html 文件，做一个"超能力抽签机"趣味网页：
|
||||
1. 页面顶部有大标题"⚡ 超能力抽签机"，用大号 emoji 图标
|
||||
2. 中间有一个大按钮"抽取超能力！"
|
||||
3. 点击按钮后，显示随机抽到的超能力，包括：
|
||||
- 一个大号 emoji 代表这个超能力（比如 🔥 火焰掌控）
|
||||
- 超能力名称（大字）
|
||||
- 超能力等级（用星星表示：⭐⭐⭐⭐⭐）
|
||||
- 一段有趣的超能力描述（2-3句话）
|
||||
4. 至少准备 10 个不同的超能力，每次随机显示一个
|
||||
5. 抽到结果时有一个炫酷的动画（比如卡片翻转、发光效果）
|
||||
6. 有"再抽一次"按钮
|
||||
7. 整体用深色炫酷风格，有光效和渐变
|
||||
8. 所有视觉效果用 emoji 和 CSS 实现，不要使用外部图片
|
||||
```
|
||||
|
||||
**师：** 15分钟。做完基础版后先让旁边同学试用一下。等会儿我们要用 Solo Coder 来升级它！
|
||||
|
||||
（教师走动观察）
|
||||
|
||||
（教师走动重点关注：）
|
||||
- 是否切到了 Builder 模式（不是 Chat 或 Solo Coder）
|
||||
- 提示词是直接照抄的还是有自己的改动
|
||||
- 生成结果是否正常运行
|
||||
- 学生是否点了 Accept
|
||||
- 预览是否成功
|
||||
|
||||
**快学生应对：** 基础版做完后，试着在 Builder 里继续说"加一个XX功能"——比如"加一个历史记录"、"加背景音效"。
|
||||
|
||||
**慢学生应对：** 如果10分钟还没有产出，直接把上面的保底提示词给学生用。
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 做出基础版并且在浏览器里看到效果的同学举手！
|
||||
|
||||
（统计）
|
||||
|
||||
**师：** 好！现在每个人手上都有一个"已经做好的项目"。下面问你们——如果我想给这个项目加一个新功能，或者改一下样式，我应该用什么模式？【诊断点：检测学生能否在实际场景中选择正确模式】【应用层】
|
||||
|
||||
**生：** （预期：Solo Coder）
|
||||
|
||||
**师：** 对！项目已经有了，要改就用 Solo Coder。我们现在就切过去，而且——要开启一个超酷的功能。
|
||||
|
||||
---
|
||||
|
||||
**【分段三：Solo Coder + 跟随模式初体验】(22分钟)**
|
||||
|
||||
*本段重点：切换到 Solo Coder 模式，开启跟随模式，体验实时观看 AI 工作的感觉*
|
||||
|
||||
**预设误概念：**
|
||||
- M2: Solo Coder 就是高级版 Builder
|
||||
- M3: 跟随模式没什么用
|
||||
|
||||
**讲解与演示 (7分钟):**
|
||||
|
||||
**师：** 现在我们解锁今天的重头戏——**Solo Coder 模式**。
|
||||
|
||||
**师：** 先找到它。看 AI 面板上方——除了 Chat 和 Builder，还有一个 **Solo Coder**。点它切换过去。
|
||||
|
||||
（教师投屏演示切换到 Solo Coder）
|
||||
|
||||
**师：** 进来了。看到界面的变化了吗？Solo Coder 的界面和 Builder 不太一样——
|
||||
|
||||
**师：** 但最酷的功能是这个——**跟随模式**。看面板上有一个眼睛图标（或者"Follow"按钮），点一下。
|
||||
|
||||
（教师打开跟随模式）
|
||||
|
||||
**师：** 跟随模式打开了。现在我给它一个修改指令，你们注意看——
|
||||
|
||||
（教师在 Solo Coder 中输入）
|
||||
|
||||
```
|
||||
给"开始预测"按钮加一个点击后的加载动画效果：
|
||||
- 点击后按钮文字变成"正在预测中..."，加一个旋转的 emoji ⏳
|
||||
- 等待1.5秒后再显示结果
|
||||
- 这样看起来更像真的在"计算"
|
||||
```
|
||||
|
||||
（发送后，跟随模式实时展示 AI 修改代码的过程——文件自动跳转、代码实时变化）
|
||||
|
||||
**师：** 看到了吗？！这就是跟随模式——你可以**实时看到 AI 在修改你的代码**！它跳到哪个文件、改了哪一行，你都能看到。就像看直播一样。
|
||||
|
||||
（等 AI 完成，预览效果）
|
||||
|
||||
**师：** 好，改完了。我们在浏览器里刷新看看——
|
||||
|
||||
（展示加载动画效果）
|
||||
|
||||
**师：** 点"开始预测"——看！先是"正在预测中..."转了一会儿，然后才出结果。是不是比之前直接蹦出来更有感觉？
|
||||
|
||||
**师：** 这就是 Solo Coder 的威力——**精准修改**。我没有重新描述整个项目，只说了"给按钮加个动画"，它就精准地改了那一个地方。如果用 Builder 呢？它可能把整个文件重写一遍。
|
||||
|
||||
**师：** 还有一个关键区别——Solo Coder 改完后也需要你 **Accept**。看到变更了吗？绿色是新加的代码，红色是删掉的。满意就点 Accept。
|
||||
|
||||
**学生实践 (12分钟):**
|
||||
|
||||
**师：** 现在你们来试！
|
||||
|
||||
**步骤：**
|
||||
1. 切换到 **Solo Coder** 模式
|
||||
2. 打开**跟随模式**（找到那个眼睛/Follow 按钮，点亮它）
|
||||
3. 给你的项目提一个修改需求
|
||||
|
||||
**修改建议（选一个或自己想）：**
|
||||
|
||||
如果你做的是**未来职业预测器**：
|
||||
- "加一个点击后的加载动画，显示'正在预测中...'，等1.5秒再显示结果"
|
||||
- "在结果卡片下面加一行小字：'预测准确率 99.9%（仅供娱乐）'"
|
||||
- "把结果卡片的背景改成跟职业相关的颜色（太空探险家用深蓝，美食家用橙色）"
|
||||
|
||||
如果你做的是**超能力抽签机**：
|
||||
- "加一个抽签动画：点击后卡片先快速闪烁几个超能力，最后停在一个上面"
|
||||
- "在超能力描述下面加一句'拥有率：0.01% 的人拥有此超能力'"
|
||||
- "加一个'收集图鉴'功能：记录你抽到过的所有超能力"
|
||||
|
||||
**师：** 记住两件事：
|
||||
1. **开跟随模式**——看 AI 实时帮你改代码
|
||||
2. **改完后点 Accept**——然后刷新浏览器看效果
|
||||
|
||||
**师：** 12分钟，开始！
|
||||
|
||||
（教师走动观察）
|
||||
|
||||
（教师走动重点关注：）
|
||||
- 是否成功切换到 Solo Coder（而不是还在 Builder 里）
|
||||
- 是否打开了跟随模式
|
||||
- AI 修改后是否点了 Accept
|
||||
- 修改结果是否正常——如果 AI 改坏了，引导学生说"刚才的修改有问题，标题显示不出来了，帮我修一下"
|
||||
- 跟随模式的体验反馈——学生看到实时变化时的反应
|
||||
|
||||
**Plan B：** 如果某个学生的 Solo Coder 修改导致页面出错，教师引导学生在 Solo Coder 里描述问题："页面打开后是空白的/按钮不见了/样式乱了，帮我修复"。这本身就是一次很好的"迭代修复"体验。
|
||||
|
||||
**进度同步 (3分钟):**
|
||||
|
||||
**师：** 成功用 Solo Coder 改了项目的举手！
|
||||
|
||||
**师：** 跟随模式感觉怎么样？看到 AI 实时改代码的时候，你什么感觉？【诊断点：检测学生对跟随模式的体验认知】【理解层】
|
||||
|
||||
（收集2-3个回答）
|
||||
|
||||
**【分支A】若学生说"很酷/很有意思"：**
|
||||
**师：** 对吧！跟随模式就是让你看到"AI正在帮你干活"。以后做复杂的修改，一定要开跟随模式——既能看进度，也能及时发现问题。
|
||||
|
||||
**【分支B】若学生说"代码看不懂"：**
|
||||
**师：** 完全正常！你不需要看懂每一行。跟随模式的重点不是让你读代码，而是让你**看到进度**——AI改到哪了、改了几个地方。就像你看装修工人干活，你不用懂每个工序，但你能看到"他在刷墙了"、"他在装灯了"。
|
||||
|
||||
**【分支C】若学生说"我的改坏了"：**
|
||||
**师：** 太好了！这正是我要说的——**翻车是正常的**。重要的是你怎么跟 AI 说"这里出问题了"。你试着在 Solo Coder 里告诉它"刚才的修改导致XX问题，帮我修复"。
|
||||
|
||||
**师：** 好，我们来总结一下今天学的三种模式。（投屏）
|
||||
|
||||
| 你想做什么？ | 用哪个模式？ | 为什么？ |
|
||||
|-------------|------------|---------|
|
||||
| 我有个问题想问AI | **Chat** | 它只回答，不改你的代码 |
|
||||
| 我要从零做一个新项目 | **Builder** | 它会帮你创建整个项目 |
|
||||
| 我的项目已经有了，想改一个地方 | **Solo Coder** | 它会精准修改，不重写整个文件 |
|
||||
|
||||
**师：** 以后每次用 Trae，先问自己这个问题："我是要问问题、从零做、还是改已有的？"答案就告诉你该用哪个模式。
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟** 🤔
|
||||
|
||||
*本幕目标：展示作品，巩固三种模式的区分，强化跟随模式的体验*
|
||||
|
||||
**成果展示 (6分钟)**
|
||||
|
||||
**师：** 请3位同学来展示你的作品。展示时说三件事：
|
||||
1. 你选的是哪个方向——职业预测器还是超能力抽签机？
|
||||
2. 简单演示一下你的作品
|
||||
3. 你用 Solo Coder 加了什么功能？跟随模式的感觉怎么样？
|
||||
|
||||
（选3位学生展示，每人2分钟。尽量选两个方向各有代表）
|
||||
|
||||
> **拍照发群：** 教师拍学生作品的精彩截图，配文字"第二节课，同学们做出了自己的趣味小应用——未来职业预测器和超能力抽签机！"发家长群。
|
||||
|
||||
**互评与讨论 (4分钟)**
|
||||
|
||||
**师：** 今天我们学了三种模式。最后做一个快速测试——
|
||||
|
||||
**师：** 如果你现在想把"预测器"变成"全班版"——每个同学的名字都预存进去，打开网页自动显示全班同学的名字列表。这个需求，你会用什么模式？为什么？【诊断点：检测学生的模式选择迁移能力】【应用层】
|
||||
|
||||
（收集回答）
|
||||
|
||||
**师：** 对——用 Solo Coder，因为项目已经有了，你只是想"加一个功能"。而且别忘了开跟随模式，看AI怎么帮你加的。
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟** 🚀
|
||||
|
||||
*本幕目标：总结三种模式+跟随模式，预告下节课的元素选择功能*
|
||||
|
||||
**抽象总结 (3分钟)**
|
||||
|
||||
**师：** 今天我们学到的核心能力是什么？
|
||||
|
||||
（板书/投屏）
|
||||
|
||||
```
|
||||
Trae 三种模式：
|
||||
📋 Chat → 问问题（不改代码）
|
||||
🏗️ Builder → 从零创建
|
||||
🔧 Solo Coder → 精准修改已有项目
|
||||
|
||||
跟随模式：
|
||||
👁️ 实时看AI工作 → 像看直播一样
|
||||
```
|
||||
|
||||
**师：** 记住一句话：**做新的用 Builder，改旧的用 Solo Coder，问问题用 Chat。** 这就是工具选择的智慧——不是越高级越好，而是**最合适的就是最好的**。
|
||||
|
||||
**5分钟挑战发布 + 下节预告 (2分钟)**
|
||||
|
||||
**师：** 本周5分钟挑战：
|
||||
|
||||
> **5分钟AI挑战：**
|
||||
> 回家用 Solo Coder 给你今天做的作品加**两个新功能**。
|
||||
> 比如：加背景音乐、加倒计时、加排行榜、加分享按钮。
|
||||
> 记住开跟随模式！截图你看到的 AI 实时工作画面。
|
||||
>
|
||||
> **评价标准：**
|
||||
> - 基础：成功用 Solo Coder 加了1个新功能
|
||||
> - 进阶：加了2个新功能，且效果正常
|
||||
> - 挑战：给家人试用你的"预测器"或"抽签机"，截图他们的反应
|
||||
|
||||
**师：** 下节课预告——Solo Coder 还有一个超级厉害的功能我今天没教你们。下节课你可以**直接点击网页上的某个元素**，然后告诉 AI "把这个按钮变大"或者"把这段文字的颜色改了"——不需要知道代码在哪里，直接点就行。想不想学？
|
||||
|
||||
**生：** （预期：想！）
|
||||
|
||||
**师：** 那下节课见！
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师演示用提示词（未来职业预测器）：**
|
||||
|
||||
```
|
||||
帮我创建一个 index.html 文件，做一个"未来职业预测器"趣味网页：
|
||||
1. 页面顶部有一个大标题"🔮 未来职业预测器"，用超大号 emoji 做图标
|
||||
2. 中间有一个输入框（placeholder "输入你的名字"）和一个"开始预测"按钮
|
||||
3. 点击按钮后，在下方用卡片展示随机职业结果：
|
||||
- 一个超大号 emoji 代表这个职业
|
||||
- 职业名称（大字加粗）
|
||||
- 一段搞笑的职业描述（2-3句话，幽默风格）
|
||||
4. 预设至少 12 个职业，包括：太空探险家👨🚀、时间旅行导游⏰、美食评论家🍜、动物翻译官🐶、云朵设计师☁️、彩虹工程师🌈、恐龙考古学家🦕、海底城市建筑师🏗️、外星语言学家👽、魔法药水调配师🧪、梦境导演🎬、星球命名师⭐
|
||||
5. 结果出现时有缩放弹出 + 淡入动画
|
||||
6. 有"再测一次"按钮，点击后清空结果重新预测
|
||||
7. 整体用渐变背景（紫色到深蓝），卡片白色圆角阴影
|
||||
8. 所有视觉效果用 emoji 和 CSS 实现，不要使用任何外部图片或图片链接
|
||||
9. 整个页面适合在浏览器中直接打开运行
|
||||
```
|
||||
|
||||
**教师演示用提示词（超能力抽签机）：**
|
||||
|
||||
```
|
||||
帮我创建一个 index.html 文件，做一个"超能力抽签机"趣味网页：
|
||||
1. 页面顶部有大标题"⚡ 超能力抽签机"，深色炫酷风格
|
||||
2. 中间有一个大按钮"抽取超能力！"（有发光效果）
|
||||
3. 点击按钮后，用卡片展示随机超能力：
|
||||
- 一个超大号 emoji 代表这个超能力
|
||||
- 超能力名称（大字加粗发光）
|
||||
- 稀有度等级（用 ⭐ 表示，1-5星随机）
|
||||
- 一段有趣的超能力描述（2-3句话）
|
||||
4. 预设至少 12 个超能力，包括：火焰掌控🔥、时间暂停⏱️、隐身术👻、读心术🧠、瞬间移动🌀、万有引力控制🪐、动物对话🦁、天气操控🌪️、超级记忆📚、金属操控⚙️、光速奔跑💨、植物生长🌿
|
||||
5. 抽到结果时有卡片翻转 + 发光动画效果
|
||||
6. 有"再抽一次"按钮
|
||||
7. 整体深色主题（黑紫渐变），有霓虹灯光效
|
||||
8. 所有视觉效果用 emoji 和 CSS 实现，不要使用任何外部图片或图片链接
|
||||
9. 整个页面适合在浏览器中直接打开运行
|
||||
```
|
||||
|
||||
**学生保底提示词（未来职业预测器简化版）：**
|
||||
|
||||
```
|
||||
帮我创建一个 index.html 文件，做一个"未来职业预测器"：
|
||||
1. 有一个输入框输入名字
|
||||
2. 有一个"预测"按钮
|
||||
3. 点按钮随机显示一个职业，用大号 emoji 做图标
|
||||
4. 准备10个有趣的职业
|
||||
5. 有动画效果，界面好看
|
||||
6. 不要用外部图片，用 emoji 和 CSS
|
||||
```
|
||||
|
||||
**学生保底提示词（超能力抽签机简化版）：**
|
||||
|
||||
```
|
||||
帮我创建一个 index.html 文件，做一个"超能力抽签机"：
|
||||
1. 有一个"抽签"按钮
|
||||
2. 点按钮随机显示一个超能力，用大号 emoji 做图标
|
||||
3. 显示超能力名称和有趣的描述
|
||||
4. 准备10个超能力
|
||||
5. 有动画效果，深色炫酷风格
|
||||
6. 不要用外部图片，用 emoji 和 CSS
|
||||
```
|
||||
|
||||
**Solo Coder 迭代用提示词示例：**
|
||||
|
||||
```
|
||||
给"开始预测"按钮加一个加载动画：
|
||||
点击后按钮显示"正在预测中... ⏳"，1.5秒后再显示结果
|
||||
```
|
||||
|
||||
```
|
||||
在结果卡片下面加一行小字："预测准确率 99.9%（仅供娱乐）"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**本课技术备注：**
|
||||
|
||||
1. **三种模式的底层区别**：Chat 模式只在对话中回复，不会修改文件系统中的文件。Builder 模式会创建新文件或完整重写文件。Solo Coder 模式会在现有文件基础上做增量修改（diff），改动更精准。
|
||||
2. **跟随模式（Follow Mode）**：开启后，Trae 会自动跳转到 AI 正在编辑的文件和行号，让你实时看到变化。关闭后 AI 仍然在工作，只是你看不到实时过程。跟随模式不影响 AI 的工作质量，只影响你的观看体验。
|
||||
3. **Accept/Reject 机制**：Solo Coder 修改后同样需要 Accept。如果不满意可以 Reject 拒绝，代码会恢复到修改前的状态。
|
||||
4. **emoji 渲染**：emoji 在不同操作系统上显示样式略有不同（Windows 的 emoji 和 Mac 的不一样），但功能一致。通过 CSS 的 `font-size` 可以将 emoji 放到任意大小，不会模糊。
|
||||
5. **为什么不用外部图片**：纯 AI 编程模型不能生成图片文件，用外部图片链接需要联网且链接可能失效。emoji + CSS 方案完全离线可用、永不失效，是当前阶段最稳定的视觉方案。
|
||||
|
||||
**常见问题 FAQ：**
|
||||
|
||||
| 学生问题 | 建议回答 |
|
||||
|---------|---------|
|
||||
| "Solo Coder 和 Builder 到底什么区别？" | Builder 是造房子——从地基开始建。Solo Coder 是装修——房子已经有了，你只改你想改的地方 |
|
||||
| "跟随模式在哪里打开？" | 进入 Solo Coder 后，在面板上找眼睛图标或"Follow"按钮，点一下就打开了 |
|
||||
| "我用 Solo Coder 改了之后页面变空白了" | 没关系！先试试点 Reject 撤销修改。如果已经 Accept 了，在 Solo Coder 里说"页面变空白了，帮我修复回正常状态" |
|
||||
| "我可以在 Solo Coder 里加全新的功能吗？" | 可以！Solo Coder 不仅能改，也能加新功能。只要项目已经存在，用 Solo Coder 加功能比 Builder 更精准 |
|
||||
| "emoji 好小怎么办？" | 在提示词里说"用超大号 emoji"，AI 会用 CSS 把 emoji 放大。如果还不够大，跟 AI 说"emoji 再大一倍" |
|
||||
| "我想用真的图片不用 emoji 行吗？" | 目前我们用 emoji 是最稳定的方案——不需要网络、不会失效。以后我们学到更高级的技术会用真实图片 |
|
||||
| "三种模式可以随时切换吗？" | 可以！随时切换。但建议养成习惯：做新的用 Builder，改旧的用 Solo Coder |
|
||||
|
||||
**课堂风险预案：**
|
||||
- 如果 Solo Coder 不可用（版本问题）：退回 Builder 模式做迭代，Builder 也能对已有文件追加修改，只是不够精准
|
||||
- 如果跟随模式打不开：不影响核心教学，Solo Coder 的核心功能是精准修改，跟随模式是锦上添花
|
||||
- 如果学生进度差异过大：快学生挑战"用 Solo Coder 加3个新功能"，慢学生确保 Builder 基础版能运行即可
|
||||
|
||||
**备课体验任务清单：**
|
||||
|
||||
- [ ] 用 Builder 做一个"未来职业预测器"完整版
|
||||
- [ ] 切换到 Solo Coder + 跟随模式，做一次修改
|
||||
- [ ] 用 Builder 做一个"超能力抽签机"完整版
|
||||
- [ ] 切换到 Solo Coder + 跟随模式，做一次修改
|
||||
- [ ] 用 Chat 模式试一次修改请求，确认它"只回答不动手"的表现
|
||||
- [ ] 故意让 Solo Coder 改出一个 bug，练习"描述问题让AI修复"的流程
|
||||
- [ ] 确认校区每台电脑的 Trae 三种模式都可正常切换
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周挑战：**
|
||||
|
||||
> **"我的作品 2.0 版"**
|
||||
>
|
||||
> **操作步骤：**
|
||||
> 1. 打开你今天做的"未来职业预测器"或"超能力抽签机"
|
||||
> 2. 切换到 **Solo Coder** 模式，打开**跟随模式**
|
||||
> 3. 给它加**两个新功能**（自选），比如：
|
||||
> - 加背景音效
|
||||
> - 加预测/抽签次数统计
|
||||
> - 加"分享给朋友"的文字
|
||||
> - 加夜间模式切换
|
||||
> - 加更多职业/超能力选项
|
||||
> 4. 截图跟随模式的实时工作画面 + 最终效果
|
||||
>
|
||||
> **评价标准：**
|
||||
> - 基础：成功用 Solo Coder 加了1个新功能
|
||||
> - 进阶：加了2个新功能，且效果正常
|
||||
> - 挑战：给家人或朋友试用，截图他们的反应
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**拓展一（推荐）：合体版**
|
||||
> 把"未来职业预测器"和"超能力抽签机"合并成一个页面——先预测未来职业，再抽一个超能力，组合成"你的超级英雄档案"。用 Solo Coder 在已有项目上扩展。
|
||||
|
||||
**拓展二（挑战）：自定义主题**
|
||||
> 用同样的"随机结果"框架，做一个完全不同主题的抽签器——比如"今日幸运色"、"晚饭吃什么决定器"、"下课后干什么抽签"。从零用 Builder 创建，然后用 Solo Coder 打磨。
|
||||
662
3-lessons/AICODE-06/AICODE06-03 Solo Coder迭代深化.md
Normal file
662
3-lessons/AICODE-06/AICODE06-03 Solo Coder迭代深化.md
Normal file
@@ -0,0 +1,662 @@
|
||||
---
|
||||
课时: 3
|
||||
主题: Solo Coder 迭代深化
|
||||
核心能力: [提问力, 审美力]
|
||||
核心工具: [Trae IDE]
|
||||
时长: 90分钟
|
||||
透明化层级: 结果层
|
||||
适用路线: AICODE-06（有扣子/低代码经验的学生）
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 理解 Trae 内置浏览器的作用：不用切换窗口，直接在 IDE 里预览网页效果
|
||||
- 掌握元素选择功能的原理：点击网页上的元素 → 自动定位到代码 → 发送给 AI 修改
|
||||
- 理解"迭代深化"的含义：每一轮修改都让作品更完善，而不是推倒重来
|
||||
|
||||
**能力目标：**
|
||||
- 能使用内置浏览器预览网页，替代外部浏览器的手动刷新流程
|
||||
- 能使用元素选择功能：点击 Select 按钮 → 点击页面元素 → 在 Solo Coder 中描述修改需求
|
||||
- 能对上节课的作品进行至少 3 轮有效迭代，从"能用"升级到"好用又好看"
|
||||
|
||||
**情感目标：**
|
||||
- 感受到"点哪改哪"带来的掌控感——不需要懂代码也能精准修改
|
||||
- 建立"好作品是改出来的"迭代意识，不追求一次完美
|
||||
- 对自己作品的持续进化感到自豪
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 概念 | 学生类比 | 认知层级 |
|
||||
|------|---------|---------|
|
||||
| 内置浏览器 = IDE 里的预览窗口 | 像画板旁边放了一面镜子，画一笔就能看到效果 | 识别层 |
|
||||
| 元素选择 = 点哪改哪 | 像用手指着一幅画说"这朵花的颜色要改"，画家立刻就知道你说的是哪里 | 识别层 |
|
||||
| 迭代深化 = 一轮轮打磨 | 像雕塑家——先雕大形，再雕细节，再打磨光滑 | 理解层 |
|
||||
| 功能迭代 vs 视觉迭代 | 功能迭代 = 加新能力（加按钮、加功能）；视觉迭代 = 变好看（改颜色、加动画） | 理解层 |
|
||||
| 迭代节奏：功能→体验→美化 | 先确保能用，再确保好用，最后确保好看 | 应用层 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | "元素选择就是改颜色用的" | 元素选择可以用于任何修改——改文字、改大小、改功能、改布局，不只是颜色 | 演示用元素选择改功能逻辑，不只是改样式 |
|
||||
| M2 | "改来改去会把网页改坏" | 每次 Accept 之前可以预览效果，不满意可以 Reject。改坏了也能用 Solo Coder 修复 | 故意改出一个问题，演示修复流程 |
|
||||
| M3 | "迭代就是不停加新功能" | 迭代包括加功能、修问题、改体验、美化视觉，不只是加新东西 | 展示一个"功能很多但很丑"的反面案例 |
|
||||
| M4 | "一次说很多修改，AI能全做对" | 每次只说一个修改最稳定。一次说太多，AI容易顾此失彼 | 演示一次说5个修改 vs 分5次各说1个的对比 |
|
||||
| M5 | "内置浏览器和外面的浏览器一样" | 内置浏览器方便预览，但某些复杂效果可能显示不同。最终验收建议用外部浏览器 | 提一句即可，本课以内置浏览器为主 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- 每台电脑已预装 Trae IDE，已登录校区账号
|
||||
- 网络环境正常
|
||||
- 学生上节课的项目文件夹仍在桌面（"未来职业预测器"或"超能力抽签机"）
|
||||
|
||||
**教学资源：**
|
||||
- 教师准备：1个"未来职业预测器"的基础版 → 迭代完善版的对比（展示迭代前后差异）
|
||||
- 教师准备：元素选择功能的操作录屏或截图（备用，万一投屏看不清）
|
||||
- 教师准备：一份"迭代清单"模板（打印或投屏）
|
||||
- 学生资源：上节课完成的作品（未来职业预测器 or 超能力抽签机）
|
||||
|
||||
**教师备课体验任务：**
|
||||
> 备课前，教师必须亲自完成以下操作：
|
||||
> 1. 打开上节课做的"未来职业预测器"项目，使用内置浏览器预览
|
||||
> 2. 使用元素选择功能：点 Select → 点页面上的标题 → 在 Solo Coder 中说"把这个标题改大一倍"
|
||||
> 3. 连续进行 5 轮迭代，记录每轮改了什么、效果如何
|
||||
> 4. 故意制造一个"改坏了"的情况（比如把布局搞乱），练习用 Solo Coder 修复
|
||||
> 5. 测试"一次说一个修改" vs "一次说多个修改"的效果差异
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
---
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟** 🔗
|
||||
|
||||
*本幕目标：展示 L02 课外挑战成果，用基础版 vs 完善版的对比引出"迭代深化"的价值*
|
||||
|
||||
**【环节】上节课回顾 + 课外挑战展示 (4分钟)**
|
||||
|
||||
**师：** 上节课我们学了 Trae 的三种模式——谁来说说分别是哪三个、各自干什么？
|
||||
|
||||
**生：** （预期：Chat 问问题、Builder 从零做、Solo Coder 改已有的）
|
||||
|
||||
**师：** 对！还学了一个酷功能——跟随模式，可以看 AI 实时工作。上周的5分钟挑战是"给作品加两个新功能"，有谁做了的？
|
||||
|
||||
（选1-2位学生快速展示课外挑战成果，30秒/人）
|
||||
|
||||
**师：** 不错！你们已经在用 Solo Coder 迭代了。
|
||||
|
||||
**【环节】情景导入 (6分钟)**
|
||||
|
||||
**师：** 现在我给你们看两个版本的"未来职业预测器"。
|
||||
|
||||
（教师投屏展示两个版本——左边是 L02 的基础版，右边是经过多轮迭代的完善版）
|
||||
|
||||
**师：** 左边是我们上节课做出来的基础版。右边是我花了十几分钟迭代出来的版本。看看区别——
|
||||
|
||||
（逐一指出差异）
|
||||
|
||||
- 基础版：结果直接蹦出来 → 完善版：先有加载动画，再翻转显示
|
||||
- 基础版：只有一个"再测一次"按钮 → 完善版：加了预测次数统计、历史记录
|
||||
- 基础版：背景是简单渐变 → 完善版：有星空粒子动画效果
|
||||
- 基础版：标题普通大小 → 完善版：标题有发光呼吸效果
|
||||
|
||||
**师：** 同样的项目，基础版和完善版差别大不大？
|
||||
|
||||
**生：** （预期：差很多！）
|
||||
|
||||
**师：** 差别很大。但是——我有没有重新做一个？
|
||||
|
||||
**生：** （预期：没有）
|
||||
|
||||
**师：** 没有！我就是在原来的基础上，**一轮一轮地改**。每次只改一个地方。改了十几轮，就变成这样了。这就叫**迭代深化**——好作品不是一次做出来的，是一轮轮改出来的。【诊断点：探测学生对"迭代"的理解深度】【理解层】
|
||||
|
||||
**师：** 今天我们就用 Solo Coder 的两个超强功能——**内置浏览器**和**元素选择**——来把你上节课的作品从"基础版"升级成"完善版"。
|
||||
|
||||
**师：** 上节课我预告过的——今天你可以**直接点网页上的某个东西**，告诉 AI "改这个"。不需要知道代码在哪里，直接指就行。我们开始！
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟** 🛠️
|
||||
|
||||
---
|
||||
|
||||
**【分段一：内置浏览器预览】(10分钟)**
|
||||
|
||||
*本段重点：学会用内置浏览器替代外部浏览器，建立更高效的预览习惯*
|
||||
|
||||
**预设误概念：**
|
||||
- M5: 内置浏览器和外面的浏览器一样
|
||||
|
||||
**讲解与演示 (4分钟):**
|
||||
|
||||
**师：** 上节课你们预览网页的时候，是不是要切到外部浏览器，双击文件，或者刷新页面？
|
||||
|
||||
**生：** （预期：是的）
|
||||
|
||||
**师：** 每改一次就切出去刷新一次，累不累？
|
||||
|
||||
**生：** （预期：累/麻烦）
|
||||
|
||||
**师：** Trae 有一个内置浏览器——不需要切出去，直接在 Trae 里面就能预览。我来演示。
|
||||
|
||||
（教师操作）
|
||||
|
||||
**师：** 打开你上节课的项目文件夹。然后在 Trae 里找到 **内置浏览器预览** 的入口——
|
||||
|
||||
操作步骤：
|
||||
1. 在文件管理器里找到 `index.html`
|
||||
2. 右键点击 → 选择"在内置浏览器中预览"（或者使用命令面板搜索"Preview"）
|
||||
|
||||
（教师展示内置浏览器面板出现在 IDE 右侧或下方）
|
||||
|
||||
**师：** 看到了吗？网页直接显示在 Trae 里面了！以后改代码，Accept 之后，这个预览会**自动刷新**。不需要手动切换、不需要手动刷新。
|
||||
|
||||
**师：** 从现在开始，我们的工作流变成：**Solo Coder 说修改 → Accept → 内置浏览器自动看效果**。全程不离开 Trae。
|
||||
|
||||
**学生实践 (4分钟):**
|
||||
|
||||
**师：** 现在你们来做：
|
||||
1. 用 Trae 打开你上节课的项目文件夹（桌面上的"未来职业预测器"或"超能力抽签机"）
|
||||
2. 找到 `index.html`，右键 → 内置浏览器预览
|
||||
3. 确认你在 Trae 里面看到了你的网页
|
||||
|
||||
**师：** 看到内置预览的同学举手。
|
||||
|
||||
（教师走动协助找不到内置浏览器入口的学生）
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 打开了的举手？好。从现在开始，我们所有的预览都用内置浏览器。再也不用切出去了。【诊断点：确认学生能打开内置浏览器】【识别层】
|
||||
|
||||
**【分支A】若大部分学生打开了：**
|
||||
**师：** 很好！接下来学今天的重头戏——元素选择。
|
||||
|
||||
**【分支B】若有学生找不到：**
|
||||
**师：** 没关系，找不到的同学跟着我再做一遍。（快速重新演示入口位置）
|
||||
|
||||
---
|
||||
|
||||
**【分段二：元素选择——点哪改哪】(20分钟)**
|
||||
|
||||
*本段重点：学会使用元素选择功能，体验"不用看代码也能精准修改"的威力*
|
||||
|
||||
**预设误概念：**
|
||||
- M1: 元素选择就是改颜色用的
|
||||
- M4: 一次说很多修改AI能全做对
|
||||
|
||||
**讲解与演示 (7分钟):**
|
||||
|
||||
**师：** 上节课用 Solo Coder 的时候，你得自己描述"把标题改大"、"把按钮颜色换了"。但如果你不知道那个东西叫什么呢？比如你想改页面上的某段文字，但你不知道它在代码里叫什么名字。
|
||||
|
||||
**师：** 今天学的这个功能就解决了这个问题——**元素选择**。你直接**用鼠标点**网页上你想改的那个东西，Trae 会自动把它发给 AI，然后你只要说"改成什么样"就行。
|
||||
|
||||
**师：** 看我操作：
|
||||
|
||||
（教师投屏演示，步骤清晰放慢）
|
||||
|
||||
**第一步：打开元素选择**
|
||||
|
||||
**师：** 在内置浏览器的工具栏上，找到一个 **Select（选择）按钮**——通常是一个光标/箭头图标。点它。
|
||||
|
||||
（点击 Select 按钮，按钮高亮表示已激活）
|
||||
|
||||
**师：** 看到了吗？按钮亮了，说明"选择模式"已经打开。现在你的鼠标变成了"选择器"——你点网页上的任何东西，它都会被选中。
|
||||
|
||||
**第二步：点击你想修改的元素**
|
||||
|
||||
**师：** 比如我想改这个标题"🔮 未来职业预测器"的大小。我直接**点它**。
|
||||
|
||||
（鼠标点击标题文字，元素被高亮框选）
|
||||
|
||||
**师：** 看！标题被框选了，而且——注意看 Solo Coder 的输入框——它自动把这个元素的信息发过去了。
|
||||
|
||||
**第三步：描述你要怎么改**
|
||||
|
||||
**师：** 现在我在 Solo Coder 里输入我的修改需求：
|
||||
|
||||
```
|
||||
把这个标题改大 50%，加一个发光效果，颜色改成金色
|
||||
```
|
||||
|
||||
（发送，跟随模式展示 AI 实时修改）
|
||||
|
||||
**师：** 看内置浏览器——标题变大了、变金色了、还在发光！
|
||||
|
||||
**师：** 整个过程：**点 Select → 点元素 → 说怎么改 → Accept → 看效果**。你全程不需要知道代码在哪里、代码长什么样。你只需要指着它说"改这个"——就像你指着墙壁跟装修工人说"这面墙换个颜色"。
|
||||
|
||||
（再演示一次不同类型的修改）
|
||||
|
||||
**师：** 我再演示一个。这次我选中这个"开始预测"按钮——
|
||||
|
||||
（点 Select → 点击按钮）
|
||||
|
||||
```
|
||||
把这个按钮改成圆形，加一个鼠标悬停时放大的效果
|
||||
```
|
||||
|
||||
（展示修改后的效果——按钮变圆、悬停放大）
|
||||
|
||||
**师：** 两个关键原则：
|
||||
|
||||
**原则一：每次只改一个地方。** 不要一次说"改标题、改按钮、改背景、加动画"——AI 容易顾此失彼。一个一个来最稳。
|
||||
|
||||
**原则二：说清楚"改成什么样"。** 不要只说"改好看一点"——要说"改成金色发光"、"按钮变圆"、"字体加大50%"。越具体越好。
|
||||
|
||||
**学生实践 (10分钟):**
|
||||
|
||||
**师：** 现在你们来试！用元素选择改你的作品。
|
||||
|
||||
**操作步骤：**
|
||||
1. 确认已经切到 **Solo Coder** 模式
|
||||
2. 确认**内置浏览器**预览已打开
|
||||
3. 点**内置浏览器工具栏的 Select 按钮**
|
||||
4. **点击**你想改的元素
|
||||
5. 在 Solo Coder 中**描述修改**
|
||||
6. **Accept** → 看效果
|
||||
|
||||
**练习任务：用元素选择完成至少 2 次修改**
|
||||
|
||||
修改建议（每次选一个）：
|
||||
|
||||
| 选中什么 | 说什么修改 |
|
||||
|---------|-----------|
|
||||
| 标题文字 | "把标题字体改大，加发光/阴影效果" |
|
||||
| 按钮 | "把按钮改成圆角/圆形，加悬停动画" |
|
||||
| 结果卡片 | "给卡片加一个边框发光效果" |
|
||||
| 背景 | "把背景改成动态渐变/加星空粒子效果" |
|
||||
| 任意文字 | "把这段文字改成你想要的内容" |
|
||||
|
||||
**师：** 记住——**每次只改一个**，改完看效果，再选下一个。10分钟内至少完成2次修改。
|
||||
|
||||
（教师走动观察）
|
||||
|
||||
（教师走动重点关注：）
|
||||
- 是否找到了 Select 按钮
|
||||
- 点击元素后是否正确发送到了 Solo Coder
|
||||
- 修改描述是否够具体（"改好看点" vs "加发光效果"）
|
||||
- 是否记得 Accept
|
||||
- 是否只改一个（有学生可能贪心一次说很多）
|
||||
|
||||
**快学生应对：** 2次改完后继续改——挑战完成5次修改，让作品焕然一新。
|
||||
|
||||
**慢学生应对：** 如果找不到 Select 按钮，教师手把手指一次。如果元素选择不生效，退回到直接在 Solo Coder 里文字描述修改需求。
|
||||
|
||||
**进度同步 (3分钟):**
|
||||
|
||||
**师：** 用元素选择成功修改了2次以上的举手！
|
||||
|
||||
**师：** 你们觉得元素选择厉害在哪里？跟上节课直接在 Solo Coder 里打字描述相比，有什么不同？【诊断点：检测学生是否理解元素选择的优势】【理解层】
|
||||
|
||||
**【分支A】若学生说"不用知道代码叫什么"：**
|
||||
**师：** 对！这就是最大的优势。你不需要知道"标题"在代码里叫 `<h1>` 还是 `<div>`，你直接指着它就行。AI 知道你指的是哪个。
|
||||
|
||||
**【分支B】若学生说"更快/更方便"：**
|
||||
**师：** 对！快在哪里呢？——你不用花时间描述"页面顶部的那个大标题"，直接点一下就选中了。省了描述的时间。
|
||||
|
||||
**【分支C】若学生说"但我还是喜欢打字描述"：**
|
||||
**师：** 两种方式都可以！简单的修改用元素选择最快，复杂的逻辑修改（比如"加一个新功能"）用文字描述更合适。工具越多，选择越灵活。
|
||||
|
||||
---
|
||||
|
||||
**【分段三：迭代深化实战——从"能用"到"好用又好看"】(26分钟)**
|
||||
|
||||
*本段重点：运用元素选择 + 文字描述，对作品进行系统性迭代，建立迭代节奏感*
|
||||
|
||||
**预设误概念：**
|
||||
- M2: 改来改去会把网页改坏
|
||||
- M3: 迭代就是不停加新功能
|
||||
|
||||
**讲解与演示 (6分钟):**
|
||||
|
||||
**师：** 刚才你们练习了元素选择。现在我们进入今天的核心——**迭代深化**。
|
||||
|
||||
**师：** 什么是迭代深化？打个比方——你画了一幅画的草稿，然后你一遍遍地改：第一遍描线条，第二遍上颜色，第三遍加细节，第四遍调光影。每一遍都让画更完善。做产品也一样。
|
||||
|
||||
**师：** 迭代有个节奏，不是乱改的。我推荐这个顺序：
|
||||
|
||||
（投屏）
|
||||
|
||||
```
|
||||
迭代三步走：
|
||||
🔧 第一步：修 Bug —— 有没有东西不能用、显示不对？先修好
|
||||
🎯 第二步：加体验 —— 加载动画、操作反馈、过渡效果
|
||||
🎨 第三步：美化视觉 —— 颜色、字体、间距、阴影、动画
|
||||
```
|
||||
|
||||
**师：** 为什么这个顺序？因为——如果功能还有 bug，你先去美化，等 bug 修了界面可能又变了，白美化了。**先确保能用，再确保好用，最后确保好看。**
|
||||
|
||||
**师：** 我来演示一轮完整的迭代。（打开教师的基础版项目）
|
||||
|
||||
**第一步（修 Bug）：** 我发现点"再测一次"之后，旧的结果没有清除，新结果直接叠在下面了。
|
||||
|
||||
（用元素选择点击"再测一次"按钮）
|
||||
|
||||
```
|
||||
点击"再测一次"按钮后，要先清除之前的预测结果，再重新开始。现在的问题是旧结果没有消失。
|
||||
```
|
||||
|
||||
（Accept → 验证修复）
|
||||
|
||||
**第二步（加体验）：** 结果出来太突然，加个过渡。
|
||||
|
||||
```
|
||||
预测结果显示时，加一个从下方弹入的动画效果，持续0.5秒
|
||||
```
|
||||
|
||||
（Accept → 看效果）
|
||||
|
||||
**第三步（美化）：** 标题不够突出。
|
||||
|
||||
（用元素选择点击标题）
|
||||
|
||||
```
|
||||
给这个标题加文字阴影发光效果，像霓虹灯一样
|
||||
```
|
||||
|
||||
（Accept → 看效果）
|
||||
|
||||
**师：** 三轮迭代，每轮只改一个点，但作品明显变好了。这就是迭代深化的威力。
|
||||
|
||||
**师：** 还有一个重要的事——**如果改坏了怎么办？**
|
||||
|
||||
（教师故意做一个会出问题的修改）
|
||||
|
||||
```
|
||||
把整个页面的布局改成左右分栏
|
||||
```
|
||||
|
||||
（Accept → 页面布局混乱）
|
||||
|
||||
**师：** 看！改坏了。别慌——两个办法：
|
||||
1. **Reject**：如果还没 Accept，直接点 Reject 拒绝这次修改
|
||||
2. **让 AI 修复**：如果已经 Accept 了，直接在 Solo Coder 里说——
|
||||
|
||||
```
|
||||
刚才的布局修改有问题，页面乱了。请恢复成原来的单列居中布局。
|
||||
```
|
||||
|
||||
（Accept → 恢复正常）
|
||||
|
||||
**师：** 看到了吗？修回来了。所以不要怕改坏——**改坏了就让 AI 修**，这本身就是迭代的一部分。
|
||||
|
||||
**学生实践 (18分钟):**
|
||||
|
||||
**师：** 现在是今天最重要的环节——你要对你的作品进行**系统性迭代**。
|
||||
|
||||
**任务：按"修 Bug → 加体验 → 美化"的顺序，完成至少 3 轮迭代。**
|
||||
|
||||
（投屏迭代清单模板）
|
||||
|
||||
```
|
||||
我的迭代清单：
|
||||
|
||||
🔧 修 Bug（检查一遍你的作品，有没有不对的地方）
|
||||
- [ ] 改动1：__________
|
||||
|
||||
🎯 加体验（让操作过程更流畅、更有感觉）
|
||||
- [ ] 改动2：__________
|
||||
|
||||
🎨 美化（让视觉效果更好看）
|
||||
- [ ] 改动3：__________
|
||||
|
||||
⭐ 加分项（如果时间够，再改）
|
||||
- [ ] 改动4：__________
|
||||
```
|
||||
|
||||
**师：** 先花1分钟检查你的作品，想好你要改什么，然后开始。
|
||||
|
||||
**修改灵感参考：**
|
||||
|
||||
| 类别 | 未来职业预测器 | 超能力抽签机 |
|
||||
|------|-------------|-------------|
|
||||
| 🔧 修 Bug | 重复预测没清空结果？按钮点了没反应？ | 抽到重复超能力？动画没播完就显示结果？ |
|
||||
| 🎯 加体验 | 加预测次数统计、加"分享结果"文字、加加载音效描述 | 加"已收集X个超能力"计数、加稀有度排行、加连续抽签动画 |
|
||||
| 🎨 美化 | 标题发光效果、卡片翻转动画、背景星空/粒子 | 霓虹灯边框、卡片发光脉冲、暗色主题加亮色点缀 |
|
||||
| ⭐ 加分项 | 加"预测历史"列表 | 加"超能力图鉴"（记录所有抽到的） |
|
||||
|
||||
**师：** 记住：
|
||||
- **用元素选择**改视觉类的东西（颜色、大小、样式）
|
||||
- **用文字描述**加功能类的东西（计数器、新按钮、新逻辑）
|
||||
- **每次只改一个**，Accept 后看效果再改下一个
|
||||
- 改坏了不要怕，**告诉 AI 修复**就行
|
||||
|
||||
**师：** 18分钟！至少完成3轮迭代。开始！
|
||||
|
||||
（教师走动观察）
|
||||
|
||||
（教师走动重点关注：）
|
||||
- 学生是否按节奏迭代（先修 bug 再加功能再美化），还是一上来就美化
|
||||
- 修改描述是否具体
|
||||
- 是否每次只改一个（贪心一次改太多的要提醒）
|
||||
- 有没有学生"改坏了"但不知道怎么修复——引导他们用 Solo Coder 描述问题
|
||||
- 进度差异：快学生可能已经迭代5-6轮，慢学生可能才改了1-2处
|
||||
|
||||
**快学生应对：** 完成3轮基础迭代后，挑战"加一个全新功能"——比如预测器加"输入生日影响预测结果"、抽签机加"超能力图鉴"。
|
||||
|
||||
**慢学生应对：** 如果学生不知道改什么，教师直接给一个具体指令："用元素选择点你的标题，然后跟 AI 说'把标题加大，加一个发光效果'"。一轮成功后信心就来了。
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 时间到！迭代了3轮以上的举手？5轮以上的呢？
|
||||
|
||||
**师：** 现在回头看一下你的作品——跟上节课结束时的版本比，变化大不大？【诊断点：检测学生是否感知到迭代的价值】【理解层】
|
||||
|
||||
**生：** （预期：大/变好看了/功能多了）
|
||||
|
||||
**师：** 你今天重新做了一个新项目吗？
|
||||
|
||||
**生：** （预期：没有）
|
||||
|
||||
**师：** 没有！你只是在原来的基础上，一轮一轮地改。但结果却好了很多。**这就是迭代的力量——不推倒重来，每次改好一点点，累积起来就是质变。**
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟** 🤔
|
||||
|
||||
*本幕目标：展示迭代前后对比，巩固"元素选择+迭代深化"的核心认知*
|
||||
|
||||
**成果展示 (6分钟)**
|
||||
|
||||
**师：** 请3位同学来展示你的作品。展示时说三件事：
|
||||
1. 简单演示你的作品（现在的样子）
|
||||
2. 你做了几轮迭代？印象最深的一次修改是什么？
|
||||
3. 有没有"改坏了"的经历？你是怎么修复的？
|
||||
|
||||
（选3位学生展示，每人2分钟。尽量选：一个改了很多轮效果很好的、一个改坏又修好的、一个做了创新功能的）
|
||||
|
||||
> **拍照发群：** 拍学生作品迭代前后的对比截图，配文字"第三节课，同学们学会了'迭代深化'——同一个项目，一轮轮打磨，越改越好！"发家长群。
|
||||
|
||||
**互评与讨论 (4分钟)**
|
||||
|
||||
**师：** 看完了三位同学的作品。我们来想一个问题——
|
||||
|
||||
**师：** 你觉得今天学的"元素选择"和"直接在 Solo Coder 里打字"，什么时候用哪个更好？【诊断点：检测学生能否根据场景选择合适的交互方式】【应用层】
|
||||
|
||||
（收集回答）
|
||||
|
||||
**【分支A】若学生能区分场景：**
|
||||
**师：** 总结得很好。简单改视觉——点一下最快。加新功能——打字说清楚。两种方式配合使用，效率最高。
|
||||
|
||||
**【分支B】若学生说不清楚：**
|
||||
**师：** 记住这个口诀：**看得见的点一下，想出来的打字说**。你能在页面上看到的东西（标题、按钮、卡片），用元素选择最快。你脑子里想的新功能（加计数器、加历史记录），用打字描述。
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟** 🚀
|
||||
|
||||
*本幕目标：总结迭代三步走，预告下节课的独立作品*
|
||||
|
||||
**抽象总结 (3分钟)**
|
||||
|
||||
**师：** 今天我们学到的核心能力：
|
||||
|
||||
（板书/投屏）
|
||||
|
||||
```
|
||||
两个新工具：
|
||||
🖥️ 内置浏览器 → 改完自动刷新，不用切窗口
|
||||
👆 元素选择 → 点哪改哪，不用知道代码名字
|
||||
|
||||
迭代三步走：
|
||||
🔧 修 Bug → 🎯 加体验 → 🎨 美化视觉
|
||||
|
||||
口诀：
|
||||
"看得见的点一下，想出来的打字说"
|
||||
"每次只改一个，改坏了让AI修"
|
||||
```
|
||||
|
||||
**师：** 今天最重要的一句话是：**好作品是改出来的，不是一次做出来的。** 这个道理不只适用于编程，做PPT、写作文、画画，都一样。先做出来，再一轮轮打磨。
|
||||
|
||||
**5分钟挑战发布 + 下节预告 (2分钟)**
|
||||
|
||||
**师：** 本周5分钟挑战：
|
||||
|
||||
> **5分钟AI挑战：**
|
||||
> 把你的"未来职业预测器"或"超能力抽签机"再迭代 **5 轮**，让它变成你觉得"可以拿给全班同学用"的水平。
|
||||
> 用元素选择 + Solo Coder 配合使用。
|
||||
>
|
||||
> **截图清单（至少交3张）：**
|
||||
> 1. 迭代前的截图
|
||||
> 2. 迭代过程中的截图（内置浏览器 + Solo Coder 对话）
|
||||
> 3. 最终版本的截图
|
||||
>
|
||||
> **评价标准：**
|
||||
> - 基础：完成了5轮迭代，有前后对比
|
||||
> - 进阶：迭代包含修 Bug + 加体验 + 美化三个维度
|
||||
> - 挑战：给3个以上的同学/家人试用，收集他们的反馈
|
||||
|
||||
**师：** 下节课——**我的第一个Web作品**。这次你不是改旧项目了，而是**从零开始做一个全新的作品**。你来决定做什么、怎么做。你前三节课学的所有东西——Builder 从零建、Solo Coder 精准改、元素选择点哪改哪——全部用上。你将独立完成一个可以展示的完整作品。
|
||||
|
||||
**生：** （预期反应积极）
|
||||
|
||||
**师：** 提前想好你想做什么——游戏、工具、还是创意页面都行。想不到的话下节课我会给你灵感。下节课见！
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师演示用提示词（元素选择后的修改示例）：**
|
||||
|
||||
```
|
||||
把这个标题改大 50%，加一个金色发光文字阴影效果
|
||||
```
|
||||
|
||||
```
|
||||
把这个按钮改成圆形，加一个鼠标悬停时缩放1.1倍的动画
|
||||
```
|
||||
|
||||
```
|
||||
给这个卡片加一个渐变色边框，从紫色到蓝色，有发光效果
|
||||
```
|
||||
|
||||
**教师演示用提示词（功能迭代示例）：**
|
||||
|
||||
```
|
||||
给"再测一次"按钮加一个功能：每次预测后在下方显示"你已经预测了X次"的计数
|
||||
```
|
||||
|
||||
```
|
||||
加一个预测历史功能：
|
||||
每次预测结果显示后，把职业名称和emoji存到一个列表里。
|
||||
在页面底部显示"预测历史"区域，列出所有预测过的职业。
|
||||
```
|
||||
|
||||
```
|
||||
加一个"分享结果"功能：
|
||||
在预测结果下方显示一行文字："🔮 [名字] 的未来职业是 [职业emoji] [职业名称]！"
|
||||
这行文字用特殊样式显示，方便截图分享。
|
||||
```
|
||||
|
||||
**学生保底提示词（修 Bug 类）：**
|
||||
|
||||
```
|
||||
我的网页有个问题：点击"再测一次"后，旧的结果没有消失，新结果叠在下面了。请修复，让每次预测前清空之前的结果。
|
||||
```
|
||||
|
||||
**学生保底提示词（美化类）：**
|
||||
|
||||
```
|
||||
给整个页面加一个动态背景效果——缓慢变化的渐变色，从深紫到深蓝来回循环
|
||||
```
|
||||
|
||||
**修复类提示词（改坏了时用）：**
|
||||
|
||||
```
|
||||
刚才的修改导致页面布局出问题了，[具体描述问题]。请恢复正常并保留之前的功能。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**本课技术备注：**
|
||||
|
||||
1. **内置浏览器**：Trae 的内置浏览器基于 Chromium 内核，与 Chrome 渲染效果基本一致。某些高级 CSS 动画在内置浏览器中可能有轻微差异，但对课堂教学无影响。
|
||||
2. **元素选择原理**：点击 Select 按钮后，内置浏览器进入"检查模式"。点击页面元素时，Trae 会识别该元素在 HTML 中的位置（类似浏览器的 DevTools 元素检查器），并将信息传递给 Solo Coder，让 AI 知道你要修改哪个元素。
|
||||
3. **元素选择的局限性**：动态生成的元素（如通过 JavaScript 动态创建的内容）可能在某些情况下选择不到。这种情况下退回文字描述即可。
|
||||
4. **Accept/Reject 与撤销**：Accept 后代码已写入文件。如果需要撤回，可以用 Ctrl+Z 撤销文件改动，或让 AI 修复。Reject 则完全不改动文件。
|
||||
5. **单文件迭代策略**：当前所有代码在一个 index.html 中。随着迭代次数增多，文件会越来越长（可能超过500行），AI 仍然能正常处理，但响应速度可能略慢。
|
||||
|
||||
**常见问题 FAQ：**
|
||||
|
||||
| 学生问题 | 建议回答 |
|
||||
|---------|---------|
|
||||
| "元素选择选不到我想改的东西" | 有些元素可能被其他元素盖住了，或者是动态生成的。没关系，直接在 Solo Coder 里用文字描述你想改什么——比如"页面底部的那个按钮" |
|
||||
| "我改了好多轮，网页变得越来越慢了" | 代码可能变多了。跟 AI 说"请检查一下代码，去掉重复的或者没用到的部分，优化一下性能" |
|
||||
| "我想回到几步之前的版本" | 目前最简单的办法是跟 AI 说"请把XX恢复成之前的样子"。以后我们会学更强大的版本管理方法 |
|
||||
| "内置浏览器显示的和外部浏览器不一样" | 偶尔会有小差异。最终验收用外部浏览器双击 index.html 打开看一下 |
|
||||
| "我改了一个地方，其他地方也变了" | 这可能是因为 AI 修改了公共样式。跟 AI 说"只修改XX那个元素的样式，不要影响其他元素" |
|
||||
| "迭代清单写不出来" | 试试这个思路：先看有没有 bug → 操作起来顺不顺畅 → 好不好看。每个方向找一个可以改的地方 |
|
||||
|
||||
**课堂风险预案：**
|
||||
- 如果元素选择功能不可用（版本兼容问题）：全程使用 Solo Coder 文字描述修改，教学目标不变
|
||||
- 如果内置浏览器不可用：使用外部浏览器手动刷新，多花10秒但不影响核心教学
|
||||
- 如果学生上节课的作品文件找不到了：用 Builder 快速重建一个基础版（5分钟），使用保底提示词
|
||||
- 如果学生进度差异过大：慢学生确保完成2轮迭代即可，快学生挑战"加一个全新功能模块"
|
||||
|
||||
**备课体验任务清单：**
|
||||
|
||||
- [ ] 打开上节课的"未来职业预测器"项目，使用内置浏览器预览
|
||||
- [ ] 用元素选择功能修改标题样式、按钮样式、卡片样式各一次
|
||||
- [ ] 按"修 Bug → 加体验 → 美化"顺序完成5轮迭代
|
||||
- [ ] 故意制造一个"改坏了"的情况，用 Solo Coder 修复
|
||||
- [ ] 测试"一次说一个修改" vs "一次说三个修改"的效果对比
|
||||
- [ ] 确认校区每台电脑的 Trae 内置浏览器和元素选择功能可正常使用
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周挑战：**
|
||||
|
||||
> **"我的作品 3.0 版"**
|
||||
>
|
||||
> **操作步骤：**
|
||||
> 1. 打开你今天迭代过的"未来职业预测器"或"超能力抽签机"
|
||||
> 2. 按"修 Bug → 加体验 → 美化"顺序，再迭代 **5 轮**
|
||||
> 3. 目标：做到你觉得"可以拿给全班同学玩"的水平
|
||||
> 4. 截图保存：迭代前 → 迭代中 → 最终版本
|
||||
>
|
||||
> **评价标准：**
|
||||
> - 基础：完成了5轮迭代，有前后对比截图
|
||||
> - 进阶：三个维度（修 Bug、加体验、美化）都有涉及
|
||||
> - 挑战：给3个以上的人试用，收集反馈并根据反馈再改一轮
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**拓展一（推荐）：极限迭代挑战**
|
||||
> 对你的作品再进行 **10 轮迭代**，看看你能把它打磨到什么程度。每轮迭代前先想清楚"这一轮要改什么"，不要随便乱改。记录每轮改了什么，做一份"迭代日志"。
|
||||
|
||||
**拓展二（挑战）：给别人做迭代**
|
||||
> 跟一个同学交换作品。用元素选择和 Solo Coder 帮**别人的作品**迭代 3 轮。你需要先理解别人的作品"在做什么"，然后判断"哪里可以更好"。改完后跟同学分享你改了什么、为什么这样改。
|
||||
689
3-lessons/AICODE-06/AICODE06-04 我的个人主页（上）.md
Normal file
689
3-lessons/AICODE-06/AICODE06-04 我的个人主页（上）.md
Normal file
@@ -0,0 +1,689 @@
|
||||
---
|
||||
课时: 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 实现切换功能。
|
||||
693
3-lessons/AICODE-06/AICODE06-05 我的个人主页（下）.md
Normal file
693
3-lessons/AICODE-06/AICODE06-05 我的个人主页（下）.md
Normal file
@@ -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 说"请让我的页面在手机上也能正常显示，做响应式适配"。截图对比电脑版和手机版的效果。
|
||||
|
||||
**拓展二（挑战）：为别人做个人主页**
|
||||
> 找一个家人或朋友，帮他/她做一个个人主页。你需要先"采访"他——了解他的兴趣、梦想、特长，然后用你学到的全部技能（内容清单→智能体→生成→迭代→交互→检查）做出一个完整的页面。做完后让他看，记录他的反应。这是一次完整的"为用户做产品"的体验。
|
||||
567
3-lessons/AICODE-06/旧版本/AICODE06-02 提示词工程进阶 v1.md
Normal file
567
3-lessons/AICODE-06/旧版本/AICODE06-02 提示词工程进阶 v1.md
Normal file
@@ -0,0 +1,567 @@
|
||||
---
|
||||
课时: 2
|
||||
主题: 提示词工程进阶
|
||||
核心能力: [提问力, 拆解力]
|
||||
核心工具: [Trae IDE]
|
||||
时长: 90分钟
|
||||
透明化层级: 结果层
|
||||
适用路线: AICODE-06（有扣子/低代码经验的学生）
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 理解"模糊提示词"和"精确提示词"的本质区别：碰运气 vs 精确控制
|
||||
- 掌握四种编程级提示词技巧：分步编号法、具体化描述、交互描述法、上下文迭代法
|
||||
- 知道单文件 HTML 项目的能力边界（能做什么、不能做什么）
|
||||
|
||||
**能力目标：**
|
||||
- 能将一个模糊的项目想法拆解成 3-5 条有编号的精确指令
|
||||
- 能用"用户做什么→程序做什么"的句式描述交互逻辑
|
||||
- 能在 Trae Builder 中对已有代码进行至少 2 轮有效迭代，而不是每次重新开始
|
||||
- 能独立完成一个自选主题的小项目（游戏/工具/创意页面任选其一）
|
||||
|
||||
**情感目标：**
|
||||
- 体验"说得越具体，AI做得越像我想要的"带来的掌控感
|
||||
- 建立"我是创作者，AI是执行者"的主体意识
|
||||
- 愿意主动拆解复杂需求，而不是依赖"碰运气"
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 概念 | 六年级类比 | 认知层级 |
|
||||
|------|----------|---------|
|
||||
| 分步编号法 | 像菜谱：第一步切菜，第二步热油，每步只做一件事 | 理解层 |
|
||||
| 具体化描述 | 不说"好看的衣服"，说"红色圆领T恤" | 理解层 |
|
||||
| 交互描述法 | "你按开关→灯亮了"的因果描述 | 应用层 |
|
||||
| 上下文迭代法 | 像跟朋友聊天接着说，不是每次重新自我介绍 | 应用层 |
|
||||
| 能力边界 | 知道这个工具能做什么、不能做什么 | 理解层 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | "提示词写得越长越好" | 长不等于精确，关键是结构清晰、每句话只说一件事 | 展示又长又乱 vs 简短但结构清晰的提示词效果对比 |
|
||||
| M2 | "AI看得懂我的意思，不用说那么细" | AI没有读心术，只能按字面意思执行 | 用"做个好看的游戏"实验，看AI的随机发挥 |
|
||||
| M3 | "每次想改都要重新发一遍所有要求" | 可以在已有对话基础上追加修改，AI记得上下文 | 演示"重新来" vs "追加修改"的效率差异 |
|
||||
| M4 | "我想做什么AI就能做什么" | 单文件HTML有明确的能力边界 | 展示"能做/不能做"清单 |
|
||||
| M5 | "提示词技巧是语文课，和编程没关系" | 提示词的"1.2.3.步骤"和代码的顺序执行是同一个逻辑 | 类比提示词结构和程序执行逻辑 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- Trae IDE（已安装，版本与第1课一致）
|
||||
- Chrome 浏览器
|
||||
- 每人一台电脑，Win10，8GB RAM
|
||||
- 教师机连接投影
|
||||
|
||||
**教学资源：**
|
||||
- 教师准备：2个对比演示文件（模糊提示词 vs 精确提示词生成的同主题项目）
|
||||
- 教师准备：3个"卡住时的救场提示词"（见第5章）
|
||||
- 教师准备："能做/不能做"能力边界清单（见第6章，建议投影展示）
|
||||
- 学生资源：无需提前准备
|
||||
|
||||
**教师备课体验任务：**
|
||||
> 备课前，教师必须亲自完成以下操作：
|
||||
> 1. 用"做个好玩的游戏"在 Trae Builder 生成一次，截图保存结果（演示 demo-bad）
|
||||
> 2. 用分步编号法写一段精确提示词，生成同主题游戏，截图保存（演示 demo-good）
|
||||
> 3. 尝试在已有对话中用"追加修改"而不是"重新开始"进行迭代
|
||||
> 4. 确认"能做/不能做"清单中的每一条都亲自验证过
|
||||
> 5. 准备至少3个"卡住时的救场提示词"并验证可用
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
---
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟**
|
||||
|
||||
*本幕目标：激活第1课经验，用对比实验制造认知冲突，引出"精确提示词"的必要性*
|
||||
|
||||
**上节课回顾 + 情景导入 (10分钟)**
|
||||
|
||||
**师：** 同学们，上节课我们用 Trae 做了第一个项目。还记得那种感觉吗？你们说，AI帮你做出来的东西，每次都是你想要的那个样子吗？
|
||||
|
||||
**生：** （预期：有时候是/有时候差一点/跟我想的不一样）
|
||||
|
||||
**师：** 对！这就是今天要解决的问题。来，看这两个东西。
|
||||
|
||||
（投影展示教师课前用模糊提示词生成的结果）
|
||||
|
||||
**师：** 这是我昨天告诉AI——"帮我做一个好玩的游戏"——生成的。大家觉得怎么样？
|
||||
|
||||
**生：** （预期：有点奇怪/看不懂在玩什么/颜色好丑）
|
||||
|
||||
（投影切换，展示精确提示词生成的同主题结果）
|
||||
|
||||
**师：** 这也是我昨天生成的，同一个主题。区别只是我换了一种"说法"。差距大吗？
|
||||
|
||||
**生：** （预期：这个好多了！/看起来像真的游戏！）
|
||||
|
||||
**师：** 所以今天这节课，我们只做一件事——学会怎么"说清楚"。**说得越清楚，AI做得越像你想要的。** 这件事有个专业名字，叫做**提示词工程**。别被名字吓到，就是"好好说话的艺术"。【诊断点：学生是否能说出第1课遇到过的"AI没做对"的经历】【理解层】
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟**
|
||||
|
||||
---
|
||||
|
||||
**【分段一：四个秘密武器】(20分钟)**
|
||||
|
||||
*本段重点：传授四种编程级提示词技巧，建立"结构化表达"的意识*
|
||||
|
||||
**讲解与演示 (12分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M1: 提示词写得越长越好
|
||||
- M2: AI看得懂我的意思
|
||||
|
||||
**师：** 好，现在我来教你们四个"说清楚"的秘密武器。不用背，一会儿你们要用它们做项目。
|
||||
|
||||
**武器一：分步编号法**
|
||||
|
||||
**师：** 第一个武器叫**分步编号法**。把你想要的东西列成1、2、3、4步，每步只说一件事。
|
||||
|
||||
（投影展示对比）
|
||||
|
||||
```
|
||||
❌ 模糊版：帮我做一个猜数字游戏，要好玩一点
|
||||
|
||||
✅ 精确版：
|
||||
帮我做一个猜数字游戏，要求如下：
|
||||
1. 页面背景是深蓝色
|
||||
2. 游戏随机生成一个1到100之间的数字
|
||||
3. 玩家在输入框里输入猜测，点击"猜一猜"按钮提交
|
||||
4. 如果猜大了，显示红色文字"猜大了！"
|
||||
5. 如果猜小了，显示蓝色文字"猜小了！"
|
||||
6. 猜对了，显示撒花动画，告诉玩家用了几次猜到
|
||||
```
|
||||
|
||||
**师：** 精确版有几条？
|
||||
|
||||
**生：** 六条。
|
||||
|
||||
**师：** 对。每一条只说一件事。AI按照1、2、3的顺序做，就不会漏掉细节。这跟写代码的逻辑一样——代码也是一步一步执行的。
|
||||
|
||||
**武器二：具体化描述**
|
||||
|
||||
**师：** 第二个武器叫**具体化描述**。凡是你用了"好看的""大的""漂亮的"这种词，AI都会自己猜——猜的不一定是你想要的。
|
||||
|
||||
（投影展示）
|
||||
|
||||
```
|
||||
❌ 模糊版：按钮要好看一点，大一点
|
||||
|
||||
✅ 精确版：按钮颜色是橙色，大小大概是"确认"这两个字的三倍宽，
|
||||
字体要比正文大一圈，有圆角
|
||||
```
|
||||
|
||||
**师：** 记住一个原则：**颜色说色名，大小打比方**。AI能理解"大概是XX的三倍"这种比喻，比"大一点"精确多了。
|
||||
|
||||
**武器三：交互描述法**
|
||||
|
||||
**师：** 第三个武器叫**交互描述法**。当你的项目有互动时——比如点按钮会发生什么——按照"**用户做什么→程序做什么**"来描述。
|
||||
|
||||
（投影展示）
|
||||
|
||||
```
|
||||
❌ 模糊版：点击按钮要有反应
|
||||
|
||||
✅ 精确版：
|
||||
- 用户点击"开始"按钮→倒计时从10开始，每秒减1，显示在屏幕中央
|
||||
- 用户点击"暂停"按钮→倒计时停止，按钮文字变成"继续"
|
||||
- 倒计时归零→播放红色闪烁效果，显示"时间到！"
|
||||
```
|
||||
|
||||
**师：** 注意这个箭头"→"，左边是"用户做什么"，右边是"程序做什么"。记住这个箭头，特别好用。
|
||||
|
||||
**武器四：上下文迭代法**
|
||||
|
||||
**师：** 第四个武器叫**上下文迭代法**。最简单——当AI已经做了一部分，你想改或加东西，**不要重新开始**，直接在对话里追加。
|
||||
|
||||
（投影展示）
|
||||
|
||||
```
|
||||
❌ 错误做法：重新发一段超长提示词，把所有要求再写一遍
|
||||
|
||||
✅ 正确做法：
|
||||
[第一轮] 帮我做一个猜数字游戏（基础版）
|
||||
[第二轮] 很好！现在在页面顶部加一个分数显示，每次猜对加10分
|
||||
[第三轮] 把背景颜色改成星空主题，有几个会动的小星星
|
||||
```
|
||||
|
||||
**师：** AI记得你们的对话历史，它知道你们在做什么。你只需要告诉它"改这里""加这个"就行。就像让朋友帮你画画，画好了你说"加一朵云"——不需要让他重新画。
|
||||
|
||||
**学生实践 (5分钟):**
|
||||
|
||||
**师：** 四个武器都讲完了。现在投影上有这四个武器的速查表，等一下做项目随时可以看。我们先做一个小练习——
|
||||
|
||||
（投影展示一段模糊提示词）
|
||||
|
||||
```
|
||||
帮我做一个倒计时器，好看一点，能用的
|
||||
```
|
||||
|
||||
**师：** 谁能用今天学的武器，把这段话改成精确版？
|
||||
|
||||
（请2-3个学生口头改写，教师在投影上实时记录，引导补充）
|
||||
|
||||
**进度同步 (3分钟):**
|
||||
|
||||
**师：** 大家注意刚才的改写过程——从一句模糊的话变成5-6条具体指令。这就是今天最核心的能力。
|
||||
|
||||
【诊断点：学生能否用交互描述法中的"→"来描述一个交互】【理解层】
|
||||
|
||||
---
|
||||
|
||||
**【分段二：选项目 + 能力边界确认】(10分钟)**
|
||||
|
||||
*本段重点：学生自选项目方向，教师快速判断可行性，明确"能做/不能做"*
|
||||
|
||||
**讲解与演示 (5分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M4: 我想做什么AI就能做什么
|
||||
|
||||
**师：** 在你们开始做项目之前，我要先告诉你们一个很重要的事——我们今天能做什么，不能做什么。
|
||||
|
||||
（投影展示能力边界清单）
|
||||
|
||||
```
|
||||
✅ 今天能做的：
|
||||
各种小游戏（猜数字、打地鼠、打飞机、记忆翻牌、贪吃蛇……）
|
||||
工具类（计算器、倒计时器、秒表、单位换算……）
|
||||
创意页面（互动贺卡、选择冒险故事、趣味测验、表情包生成器……）
|
||||
动画效果（粒子动画、烟花、下雪、流星……）
|
||||
|
||||
⚠️ 有风险的：
|
||||
需要联网查数据的（查天气、查快递——本地文件无法联网）
|
||||
需要保存数据的（关浏览器数据就没了——能接受就没问题）
|
||||
|
||||
❌ 今天做不了的：
|
||||
手机App / 多人实时联机对战 / 微信小程序
|
||||
真正的AI对话功能（需要API密钥）
|
||||
```
|
||||
|
||||
**师：** 看到这个清单，谁已经有想法了？
|
||||
|
||||
**学生实践 (3分钟):**
|
||||
|
||||
**师：** 每个人在心里确定一个项目想法，想好了举手告诉我，我帮你判断能不能做。
|
||||
|
||||
（教师快速巡场，针对学生想法做快速判断）
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 大家基本都有方向了。记住：今天的目标不是做出"完美作品"，而是练习用**精确提示词**来做。做出来能玩，比做出来好看更重要。
|
||||
|
||||
【诊断点：学生提出的项目想法是否在能力边界内】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**【分段三：对比实验——坏提示词 vs 好提示词】(10分钟)**
|
||||
|
||||
*本段重点：学生亲自体验模糊vs精确的差距，建立"提示词质量决定结果质量"的认知*
|
||||
|
||||
**讲解与演示 (2分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M2: AI看得懂我的意思
|
||||
|
||||
**师：** 现在每个人打开Trae，新建一个项目文件夹。第一步，我要你们做一件反常的事——先用**模糊提示词**来问AI，越随意越好。
|
||||
|
||||
**学生实践 (6分钟):**
|
||||
|
||||
（学生用一句话模糊描述自己的项目，等AI生成约2分钟）
|
||||
|
||||
**师：** 生成出来了，先不要Accept，看看——和你想象的一样吗？
|
||||
|
||||
**生：** （预期：各种反应——差不多/完全不一样/不知道这是什么）
|
||||
|
||||
**师：** 记住你现在的感受。现在，不要Accept。我们用今天学的四个武器，写一段**精确提示词**，重新告诉AI你想要什么。至少用两个武器。
|
||||
|
||||
（给学生5分钟重写，教师巡场辅助，鼓励使用分步编号法和交互描述法）
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 比较一下两次的结果，感觉怎么样？
|
||||
|
||||
**生：** （预期：第二次更像我想要的！/细节多很多！/原来写清楚真的有用！）
|
||||
|
||||
**师：** 这就是今天最重要的发现——**说得越具体，AI做得越像你想要的**。好，现在Accept第二次的代码，我们继续。
|
||||
|
||||
【诊断点：学生写的精确提示词是否包含至少一个交互描述（"用户做X→程序做Y"）】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**【分段四：自由创作 + 上下文迭代】(25分钟)**
|
||||
|
||||
*本段重点：学生自由创作自选项目，练习上下文迭代（至少2轮追加修改）*
|
||||
|
||||
**讲解与演示 (2分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M3: 每次想改都要重新来
|
||||
- M5: 做不出来就放弃
|
||||
|
||||
**师：** 接下来是今天最重要的时间——你们自己做项目。规则只有三条：
|
||||
|
||||
1. 每次发提示词，至少用一个"秘密武器"
|
||||
2. 做出基础版后，必须做**至少两轮迭代**（追加修改，不要重新开始）
|
||||
3. 做完了要能在浏览器里给我演示
|
||||
|
||||
**学生实践 (21分钟):**
|
||||
|
||||
（学生开始自由创作，教师持续巡场）
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 是否有学生在重新发送完整提示词而不是追加修改 → 提醒使用上下文迭代法
|
||||
- 是否有学生提示词太模糊 → 帮助用分步编号法改写
|
||||
- 是否有学生陷入"做不出来"的挫败感 → 使用第5章的救场提示词
|
||||
- 是否有学生做得特别好 → 邀请他们准备在反思幕分享
|
||||
|
||||
**快学生应对：** 做完基础版+2轮迭代后，尝试在Chat模式问AI"这段代码里哪一部分控制颜色"——预习下下课的代码审查概念。
|
||||
|
||||
**慢学生应对：** 如果10分钟还没有产出，教师提供保底提示词：
|
||||
|
||||
```
|
||||
帮我做一个猜数字游戏：
|
||||
1. 电脑随机一个1-100的数字
|
||||
2. 玩家输入猜的数字，点"猜"按钮
|
||||
3. 猜大了显示红色"太大了"，猜小了显示蓝色"太小了"
|
||||
4. 猜对了显示"恭喜你！用了X次猜对了"
|
||||
5. 有"重新开始"按钮
|
||||
6. 深色背景，按钮是圆角橙色
|
||||
所有代码放在单个 index.html 文件中。
|
||||
```
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 还有大约5分钟。每个人要有一个"能在浏览器里打开、能演示基本功能"的版本。还没到这个状态的同学，先做最核心的功能，样式美化可以课后继续。
|
||||
|
||||
【诊断点：学生是否完成了至少2轮有效迭代，且迭代是"追加修改"而非"重新开始"】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟**
|
||||
|
||||
*本幕目标：展示成果，巩固"精确提示词→好结果"的认知*
|
||||
|
||||
**成果展示 (6分钟)**
|
||||
|
||||
**师：** 谁来分享？规则是告诉大家三件事：
|
||||
1. 你做的是什么
|
||||
2. 你用了哪个秘密武器
|
||||
3. 你发现了什么
|
||||
|
||||
（邀请2-3名学生展示，每人2分钟。尽量选不同方向——游戏、工具、创意页面各一个）
|
||||
|
||||
**互评与讨论 (4分钟)**
|
||||
|
||||
**师：** 看完了同学们的作品。最后一个问题——今天和上节课相比，你对Trae的掌控感有没有变化？
|
||||
|
||||
**生：** （预期：变多了/知道怎么说了/交互描述还不太会）
|
||||
|
||||
**师：** 核心发现总结：
|
||||
- AI不是神，它只能按你说的做
|
||||
- 你说得越具体，它做得越对
|
||||
- 迭代比重新来更高效
|
||||
- 提示词的结构 = 程序的逻辑
|
||||
|
||||
【诊断点：学生是否能说出自己用了哪种技巧，以及它解决了什么问题】【理解层】
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟**
|
||||
|
||||
*本幕目标：布置迭代作业，预告下节课*
|
||||
|
||||
**抽象总结 (3分钟)**
|
||||
|
||||
**师：** 今天学的四个武器，帮你从"碰运气"升级成了"精确控制"：
|
||||
|
||||
（板书/投屏）
|
||||
|
||||
```
|
||||
四个秘密武器：
|
||||
① 分步编号法：1、2、3、4，每步一件事
|
||||
② 具体化描述：颜色说色名，大小打比方
|
||||
③ 交互描述法：用户做什么→程序做什么
|
||||
④ 上下文迭代法：不重新来，接着说
|
||||
```
|
||||
|
||||
**师：** 记住今天最重要的一句话——**你说得越清楚，AI就越听话**。
|
||||
|
||||
**5分钟挑战发布 + 下节预告 (2分钟)**
|
||||
|
||||
**师：** 本周课外小挑战：
|
||||
|
||||
> **5分钟AI挑战：给你的项目加一个新功能**
|
||||
> 回家后打开今天的项目文件夹，在Trae里继续做一轮迭代。
|
||||
> 用"交互描述法"加一个新的互动功能。
|
||||
> 把迭代用的提示词截图保存，下节课带来分享。
|
||||
>
|
||||
> **评价标准：**
|
||||
> - 基础：完成一轮迭代，新功能能运行
|
||||
> - 进阶：提示词使用了交互描述法（有"→"）
|
||||
> - 挑战：对比改前改后截图，能说出提示词哪里可以更具体
|
||||
|
||||
**师：** 下节课我们做一个更完整的作品——从"小片段"升级到"拿得出手的完整产品"。今天的项目文件夹保留好，下节课还要用！
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师提示词模板（课前准备演示用）：**
|
||||
|
||||
```
|
||||
模糊版提示词（用于演示"坏提示词"）：
|
||||
帮我做一个好玩的游戏
|
||||
|
||||
精确版提示词（用于演示"好提示词"）：
|
||||
帮我做一个猜数字游戏，要求如下：
|
||||
1. 页面背景是深蓝色（#1a1a2e），标题"猜数字游戏"居中显示，白色大字
|
||||
2. 游戏开始时随机生成一个1到100之间的整数
|
||||
3. 页面中央有白色输入框让玩家输入猜测，旁边是橙色的"猜一猜"按钮
|
||||
4. 用户点击按钮→如果猜大了，显示红色文字"猜大了！再小一点"
|
||||
5. 用户点击按钮→如果猜小了，显示蓝色文字"猜小了！再大一点"
|
||||
6. 猜对了→页面出现金色撒花动画，显示"恭喜！你用了X次猜到了！"和"再来一局"按钮
|
||||
所有代码放在单个 index.html 文件中，内联CSS和JS。
|
||||
```
|
||||
|
||||
**课堂救场提示词（学生卡住时使用）：**
|
||||
|
||||
```
|
||||
情况1：学生页面一片空白
|
||||
→ 检查一下代码，页面显示空白的原因，把问题修复好
|
||||
|
||||
情况2：按钮点击没反应
|
||||
→ 检查按钮的点击事件，确保点击后能正确执行并显示结果
|
||||
|
||||
情况3：学生想加功能但不知道怎么说
|
||||
→ 教师帮学生用"交互描述法"口述，学生自己打字发送
|
||||
```
|
||||
|
||||
**学生提示词模板（参考）：**
|
||||
|
||||
模板A：游戏类（分步编号法）
|
||||
```
|
||||
帮我做一个[游戏名称]，要求如下：
|
||||
1. 页面背景颜色是[颜色]，标题是[标题文字]
|
||||
2. [游戏核心规则，一句话说清楚]
|
||||
3. [用户看到的主要界面元素：按钮/输入框/显示区]
|
||||
4. 用户[做什么操作]→程序[显示/发生什么]
|
||||
5. 用户[做什么操作]→程序[显示/发生什么]
|
||||
6. [特别效果，如动画/颜色变化]
|
||||
所有代码放在单个 index.html 文件中，内联CSS和JS。
|
||||
```
|
||||
|
||||
模板B：工具类（具体化描述法）
|
||||
```
|
||||
帮我做一个[工具名称]，要求如下：
|
||||
1. 页面整体风格：[简洁白色/科技感黑色/活泼彩色]
|
||||
2. 主要功能：[用户输入什么，得到什么结果]
|
||||
3. 界面元素：
|
||||
- 输入区域：[输入框或滑块]
|
||||
- 操作按钮：[颜色]的按钮，文字是[按钮文字]
|
||||
- 结果显示区：[在哪显示、字体大小/颜色]
|
||||
4. 用户点击按钮→[计算/处理]→显示[结果]
|
||||
所有代码放在单个 index.html 文件中，内联CSS和JS。
|
||||
```
|
||||
|
||||
模板C：迭代追加（上下文迭代法）
|
||||
```
|
||||
第一轮迭代：在刚才做好的基础上，增加一个功能：[新功能描述]
|
||||
第二轮迭代：保持其他不变，把[某元素]的颜色改成[颜色]，大小改成[描述]
|
||||
修复用语：页面有个问题：[描述问题]。请检查并修复，其他部分保持不变。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**技术备注（教师备课知识补充）：**
|
||||
|
||||
1. **Trae Builder 的上下文限制**：单次对话超过10轮后，生成质量可能下降。建议学生新开Builder对话，但把当前 index.html 代码粘贴给AI作为起点。
|
||||
2. **浏览器缓存问题**：学生说"改了代码但浏览器没变"时，让他们按 Ctrl+Shift+R 强制刷新。
|
||||
3. **中文字符问题**：如代码中有中文显示乱码，在提示词中加"在HTML head中加入 meta charset=UTF-8"。
|
||||
4. **Accept机制提醒**：AI展示的代码预览不等于已保存，必须点Accept才生效。
|
||||
|
||||
**能力边界 FAQ（教师快速判断用）：**
|
||||
|
||||
| 学生想法 | 判断 | 应对策略 |
|
||||
|---------|------|---------|
|
||||
| 打地鼠游戏 | ✅ 完全可以 | 引导用游戏模板 |
|
||||
| 贪吃蛇 | ✅ 可以 | 稍复杂，建议先做基础版再迭代 |
|
||||
| 计算器 | ✅ 完全可以 | 适合用工具模板 |
|
||||
| 倒计时炸弹 | ✅ 完全可以 | 交互描述法的好例子 |
|
||||
| 选择冒险故事 | ✅ 完全可以 | 关闭浏览器数据就没了，能接受就行 |
|
||||
| 查实时天气 | ❌ 本地文件无法联网 | 改为"输入城市名，随机生成有趣的天气预报" |
|
||||
| 多人联机对战 | ❌ 需要服务器 | 改为"双人本地对战"（两人共用一台电脑） |
|
||||
| 做微信机器人 | ❌ 完全不行 | 引导改为"有趣问答测验页面" |
|
||||
| 画图工具 | ✅ 可以用Canvas | 建议只做"点击涂色"而非完整绘图板 |
|
||||
| 音乐播放器 | ⚠️ 有限制 | 可做界面，本地音频路径可能有问题 |
|
||||
| 登录系统 | ❌ 需要后端 | 改为"假登录页面，任何密码都能进" |
|
||||
|
||||
**课堂节奏应急预案：**
|
||||
|
||||
- **大多数人10分钟还没开始**：教师投影上实时示范一次"模板填写"，用学生说的项目想法当例子
|
||||
- **个别学生超前完成**：给拓展任务，或请他们帮助旁边同学
|
||||
- **AI生成速度很慢**：让等待的学生先在纸上写好下一轮迭代的提示词
|
||||
- **有学生做出意外精彩的东西**：立即请他展示，引导全班关注"他的提示词写了什么"
|
||||
|
||||
**备课体验任务清单：**
|
||||
|
||||
- [ ] 用"做个好玩的游戏"生成一次，截图保存（demo-bad）
|
||||
- [ ] 用精确版生成同主题游戏，截图保存（demo-good）
|
||||
- [ ] 完整体验"上下文迭代"流程，做至少3轮迭代
|
||||
- [ ] 尝试学生最常选的3种项目类型（游戏/工具/故事），确认能正常生成
|
||||
- [ ] 验证"能做/不能做"清单中的边界案例
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周任务：**
|
||||
|
||||
> **"给你的项目加一个新功能"**
|
||||
>
|
||||
> **操作步骤：**
|
||||
> 1. 打开今天课上保存的项目文件夹
|
||||
> 2. 在 Trae Builder 里，不要开新对话（或把代码粘贴到新对话里）
|
||||
> 3. 用"交互描述法"写一条提示词：`用户[做什么]→程序[做什么]`
|
||||
> 4. Accept代码，在浏览器中验证新功能
|
||||
> 5. 截图保存（提示词截图 + 效果截图）
|
||||
>
|
||||
> **评价标准：**
|
||||
> - 基础：完成一轮迭代，新功能能运行
|
||||
> - 进阶：提示词使用了"用户→程序"的交互描述格式
|
||||
> - 挑战：对比改前改后截图，能说出提示词哪里可以更具体
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**进阶挑战（适合学有余力的学生）：**
|
||||
|
||||
**挑战一：提示词翻译官**
|
||||
> 下面有一段"烂提示词"，改写成"精确提示词"，然后用两个版本都在Trae里生成一次，截图对比。
|
||||
>
|
||||
> 原始烂提示词：`做一个好玩的测验，主题是动物，要有图，好看一点，有互动`
|
||||
>
|
||||
> 改写要求：至少4条编号、至少2个具体颜色、至少2个"用户→程序"交互描述。
|
||||
|
||||
**挑战二：帮同学加功能**
|
||||
> 找班里一个同学的项目，帮他写一段迭代提示词，加一个他没想到的新功能。用"上下文迭代法"的格式。
|
||||
|
||||
**挑战三：提示词说明书**
|
||||
> 为你今天的项目写一份"提示词说明书"，记录每一轮提示词和对应结果：
|
||||
> - 第一轮提示词 → 满意/不满意，原因
|
||||
> - 第二轮提示词 → 满意/不满意，原因
|
||||
> - 总结：我学到了什么
|
||||
540
3-lessons/AICODE-06/旧版本/AICODE06-03 我的第一个Web作品 v1.md
Normal file
540
3-lessons/AICODE-06/旧版本/AICODE06-03 我的第一个Web作品 v1.md
Normal file
@@ -0,0 +1,540 @@
|
||||
---
|
||||
课时: 3
|
||||
主题: 我的第一个Web作品
|
||||
核心能力: [拆解力, 审美力]
|
||||
核心工具: [Trae IDE]
|
||||
时长: 90分钟
|
||||
透明化层级: 结果层
|
||||
适用路线: AICODE-06（有扣子/低代码经验的学生）
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 理解"完整作品"和"半成品"的区别：有核心功能、有交互反馈、有视觉设计
|
||||
- 掌握需求拆解的基本方法：把一个大想法拆成"核心功能→交互细节→视觉美化"三层
|
||||
- 了解多轮迭代的工作节奏：每一轮都有明确目标，而不是随机修改
|
||||
|
||||
**能力目标：**
|
||||
- 能用自己的语言描述"我要做什么"，并拆解成至少3个可操作的步骤
|
||||
- 能完成三轮迭代：第一轮出基础功能，第二轮修问题加功能，第三轮美化打磨
|
||||
- 能用已学的提示词技巧（分步编号法、具体化描述、交互描述法）驱动AI完成一个完整项目
|
||||
|
||||
**情感目标：**
|
||||
- 体验从"想法"到"作品"的完整创作过程，建立"我能做出真正的东西"的自信
|
||||
- 感受自己的作品和别人的作品都是独一无二的
|
||||
- 培养"产品思维"：先想清楚要什么，再让AI帮你做
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 概念 | 六年级类比 | 认知层级 |
|
||||
|------|----------|---------|
|
||||
| 完整作品 vs 半成品 | 像装修房子：只刷了墙 vs 家具灯具全装好了 | 理解层 |
|
||||
| 需求拆解 | 像做菜前先列采购清单：必须买的/最好有的/以后再买的 | 应用层 |
|
||||
| 三轮迭代 | 像画画：先画轮廓→再上色→最后加细节 | 应用层 |
|
||||
| 产品思维 | 先想清楚"做给谁用""解决什么问题"，再动手做 | 分析层 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | "一句话就能做出完整作品" | 越具体、越分步，AI做出来的东西越符合想法 | 展示模糊vs拆解后的结果对比 |
|
||||
| M2 | "AI第一次就能做对" | 第一轮有问题是正常的，迭代才是真正的工作方式 | 教师故意展示自己第一轮有问题的结果 |
|
||||
| M3 | "好看比能用更重要" | 先让功能跑起来，再谈美化 | 强调三轮顺序：功能第一，美化最后 |
|
||||
| M4 | "改一个地方不会影响其他" | 修改时要告诉AI"保留原有功能，只修改XX" | 演示不说"保留"时AI可能改掉好的部分 |
|
||||
| M5 | "做得复杂才厉害" | 一个功能做好比十个功能做烂更有价值 | 引导用"必须有/最好有/以后再加"筛选 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- Trae IDE（已安装并登录）
|
||||
- Chrome 浏览器
|
||||
- 每人一台电脑，Win10，8GB RAM
|
||||
- 教师机连接投影
|
||||
|
||||
**教学资源：**
|
||||
- 教师准备：`demo_bad.html`——一个"半成品"（功能能跑但没样式、按钮很丑、没分数显示）
|
||||
- 教师准备：`demo_good.html`——同一项目的"完整版"（好看界面、完整功能、结束画面）
|
||||
- 教师准备：`demo_sample.html`——另一个方向的完整作品（展示多样性，如番茄钟或问答）
|
||||
- 需求拆解工作纸（三栏：必须有 / 最好有 / 以后再加）——投影展示即可
|
||||
- 学生资源：无需提前准备
|
||||
|
||||
**教师备课体验任务：**
|
||||
> 备课前，教师必须亲自完成以下操作：
|
||||
> 1. 用 Trae 完整做一遍 `demo_good.html`，记录用了几轮迭代、遇到了什么问题
|
||||
> 2. 故意写模糊提示词（如"帮我做个游戏"），感受AI随机发挥的结果
|
||||
> 3. 测试"保留原有功能，只修改XX"这类提示词是否有效
|
||||
> 4. 预想5种学生可能选的项目，各想一下第一轮提示词怎么写
|
||||
> 5. 确认所有演示文件在Chrome中能正常运行
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
---
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟**
|
||||
|
||||
*本幕目标：用"半成品vs完整作品"的对比，建立"完整度"的评判标准*
|
||||
|
||||
**情景导入 (10分钟)**
|
||||
|
||||
教师先打开 `demo_bad.html`，投影给全班看，不做任何解释，直接操作。
|
||||
|
||||
**师：** 同学们，看，这是一个用AI做出来的网页小游戏。（演示操作）能玩吗？
|
||||
|
||||
**生：** 能玩。/ 能用。
|
||||
|
||||
**师：** 那它算"做完了"吗？
|
||||
|
||||
（停顿3秒）
|
||||
|
||||
**生：** （预期：好像做完了？/感觉还差点什么/太丑了）
|
||||
|
||||
**师：** 从1到10，你会打几分？
|
||||
|
||||
（收集几个分数）
|
||||
|
||||
**师：** 好，现在看这个。
|
||||
|
||||
（打开 `demo_good.html`，同样的操作）
|
||||
|
||||
**师：** 也是同一个游戏，也是AI做的。有什么不一样？
|
||||
|
||||
**生：** （预期：好看多了/有分数了/有颜色了/像真的游戏）
|
||||
|
||||
**师：** 这两个的区别，不是"AI更厉害了"，而是做这个的人多做了两件事：第一，把**功能做完整**；第二，把**样子打磨好**。今天我们要做的，就是从"能用"走到"**拿得出手**"。
|
||||
|
||||
（打开 `demo_sample.html`）
|
||||
|
||||
**师：** 还有——今天每个人做的东西都不一样。这是另一个方向的作品。你们的作品都会是独一无二的。【诊断点：学生是否理解"半成品"和"完整作品"的差距不在AI能力，而在人的要求和打磨】【理解层】
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟**
|
||||
|
||||
---
|
||||
|
||||
**【分段一：选方向 + 需求拆解】(15分钟)**
|
||||
|
||||
*本段重点：学生确定项目方向，学会用"三栏拆解法"把大想法变成可执行步骤*
|
||||
|
||||
**讲解与演示 (7分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M1: 一句话就能做出完整作品
|
||||
- M5: 做得复杂才厉害
|
||||
|
||||
**师：** 现在你要做一个决定：你的作品是什么？这里有6个方向参考，但不是限制——你可以选别的。
|
||||
|
||||
（投影展示项目方向卡）
|
||||
|
||||
| 方向 | 一些例子 |
|
||||
|------|---------|
|
||||
| 互动游戏 | 打地鼠、记忆翻牌、反应速度测试、太空射击 |
|
||||
| 实用工具 | 番茄计时器、随机分组器、班级点名器、成绩计算器 |
|
||||
| 创意展示 | 个人介绍页、班级纪念册、互动故事书 |
|
||||
| 学科应用 | 数学闯关、英语单词卡、科学小百科 |
|
||||
| 趣味测试 | 性格测试、知识问答、今日运势生成器 |
|
||||
| 艺术创意 | 画板工具、音乐节拍器、彩色文字生成器 |
|
||||
|
||||
**师：** 方向选好之后，最重要的一步——**需求拆解**。
|
||||
|
||||
（投影展示三栏表格）
|
||||
|
||||
```
|
||||
我要做的东西：_______________
|
||||
|
||||
必须有（没有它就不算完成）：
|
||||
1.
|
||||
2.
|
||||
3.
|
||||
|
||||
最好有（有了更好，没有也行）：
|
||||
1.
|
||||
2.
|
||||
|
||||
以后再加（今天先不做）：
|
||||
1.
|
||||
```
|
||||
|
||||
**师：** 比如我要做一个"反应速度测试"。必须有什么？
|
||||
|
||||
**生：** （预期：一个按钮/计时/显示成绩）
|
||||
|
||||
**师：** 对！按钮出现→你点击→告诉你反应了多少毫秒——这三件事缺一个都不行，这就是"必须有"。"最好有"呢？
|
||||
|
||||
**生：** （预期：历史记录/排名/好看的颜色）
|
||||
|
||||
**师：** "以后再加"呢？
|
||||
|
||||
**生：** （预期：多人对战/换主题）
|
||||
|
||||
**师：** 你看，一句"做个反应测试"拆成了三层。现在你知道今天做什么、做到什么程度了。
|
||||
|
||||
**学生实践 (5分钟):**
|
||||
|
||||
学生独立填写需求拆解（可以在纸上或脑子里）。
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 想法太大（如"做个RPG游戏"）→ 引导缩小范围
|
||||
- 想法太模糊（如"做个好玩的东西"）→ 追问"好玩体现在哪里"
|
||||
- 想法超出边界 → 参考教师指南的可行性清单
|
||||
|
||||
**进度同步 (3分钟):**
|
||||
|
||||
**师：** 谁来说一下你要做什么，以及你的"必须有"？
|
||||
|
||||
（抽2-3人回答，给简短正面反馈）
|
||||
|
||||
**师：** 好，现在开始动手。第一轮目标——把"必须有"的功能做出来，**先不管好不好看**。
|
||||
|
||||
【诊断点：学生能否区分"必须有"和"最好有"】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**【分段二：第一轮迭代——把核心功能跑起来】(20分钟)**
|
||||
|
||||
*本段重点：用分步编号法写第一轮提示词，生成基础版，验证核心功能*
|
||||
|
||||
**讲解与演示 (3分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M3: 好看比能用更重要
|
||||
|
||||
**师：** 第一轮的目标只有一个：**核心功能能跑**。记得第2课的分步编号法。
|
||||
|
||||
（投影展示第一轮提示词模板）
|
||||
|
||||
```
|
||||
我要做一个[项目名称]，请帮我创建一个完整的 index.html 文件，
|
||||
内联所有CSS和JS，不需要外部文件。
|
||||
|
||||
功能要求：
|
||||
1. [核心功能1]
|
||||
2. [核心功能2]
|
||||
3. [核心功能3]
|
||||
|
||||
现在先实现基本功能，样式之后再改。
|
||||
```
|
||||
|
||||
**师：** 注意最后这句话："现在先实现基本功能，样式之后再改。"这是在帮你控制AI，让它先做最重要的事。
|
||||
|
||||
**学生实践 (15分钟):**
|
||||
|
||||
学生写第一轮提示词，在Builder中发送，Accept后在浏览器中测试。
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- AI给了代码但不知道怎么看效果 → 提醒保存为index.html，用Chrome打开
|
||||
- AI只给了一部分代码 → 追问"请给出完整的index.html，把CSS和JS都包含在里面"
|
||||
- 功能跑不了 → 让学生告诉AI"运行之后[具体问题]，请检查并修复"
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 核心功能跑起来的举手！哪怕很丑，只要功能能用就算过关。
|
||||
|
||||
（统计人数）
|
||||
|
||||
**师：** 跑起来的同学，先不要改颜色字体，先看看功能上有没有问题。没跑起来的同学，把问题告诉AI让它帮你修。
|
||||
|
||||
【诊断点：学生是否能写出包含分步编号的有效第一轮提示词】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**【分段三：第二轮迭代——修问题 + 加功能】(15分钟)**
|
||||
|
||||
*本段重点：在原对话基础上修复bug、添加"最好有"的功能，练习上下文迭代*
|
||||
|
||||
**讲解与演示 (3分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M4: 改一个地方不会影响其他
|
||||
|
||||
**师：** 记得第2课的上下文管理吗？现在特别重要——不要开新对话，在原来的对话里继续。
|
||||
|
||||
（投影展示第二轮提示词格式）
|
||||
|
||||
```
|
||||
保留原有的[主要功能]，在此基础上：
|
||||
1. 修复：[具体问题，如"点击开始按钮后没反应"]
|
||||
2. 增加：[从"最好有"里选的新功能]
|
||||
```
|
||||
|
||||
**师：** 为什么要说"保留原有的XX"？因为AI不知道你在乎什么，如果你不说，它可能帮你改的时候把原来好的东西也动了。
|
||||
|
||||
**学生实践 (10分钟):**
|
||||
|
||||
学生进行第二轮迭代：
|
||||
- 把发现的功能问题告诉AI修复
|
||||
- 从"最好有"里挑1-2个功能加上去
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 学生是否开了新对话（提醒：在原对话继续）
|
||||
- 学生是否同时提了太多修改要求（建议一次不超过3条）
|
||||
- 学生能否描述具体问题（"点击后没反应"比"有问题"有用得多）
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 功能完整的同学，进入最后一轮——美化。功能还有问题的同学，继续修，不着急去改样式。
|
||||
|
||||
【诊断点：学生能否正确描述bug并让AI修复，而不是说"有问题"】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**【分段四：第三轮迭代——美化打磨】(15分钟)**
|
||||
|
||||
*本段重点：用具体化描述让AI做视觉美化，从"能用"升级到"好看又好用"*
|
||||
|
||||
**讲解与演示 (3分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M3: 好看比能用更重要（这里是反过来：终于到了美化的时候）
|
||||
|
||||
**师：** 终于到美化了！但美化不是说"让它变好看"，那AI不知道你要什么风格。
|
||||
|
||||
（投影展示美化提示词参考）
|
||||
|
||||
```
|
||||
风格描述词（选1-2个组合）：
|
||||
颜色系：深色主题 / 明亮活泼 / 柔和清新 / 赛博朋克 / 中国红
|
||||
感觉类：像游戏界面 / 像手机App / 像卡片 / 简洁专业
|
||||
具体要求：圆角按钮 / 渐变背景 / 动画效果（点击时有反馈）
|
||||
|
||||
美化提示词示例：
|
||||
"保留所有功能不变，只修改视觉样式：
|
||||
1. 整体改成深色背景，主色调用紫色和蓝色的渐变
|
||||
2. 按钮改成圆角，点击时有轻微缩放动画
|
||||
3. 标题字体加大，加上发光效果
|
||||
4. 整体布局居中，看起来像游戏主界面"
|
||||
```
|
||||
|
||||
**师：** 看到了吗？没有说"更好看"，而是说了具体的颜色、感觉、效果。AI才知道你要什么。
|
||||
|
||||
**学生实践 (10分钟):**
|
||||
|
||||
学生进行第三轮美化迭代。
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 学生不知道要什么风格 → 问"你见过哪个游戏/App的界面是你喜欢的样子"
|
||||
- 美化后功能坏了 → 让学生加"保留所有功能，只修改CSS样式部分"
|
||||
- 时间快到了还在美化 → 提醒"先保存当前版本"
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 不管什么进度，先停手。保存你的 index.html。现在的版本就是你今天的作品——有完整功能的，有做到一半的，都没关系，我们一起看。
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟**
|
||||
|
||||
*本幕目标：展示成果，强化"迭代"概念和"每个人做不同东西"的认知*
|
||||
|
||||
**成果展示 (6分钟)**
|
||||
|
||||
**师：** 展示时间。每个人30秒，说一句话——"我做的是什么，我觉得最好的一个地方是什么"。
|
||||
|
||||
（随机选3-5名学生展示，每个展示后追问一个问题）
|
||||
|
||||
**师：** 这个[功能/设计]是你在哪一轮做的？第一轮、第二轮还是第三轮？
|
||||
|
||||
（目的：强化"作品是一轮一轮做出来的"概念）
|
||||
|
||||
**互评与讨论 (4分钟)**
|
||||
|
||||
**师：** 你们有没有发现，每个人做的东西完全不一样？用的都是同一个AI、同一个工具。为什么？
|
||||
|
||||
**生：** （预期：因为想法不一样/选的方向不一样）
|
||||
|
||||
**师：** 对！AI是帮你实现想法的工具，但**想法必须是你的**。拆解得越清楚，AI帮你做出来的越像你想要的。
|
||||
|
||||
**师：** 今天我们学了一件很重要的事——做一个完整作品的节奏：
|
||||
|
||||
```
|
||||
① 想清楚：需求拆解（必须有 / 最好有 / 以后再加）
|
||||
② 先能用：第一轮做核心功能
|
||||
③ 再完善：第二轮修bug加功能
|
||||
④ 最后美化：第三轮打磨视觉
|
||||
```
|
||||
|
||||
【诊断点：学生是否理解三轮迭代的节奏，而不是"一次做到完美"】【理解层】
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟**
|
||||
|
||||
*本幕目标：布置"用户测试"作业，预告代码审查*
|
||||
|
||||
**抽象总结 (3分钟)**
|
||||
|
||||
**师：** 今天你们完成了从"想法"到"作品"的完整过程。核心方法：
|
||||
|
||||
（板书/投屏）
|
||||
|
||||
```
|
||||
产品开发三步曲：
|
||||
① 拆解需求：必须有 → 最好有 → 以后再加
|
||||
② 三轮迭代：功能 → 完善 → 美化
|
||||
③ 关键提示词：保留原有功能，只修改/增加XX
|
||||
```
|
||||
|
||||
**5分钟挑战发布 + 下节预告 (2分钟)**
|
||||
|
||||
**师：** 本周课外小挑战：
|
||||
|
||||
> **5分钟AI挑战：让家人当你的"用户"**
|
||||
> 1. 回家后把你的 index.html 打开给家人看
|
||||
> 2. 让他们自己用，你不要帮忙操作
|
||||
> 3. 观察他们在哪里卡住或有疑惑
|
||||
> 4. 记下来一条反馈
|
||||
>
|
||||
> **评价标准：**
|
||||
> - 基础：给家人展示了你的作品
|
||||
> - 进阶：记录了一条具体反馈（"XX按钮不知道是干嘛的"）
|
||||
> - 挑战：根据反馈自己再改一轮，展示改进前后对比
|
||||
|
||||
**师：** 下节课我们学一个新技能——**看代码**。不是写代码，是学会"看"。当你想改一个小细节，不用每次都麻烦AI，自己直接动手改。这就是下节课的"代码审查入门"。
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师提示词模板：**
|
||||
|
||||
情形1：学生想法太大，帮助缩小范围
|
||||
```
|
||||
一个小学五年级的学生说他想做"一个RPG游戏"，但只有一节课时间，
|
||||
所有代码在一个HTML文件里。
|
||||
给出3个同样有趣的替代方向，每个方向说明核心功能有哪些（不超过3个）。
|
||||
```
|
||||
|
||||
情形2：学生代码报错，快速诊断
|
||||
```
|
||||
这是一个学生的 index.html 代码，他说[具体问题]。
|
||||
请找出最可能的问题，用一句话说明原因，然后给出修复后的完整代码。
|
||||
[粘贴代码]
|
||||
```
|
||||
|
||||
情形3：课堂演示对比案例
|
||||
```
|
||||
帮我生成两个版本的"记忆翻牌游戏" index.html：
|
||||
第一个版本：只有基本功能，没有样式，HTML默认外观
|
||||
第二个版本：完整版，有好看的界面、翻牌动画、计时和步数统计
|
||||
两个文件都要是单文件，CSS和JS内联。
|
||||
```
|
||||
|
||||
**学生提示词模板：**
|
||||
|
||||
第一轮（核心功能）：
|
||||
```
|
||||
我要做一个[项目名称]，请帮我创建一个完整的 index.html 文件，
|
||||
内联所有CSS和JS，不需要外部文件。
|
||||
功能要求：
|
||||
1. [核心功能1]
|
||||
2. [核心功能2]
|
||||
3. [核心功能3]
|
||||
现在先实现基本功能，样式之后再改。
|
||||
```
|
||||
|
||||
第二轮（修复与增强）：
|
||||
```
|
||||
保留原有的[主要功能]，在此基础上：
|
||||
1. 修复：[具体问题描述]
|
||||
2. 增加：[新功能描述]
|
||||
```
|
||||
|
||||
第三轮（美化）：
|
||||
```
|
||||
保留所有功能不变，只修改视觉样式：
|
||||
1. 整体风格：[如"深色背景，蓝紫渐变"]
|
||||
2. 按钮效果：[如"圆角，点击时有弹跳动画"]
|
||||
3. 布局：[如"整体居中，标题加大"]
|
||||
```
|
||||
|
||||
遇到问题时：
|
||||
```
|
||||
运行后出现了问题：[描述，如"计时器到0不停止"]
|
||||
请检查代码，找出原因并修复。保留其他功能不变。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**技术备注（教师备课知识补充）：**
|
||||
|
||||
1. **文件保存路径**：确保学生把 index.html 保存在固定文件夹里，不要散放桌面。建议每人在桌面建以自己名字命名的文件夹。
|
||||
2. **Chrome打开方式**：双击 index.html 默认用Chrome打开即可。不需要本地服务器。
|
||||
3. **Trae代码不完整**：Trae有时只给代码片段。让学生追问"请给出完整的 index.html 文件内容，不要省略"。
|
||||
4. **代码太长AI中途停了**：让学生说"请继续，从上次停止的位置继续输出"。
|
||||
5. **版本管理**：建议每轮迭代前把当前版本另存一份（复制 index.html 重命名为 index_v1.html）。
|
||||
|
||||
**学生项目可行性快速判断清单：**
|
||||
|
||||
| 类别 | 例子 | 处理方式 |
|
||||
|------|------|---------|
|
||||
| ✅ 能做 | 打地鼠、记忆翻牌、番茄计时器、知识问答、画板、随机分组器、运势生成器 | 直接支持，帮助拆解需求 |
|
||||
| ⚠️ 能做但需缩小范围 | 贪吃蛇（只做基础版）、RPG（改成"选择支故事"）、班级相册（用emoji代替真实图片） | 和学生一起重新定义"必须有"后放行 |
|
||||
| ⚠️ 有技术风险 | 需要音频（用Web Audio API生成音效）、摄像头/麦克风（权限问题） | 提前告知限制，找替代方案 |
|
||||
| ❌ 不建议做 | 多人联机（需要服务器）、账号系统（需要数据库）、AI聊天机器人（需要API key） | 明确说明原因，帮转向可行方向 |
|
||||
|
||||
**常见问题 FAQ：**
|
||||
|
||||
| 学生问题 | 建议回答 |
|
||||
|---------|---------|
|
||||
| "AI一直在转，不给代码" | 先检查网络，然后缩短提示词，去掉不必要描述只保留核心需求 |
|
||||
| "做得特别快，第三轮都做完了" | 做"用户测试"——让旁边同学用你的作品，观察他们卡在哪里 |
|
||||
| "第一轮都跑不起来" | 主动介入，帮他把需求再简化——"先只做一个最核心功能" |
|
||||
| "AI做的不满意，有点泄气" | "第一轮几乎都是这样的。说出具体哪里不对，写进第二轮提示词" |
|
||||
| "两个人想做一样的东西" | 好事！可以"比赛"——同方向看谁更好用更好看 |
|
||||
|
||||
**备课体验任务清单：**
|
||||
|
||||
- [ ] 亲自跑完三轮迭代，做出 demo_good.html
|
||||
- [ ] 做出 demo_bad.html（故意做差但能运行）
|
||||
- [ ] 做出 demo_sample.html（另一个方向的完整作品）
|
||||
- [ ] 测试Chrome打开本地html文件，确认演示正常
|
||||
- [ ] 熟悉"可行性判断清单"，能快速判断学生想法
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周任务：**
|
||||
|
||||
> **"让家人当你的用户"**
|
||||
>
|
||||
> **操作步骤：**
|
||||
> 1. 回家后打开你的 index.html，给家里一个大人看
|
||||
> 2. 让他们自己用，你不要帮忙操作
|
||||
> 3. 观察他们在哪里卡住或说"这是什么意思"
|
||||
> 4. 记下来一条反馈
|
||||
>
|
||||
> **下节课带来：**
|
||||
> 你听到的一条反馈，以及你打算怎么用这条反馈改进作品
|
||||
>
|
||||
> **追加挑战（选做）：**
|
||||
> 根据家人反馈自己再改一轮，下节课展示改进前后对比
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**进阶挑战（适合学有余力的学生）：**
|
||||
|
||||
**Level 1：功能拓展**
|
||||
> 选一个"以后再加"的功能，自己尝试加进去。提示词要说清楚：现在有什么，要加什么，保留什么。
|
||||
|
||||
**Level 2：主题切换**
|
||||
> 给你的作品增加"主题切换"功能：比如白天/夜晚模式。提示AI帮你加一个按钮，点击后切换整体配色。
|
||||
|
||||
**Level 3：作品说明书**
|
||||
> 在你的页面里加一个"关于"按钮，点击后显示一个弹窗，介绍这个作品是做什么的、怎么用、有哪些功能。
|
||||
|
||||
**Level 4：互评改造**
|
||||
> 和一个同学交换作品，以对方的作品为基础加一个新功能。写完了给他看，听反馈——这是最接近真实软件协作的体验。
|
||||
618
3-lessons/AICODE-06/旧版本/AICODE06-04 代码审查入门 v1.md
Normal file
618
3-lessons/AICODE-06/旧版本/AICODE06-04 代码审查入门 v1.md
Normal file
@@ -0,0 +1,618 @@
|
||||
---
|
||||
课时: 4
|
||||
主题: 代码审查入门
|
||||
核心能力: [韧性力, 拆解力]
|
||||
核心工具: [Trae IDE]
|
||||
时长: 90分钟
|
||||
透明化层级: 结果层
|
||||
适用路线: AICODE-06（有扣子/低代码经验的学生）
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 能识别一个 index.html 文件中 HTML、CSS、JavaScript 三个部分的物理位置（`<body>` / `<style>` / `<script>` 标签范围）
|
||||
- 知道三部分各自负责什么：骨架（有什么东西）/ 装修（颜色大小位置）/ 电路（交互逻辑）
|
||||
- 理解"改代码的某一行→保存→刷新浏览器→看到变化"这条因果链
|
||||
|
||||
**能力目标：**
|
||||
- 能在陌生代码中用 Ctrl+F "寻宝"方式定位控制某个效果的代码行
|
||||
- 能手动修改颜色值、文字内容、简单数值，保存后验证效果
|
||||
- 能描述 bug 时说出"问题可能在哪一部分"（而不只是"坏了"）
|
||||
|
||||
**情感目标：**
|
||||
- 体验"我不只是AI的用户，我还能直接动代码"的掌控感
|
||||
- 建立"代码不可怕，可以一段一段读"的信心
|
||||
- 感受寻宝竞赛的乐趣，愿意主动探索代码
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 概念 | 六年级类比 | 认知层级 |
|
||||
|------|----------|---------|
|
||||
| HTML = 页面的骨架 | 房子的家具——有什么东西摆在那里 | 识别层 |
|
||||
| CSS = 页面的装修 | 房子的油漆和装饰——颜色、大小、位置 | 理解层 |
|
||||
| JavaScript = 页面的电路 | 房子的开关和电路——按按钮灯会亮 | 理解层 |
|
||||
| Ctrl+F 搜索定位 | 在一本书里用目录找到某一页 | 应用层 |
|
||||
| 改代码→保存→刷新→验证 | 改了文档→保存→重新打开看效果 | 应用层 |
|
||||
| Bug定位三区域 | "没颜色"→看装修，"没反应"→看电路 | 分析层 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | "改代码会把项目弄坏，不敢动" | 改错了 Ctrl+Z 就能撤销，代码有后悔药 | 演示Ctrl+Z撤销；当场故意改错再改回来 |
|
||||
| M2 | "要看懂每一行才能改" | 只需要找到目标行，不需要读懂全部 | 类比"不用读懂整本书才能改封面标题" |
|
||||
| M3 | "CSS和HTML一样，都是控制内容的" | CSS只管外观，HTML管结构 | HTML=家具（有什么），CSS=油漆（什么颜色） |
|
||||
| M4 | "JavaScript就是让东西动起来" | JS负责所有逻辑和交互，不只是动画 | 举例：分数计算、按钮点击判断都是JS |
|
||||
| M5 | "AI改了代码我就不需要看了" | AI改完你要会验证，还要会手动微调 | 本课核心：AI做大框架，你精调细节 |
|
||||
| M6 | "颜色只能写red/blue这样的英文" | 颜色还可以写 #FF6B6B 十六进制格式 | 展示多种颜色写法 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- Trae IDE（已安装）
|
||||
- Chrome 浏览器
|
||||
- 每台学生电脑准备好一个可运行的 index.html（建议用第1课的反应力测试，或教师统一分发）
|
||||
- 教师机连接投影
|
||||
|
||||
**教学资源：**
|
||||
- 教师准备：一份"反应力测试"index.html（代码中 style/body/script 三部分清晰），课前确认在本机可运行
|
||||
- 教师准备：寻宝任务清单（投影展示，见教学流程）
|
||||
- 教师准备：好看的颜色参考表（投影展示，见教师指南）
|
||||
- 学生资源：每人电脑上有一份可运行的 index.html
|
||||
|
||||
**教师备课体验任务：**
|
||||
> 备课前，教师必须亲自完成以下操作：
|
||||
> 1. 打开反应力测试 index.html，在Trae中记录三部分的起止行号
|
||||
> 2. 手动改背景颜色为 `#1a1a2e`，保存刷新看效果，再改回来
|
||||
> 3. 手动改按钮文字从"开始游戏"改为"点我！"，保存刷新看效果，再改回来
|
||||
> 4. 用 Ctrl+F 搜索 `background`，找到所有相关行
|
||||
> 5. 故意把 `background-color` 改成错误值（如 `reddd`），看浏览器如何忽略它（不会崩溃）
|
||||
> 6. 用AI生成一个新小游戏，然后手动改颜色和文字，体验"混合开发"节奏
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
---
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟**
|
||||
|
||||
*本幕目标：激活前几课经验，用"房子"类比建立代码三部分的初步认知*
|
||||
|
||||
**情景导入 (10分钟)**
|
||||
|
||||
教师打开投影，展示一个前几课做过的小项目，让浏览器和代码并排显示。
|
||||
|
||||
**师：** 同学们，这是你们第1课做的反应力测试，还记得吗？上次你们已经在代码里改过颜色。今天我要问一个问题——
|
||||
|
||||
（教师点开代码文件，故意让代码滚动得很快，营造"一大堆字符"的视觉感）
|
||||
|
||||
**师：** AI帮你改颜色的时候，它改的是代码里的哪一部分？
|
||||
|
||||
**生：** （预期：不知道/全部？/好像是style那边？）
|
||||
|
||||
**师：** 有同学说style那边——很好！今天我们来验证这个猜想。我告诉你们一个秘密：这一大堆代码，其实只有**三个部分**。就像一栋房子——
|
||||
|
||||
（教师在白板上画简单的房子轮廓，分三层）
|
||||
|
||||
```
|
||||
╔══════════════════╗
|
||||
║ <script> ║ ← 电路系统（点击、计算、逻辑）
|
||||
║ JavaScript ║
|
||||
╠══════════════════╣
|
||||
║ <style> ║ ← 装修（颜色、大小、位置）
|
||||
║ CSS ║
|
||||
╠══════════════════╣
|
||||
║ <body> ║ ← 骨架（标题、按钮、图片）
|
||||
║ HTML ║
|
||||
╚══════════════════╝
|
||||
```
|
||||
|
||||
**师：** HTML是骨架——房子里有什么家具、什么按钮、什么标题。CSS是装修——这个按钮是红色还是蓝色，字多大，在哪个位置。JavaScript是电路——你按下开关灯亮了，你点击按钮分数+1。
|
||||
|
||||
**师：** 今天这节课，我们不是要学写代码。我们要学的是——**在代码里找东西**。就像寻宝一样。
|
||||
|
||||
【诊断点：学生是否记得第1课已接触过 style/body/script 三个标签】【识别层】
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟**
|
||||
|
||||
---
|
||||
|
||||
**【分段一：代码解剖——找到三部分的边界】(15分钟)**
|
||||
|
||||
*本段重点：用Ctrl+F定位三部分的起止位置，建立"代码有结构"的认知*
|
||||
|
||||
**讲解与演示 (8分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M2: 要看懂每一行才能改
|
||||
- M3: CSS和HTML分不清
|
||||
|
||||
教师在 Trae IDE 中打开反应力测试的 index.html，全屏展示。
|
||||
|
||||
**师：** 现在来做一件事——给代码找边界。我先教你们怎么找三个部分。
|
||||
|
||||
（教师边讲边用鼠标指出）
|
||||
|
||||
**师：** 看这里——`<style>` 标签。从 `<style>` 开始，到 `</style>` 结束，中间所有内容都是 CSS，**装修部分**。
|
||||
|
||||
**师：** 再往下——`<body>` 标签。从 `<body>` 到 `</body>`，这是**骨架部分**。
|
||||
|
||||
**师：** 最后——`<script>` 标签。从 `<script>` 到 `</script>`，这是**电路部分**。
|
||||
|
||||
**师：** 在代码里找东西有一个神器——**Ctrl+F**，搜索框。
|
||||
|
||||
（教师演示 Ctrl+F 搜索 `<style`，代码直接跳到CSS部分开头）
|
||||
|
||||
**师：** 看，直接跳过去了！你们也试一下。
|
||||
|
||||
**学生实践 (5分钟):**
|
||||
|
||||
学生在自己电脑上打开同一个文件，用 Ctrl+F 分别搜索：
|
||||
- `<style` → 找到 CSS 部分开头
|
||||
- `<body` → 找到 HTML 部分开头
|
||||
- `<script` → 找到 JavaScript 部分开头
|
||||
|
||||
**师：** 现在每个人都知道三个部分在哪了。谁来说一下，CSS从第几行开始？
|
||||
|
||||
（请学生报行号，全班对比）
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 记住：不需要读懂里面写了什么，只需要知道"这一块是装修的，那一块是骨架的"。就像你去一栋楼，不需要看懂设计图，但要知道一楼是大厅、二楼是卧室。
|
||||
|
||||
【诊断点：学生是否能独立用Ctrl+F定位三部分边界】【理解层】
|
||||
|
||||
---
|
||||
|
||||
**【分段二：寻宝游戏——定位修改点】(20分钟)**
|
||||
|
||||
*本段重点：通过竞赛形式练习"根据效果→判断属于哪部分→搜索关键词→定位代码行"*
|
||||
|
||||
**讲解与演示 (5分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M2: 要从第一行读到最后一行才能找
|
||||
|
||||
**师：** 现在进入今天最好玩的环节——**寻宝游戏！** 规则很简单：我说一个效果，你来找控制这个效果的代码在哪一行。不需要改，不需要写，只要找到那一行就举手。
|
||||
|
||||
**师：** 第1题——找到"控制页面背景颜色"的代码。
|
||||
|
||||
（给学生30秒思考）
|
||||
|
||||
**师：** 背景颜色，是视觉效果，还是内容，还是交互？
|
||||
|
||||
**生：** 视觉效果！
|
||||
|
||||
**师：** 视觉效果在哪一部分？
|
||||
|
||||
**生：** CSS！装修部分！
|
||||
|
||||
**师：** 对！所以我们去CSS部分找。背景颜色的英文是什么？你们第1课用AI改过——
|
||||
|
||||
**生：** `background`！
|
||||
|
||||
**师：** Ctrl+F 搜索 `background`，找到了吗？
|
||||
|
||||
（大部分学生举手）
|
||||
|
||||
**师：** 看到那个 `#0a0a1a` 了吗？这就是背景颜色的值。这是"十六进制颜色"的写法，你们不需要记，但要能认出来。
|
||||
|
||||
**学生实践 (13分钟):**
|
||||
|
||||
学生独立完成寻宝清单（可以同桌讨论）：
|
||||
|
||||
| 题号 | 任务 | 提示 |
|
||||
|------|------|------|
|
||||
| 第1题 | ✅ 控制页面背景颜色 | （已完成） |
|
||||
| 第2题 | 找按钮上的文字内容 | 去 `<body>` 部分，搜索"开始"或"游戏" |
|
||||
| 第3题 | 找控制按钮颜色的代码 | CSS部分，搜索 `button` 或 `background` |
|
||||
| 第4题（挑战） | 找计算反应时间的代码 | JS部分，搜索 `time` 或 `Date` |
|
||||
|
||||
**竞赛规则：** 每找到一题，举手报告行号。教师在白板上记录"第一个找到的同学"。
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 有没有学生不知道从哪里搜起 → 先判断属于哪个区域再搜
|
||||
- 有没有学生搜索关键词太宽泛导致结果太多 → 引导缩小关键词
|
||||
- 有没有学生在死读代码而不用Ctrl+F → 提醒用搜索神器
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 寻宝技巧总结——1. 先判断属于哪部分（装修/骨架/电路）；2. 再用Ctrl+F搜关键词。不需要读懂每一行，只需要找到那一行。
|
||||
|
||||
【诊断点：学生能否正确将"视觉效果"归类到CSS，"文字内容"归类到HTML，"点击行为"归类到JS】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**【分段三：手动微调挑战——建立因果感】(15分钟)**
|
||||
|
||||
*本段重点：学生第一次不通过AI直接改代码，建立"改代码→看到效果"的因果链*
|
||||
|
||||
**讲解与演示 (5分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M1: 改代码会弄坏，不敢动
|
||||
- M5: AI改了就行，我不需要看
|
||||
|
||||
**师：** 刚才我们找到了很多东西。现在来做一件更厉害的事——**不通过AI，直接用手改代码！**
|
||||
|
||||
（故意用夸张语气）
|
||||
|
||||
**师：** 但在改之前，先给你们一颗定心丸——
|
||||
|
||||
（教师演示 Ctrl+Z）
|
||||
|
||||
**师：** 看好了。我现在把背景颜色改成一个奇怪的值……
|
||||
|
||||
（将 `#0a0a1a` 改成 `#FF0000`，Ctrl+S保存，在浏览器刷新）
|
||||
|
||||
**师：** 哇，变红色了！现在……我按 Ctrl+Z 撤销——
|
||||
|
||||
（代码恢复，Ctrl+S保存，浏览器刷新，变回原来颜色）
|
||||
|
||||
**师：** **代码有后悔药！** 改错了随时撤销。所以——不要怕改代码。
|
||||
|
||||
（投影展示安全区域）
|
||||
|
||||
```
|
||||
✅ 安全区（随便改，改错了 Ctrl+Z）：
|
||||
颜色值：把 #FF6B6B 改成 #00FF00，或把 red 改成 blue
|
||||
文字内容：把"开始游戏"改成"点我试试"
|
||||
字体大小：把 font-size: 24px 改成 font-size: 32px
|
||||
边框圆角：把 border-radius: 8px 改成 20px
|
||||
|
||||
⚠️ 小心区（改太大可能影响体验）：
|
||||
游戏速度、分数、时间限制等数字参数
|
||||
|
||||
❌ 别碰区（这节课不动）：
|
||||
HTML标签结构（<div>、<button>这些尖括号里的东西）
|
||||
JavaScript的计算逻辑
|
||||
```
|
||||
|
||||
**学生实践 (8分钟):**
|
||||
|
||||
学生独立完成三个手动微调任务（每完成一个，Ctrl+S保存，刷新浏览器验证）：
|
||||
|
||||
**任务A（必做）：** 改变页面背景颜色——用Ctrl+F找到 `background-color`，把颜色值改成你喜欢的颜色。可以写英文色名（如 `purple`、`orange`），也可以随便写一个 `#` 加6个数字字母。
|
||||
|
||||
**任务B（必做）：** 改变按钮文字——找到按钮的文字内容，改成你想要的文字。
|
||||
|
||||
**任务C（选做）：** 改变某个元素的字体大小——找到一个 `font-size`，把数字调大或调小，看效果。
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 是否能成功保存（Ctrl+S）
|
||||
- 是否知道要刷新浏览器（部分学生会忘记刷新）
|
||||
- 是否有学生改了HTML结构导致显示异常（立刻演示Ctrl+Z救场）
|
||||
|
||||
**关键"哇"时刻捕捉：** 当学生第一次直接改代码、按Ctrl+S、刷新浏览器看到变化时——教师要放大这个瞬间：
|
||||
|
||||
**师：** XXX同学，你刚才是怎么做到的？（让学生自己说出来，强化成就感）
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 你们刚才没有告诉AI要改什么，直接改了代码，看到了变化。这就是"直接控制代码"。**AI帮你做大的事，你来调小的细节。**
|
||||
|
||||
【诊断点：学生是否建立了"改代码→保存→刷新→看效果"的完整操作循环】【应用层】
|
||||
|
||||
---
|
||||
|
||||
**【分段四：AI+手动混合开发——自由创作】(15分钟)**
|
||||
|
||||
*本段重点：用AI生成新项目+手动精调细节，体验"混合开发"的工作方式*
|
||||
|
||||
**讲解与演示 (3分钟):**
|
||||
|
||||
**预设误概念：**
|
||||
- M5: 要么全靠AI，要么全靠自己
|
||||
|
||||
**师：** 最后一个环节——自由创作。流程是这样的：
|
||||
|
||||
（投影展示流程图）
|
||||
|
||||
```
|
||||
第一步：用AI生成一个新的小项目（2-3分钟）
|
||||
↓
|
||||
第二步：在浏览器里试玩，找出想改的地方（1分钟）
|
||||
↓
|
||||
第三步：用寻宝法定位那段代码（2分钟）
|
||||
↓
|
||||
第四步：手动改颜色/文字/数值，保存，刷新验证（5分钟）
|
||||
↓
|
||||
第五步（可选）：再告诉AI做更大的修改
|
||||
```
|
||||
|
||||
**师：** 项目主题你们自己决定。小游戏（猜数字、打地鼠、点击计分）、工具（倒计时、随机选择器）、创意页面（个人名片、生日贺卡）都可以。
|
||||
|
||||
**师：** 提示词模板——
|
||||
|
||||
```
|
||||
帮我做一个[项目类型]，功能要求：
|
||||
1. [功能1]
|
||||
2. [功能2]
|
||||
所有代码放在单个 index.html 文件里，HTML/CSS/JS都写在这一个文件中。
|
||||
```
|
||||
|
||||
**学生实践 (10分钟):**
|
||||
|
||||
学生自由选主题，用AI生成后完成以下步骤：
|
||||
|
||||
1. 生成项目，在浏览器中测试
|
||||
2. 用Ctrl+F找到 `<style>`、`<body>`、`<script>` 三部分边界
|
||||
3. 找到至少两处想改的地方，手动修改
|
||||
4. 能说出：我改了什么，在哪一部分
|
||||
|
||||
（教师走动观察，重点关注：）
|
||||
- 项目提示词是否符合单文件规范
|
||||
- 学生是否卡在"代码太长找不到边界" → 提醒用Ctrl+F
|
||||
- 是否有学生误改了JS逻辑导致功能失效 → 引导Ctrl+Z并讨论"这在哪一部分"
|
||||
|
||||
**进度同步 (2分钟):**
|
||||
|
||||
**师：** 很多同学已经在手动改了。有人改了颜色，有人改了文字，有人已经在问AI要新功能——很好！这就是今天的目标：**AI做大框架，你来精调细节。**
|
||||
|
||||
【诊断点：学生是否能将"我想改这个效果"翻译成"我去哪一部分找代码"】【分析层】
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟**
|
||||
|
||||
*本幕目标：通过Bug诊断练习巩固三区域认知，展示成果*
|
||||
|
||||
**成果展示 + Bug诊断练习 (6分钟)**
|
||||
|
||||
**师：** 今天学了寻宝和手动改代码。现在来做一个诊断练习——我说一个现象，你告诉我应该去代码的**哪一部分**找问题。
|
||||
|
||||
```
|
||||
Bug 1："按钮点击了没反应，分数没变化"
|
||||
→ 在哪找？（答：<script> JavaScript 电路部分）
|
||||
|
||||
Bug 2："页面出来了，但背景全是白色，按钮也是灰色"
|
||||
→ 在哪找？（答：<style> CSS 装修部分）
|
||||
|
||||
Bug 3："页面打开是空白的，什么都看不见"
|
||||
→ 在哪找？（答：<body> HTML 骨架部分）
|
||||
```
|
||||
|
||||
**师：** 这就是今天最重要的收获——以后遇到问题，先判断：是"看起来不对"（CSS），"少了东西"（HTML），还是"点了没反应"（JavaScript）。
|
||||
|
||||
**互评与讨论 (4分钟)**
|
||||
|
||||
**师：** 谁来说说今天的收获？
|
||||
|
||||
（引导学生总结三个关键点）
|
||||
|
||||
**师：** 最后一件事——把你手动改过的那段代码，告诉旁边同学：你改了什么，在哪一部分，什么效果。
|
||||
|
||||
（两两分享，1分钟）
|
||||
|
||||
【诊断点：学生能否用"HTML/CSS/JS"框架来描述bug或自己的改动】【分析层】
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟**
|
||||
|
||||
*本幕目标：巩固今天成果，布置手动改代码的课外任务*
|
||||
|
||||
**抽象总结 (3分钟)**
|
||||
|
||||
**师：** 今天你们做到了一件厉害的事——不通过AI，直接改了代码。代码不是只有程序员才能动的东西。
|
||||
|
||||
（板书/投屏）
|
||||
|
||||
```
|
||||
代码三部分：
|
||||
<style> = 装修（颜色、大小、位置）
|
||||
<body> = 骨架（标题、按钮、图片）
|
||||
<script> = 电路（点击、计算、逻辑）
|
||||
|
||||
寻宝三步法：
|
||||
① 判断属于哪部分
|
||||
② Ctrl+F 搜关键词
|
||||
③ 找到那一行
|
||||
|
||||
改代码操作循环：
|
||||
修改 → Ctrl+S 保存 → 刷新浏览器 → 验证效果
|
||||
改错了？→ Ctrl+Z 撤销
|
||||
```
|
||||
|
||||
**5分钟挑战发布 + 下节预告 (2分钟)**
|
||||
|
||||
**师：** 本周课外小挑战：
|
||||
|
||||
> **5分钟AI挑战：手动改造挑战**
|
||||
> 找到你今天或以前做的任何一个项目（index.html文件）：
|
||||
> 1. 用 Ctrl+F 找到三个标签，写下各在哪一行
|
||||
> 2. 找到三处想改的地方，手动改掉，每次改完 Ctrl+S + 刷新
|
||||
> 3. 截图发到群里，写一句："我改了XX，在[HTML/CSS/JS]部分"
|
||||
>
|
||||
> **评价标准：**
|
||||
> - 基础：成功手动改了一处，截图证明
|
||||
> - 进阶：改了三处，能说出每处在哪个部分
|
||||
> - 挑战：用Bug描述格式写一个你项目里的问题
|
||||
|
||||
**师：** 第5课开始，我们就和03路线的同学合流了。你们已经掌握了Trae操作、提示词工程、完整作品开发、代码审查——这些都是03路线的同学也在学的。合流之后，我们一起做更大更有趣的项目！
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师提示词模板：**
|
||||
|
||||
情景1：快速生成适合课堂演示的项目（三部分结构清晰）
|
||||
```
|
||||
帮我生成一个适合小学高年级演示的反应力测试小游戏，要求：
|
||||
1. 功能：屏幕随机出现彩色圆圈，玩家点击后显示反应时间（毫秒）
|
||||
2. 界面简洁，有"开始"按钮和反应时间显示
|
||||
3. 所有代码放在单个 index.html 文件里
|
||||
4. <style>、<body>、<script> 结构清晰，三部分之间加注释标记
|
||||
```
|
||||
|
||||
情景2：帮学生定位代码（不修改，只定位）
|
||||
```
|
||||
以下是一段 index.html 代码。学生想找"控制[具体效果]的代码在哪里"。
|
||||
请告诉我：
|
||||
1. 在哪一部分（HTML/CSS/JS）
|
||||
2. 大概在哪个标签或关键词附近
|
||||
3. 用一句话解释那段代码做什么
|
||||
不要修改代码，只需要定位和解释。
|
||||
[粘贴代码]
|
||||
```
|
||||
|
||||
情景3：学生改坏了代码，急救
|
||||
```
|
||||
以下代码出了问题：[粘贴代码]
|
||||
现象是：[描述]
|
||||
请找出问题在哪一部分（HTML/CSS/JS），只修复这一个问题，不改其他地方。
|
||||
```
|
||||
|
||||
**学生提示词模板：**
|
||||
|
||||
生成新项目：
|
||||
```
|
||||
帮我做一个[项目名称]，功能要求：
|
||||
1. [功能1]
|
||||
2. [功能2]
|
||||
界面要求：[颜色风格/布局]
|
||||
所有代码放在单个 index.html 文件里，HTML/CSS/JS都在一个文件中。
|
||||
```
|
||||
|
||||
手动改完一部分，让AI改另一部分：
|
||||
```
|
||||
这是我的 index.html 代码：[粘贴代码]
|
||||
我已经手动把[XX]改成了[YY]。
|
||||
现在请帮我：[具体需求]
|
||||
注意：不要改我已经改过的[XX]部分。
|
||||
```
|
||||
|
||||
Bug报告模板（养成习惯）：
|
||||
```
|
||||
我的项目出现了一个问题：
|
||||
现象：[具体描述]
|
||||
我猜问题在：[HTML/CSS/JavaScript]部分
|
||||
代码是：[粘贴代码]
|
||||
请找出原因并修复。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**技术备注（教师备课知识补充）：**
|
||||
|
||||
1. **保存与刷新**：学生改完代码后必须 Ctrl+S 保存，再切到Chrome刷新（F5或Ctrl+R）。部分学生会忘记刷新，看不到变化误以为改错了。
|
||||
2. **颜色值写法**：
|
||||
- 英文色名：`red`、`blue`、`green` 等约140个
|
||||
- 十六进制：`#FF6B6B`（粉红）、`#4ECDC4`（青绿）——学生觉得神秘但好用
|
||||
- RGB函数：`rgb(255, 107, 107)` —— 遇到时简单解释即可
|
||||
3. **好看的颜色参考表**（课堂投影用）：
|
||||
```
|
||||
#FF6B6B 暖红色 #4ECDC4 清新青绿
|
||||
#45B7D1 天蓝色 #96CEB4 薄荷绿
|
||||
#FFEAA7 奶油黄 #DDA0DD 薰衣草紫
|
||||
#2D3436 深灰黑 #6C5CE7 亮紫色
|
||||
```
|
||||
4. **Ctrl+Z撤销的边界**：Trae的撤销历史有限（通常几十步）。建议课前把演示素材文件备份一份。
|
||||
5. **文件路径**：双击 index.html 默认用Chrome打开时路径是 `file:///C:/...`，这是正常的。
|
||||
|
||||
**学生弹性边界——手动修改安全清单：**
|
||||
|
||||
```
|
||||
✅ 安全改（随便改，改错了Ctrl+Z）：
|
||||
颜色值（background-color、color、border-color等）
|
||||
文字内容（按钮文字、标题文字、提示语）
|
||||
字体大小（font-size的数字，px单位不要改）
|
||||
间距（margin、padding的数字）
|
||||
边框圆角（border-radius的数字）
|
||||
背景渐变的颜色部分
|
||||
|
||||
⚠️ 小心改（可以改，但改太大可能影响体验）：
|
||||
游戏速度参数（setTimeout里的数字）
|
||||
分数倍率（score += 10里的10）
|
||||
时间限制（timeLeft = 30里的30）
|
||||
动画时长（transition: 0.3s里的0.3）
|
||||
|
||||
❌ 别碰（本课不动，以后学）：
|
||||
HTML标签结构（<div>、<button>的开合标签）
|
||||
HTML标签的class和id属性
|
||||
JavaScript的函数名、变量名
|
||||
JavaScript的运算符和逻辑判断（if/else、===等）
|
||||
```
|
||||
|
||||
**常见问题 FAQ：**
|
||||
|
||||
| 学生问题 | 建议回答 |
|
||||
|---------|---------|
|
||||
| "改了HTML结构页面乱了，Ctrl+Z撤不回来" | 从备份文件复制覆盖即可。"这就是为什么建议只在安全区操作" |
|
||||
| "项目太简单只有几行，找不到三部分" | 好机会！"这个文件只有HTML，连CSS和JS都没有。如果要加交互，我们要去哪加？" |
|
||||
| "代码太长，几百行看不过来" | "不需要读完。找三个边界标签，然后Ctrl+F搜关键词。越长越需要寻宝技巧" |
|
||||
| "JS里那些花括号是什么" | "是函数的写法，像一个任务包。今天不需要读懂，只知道那是'当XX发生时做YY'的逻辑" |
|
||||
| "改了JS里的数字，游戏逻辑异常了" | "来看看你改了什么。这个数字参与计算，不只是显示。Ctrl+Z撤回来" |
|
||||
| "为什么AI生成的代码每次不一样" | "AI每次重新创作，像你每次画的画不一样。所以我们要会看代码，不管AI怎么写都能找到想改的地方" |
|
||||
|
||||
**备课体验任务清单：**
|
||||
|
||||
- [ ] 打开演示项目，记录三部分起止行号
|
||||
- [ ] Ctrl+F 搜索 `<style`、`<body`、`<script`，验证定位
|
||||
- [ ] 手动改背景颜色，保存刷新验证，再改回来
|
||||
- [ ] 手动改按钮文字，保存刷新验证，再改回来
|
||||
- [ ] 故意改错误值（如 `reddd`），验证浏览器不会崩溃
|
||||
- [ ] 演练 Ctrl+Z 多步撤销
|
||||
- [ ] 用AI生成新项目，完整走一遍"生成→定位三部分→手动改两处→验证"
|
||||
- [ ] 准备备份文件
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周任务：**
|
||||
|
||||
> **"手动改造挑战"**
|
||||
>
|
||||
> **操作步骤：**
|
||||
> 1. 找到你今天或以前做的任何一个项目（index.html文件）
|
||||
> 2. 用 Ctrl+F 找到 `<style>`、`<body>`、`<script>` 三个标签，记下大概行号
|
||||
> 3. 在代码里找到三处想改的地方（在安全区里），手动改掉
|
||||
> 4. 每次改完 Ctrl+S 保存，刷新浏览器看效果
|
||||
> 5. 截图发到群里，写一句："我改了XX，在[HTML/CSS/JS]部分，把XX改成了YY"
|
||||
>
|
||||
> **加分挑战（选做）：**
|
||||
> 用Bug描述格式描述你项目里的一个问题：
|
||||
> ```
|
||||
> 现象：[具体描述]
|
||||
> 我猜在[HTML/CSS/JS]部分
|
||||
> 因为：[你的推断]
|
||||
> ```
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**进阶挑战（适合学有余力的学生）：**
|
||||
|
||||
**挑战一：三色注释法**
|
||||
> 在你的 index.html 三个部分开头各加一行注释，标注这是什么区域：
|
||||
> - CSS区域：`/* ===== 装修区 (CSS) ===== */`
|
||||
> - HTML区域：`<!-- ===== 骨架区 (HTML) ===== -->`
|
||||
> - JS区域：`// ===== 电路区 (JavaScript) =====`
|
||||
> 加完后以后再打开这个文件，就能一眼看到三个区域。
|
||||
|
||||
**挑战二：Bug侦探**
|
||||
> 以下三段代码各有一个问题，找出来并说明怎么改：
|
||||
>
|
||||
> 片段1（CSS拼写问题）：`background-colour: #FF6B6B;` → 哪里错了？
|
||||
> 片段2（HTML标签问题）：`<button>开始游戏<button>` → 哪里错了？
|
||||
> 片段3（数值实验）：`border-radius: 50%;` 加在一个正方形div上会变成什么形状？
|
||||
|
||||
**挑战三：给朋友讲解**
|
||||
> 用你自己的话，向一个完全不懂代码的同学解释：
|
||||
> - HTML、CSS、JavaScript分别是什么？（用房子比喻或你自己的比喻）
|
||||
> - 如果页面按钮点击没反应，应该去代码哪一部分找？为什么？
|
||||
Reference in New Issue
Block a user