21 KiB
课时, 主题, 核心能力, 核心工具, 时长, 透明化层级, 适用路线
| 课时 | 主题 | 核心能力 | 核心工具 | 时长 | 透明化层级 | 适用路线 | |||
|---|---|---|---|---|---|---|---|---|---|
| 3 | 我的第一个Web作品 |
|
|
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——另一个方向的完整作品（展示多样性，如番茄钟或问答） - 需求拆解工作纸（三栏：必须有 / 最好有 / 以后再加）——投影展示即可
- 学生资源：无需提前准备
教师备课体验任务：
备课前，教师必须亲自完成以下操作：
- 用 Trae 完整做一遍
demo_good.html，记录用了几轮迭代、遇到了什么问题- 故意写模糊提示词（如"帮我做个游戏"），感受AI随机发挥的结果
- 测试"保留原有功能，只修改XX"这类提示词是否有效
- 预想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挑战：让家人当你的"用户"
- 回家后把你的 index.html 打开给家人看
- 让他们自己用，你不要帮忙操作
- 观察他们在哪里卡住或有疑惑
- 记下来一条反馈
评价标准：
- 基础：给家人展示了你的作品
- 进阶：记录了一条具体反馈（"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. 教师指南
技术备注（教师备课知识补充）：
- 文件保存路径：确保学生把 index.html 保存在固定文件夹里，不要散放桌面。建议每人在桌面建以自己名字命名的文件夹。
- Chrome打开方式：双击 index.html 默认用Chrome打开即可。不需要本地服务器。
- Trae代码不完整：Trae有时只给代码片段。让学生追问"请给出完整的 index.html 文件内容，不要省略"。
- 代码太长AI中途停了：让学生说"请继续，从上次停止的位置继续输出"。
- 版本管理：建议每轮迭代前把当前版本另存一份（复制 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挑战
本周任务：
"让家人当你的用户"
操作步骤：
- 回家后打开你的 index.html，给家里一个大人看
- 让他们自己用，你不要帮忙操作
- 观察他们在哪里卡住或说"这是什么意思"
- 记下来一条反馈
下节课带来： 你听到的一条反馈，以及你打算怎么用这条反馈改进作品
追加挑战（选做）： 根据家人反馈自己再改一轮，下节课展示改进前后对比
8. 拓展任务
进阶挑战（适合学有余力的学生）：
Level 1：功能拓展
选一个"以后再加"的功能，自己尝试加进去。提示词要说清楚：现在有什么，要加什么，保留什么。
Level 2：主题切换
给你的作品增加"主题切换"功能：比如白天/夜晚模式。提示AI帮你加一个按钮，点击后切换整体配色。
Level 3：作品说明书
在你的页面里加一个"关于"按钮，点击后显示一个弹窗，介绍这个作品是做什么的、怎么用、有哪些功能。
Level 4：互评改造
和一个同学交换作品，以对方的作品为基础加一个新功能。写完了给他看，听反馈——这是最接近真实软件协作的体验。