用AI三分钟生成课堂管理神器!我们的“班级宠物!只会因为爱和努力更加健康!看完这篇你也能做到!

🎯 为什么要用AI做工具？

接下来，我以分小组养宠物为例，简单的宠物画面展示，使用DeepSeek来演示全过程。

想清楚你要什么

在跟AI对话前，先写清楚你的需求。比如我要做“学生领养宠物系统”，以一个组一个宠物为例：

• 用途：课堂小组评价，每个小组一个宠物

• 布局：9个小组排成3×3网格

• 宠物：分三个等级（蛋、小鸟、凤凰），分数越高越华丽

• 操作：老师点击“发言”“纪律”“做题”按钮给当前选中小组加分

• 存储：分数要能保存，明天打开还在

• 音效：加分有声音，升级有特别音效

• 满级提示：达到30分显示“恭喜你，满级啦！”

需求越具体，AI生成的代码越接近你的想法哦。

向AI提出初始需求

打开AI对话界面（比如DeepSeek），输入以下提示词（可以直接复制）：

请帮我生成一个HTML网页，实现一个课堂小组宠物评价系统，具体要求如下：1. 布局：页面主体是一个3列×3行的网格，共9个单元格，每个单元格代表一个小组。网格铺满页面大部分区域，单元格之间有间距。2. 宠物形象：每个单元格内有一个宠物，根据小组分数分为三个等级（用CSS绘制，不要图片）：   – 等级1（0-9分）：萌趣彩蛋，椭圆形，有眼睛嘴巴，带爱心和星星装饰，有摇晃动画。   – 等级2（10-19分）：活泼小鸟，圆形身体，有翅膀、喙、脚爪，翅膀扇动动画。   – 等级3（20-30分）：华丽凤凰，更大，有华丽翅膀、尾羽、羽冠，带星光特效。3. 小组名称：每个宠物下方显示“X组”（X为1-9），单元格背景用不同的浅色。4. 按钮：页面底部居中放置三个功能按钮，尺寸小巧（宽80px高35px），分别为“发言”“纪律”“做题”，点击按钮为当前选中的小组加1分。按钮设计圆润可爱。5. 选中效果：点击某个宠物单元格，该单元格高亮显示（边框发光），表示当前操作的小组。6. 分数存储：使用localStorage保存每个小组的分数，刷新页面或第二天打开，分数不变。7. 满级提示：当小组分数达到30分时，在宠物上方显示“恭喜你，满级啦！”的提示，5秒后自动消失，样式醒目。8. 音效：加分时播放轻快音效，升级时播放更响亮的音效（用Web Audio API实现，不要音频文件）。9. 额外功能：底部有两个系统按钮“分数汇总”（显示最高分小组并放烟花）和“重置分数”。10. 整体风格：Q萌、色彩明快，适合小学生。请生成完整的HTML代码，包含CSS和JavaScript，代码要有详细注释。

测试AI生成的初版

AI生成代码后，你需要做的是：

1. 下载网页（注意扩展名是.html）

2. 双击用浏览器打开

你会看到一个界面，如图所示：

提出修改要求，测试后让AI完善

初版可能有小bug，或者样式不合心意。你可以继续跟AI对话，提出修改。例如：

• “按钮太大了，再小一点，宽度70px，高度30px。”

• “宠物动画不够明显，让凤凰的翅膀扇动幅度大一点。”

• “满级提示文字再大些，加个黄色边框。”

• “升级音效不够欢快，改成两个音同时响。”

把这些问题逐条告诉AI，它会生成更新后的代码。你可以反复调整，直到满意。

个性化定制（可选）

你可以让AI帮你修改样式，匹配你的班级文化。例如：

提要求的方式很简单：“请把按钮文字改成‘阅读之星’‘书写之星’‘合作之星’，并加一个班级名称‘阳光二班’在顶部。”

AI会相应调整代码。

给老师的进阶技巧

1. 分步生成：如果一次提太多需求AI可能漏掉，可以先要基础版，再逐步添加功能。例如先要网格和宠物，再加上按钮，最后加存储。

2. 保留对话：每次修改都保留对话记录，方便回溯。

3. 让AI解释代码：如果你对某段代码好奇，可以问“这段CSS是干什么的”，AI会讲解，帮你逐渐学会基础。

4. 组合多个AI：不同AI擅长不同，可以试试用豆包生成，用DeepSeek优化。