---
课时: 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：互评改造**
> 和一个同学交换作品，以对方的作品为基础加一个新功能。写完了给他看，听反馈——这是最接近真实软件协作的体验。