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