712 lines
44 KiB
Markdown
712 lines
44 KiB
Markdown
---
|
||
课时: 9
|
||
主题: 需求驱动工具开发
|
||
核心能力: [拆解力, 共创力]
|
||
核心工具: [穹狼 Code / Trae]
|
||
时长: 90分钟
|
||
透明化层级: 过程层
|
||
适用路线: 共享
|
||
---
|
||
|
||
### 1. 课程目标
|
||
|
||
**知识目标：**
|
||
- 理解"工具"和"游戏"的本质区别：工具的核心是"解决问题"，游戏的核心是"制造快乐"
|
||
- 理解"需求发现"的方法：从自己生活中找到"不方便"或"费时间"的真实痛点
|
||
- 知道"用户思维"的基本含义：你的工具是给谁用的，他们最需要什么功能
|
||
|
||
**能力目标：**
|
||
- 能从日常生活中识别至少3个"不方便"的场景，并选择一个作为工具开发方向（拆解力）
|
||
- 能将真实需求转化为结构化的工具需求文档，明确"解决什么问题、给谁用、核心功能"（拆解力）
|
||
- 能将需求文档交给AI完成核心功能开发，并以"是否真的解决了问题"为标准验收（共创力）
|
||
|
||
**情感目标：**
|
||
- 建立"编程不只是好玩，还能好用"的认知升级——从娱乐导向到价值导向
|
||
- 感受"我做的东西真的能帮到人"的成就感——超越自嗨，创造实际价值
|
||
- 激发"发现问题就是发现机会"的产品嗅觉——生活中的不方便就是创造的起点
|
||
|
||
---
|
||
|
||
### 2. 核心概念与误概念预设
|
||
|
||
**核心概念认知层级：**
|
||
|
||
| 概念 | 学生类比 | 认知层级 |
|
||
|------|---------|---------|
|
||
| 工具 vs 游戏 | 游戏像游乐园——去了就是为了开心；工具像书包——帮你装东西、解决问题 | 识别层→理解层 |
|
||
| 需求发现 | 就像医生看病——先问"哪里不舒服"，再开药方。做工具也是先找"哪里不方便"，再做解决方案 | 理解层→应用层 |
|
||
| 用户思维 | 你给自己做鞋和给姚明做鞋，尺码完全不一样——做工具也要先想清楚"给谁用" | 应用层 |
|
||
| 核心功能聚焦 | 瑞士军刀什么都能干但什么都不好使，一把好剪刀只干一件事但干得特别好 | 应用层→迁移层 |
|
||
|
||
**典型误概念表：**
|
||
|
||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||
|------|--------|---------|---------|
|
||
| M1 | **工具就是无聊的东西，没有游戏好玩** | 好工具用起来甚至比游戏更"爽"——因为它真的帮你解决了麻烦事。想想你用计算器算出答案那一刻的感觉 | 展示一个"好用到停不下来"的工具案例，让学生体会"解决问题的快感" |
|
||
| M2 | **我的生活里没有什么不方便的** | 每个人都有不方便的事情，只是你习惯了。比如每天整理书包要想半天带什么书、记不住朋友的生日、不知道零花钱花到哪了 | 用"不方便清单"引导法，从具体场景逐步唤醒真实需求 |
|
||
| M3 | **工具要做得很复杂才有用** | 最好的工具只解决一个问题，但解决得很彻底。微信红包只干一件事——发红包，但人人都爱用 | 对比"功能很多但很难用"和"功能简单但一下就解决问题"的两个工具 |
|
||
| M4 | **做工具跟做游戏方法完全不同** | 开发流程是一样的：需求→设计→开发→验收。只是思考方向不同——游戏问"好不好玩"，工具问"有没有用" | 并排展示游戏需求文档和工具需求文档的相似结构 |
|
||
| M5 | **AI做出来的工具肯定能直接用** | AI做的工具需要你用"真实场景"去验收——拿真实数据试一遍，看看是不是真的解决了你的问题 | 让学生用自己的真实数据测试AI生成的工具，发现实际使用中的问题 |
|
||
|
||
---
|
||
|
||
### 3. 教学准备
|
||
|
||
**工具与环境：**
|
||
- AI编程工具（穹狼 Code / Trae，每位学生已在前几课完成配置）
|
||
- DeepSeek模型（慢思考模型，用于工具核心功能开发）
|
||
- 教师演示电脑+投影
|
||
- 每人一张"不方便清单"工作纸（打印版，见下方模板）
|
||
- 每人一张"工具需求文档"模板（打印版，复用第7课模板并做工具化改编）
|
||
|
||
**教学资源：**
|
||
- 教师准备：一个课前做好的示范工具（"作业倒计时器"，含完整开发过程截图）
|
||
- 教师准备：3-4个"学生痛点场景"的短描述卡（投影用）
|
||
- 教师准备：一个"无聊的工具"反面案例（功能多但不解决真实问题的工具）
|
||
|
||
**教师备课体验任务：**
|
||
> 备课前，教师必须亲自完成以下操作：
|
||
> 1. 自己做一遍"不方便清单"——列出自己生活中至少5个不方便的事情，选一个做成工具
|
||
> 2. 用工具需求文档模板写一份完整的需求文档（建议做"作业倒计时器"）
|
||
> 3. 把需求文档交给AI开发，记录AI的产出质量和需要修改的地方
|
||
> 4. 用真实场景测试这个工具——设一个真实的倒计时试试，看能不能真的提醒你
|
||
> 5. 准备一个"功能多但不好用"的反面案例：让AI做一个"什么都能干的超级工具"，展示它什么都做不好
|
||
|
||
---
|
||
|
||
### 4. 教学流程
|
||
|
||
**第一幕：联系 (Connect) — 10分钟** 🔗
|
||
|
||
**【环节】上节课回顾 (3分钟)**
|
||
|
||
**师：** 上节课我们做了一件很专业的事——把自己的游戏从"能玩"打磨成了"好玩又好看"的版本，有些同学甚至做出了可以分享给朋友的作品。谁还记得，上节课你主要改善了游戏的哪个方面？【诊断点：检测"产品打磨"概念的保持度】【识别层】
|
||
|
||
**【分支A】若学生说出"改了界面""加了动画""调了难度"：**
|
||
**师：** 对！你们学会了把产品从"能用"打磨到"好用"。界面美化、难度平衡、反馈优化——这些都是在提升"用户体验"。那我问你们一个新问题——到目前为止，我们做的所有项目，有一个共同点，你们发现了吗？
|
||
|
||
**【分支B】若学生记忆模糊：**
|
||
**师：** 我来提醒一下。上节课我们做了三件事：让游戏更好看（界面美化）、让游戏更好玩（难度平衡）、让游戏更"有感觉"（胜利/失败反馈）。这些统称"用户体验优化"。好！今天我要问你们一个全新的问题——
|
||
|
||
**【分支C】若有学生缺课：**
|
||
**师：** 没关系！简单说，前面几节课我们一直在做游戏——从一句话做出游戏，到给游戏加功能，再到设计文档、美化打磨。今天，我们要做一件完全不同的事情！
|
||
|
||
**【环节】情景导入 (7分钟)**
|
||
|
||
**师：** 我先问大家一个问题——从第5课到第8课，我们做的都是什么类型的东西？
|
||
|
||
**生：** 游戏！
|
||
|
||
**师：** 对，全是游戏！做游戏好不好玩？
|
||
|
||
**生：** 好玩！
|
||
|
||
**师：** 确实好玩。但今天我想让你们想一件事——【在白板上写两个大字】
|
||
|
||
```
|
||
好玩 vs 好用
|
||
```
|
||
|
||
**师：** 我来讲一个真实的故事。上个学期有个同学，他做了一个特别酷的打地鼠游戏，动画流畅、音效带感、还有排行榜。但有一天他跟我说："老师，我每天做作业都拖到很晚，因为我不知道时间过了多久，一不小心就在一道题上磨了半小时。" 我说："你不是会AI编程吗？你怎么不做一个'作业倒计时器'呢？每道题设个时间，到了就提醒你，不就解决了吗？" 他愣了一下说："对哦，我怎么没想到！"
|
||
|
||
**师：** 你们发现问题了吗？他会做酷炫的游戏，但面对自己真实的烦恼——"作业拖太久"——他居然没想到用编程来解决！这就是今天这节课的核心——**从"好玩"到"好用"。** 【诊断点：探测学生是否理解"编程可以解决生活中的实际问题"】【理解层】
|
||
|
||
**师：** 游戏是做给别人"玩"的，目标是让人开心。工具是做给自己或别人"用"的，目标是——
|
||
|
||
**【分支A】若学生说出"解决问题""帮忙做事"：**
|
||
**师：** 一针见血！工具的核心就是"解决问题"。做游戏问的是"好不好玩"，做工具问的是"有没有用"。今天你们就要做一个真正有用的东西！
|
||
|
||
**【分支B】若学生说"让事情变方便"：**
|
||
**师：** 非常好！"方便"就是工具的灵魂。任何让你的生活变得更方便的东西，都是好工具。今天你就要找到一个"不方便"，然后用AI帮你把它变"方便"！
|
||
|
||
**【分支C】若学生沉默或说不清楚：**
|
||
**师：** 我举个例子。你的书包是工具——它解决了"怎么把书带到学校"的问题。你的铅笔盒是工具——它解决了"笔到处乱放找不到"的问题。工具的使命就是——让麻烦事变简单！今天你们要用AI编程做一个这样的东西。
|
||
|
||
---
|
||
|
||
**第二幕：建构 (Construct) — 65分钟** 🛠️
|
||
|
||
**【分段一：需求猎人——从生活中找"不方便"】(15分钟)** ✨
|
||
|
||
**预设误概念：**
|
||
- M2：我的生活里没有什么不方便的
|
||
- M1：工具就是无聊的东西
|
||
- M3：工具要做得很复杂才有用
|
||
|
||
**讲解与演示 (Teach & Demo): (5分钟)**
|
||
|
||
**师：** 做工具的第一步，不是打开AI编程工具，而是——找到一个"不方便"。专业的说法叫"需求发现"。听起来很高大上？其实很简单——就是找你生活中让你觉得"烦""费时间""总忘记"的事情。
|
||
|
||
**师：** 我来教你们一个方法——"场景扫描法"。我把你一天的生活分成几个场景，你在每个场景里想想有没有"不方便"的事：【投影展示】
|
||
|
||
```
|
||
🌅 早上起床：闹钟、穿衣、整理书包...
|
||
📚 上学路上：带没带东西、今天什么课...
|
||
✏️ 上课/做作业：记笔记、错题、时间管理...
|
||
🏠 回家之后：安排时间、练琴练字、读书...
|
||
🎂 社交生活：朋友生日、约好的事、借还东西...
|
||
💰 零花钱：花了多少、还剩多少、存钱目标...
|
||
```
|
||
|
||
**师：** 我来示范。我扫描"做作业"这个场景——不方便的事有：不知道每道题花了多少时间、容易在一道题上磨太久、做完后不知道哪些题做错了需要复习。三个不方便！每一个都可以做成一个工具。
|
||
|
||
**师：** 再看"社交生活"——我老是忘记朋友的生日，等看到朋友圈才想起来"啊今天是他生日！"如果有个工具能提前提醒我，那该多好？
|
||
|
||
**师：** 注意——你不需要找很大的问题。越小越具体的问题，越容易做成好工具！"忘记朋友生日"比"想让生活更美好"具体一万倍。【诊断点：学生能否区分"具体需求"和"模糊愿望"】【理解层】
|
||
|
||
**学生实践 (Practice): (7分钟)**
|
||
|
||
**师：** 现在拿出"不方便清单"工作纸。按照六个场景，每个场景至少写一个你觉得"不方便"或"费时间"的事情。写得越具体越好！
|
||
|
||
```
|
||
不方便清单
|
||
┌──────────────────────────────────────────┐
|
||
│ 场景1·早上起床： │
|
||
│ ________________________________________│
|
||
│ 场景2·上学/课间： │
|
||
│ ________________________________________│
|
||
│ 场景3·做作业/学习： │
|
||
│ ________________________________________│
|
||
│ 场景4·回家之后： │
|
||
│ ________________________________________│
|
||
│ 场景5·社交/朋友： │
|
||
│ ________________________________________│
|
||
│ 场景6·零花钱/物品管理： │
|
||
│ ________________________________________│
|
||
│ │
|
||
│ 我选的那个"不方便"： │
|
||
│ ________________（圈出来！） │
|
||
│ │
|
||
│ 一句话描述：谁，在什么场景下，遇到了 │
|
||
│ 什么不方便？ │
|
||
│ ________________________________________│
|
||
└──────────────────────────────────────────┘
|
||
```
|
||
|
||
**师：** 五分钟写清单，两分钟选一个你最想解决的，圈出来！选的标准是——
|
||
|
||
1. 你自己真的被这个问题烦过
|
||
2. 这个问题发生的频率够高（不是一年才遇到一次）
|
||
3. 你能想象出"如果有个工具帮我，那该多好"
|
||
|
||
开始！
|
||
|
||
【教师巡场观察，重点关注：】
|
||
- 是否有学生说"我没有不方便的事"（M2的表现）→ 过去聊天引导："你今天早上整理书包花了多久？有没有忘带过东西？"
|
||
- 是否有学生写得太模糊（如"学习不好"）→ 追问："具体是什么不方便？是记不住单词？还是找不到错题？"
|
||
- 是否有学生选了一个太大的问题（如"想让成绩变好"）→ 引导缩小："成绩不好可能有很多原因。你觉得最烦的一个小问题是什么？"
|
||
- 是否有学生选了一个很独特的问题 → 鼓励："这个问题很有意思！你是第一个发现的！"
|
||
|
||
**进度同步 (Checkpoint): (3分钟)**
|
||
|
||
**师：** 好！时间到。谁来分享你选的那个"不方便"？用一句话说：谁，在什么场景下，遇到了什么不方便。【诊断点：学生的需求是否具体且真实——不是编出来的，而是自己真的经历过】【应用层】
|
||
|
||
【请3-4位学生分享】
|
||
|
||
**【分支A】若学生说出了很具体的痛点（如"我每次练钢琴不知道练了多久，总是练太短或者练太久"）：**
|
||
**师：** 这就是一个绝佳的工具需求！你的问题很具体——"练琴时间不确定"。一个简单的"练琴计时器"就能解决！越具体的问题越容易做成好工具。
|
||
|
||
**【分支B】若学生的描述还比较模糊（如"我觉得做作业很烦"）：**
|
||
**师：** "做作业很烦"——那是烦什么呢？是不知道先做哪科？还是做太久没人提醒？还是做错了没地方记？你越往深想，就越能找到一个具体的"不方便"。
|
||
|
||
**【分支C】若有学生说"我想做一个游戏工具"（混淆了工具和游戏）：**
|
||
**师：** 等一下——"游戏工具"是帮你玩游戏的工具，还是一个好玩的工具？今天我们的目标是做"解决问题"的工具。你的工具要解决什么问题？想清楚这个，其他的自然就来了。
|
||
|
||
**师：** 太好了！每个人都找到了一个真实的"不方便"。接下来我们要把这个"不方便"变成一份设计图纸！
|
||
|
||
---
|
||
|
||
**【分段二：工具设计——从"不方便"到需求文档】(15分钟)** ✨
|
||
|
||
**预设误概念：**
|
||
- M4：做工具跟做游戏方法完全不同
|
||
- M3：工具要做得很复杂才有用
|
||
- M5：AI做出来的工具肯定能直接用
|
||
|
||
**讲解与演示 (Teach & Demo): (5分钟)**
|
||
|
||
**师：** 你们还记得第7课写的"一页纸需求文档"吗？做工具也需要一份。但做工具的需求文档跟做游戏有一个关键区别——游戏的核心是"核心循环"（为什么想继续玩），工具的核心是"核心场景"（在什么情况下用、怎么用、用完解决了什么问题）。
|
||
|
||
**师：** 我来展示工具版的需求文档模板——
|
||
|
||
【投屏展示模板】
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────┐
|
||
│ 工具需求文档（一页纸版） │
|
||
│ │
|
||
│ 工具名称：______________________ │
|
||
│ │
|
||
│ 解决什么问题？ │
|
||
│ "我/____（谁）在____（什么场景）时， │
|
||
│ 总是会____（什么不方便）， │
|
||
│ 如果有一个工具能____（怎么帮忙），就好了" │
|
||
│ │
|
||
│ 目标用户：这个工具做给谁用？ │
|
||
│ □ 我自己 □ 我和同学 □ 我的家人 □ 其他____ │
|
||
│ │
|
||
│ 核心功能（Must Have·今天必须做完的）： │
|
||
│ □ ______________________ │
|
||
│ □ ______________________ │
|
||
│ □ ______________________ │
|
||
│ │
|
||
│ 加分功能（Nice to Have·做完核心再加的）： │
|
||
│ □ ______________________ │
|
||
│ □ ______________________ │
|
||
│ │
|
||
│ 验收标准：用真实数据试一遍，问自己—— │
|
||
│ "这个工具真的解决了我的问题吗？" │
|
||
│ │
|
||
│ 视觉风格：□简洁 □可爱 □科技感 □其他____ │
|
||
│ │
|
||
└──────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**师：** 我来填一个示范。我选的"不方便"是"做作业时不知道花了多少时间"——
|
||
|
||
- **工具名称：** 作业倒计时器
|
||
- **解决什么问题：** "我在做作业时，总是会在一道题上磨太久不知不觉过了半小时，如果有一个工具能帮我设定每道题的时间限制并到时提醒，就好了"
|
||
- **目标用户：** 我自己（和做作业爱拖延的同学）
|
||
- **核心功能（Must Have）：** ①能设定倒计时分钟数 ②大字显示剩余时间 ③时间到了有明显提醒（屏幕变色+文字提示）
|
||
- **加分功能（Nice to Have）：** 记录每次用了多少时间、暂停/继续按钮
|
||
- **验收标准：** 设一个5分钟倒计时，做一道题试试，看到时间会不会准确提醒我
|
||
- **视觉风格：** 简洁
|
||
|
||
**师：** 注意两个关键点——
|
||
|
||
**第一：** 核心功能只写了3个！不贪心。一个好的倒计时器，只要能设时间、能显示、能提醒，就已经解决问题了。这就是我们第6课学的 Must Have 优先！
|
||
|
||
**第二：** 验收标准不是"能跑就行"——而是"用真实场景试一遍"。做作业倒计时器，你就真的拿它来计时做一道题！不是打开看一眼就算通过。【诊断点：学生是否理解"工具验收=解决了真实问题"】【理解层】
|
||
|
||
**学生实践 (Practice): (8分钟)**
|
||
|
||
**师：** 现在每个人填写你的工具需求文档。最重要的是前两项——"解决什么问题"和"核心功能"。
|
||
|
||
如果你还不确定做什么工具，这里有一些方向参考——
|
||
|
||
```
|
||
📝 学习类：作业倒计时器、错题记录本、单词速记卡、课程表生成器
|
||
🎂 社交类：生日提醒器、借还物品记录、值日表生成器
|
||
💰 生活类：零花钱记账本、每日打卡器、读书计划表
|
||
📦 管理类：书包整理清单、文具借还记录、收藏品目录
|
||
```
|
||
|
||
但最好是做你自己"不方便清单"上选的那个——因为那是你真正的需求！
|
||
|
||
给大家8分钟。写完后跟旁边同学互相看一下，问对方一个问题："如果你是用户，你最需要哪个功能？"
|
||
|
||
开始！
|
||
|
||
【教师巡场观察，重点关注：】
|
||
- 是否有学生在"解决什么问题"处写得太模糊 → 用脚手架句式引导："你在____的时候，总是会____，如果有工具能____就好了"
|
||
- 是否有学生核心功能列了太多（5个以上）→ 提醒："挑最重要的3个。问自己：没有这个功能，这个工具还能解决问题吗？"
|
||
- 是否有学生在做"游戏化工具"而忽略了核心功能 → 引导："好玩是加分项，但先保证'有用'。你的工具不好玩但好用，还是好玩但没用？"
|
||
- 是否有学生互相讨论得很热烈 → 鼓励："如果你的同学也觉得这个工具有用，说明你找到了一个好需求！"
|
||
|
||
**进度同步 (Checkpoint): (2分钟)**
|
||
|
||
**师：** 时间到！快速检查——谁来读一下你的"解决什么问题"那句话？【诊断点：需求描述是否完整包含"谁+场景+问题+期望"四要素】【应用层】
|
||
|
||
【请2位学生分享】
|
||
|
||
**【分支A】若学生的描述完整具体：**
|
||
**师：** 非常清晰！听你这句话，我就知道你要做什么、给谁用、解决什么问题。这样的需求描述，AI也能一下子听懂。
|
||
|
||
**【分支B】若学生只描述了功能没有说清问题（如"我要做一个记账的工具"）：**
|
||
**师：** 你说要"记账"，但为什么要记账？是因为"不知道零花钱花到哪了"？还是"想攒够钱买一样东西"？搞清楚你要解决的问题，功能自然就出来了。
|
||
|
||
**【分支C】若学生的需求太大太复杂：**
|
||
**师：** 你的想法很大！但今天只有20分钟开发时间。我们缩小一点——这么多功能里，哪一个功能单独拿出来就已经能帮到你了？先做这一个！
|
||
|
||
---
|
||
|
||
**【分段三：快速开发——把需求交给AI】(20分钟)** ✨
|
||
|
||
**预设误概念：**
|
||
- M4：做工具跟做游戏方法完全不同
|
||
- M5：AI做出来的工具肯定能直接用
|
||
- M3：工具要做得很复杂才有用
|
||
|
||
**讲解与演示 (Teach & Demo): (5分钟)**
|
||
|
||
**师：** 需求文档写好了！现在到了交给AI开发的时刻。流程跟第7课做游戏是一样的——把需求文档翻译成AI能理解的开发指令。工具和游戏的开发流程是一样的！【诊断点：激发M4——学生是否以为工具需要不同的开发方式】【理解层】
|
||
|
||
**师：** 我来示范，把我的"作业倒计时器"需求文档翻译成提示词——
|
||
|
||
【教师现场在AI编程工具中输入】
|
||
|
||
```
|
||
请帮我用HTML/CSS/JS开发一个叫"作业倒计时器"的实用工具，要求如下：
|
||
|
||
## 项目信息
|
||
- 解决的问题：做作业时不知道花了多少时间，容易在一道题上磨太久
|
||
- 目标用户：小学生做作业时使用
|
||
- 视觉风格：简洁大方，大字号显示，让人一眼就能看到剩余时间
|
||
|
||
## 核心功能（只做这些）
|
||
1. 用户可以设定倒计时分钟数（提供几个常用选项：5分钟、10分钟、15分钟、20分钟，也可以自定义输入）
|
||
2. 点击"开始"后，屏幕正中央大字号显示倒计时（分:秒格式）
|
||
3. 最后30秒倒计时数字变红色，并且每秒闪烁一次
|
||
4. 时间到了：屏幕背景变成醒目颜色，显示"时间到！"的大字提示
|
||
5. 有"重新开始"按钮
|
||
|
||
## 技术要求
|
||
- 单个HTML文件，内联CSS和JS
|
||
- 倒计时数字要非常大，占屏幕主要位置
|
||
- 适配电脑浏览器
|
||
- 界面要简洁，操作要直觉——打开就知道怎么用
|
||
```
|
||
|
||
**师：** 大家注意——跟做游戏不同的一点，工具的提示词里我特别强调了"打开就知道怎么用"。为什么？因为工具的用户可能很着急，没时间研究怎么操作。这就是"用户思维"——你做的东西要让用户一看就会用。
|
||
|
||
【等待AI生成，预览效果】
|
||
|
||
**师：** 看！AI做出来了。我来现场验收——我设5分钟，点开始。数字在倒计时……嗯，数字够大、能看清。等到最后30秒看看会不会变红……（如果有时间可以快进演示）。好，基本功能有了！
|
||
|
||
**师：** 但这只是第一版。等下你们自己试的时候，要用"真实场景"来验收——不是看看能不能跑，而是真的拿它来计时做一道题，看看好不好用！
|
||
|
||
**师：** 现在轮到你们了。我给你们提示词框架——
|
||
|
||
【投屏展示】
|
||
|
||
```
|
||
请帮我用HTML/CSS/JS开发一个叫"[工具名称]"的实用工具，
|
||
要求如下：
|
||
|
||
## 项目信息
|
||
- 解决的问题：[从需求文档"解决什么问题"那句话复制过来]
|
||
- 目标用户：[你的目标用户]
|
||
- 视觉风格：[你选的风格]
|
||
|
||
## 核心功能（只做这些）
|
||
1. [功能1]
|
||
2. [功能2]
|
||
3. [功能3]
|
||
|
||
## 技术要求
|
||
- 单个HTML文件，内联CSS和JS
|
||
- 适配电脑浏览器
|
||
- 界面简洁，操作直觉——打开就知道怎么用
|
||
```
|
||
|
||
**学生实践 (Practice): (13分钟)**
|
||
|
||
**师：** 动手吧！步骤和做游戏一样：
|
||
|
||
1. 把需求文档翻译到提示词框架里
|
||
2. 用慢思考模型发送给AI
|
||
3. 等AI生成后打开预览
|
||
4. **关键**：不是看看就行——用你的真实数据/真实场景试一遍！
|
||
- 做倒计时器的同学：设一个真实时间试试
|
||
- 做记账本的同学：记一笔你真的花过的钱
|
||
- 做单词卡的同学：输入你正在背的单词
|
||
- 做错题本的同学：记一道你真的做错过的题
|
||
|
||
给大家13分钟。如果核心功能有问题，先修核心功能，别急着加新东西！
|
||
|
||
【教师巡场观察，重点关注：】
|
||
- 学生是否用了需求文档框架而不是随便一句话 → 对比效果
|
||
- AI生成后学生是否在"用真实数据试"还是"只看了一眼" → 提醒："拿真实数据试一遍！"
|
||
- 是否有学生的工具核心功能跑不起来 → 帮助诊断提示词问题
|
||
- 是否有学生急着加花哨功能 → 提醒："你的工具解决问题了吗？先保证有用！"
|
||
- 做得快的学生 → 鼓励用更多真实数据测试边界情况
|
||
|
||
**进度同步 (Checkpoint): (2分钟)**
|
||
|
||
**师：** 暂停！快速检查——你的工具核心功能跑起来了吗？举手告诉我！【诊断点：完成度分布】
|
||
|
||
**师：** 更重要的问题——你用真实数据/场景试过了吗？试过的举手！【诊断点：学生是否有"真实验收"意识，而不是"能跑就行"】【应用层】
|
||
|
||
**【分支A】若大部分学生完成且试过：**
|
||
**师：** 太好了！那我再问——用真实数据试的时候，有没有发现什么问题？是不是AI做出来的跟你想的不太一样？
|
||
|
||
**【分支B】若有学生完成但没有用真实数据测试：**
|
||
**师：** "能跑"不等于"好用"！这是工具和游戏最大的区别。游戏你看着好玩就行，工具你必须拿真实场景试——因为工具的目的是解决问题，不试怎么知道问题解决了没？现在花1分钟，用你的真实数据试一遍。
|
||
|
||
**【分支C】若有学生还没完成：**
|
||
**师：** 没关系！如果AI生成的不对，用Bug描述三要素告诉它修。如果完全卡住了，举手我来帮你看看提示词。
|
||
|
||
---
|
||
|
||
**【分段四：试用与修复——它真的好用吗？】(15分钟)** ✨
|
||
|
||
**预设误概念：**
|
||
- M5：AI做出来的工具肯定能直接用
|
||
- M1：工具就是无聊的东西（反转时刻：发现自己做的工具真的有用）
|
||
|
||
**讲解与演示 (Teach & Demo): (3分钟)**
|
||
|
||
**师：** 大部分人的工具核心功能已经跑起来了。现在进入最关键的环节——**真实验收**。做工具的验收，跟做游戏不一样。游戏的验收是"好不好玩"，工具的验收是——
|
||
|
||
**师：** 三个问题！我叫它"工具验收三问"——【在白板上写】
|
||
|
||
```
|
||
工具验收三问：
|
||
1. 能解决问题吗？ —— 拿真实场景试，问题真的被解决了吗？
|
||
2. 用起来方便吗？ —— 操作步骤多不多？会不会迷路？第一次用能马上上手吗？
|
||
3. 还想继续用吗？ —— 下次遇到同样的问题，你会打开这个工具吗？
|
||
```
|
||
|
||
**师：** 我来示范验收我的"作业倒计时器"——
|
||
|
||
1. **能解决问题吗？** 我设了10分钟倒计时来做一道数学题。时间到了，屏幕变红提醒我了。嗯，确实帮我控制了时间。但是——我发现时间到了之后，我还想再看一分钟把题做完，可是没有"延长时间"的按钮，只能重新设定。这是一个需要改的地方！
|
||
|
||
2. **用起来方便吗？** 打开就看到时间选择，点一下就开始——很方便。但我设完时间之后，页面没有显示"我总共设了几分钟"，等倒计时开始后我忘了自己设了多久。需要加一行小字"本次倒计时：10分钟"。
|
||
|
||
3. **还想继续用吗？** 说实话，如果把"延长时间"按钮加上，我是真的想用它来做作业。所以——这个工具有真实价值！
|
||
|
||
**师：** 看到了吗？验收不是"能跑就打勾"，而是"认真用一遍，发现真实使用中的问题"。我发现了两个问题，现在就告诉AI修——
|
||
|
||
```
|
||
我的作业倒计时器有两个体验问题需要修改：
|
||
|
||
问题1：时间到了之后，我想再多给自己一两分钟做完。
|
||
请加一个"延长1分钟"按钮，在时间到了的界面上显示，
|
||
点击后继续倒计时1分钟。
|
||
|
||
问题2：倒计时开始后，我忘了自己设了多久。
|
||
请在倒计时画面上方加一行小字，显示"本次倒计时：XX分钟"。
|
||
|
||
不要改动其他已有功能。
|
||
```
|
||
|
||
**师：** 发现问题→描述清楚→让AI修→再验收。这个循环你们已经很熟了！
|
||
|
||
**学生实践 (Practice): (10分钟)**
|
||
|
||
**师：** 现在你们来验收自己的工具！步骤：
|
||
|
||
1. **用真实数据认真使用你的工具至少2分钟**——不是看看就行，是真的用起来
|
||
2. **用"工具验收三问"检查**——能解决问题吗？方便吗？还想用吗？
|
||
3. **找出最需要改的1-2个问题**——不要一次改太多
|
||
4. **告诉AI修改**——具体描述"现在怎么样"和"我希望怎么样"
|
||
5. **改完再试一遍**——看看是不是真的好用了
|
||
|
||
给大家10分钟。记住——今天的目标不是功能最多，是**真的解决问题**。一个只有3个功能但真的好用的工具，比一个有10个功能但什么都不好使的工具强一百倍！
|
||
|
||
【教师巡场观察，重点关注：】
|
||
- 学生是否在认真试用自己的工具 → 鼓励"你已经在当自己工具的第一个用户了！"
|
||
- 学生发现的问题是否具体（"输入框太小"vs"不好用"）→ 引导描述具体
|
||
- 是否有学生体验到"我做的工具真的有用！"的瞬间 → 放大这个时刻："你现在体验到的，就是真正的产品成就感！"
|
||
- 是否有学生开始给同学试用 → 大力鼓励："让别人用你的工具，看看他们怎么说！"
|
||
- 做得快的学生 → 建议："让你旁边的同学也试试你的工具，看看他们能不能'打开就知道怎么用'。"
|
||
|
||
**进度同步 (Checkpoint): (2分钟)**
|
||
|
||
**师：** 最后一分钟！用手势告诉我你的工具状态：
|
||
- 竖大拇指 = 核心功能好用，真的能解决我的问题
|
||
- 平手 = 基本能用但还需要调
|
||
- 往下 = 还没跑起来
|
||
|
||
【快速统计】
|
||
|
||
**【分支A】若大部分学生竖大拇指：**
|
||
**师：** 太棒了！你们今天做了一件跟之前完全不同的事——做了一个"有用"的东西，而不只是"好玩"的东西。你们做的不是玩具，是工具！
|
||
|
||
**【分支B】若不少学生是平手：**
|
||
**师：** 基本能用就已经很好了！工具和游戏不一样——工具需要在真实使用中不断打磨。你今天发现的问题，就是下一步优化的方向。最重要的是，你已经知道"从哪里找需求"和"怎么验收一个工具"了。
|
||
|
||
**【分支C】若有学生往下：**
|
||
**师：** 没关系！今天你完成了最有价值的一步——找到了一个真实的需求，写出了需求文档。这比盲目做一个工具有意义多了。下节课路演的时候，你也可以展示你的需求文档和设计思路。
|
||
|
||
---
|
||
|
||
**第三幕：反思 (Contemplate) — 10分钟** 🤔
|
||
|
||
**【环节】成果展示 (6分钟)**
|
||
|
||
**师：** 展示时间！今天的展示特别重要——我不只想看你做了什么工具，我更想知道**你解决了什么问题**。请2-3位同学上来，告诉我们：
|
||
|
||
1. 你发现了什么"不方便"？这个问题困扰你多久了？
|
||
2. 你做了什么工具来解决？核心功能是什么？
|
||
3. 你用真实数据试过了吗？真的解决问题了吗？有什么需要改进的？
|
||
|
||
【请2-3位学生展示，优先选择：】
|
||
- 一位找到了真实且独特需求的（突出"需求发现"能力）
|
||
- 一位工具核心功能确实好用的（正面案例）
|
||
- 一位在验收中发现问题并成功修复的（体现迭代能力）
|
||
|
||
**师：** 大家注意——他/她做的工具可能看起来很简单，但它解决了一个真实的问题。这比做一个酷炫但没用的东西，有价值多了！
|
||
|
||
**【环节】互评与讨论 (4分钟)**
|
||
|
||
**师：** 看了这几位同学的展示，谁有想法？格式还是"一个优点 + 一个建议"。
|
||
|
||
【请2-3位学生互评】
|
||
|
||
**师：** 最后问大家一个问题——今天做的"工具"和之前做的"游戏"，哪个让你更有成就感？【诊断点：学生是否体验到"解决问题的成就感"不亚于"玩游戏的快感"——从M1误概念中走出来】【迁移层】
|
||
|
||
**【分支A】若有学生说"工具！因为它真的有用"：**
|
||
**师：** 说得太好了！游戏给你"玩"的快乐，工具给你"解决了问题"的成就感。而且——你做的工具不只对你有用，可能你的同学、你的家人也需要！
|
||
|
||
**【分支B】若有学生说"还是游戏好玩"：**
|
||
**师：** 游戏当然好玩！但你想想——如果你做的工具被全班同学都用上了呢？如果你做的错题本帮你考试提高了分数呢？那种成就感，可能比打通一关游戏更厉害。"有用"和"好玩"不矛盾，很多伟大的产品两者兼备！
|
||
|
||
**【分支C】若学生说不出来：**
|
||
**师：** 没关系！你现在可能还没感受到区别。但你记住一件事——今天你用AI编程解决了一个自己真实的烦恼。这意味着以后遇到任何"不方便"的事，你都可以想："我是不是可以做一个工具来解决？"这个思维方式，比任何一个工具本身都有价值。
|
||
|
||
---
|
||
|
||
**第四幕：延续 (Continue) — 5分钟** 🚀
|
||
|
||
**【环节】抽象总结 (3分钟)**
|
||
|
||
**师：** 今天我们学了三个核心知识点——
|
||
|
||
**第一：从"好玩"到"好用"。** 编程不只是做游戏。发现问题、解决问题，这才是编程最强大的力量。游戏让人快乐，工具让人高效——两者都有价值，但"有用"的东西往往影响更深远。
|
||
|
||
**第二：需求发现。** 做工具的第一步不是打开编程工具，而是从自己的生活中找到"不方便"。场景扫描法——早上、上学、做作业、回家、社交、零花钱——每个场景里都藏着工具的种子。
|
||
|
||
**第三：真实验收。** 工具不是"能跑就行"——必须用真实数据、真实场景去试。工具验收三问：能解决问题吗？方便吗？还想用吗？
|
||
|
||
**师：** 这三个能力不只在AI编程里有用。以后你长大了，不管做什么工作，"从生活中发现需求、设计解决方案、用真实场景验证"——这就是创业者和产品经理做的事！你们今天已经在体验了。【迁移诊断】
|
||
|
||
**【环节】下节预告 + 5分钟挑战 (2分钟)**
|
||
|
||
**师：** 下节课预告——第10课"产品路演与同行评审"。你今天做的工具（或者前面做的游戏），要在全班面前做一次3分钟的"路演"——就像产品发布会一样！你要告诉大家：你做了什么、解决了什么问题、为什么别人也需要它。所以这周好好打磨你的作品，下周要上台展示！
|
||
|
||
**师：** 本周5分钟AI挑战来了！
|
||
|
||
**5分钟AI挑战：让别人试试你的工具**
|
||
|
||
把你今天做的工具发给一个朋友或家人（发HTML文件或者用浏览器打开让他们用），观察他们的反应：
|
||
1. 他们打开后知道怎么用吗？（不解释的情况下）
|
||
2. 他们用完后说了什么？觉得有用吗？
|
||
3. 他们提了什么建议？
|
||
|
||
把他们的反馈写在你的需求文档背面，拍照发到班级群。下节课路演的时候，你可以说："我不只自己试了，我还让XX试了，他觉得……"
|
||
|
||
**师：** 记住今天这句话——**生活中的每一个"不方便"，都是你的下一个产品！** 下课！
|
||
|
||
---
|
||
|
||
### 5. AI助教使用指南
|
||
|
||
**教师演示用提示词：**
|
||
|
||
**课前准备——生成示范工具（作业倒计时器）：**
|
||
```
|
||
请帮我用HTML/CSS/JS开发一个叫"作业倒计时器"的实用工具，要求如下：
|
||
|
||
## 项目信息
|
||
- 解决的问题：做作业时不知道花了多少时间，容易在一道题上磨太久
|
||
- 目标用户：小学生做作业时使用
|
||
- 视觉风格：简洁大方，适合孩子使用，浅色系背景
|
||
|
||
## 核心功能
|
||
1. 提供常用时间选项（5分钟、10分钟、15分钟、20分钟），也可以自定义输入分钟数
|
||
2. 点击"开始"后，屏幕正中央用超大字号显示倒计时（分:秒格式）
|
||
3. 最后30秒数字变红色，每秒闪烁一次提示紧迫
|
||
4. 时间到了：屏幕背景变成醒目的橙红色，显示"时间到！"大字
|
||
5. 有"重新开始"按钮回到时间选择界面
|
||
6. 倒计时进行中显示"本次倒计时：XX分钟"的小字提示
|
||
|
||
## 技术要求
|
||
- 单个HTML文件，内联CSS和JS
|
||
- 倒计时数字要非常大（至少100px字号），占屏幕主体位置
|
||
- 界面极简，没有多余元素
|
||
- 适配电脑浏览器
|
||
```
|
||
|
||
**学生保底提示词（当学生完全不知道怎么写时）：**
|
||
|
||
**保底方案A：作业倒计时器**
|
||
```
|
||
请帮我用HTML/CSS/JS做一个简单的作业倒计时器。可以选择5/10/15/20分钟，点开始后大字显示倒计时，最后30秒字变红色，时间到了屏幕变色显示"时间到！"。有重新开始按钮。单个HTML文件，界面简洁。
|
||
```
|
||
|
||
**保底方案B：错题记录本**
|
||
```
|
||
请帮我用HTML/CSS/JS做一个简单的错题记录本。可以输入科目、题目内容、正确答案。点"保存"后显示在下方的错题列表里。有一个"随机抽查"按钮，随机显示一道错题让我回忆答案。单个HTML文件。
|
||
```
|
||
|
||
**保底方案C：零花钱记账本**
|
||
```
|
||
请帮我用HTML/CSS/JS做一个简单的零花钱记账本。可以记录收入和支出（输入金额和说明），自动计算余额。下方显示所有记录的列表。顶部大字显示当前余额。单个HTML文件，界面可爱。
|
||
```
|
||
|
||
**保底方案D：单词速记卡**
|
||
```
|
||
请帮我用HTML/CSS/JS做一个单词速记卡工具。可以输入英文单词和中文意思，保存后生成卡片。点击卡片正面显示英文，翻转显示中文。有"下一个"和"上一个"按钮。单个HTML文件。
|
||
```
|
||
|
||
---
|
||
|
||
**进阶提示词（学有余力的学生）：**
|
||
|
||
```
|
||
在我现有工具的基础上，请帮我增加以下体验优化：
|
||
1. 使用localStorage保存数据，关闭浏览器后数据不丢失
|
||
2. 添加简单的统计功能（比如倒计时器统计"今天用了几次"，记账本统计"本月总支出"）
|
||
3. 添加一个"导出"功能，把数据显示为可以复制的文本
|
||
请在现有代码基础上修改，不要重新写。
|
||
```
|
||
|
||
---
|
||
|
||
### 6. 教师指南
|
||
|
||
**本课技术备注：**
|
||
|
||
1. **工具类项目与游戏类项目的技术差异：** 游戏以Canvas动画和实时交互为核心，工具以表单输入、数据存储和界面展示为核心。工具类项目更多用到HTML表单元素（input、select、button）和DOM操作（创建元素、修改内容），代码结构通常比游戏简单，AI生成质量也更高。
|
||
|
||
2. **localStorage本地存储：** 这是浏览器提供的简单存储方案，可以让数据在关闭浏览器后仍然保留。在保底提示词中没有使用localStorage（为了降低复杂度），但进阶学生可以加上。教师只需知道：提示词中加一句"使用localStorage保存数据，下次打开时自动加载"即可。
|
||
|
||
3. **工具类项目常见问题：** 输入框没有校验（输入文字到数字框不报错）——提示词加"请做基本的输入校验"；列表数据刷新后丢失——引入localStorage；界面在不同屏幕尺寸下变形——提示词加"响应式布局"。这些问题在今天课堂上不需要全部解决，核心是让学生体验完整的"需求→开发→验收"流程。
|
||
|
||
4. **"真实验收"的教学意义：** 本课首次引入"用真实数据验收"的概念。之前做游戏时，验收更多是"能不能玩、好不好玩"。工具的验收必须用真实场景——这是本课教学重点的体现，也是"从好玩到好用"思维转变的关键支撑。
|
||
|
||
5. **学生选题预期分布：** 基于试教经验，学习工具类（倒计时、错题本、单词卡）约50-60%，生活管理类（记账、打卡）约20-30%，社交/其他类（生日提醒、借还记录）约10-20%。所有方向在技术上都可行，不需要限制。
|
||
|
||
**常见问题 FAQ：**
|
||
|
||
| 学生问题 | 应对方式 |
|
||
|---------|---------|
|
||
| "我找不到不方便的事情" | 用场景引导法："你今天早上出门前做了什么？有没有忘带过东西？你做作业的时候最讨厌什么？" 如果实在想不到，可以从参考方向里选一个 |
|
||
| "我想做的工具AI做不出来" | "可能是需求太复杂了。我们简化一下——这个工具最核心的一个功能是什么？只做这一个试试" |
|
||
| "工具好无聊，我想做游戏" | "你觉得如果你做一个能帮全班同学记错题的工具，大家会不会觉得你很厉害？做有用的东西，影响力比游戏更大！当然你也可以把工具做得好看、有趣——谁说工具不能好看？" |
|
||
| "关掉浏览器数据就没了" | "今天先不管这个问题——我们先确保工具好用。如果你有余力，可以让AI加一个localStorage保存功能。" |
|
||
| "我做的工具跟网上的一样" | "没关系！重要的是你自己发现了这个需求，自己设计了解决方案。而且你的工具是为你量身定做的——网上的工具可做不到这一点" |
|
||
| "我能不能做一个游戏化的工具？" | "当然可以！比如错题本加上'连续答对奖励'，记账本加上'存钱进度条'。但记住——先保证核心功能好用，再加好玩的元素" |
|
||
|
||
**课堂风险预案：**
|
||
|
||
- **如果AI服务不可用：** 本课前半段（分段一、二）完全不依赖AI——学生可以正常做"不方便清单"和写需求文档。如果后半段AI仍不可用，将分段三改为"互审需求文档+口头描述你的工具"，让同学互相扮演"用户"提需求反馈。把AI开发推迟到下节课课前15分钟。
|
||
- **如果学生进度差异过大：** 快的学生进入真实验收和迭代优化阶段，甚至可以让旁边同学试用自己的工具收集反馈；慢的学生使用保底提示词快速生成基础工具。关键是每个学生都要完成"不方便清单"和需求文档——即使工具没做出来，需求发现能力本身就是核心教学目标。
|
||
- **如果大部分学生都选了同一个方向（如倒计时器）：** 这很正常，不需要强制分散。可以在展示环节对比不同学生的"同类工具"——"同样是倒计时器，你们解决的问题一样吗？功能设计有什么不同？"这本身就是很好的讨论话题。
|
||
- **如果有学生的需求不适合做工具（如"我想让作业变少"）：** 温和引导："作业变少这个事情，工具帮不了你。但'做作业更高效'，工具可以帮！比如用倒计时器控制时间，或者用错题本减少重复犯错。你觉得哪个更实际？"
|
||
|
||
---
|
||
|
||
### 7. 5分钟日常AI挑战
|
||
|
||
**本周挑战：让别人试试你的工具**
|
||
|
||
**挑战说明：** 把你今天做的工具发给一个朋友或家人，不做任何解释，让他们自己打开试用。然后观察和记录：
|
||
|
||
1. **他们打开后做的第一件事是什么？** 是不是马上知道怎么用了？
|
||
2. **他们用完后怎么评价？** 觉得有用吗？有什么吐槽的？
|
||
3. **他们提了什么改进建议？** 你觉得有道理吗？
|
||
|
||
把以上三个问题的回答写下来，拍照发到班级群。这就是专业产品经理做的"用户测试"！
|
||
|
||
**下节课分享：** 下周课上选2-3位同学展示用户测试结果，这将成为路演的精彩素材。
|
||
|
||
---
|
||
|
||
### 8. 拓展任务
|
||
|
||
**拓展一（推荐）：打磨你的工具**
|
||
|
||
回家后继续使用你今天做的工具，坚持用3天。每天记录一个"用的时候发现的问题"，然后让AI帮你修复。3天后看看你的工具是不是变得越来越好用了。
|
||
|
||
提示：这就是真正的产品开发过程——"用→发现问题→修→再用→再发现→再修"，循环往复，产品就越来越好。
|
||
|
||
**拓展二（挑战）：做第二个工具**
|
||
|
||
翻出你的"不方便清单"，选第二个"不方便"，再做一个工具。这次挑战自己——能不能做一个"给别人用"的工具？比如：
|
||
- 给妈妈做一个"买菜清单"工具
|
||
- 给弟弟妹妹做一个"认字卡片"工具
|
||
- 给全班做一个"值日表查询器"
|
||
|
||
做给别人用比做给自己用更难——因为你要站在别人的角度想"他们需要什么"。这就是"用户思维"的进阶训练！ |