讲师版案例：校园志愿服务排班台
这个案例为什么值得重点讲
这是项目营里最适合讲“系统思维”的案例之一。它不只是一个页面，而是天然带有角色、数据和规则。
它的价值在于：
- 贴近真实校园活动
- 很适合衔接工程思维副线
- 能让学生第一次理解“一个系统不只有一个页面”
- 传统方式下，学生很难自己把多角色、多状态、多页面关系梳理清楚
适用课程
- 青少年项目营
- 重点适用于第 4、5、6、10 课
AI 风格 PPT 文件
原始素材附件
你要带着学生完成什么
- 展示活动信息和岗位说明
- 支持志愿者报名
- 支持负责人查看排班状态
- 让学生能讲清楚前端、角色、数据和规则之间的关系
建议演示页节奏
| 页次 | 时间 | 目标 |
|---|---|---|
| 第 1 页 | 5 分钟 | 展示这是“一个系统”，不只是海报页 |
| 第 2 页 | 8 分钟 | 拆出志愿者端和负责人端 |
| 第 3 页 | 12 分钟 | 先做活动页和报名表单 |
| 第 4 页 | 12 分钟 | 再做负责人查看排班状态 |
| 第 5 页 | 12 分钟 | 增加人数限制、状态提示和空位提醒 |
| 第 6 页 | 10 分钟 | 用工程思维解释系统结构 |
逐页演示脚本
第 1 页：从真实场景切入
讲师可说：
学校一办大型活动，就会遇到一个问题：谁来报名、谁来排班、谁来确认。这个项目就是在解决这条真实流程。
第 2 页：角色拆解
白板建议：
- 志愿者：看岗位、报名
- 负责人：看报名情况、查看空缺
强调：
当你开始区分角色时，你已经不只是在做网页，而是在做系统。
第 3 页：先做学生能看懂的报名界面
第一轮提示词：
text
请帮我做一个“校园志愿服务排班台”网页应用。
要求：
- 有活动介绍、岗位说明、人数需求
- 志愿者可以填写姓名、班级、联系方式并报名
- 页面清晰、像真实校园工具
- 先做最小可运行版本第 4 页：再做负责人视角
第二轮提示词：
text
请继续升级这个排班台：
- 增加负责人查看排班状态的区域
- 显示每个岗位已报名人数和剩余空位
- 视觉上区分志愿者端和负责人端第 5 页：加入规则感
第三轮提示词：
text
请增加这些规则：
- 每个岗位有人数上限
- 报满后显示“已满”
- 没有报名的岗位要高亮提醒
- 页面要更有组织和秩序感第 6 页：系统解释训练
让学生回答：
- 谁在用这个系统？
- 每个角色能看到什么？
- 如果以后要加管理员端，还会多什么页面？
讲师提醒
- 这个项目很适合拿来讲系统架构，但不要一上来就讲太重的工程术语
- 优先让学生理解角色和流程，再谈数据库和接口