Skip to content

青少年启蒙营标准案例

使用建议

启蒙营案例的关键不是“做得多复杂”,而是:

  • 学员 1 到 2 节课就能看到成果
  • 成果一眼能看懂,方便展示
  • 学员在做的过程中能体验到 Codex 带来的加速感

案例总览

案例适合亮点推荐课次
猜数字闯关赛最快建立成就感第 3 课
我的数字名片站最适合个人展示第 4、7、8 课
校园故事生成器最适合加入 AI 感第 5 课
英语单词闯关练习器最贴近真实学习第 3、5 课
班级活动报名页最适合做“能用起来”的作品第 4、7、8 课

学员上课版课件与案例页

这些页面都已经补上:

  • 学员上课版 PPTX 下载
  • 逐页演示脚本
  • 可直接复制的提示词
  • 原始素材附件下载

案例 1 猜数字闯关赛

案例要求

  • 页面有标题、规则区、输入框、提交按钮和结果提示
  • 每次开始时随机生成 1 到 100 的数字
  • 学员输入后,页面能提示“太大 / 太小 / 猜对了”
  • 能记录猜了多少次,并支持重新开始

实现步骤

  1. 先让 Codex 生成一个基础 HTML 页面骨架
  2. 加入输入框和按钮的交互逻辑
  3. 写随机数与比较大小的代码
  4. 补上猜测次数统计与重新开始
  5. 最后再让 Codex 帮你做视觉美化和动效

推荐提示词

text
请帮我做一个适合中学生展示的“猜数字闯关赛”网页。

要求:
- 使用 HTML、CSS、JavaScript
- 页面要明亮、有游戏感
- 随机生成 1 到 100 的数字
- 用户输入后提示太大、太小或猜对了
- 显示已经猜了几次
- 有“重新开始”按钮

请先给我最小可运行版本,再一步步升级样式。

逐步讲解

  • 第一步先让学员看到“页面真的能跑起来”
  • 第二步再强调:Codex 不只是写样式,也能帮你把逻辑说清楚
  • 第三步让学员修改颜色、标题和规则,形成自己的版本

为什么这个案例适合用 Codex

传统方式里,零基础学生往往会卡在“随机数怎么写、事件怎么绑定、状态怎么重置”。Codex 能把这些零散知识迅速拼成一个完整作品,让学生把注意力放在理解逻辑和打磨体验上。

案例 2 我的数字名片站

案例要求

  • 首页展示头像、姓名、学校 / 兴趣 / 目标
  • 至少包含 3 个信息模块,例如“我的作品”“我喜欢的事”“我的梦想”
  • 有 1 个互动元素,例如按钮、标签切换或展开卡片
  • 整体风格要明显体现个人特色

实现步骤

  1. 先梳理“我想让别人记住我什么”
  2. Codex 生成页面结构和分区建议
  3. 把个人介绍、兴趣、作品内容填进去
  4. 增加交互元素,比如“查看更多”卡片
  5. Codex 帮你统一颜色、字体和版式

推荐提示词

text
请帮我设计一个适合中学生展示的个人网页,像“数字名片站”。

页面包含:
- 顶部欢迎区
- 我的兴趣
- 我的作品或经历
- 我的未来目标
- 一个互动按钮或展开卡片

风格要求:
- 青春、明亮、不要太像模板
- 手机和电脑都能看
- 用简单清晰的中文

逐步讲解

  • 先让学员准备自己的素材,避免页面变成空壳
  • 再让 Codex 把素材“排版成作品”
  • 最后提醒学员:真正有价值的是“你想表达什么”,不是堆太多特效

为什么这个案例适合用 Codex

传统方式里,零基础学生很难把“我想介绍自己”翻译成网页结构。Codex 可以把“想法 -> 页面 -> 文案 -> 样式”连起来,学生更容易形成作品感。

案例 3 校园故事生成器

案例要求

  • 用户可以输入角色、地点或关键词
  • 页面有“生成故事”按钮和结果展示区
  • 至少支持 2 种故事风格,例如搞笑版、悬疑版
  • 结果区要有卡片感,适合展示

实现步骤

  1. 先定义输入项:角色、地点、风格
  2. Codex 生成带输入区和按钮的基础页面
  3. 先做假数据版故事生成,保证演示稳定
  4. 再升级为更像 AI 作品的多风格输出
  5. 最后增加“再来一个”“复制结果”之类的小功能

推荐提示词

text
请帮我做一个“校园故事生成器”网页。

要求:
- 用户可以输入角色和地点
- 选择故事风格:搞笑、冒险、悬疑
- 点击按钮后生成一段故事开头
- 页面风格像创意写作工作坊
- 先做演示稳定版,不依赖复杂后端

逐步讲解

  • 这节课重点不在“真的接了多高级模型”,而在于让学生理解 AI 功能可以成为作品的一部分
  • 课堂里可以让不同学生输入不同关键词,快速产生大量好玩的结果

为什么这个案例适合用 Codex

传统方式下,学生通常只能做静态网页。借助 Codex,他们能快速做出“输入 -> 生成 -> 展示”的互动体验,成就感会明显提高。

案例 4 英语单词闯关练习器

案例要求

  • 至少有 10 个单词题目
  • 用户答题后能即时判断对错
  • 错题会显示正确答案和简单解释
  • 结束后显示得分和鼓励语

实现步骤

  1. 先整理单词和中文释义
  2. Codex 设计成一题一页或卡片轮播结构
  3. 加入答题判断和计分逻辑
  4. 增加错题反馈和结算页
  5. 最后优化为更像“挑战赛”的视觉风格

推荐提示词

text
请帮我做一个“英语单词闯关练习器”网页,适合中学生使用。

功能要求:
- 一次显示一道题
- 可以选择答案
- 判断对错并解释
- 最后显示总分和鼓励语
- 风格像闯关游戏,不要像普通表单

逐步讲解

  • 这个案例能把“学习工具”做得很有游戏感
  • 讲师可以先提供一组固定单词,再让学生自己替换成自己想练的学科内容

为什么这个案例适合用 Codex

传统方式做互动练习器,学生常常会在题目组织、状态切换、页面反馈上卡很久。Codex 可以先快速搭出题目流程,再留出时间给学生做美化和内容升级。

案例 5 班级活动报名页

案例要求

  • 页面介绍活动主题、时间、地点和亮点
  • 用户可以填写姓名、班级、想参加的岗位
  • 提交后能显示“报名成功”结果
  • 页面整体要像真实校园活动海报和报名页

实现步骤

  1. 先明确活动主题,例如读书会、科技节、义卖、运动会志愿者
  2. Codex 生成活动介绍区和报名表单
  3. 跑通表单填写与提交成功提示
  4. 增加视觉海报感,比如主视觉和倒计时条
  5. 让学生根据自己班级活动改造文案与风格

推荐提示词

text
请帮我做一个“班级活动报名页”网页。

页面要求:
- 看起来像真实活动海报
- 有活动介绍、时间地点、亮点说明
- 有报名表单:姓名、班级、联系方式、岗位选择
- 提交后有成功反馈
- 适合中学生展示,活泼但清晰

逐步讲解

  • 这类案例最适合做“作品真的有用”的感觉
  • 课堂上可以让不同小组做不同活动主题,再做海报 PK

为什么这个案例适合用 Codex

如果传统方式从零搭页面、写表单、做视觉排版,学生很容易被大量细节劝退。Codex 可以把“海报感 + 表单 + 反馈”快速拼起来,让学生更聚焦在创意表达上。

搭配课程