用 AI 为家人定制实用工具，这是 AI 编程最温暖的打开方式。

一位初中老师的日常烦恼：上课提问没人应，点名全靠翻花名册，分组能磨五分钟，后排学生的眼神像是在说"跟我没关系"。

解决方案：用OpenClaw（小龙虾）花了几个晚上，做了6 款课堂互动小工具。结果如何？"后排那几个今天居然主动举手了。"

今天，我们把这 6 款工具的设计思路和完整提示词全部公开，一字不藏，拿走就能用。

设计思路：通用模板 + 定制功能

这 6 款小工具都基于一个通用的设计模板，确保一致的用户体验和视觉效果。

你是一个课堂互动工具开发专家。请帮我制作一个课堂互动小工具，要求如下：

【基本要求】
1. 使用 React（JSX）开发，最终同时提供：
   - 一个 .jsx 文件（用于在线预览）
   - 一个独立 .html 文件（可直接双击在浏览器中打开，无需安装任何软件）
2. HTML 版本需要引入 CDN 资源（React、ReactDOM、Babel），确保离线也能使用
3. 界面语言为中文

【视觉风格】
1. 明亮、活泼、清新的浅色主题（适合课堂投屏）
2. 背景：暖色渐变（米白 → 淡粉 → 浅蓝 → 薄荷绿），带柔和彩色光斑漂浮动画
3. 卡片：纯白圆角卡片 + 轻盈阴影
4. 配色方案：使用彩虹色系调色板 ["#FF6B6B","#FFBE0B","#3EC1D3","#6C5CE7","#00B894","#FD79A8","#E17055","#0984E3"]
5. 字体：Fredoka（标题）+ Noto Sans SC（正文），从 Google Fonts 加载
6. 动画：入场动画（slideUp）、弹入动画（popIn）、标题渐变流动（shimmer）
7. 禁止使用深色/暗黑主题

【音效要求】
1. 使用 Web Audio API 合成音效（不依赖外部音频文件）
2. 需要包含以下音效类型：
   - 操作过程中的节奏音（如滚动时的"哒哒"声）
   - 结果揭晓时的胜利号角（fanfare）
   - 开始时的蓄势鼓点（drumRoll）
3. 音效要有变化（如音调随速度改变）

【数据持久化（HTML版本）】
1. 使用 localStorage 自动保存所有数据
2. 关闭浏览器后再打开数据不丢失
3. 每次操作后右上角显示"✓ 已自动保存"提示
4. 提供"导出数据备份"功能（导出为 JSON 文件）
5. 提供"导入数据"功能（从 JSON 文件恢复）

【学生名单输入方式（如果工具需要用到学生名单）】
1. 提供两种输入方式，通过 Tab 切换：
   - ✏️ 直接输入：文本框，支持逗号、顿号、换行分隔，也可从 Excel 复制粘贴一列
   - 📊 上传表格：支持 .xlsx / .xls / .csv 文件上传和拖拽，使用 SheetJS 解析
2. Excel 解析时自动过滤序号（纯数字）、常见表头关键词（姓名、学号、序号等）
3. 两种方式可混合使用，名单自动合并去重
4. 每个名字显示为彩色标签，可单独删除，支持一键清空

【多班级管理（如果工具需要用到学生名单）】
1. 顶部显示班级切换栏，支持创建/切换/删除多个班级
2. 每个班级独立保存数据
3. 提供"⚙️ 管理"面板，可查看每个班级的人数和使用统计

【PPT 配套】
1. 同时生成一个配套的 .pptx 文件（3页）：
   - 第1页：工具封面（深色背景 + 工具名称 + 图标）
   - 第2页：功能亮点介绍（四宫格卡片布局）
   - 第3页：启动页（大按钮，超链接指向 HTML 文件，配使用步骤说明）
2. PPT 和 HTML 文件放在同一文件夹，PPT 放映时点击按钮即可跳转

【特效】
1. 结果揭晓时有满屏彩色纸屑撒花（confetti）特效
2. 关键元素有脉冲光环动画
3. 按钮有 hover 放大 + 阴影加深效果

核心要求

• 技术栈：React（JSX）开发，同时提供.jsx 文件和独立.html 文件（可直接双击打开）
• 视觉风格：明亮活泼的浅色主题，暖色渐变背景，彩虹色系调色板
• 音效系统：Web Audio API 合成音效，包含节奏音、胜利号角、蓄势鼓点
• 数据持久化：localStorage 自动保存，支持导入导出备份
• 学生名单：支持直接输入和 Excel 表格上传两种方式
• 多班级管理：支持创建/切换/删除多个班级，独立保存数据

配套资源

每款工具都包含：

• 独立 HTML 文件（双击即可使用，无需安装）
• 配套 PPT（3 页：封面 + 功能介绍 + 启动页）
• 完整提示词（可直接复制使用）

六款课堂工具详解

1. 随机点名器

核心功能：名字像老虎机一样高速滚动，先快后慢，最终选中后撒花庆祝。

你是一个课堂互动工具开发专家。请帮我制作一个课堂互动小工具，要求如下：

【基本要求】
1. 使用 React（JSX）开发，最终同时提供：
   - 一个 .jsx 文件（用于在线预览）
   - 一个独立 .html 文件（可直接双击在浏览器中打开，无需安装任何软件）
2. HTML 版本需要引入 CDN 资源（React、ReactDOM、Babel），确保离线也能使用
3. 界面语言为中文

【视觉风格】
1. 明亮、活泼、清新的浅色主题（适合课堂投屏）
2. 背景：暖色渐变（米白 → 淡粉 → 浅蓝 → 薄荷绿），带柔和彩色光斑漂浮动画
3. 卡片：纯白圆角卡片 + 轻盈阴影
4. 配色方案：使用彩虹色系调色板 ["#FF6B6B","#FFBE0B","#3EC1D3","#6C5CE7","#00B894","#FD79A8","#E17055","#0984E3"]
5. 字体：Fredoka（标题）+ Noto Sans SC（正文），从 Google Fonts 加载
6. 动画：入场动画（slideUp）、弹入动画（popIn）、标题渐变流动（shimmer）
7. 禁止使用深色/暗黑主题

【音效要求】
1. 使用 Web Audio API 合成音效（不依赖外部音频文件）
2. 需要包含以下音效类型：
   - 操作过程中的节奏音（如滚动时的"哒哒"声）
   - 结果揭晓时的胜利号角（fanfare）
   - 开始时的蓄势鼓点（drumRoll）
3. 音效要有变化（如音调随速度改变）

【数据持久化（HTML版本）】
1. 使用 localStorage 自动保存所有数据
2. 关闭浏览器后再打开数据不丢失
3. 每次操作后右上角显示"✓ 已自动保存"提示
4. 提供"导出数据备份"功能（导出为 JSON 文件）
5. 提供"导入数据"功能（从 JSON 文件恢复）

【学生名单输入方式（如果工具需要用到学生名单）】
1. 提供两种输入方式，通过 Tab 切换：
   - ✏️ 直接输入：文本框，支持逗号、顿号、换行分隔，也可从 Excel 复制粘贴一列
   - 📊 上传表格：支持 .xlsx / .xls / .csv 文件上传和拖拽，使用 SheetJS 解析
2. Excel 解析时自动过滤序号（纯数字）、常见表头关键词（姓名、学号、序号等）
3. 两种方式可混合使用，名单自动合并去重
4. 每个名字显示为彩色标签，可单独删除，支持一键清空

【多班级管理（如果工具需要用到学生名单）】
1. 顶部显示班级切换栏，支持创建/切换/删除多个班级
2. 每个班级独立保存数据
3. 提供"⚙️ 管理"面板，可查看每个班级的人数和使用统计

【PPT 配套】
1. 同时生成一个配套的 .pptx 文件（3页）：
   - 第1页：工具封面（深色背景 + 工具名称 + 图标）
   - 第2页：功能亮点介绍（四宫格卡片布局）
   - 第3页：启动页（大按钮，超链接指向 HTML 文件，配使用步骤说明）
2. PPT 和 HTML 文件放在同一文件夹，PPT 放映时点击按钮即可跳转

【特效】
1. 结果揭晓时有满屏彩色纸屑撒花（confetti）特效
2. 关键元素有脉冲光环动画
3. 按钮有 hover 放大 + 阴影加深效果

智能加权算法：

统计面板：显示每个学生的被点次数柱状图、总点名次数、未点人数、覆盖率，支持重置统计。

2. 幸运转盘

核心功能：彩色大转盘，可自定义内容（学生名字、任务、题号等），点击旋转后缓慢停下。

适用场景：随机抽题、随机分配任务、随机选择学生等。

请制作【幸运转盘】，除了通用要求外，还需要：

【核心功能】
1. 一个可旋转的彩色大转盘，用 Canvas 绘制
2. 扇区均匀分配，每个写上学生名字或自定义任务
3. 点击"旋转"后转盘高速旋转，缓慢停下，指针指向结果
4. 旋转时有咔咔的齿轮音效，停止时有铃声
5. 支持自定义转盘内容（不仅限于名字，也可以是任务/题号等）
6. 转盘最多支持 12 个扇区

【额外功能】
- 可选择"抽中后移除"模式（抽过的不再出现）
- 旋转历史记录

3. 分组神器

核心功能：一键随机分组，支持指定组数或每组人数，避免手动分组的繁琐。

智能算法：确保每组人数均衡，可锁定特定学生（如班干部）分配到不同组。

提供四种预设主题（学习任务、惊喜奖励、趣味惩罚、随机问答）。
支持自定义卡牌内容，可选卡牌数量（6/8/9/12/16张），卡牌背面朝上排列成网格。
点击翻开带3D翻转动画揭晓内容，15%概率出现金色特殊卡牌，支持一键全部翻开，显示翻开进度。
音效使用Web Audio API合成：翻牌时悬念音，普通卡揭晓有上升音阶，特殊金卡触发完整胜利号角，生成时有短鼓点。紫色深色主题，中文界面。

4. 计时器

核心功能：可视化倒计时，支持自定义时长，时间到播放提醒音效。

视觉设计：进度条随时间减少，最后 10 秒变色提醒。

请制作【课堂倒计时器】，除了通用要求外，还需要：

【核心功能】
1. 大字显示倒计时（分:秒），数字要足够大适合投屏
2. 预设常用时间：1分钟、2分钟、3分钟、5分钟、10分钟
3. 也可自定义输入任意时间
4. 最后 10 秒：数字变红 + 闪烁 + 紧张的滴答音效
5. 倒计时结束：响亮的铃声 + 全屏闪烁提示"时间到！"
6. 支持暂停/继续/重置

【额外功能】
- 显示环形进度条，颜色随剩余时间变化（绿→黄→红）
- 可选"正计时"模式（从 0 开始往上计）

5. 命运骰子器

核心功能：主要用于"随机决策"。老师可以用它来随机决定题目难度（1-6对应不同难度）、分配任务顺序

题型支持：单选题、多选题、判断题、填空题。

设计一个课堂互动骰子投掷工具，使用React开发，同时提供.jsx和独立.html文件。
支持1-6个骰子同时投掷，骰子翻滚时数字快速切换并逐渐减速。
支持自定义骰子六个面的内容（如科目名称），显示总点数，保留最近10条投掷记录。
音效使用Web Audio API合成：蓄力阶段渐强鼓点，滚动时哒哒声音调随速度变化，骰子落定时弹跳音，结果揭晓时胜利号角。
界面为深色主题，骰子带颜色区分和光泽动画，中文界面。

6. 盲盒翻牌墙

核心功能：老师可以在复习课上让答对题的同学翻牌获得奖励或趣味挑战，也可以用来随机抽取课堂任务。

激励设计：主要用于"趣味激励"。它本质上是一个课堂奖惩和互动机制

提供四种预设主题（学习任务、惊喜奖励、趣味惩罚、随机问答）。
支持自定义卡牌内容，可选卡牌数量（6/8/9/12/16张），卡牌背面朝上排列成网格，点击翻开带3D翻转动画揭晓内容，15%概率出现金色特殊卡牌，支持一键全部翻开。
显示翻开进度。音效使用Web Audio API合成：翻牌时悬念音，普通卡揭晓有上升音阶，特殊金卡触发完整胜利号角，生成时有短鼓点。
紫色深色主题，中文界面。

实际效果：后排学生主动举手了

用户反馈："后排那几个今天居然主动举手了。" —— 初中教师，使用 1 周后

这个简单的反馈，揭示了 AI 工具的真正价值：不是替代教师，而是让教学更有趣、更高效。

如何使用这些工具

1. 方式一：直接使用
   下载 HTML 文件，双击即可在浏览器中打开，无需安装任何软件。
2. 方式二：定制修改
   使用 OpenClaw，复制提示词，修改学校名称、班级名称等个性化内容。
3. 方式三：二次开发
   基于源码添加新功能，如导出成绩、家长端查看等。

总结：AI 编程的温暖打开方式

这 6 款小工具的开发过程，展示了 AI 编程的一个温暖面向：为家人定制实用工具。

不需要高深的技术，不需要复杂的部署，只需要：

• 一个明确的需求（让课堂更有趣）
• 一个合适的工具（OpenClaw）
• 一套完整的提示词（已公开）

就能创造出真正解决问题的工具。这，或许就是 AI Native 时代，普通人也能享受的编程红利。