夜雨聆风本次分享由齐河县第三实验小学教师高忠臣，讲解一线教师使用AI大模型生成教学网页的3+1开发法，展示AI网页在教育多场景的应用，对比Deepseek与豆包生成网页的优劣势，最后补充了教师作为教育创新者的相关思考。
分享开场与背景介绍
分享框架说明：本次分享共分为四个部分，分别是背景概述、点名加小组积分网页案例讲解3+1开发法、AI生成网页多场景应用展示、常见问题解决与大模型对比。
教育信息化背景：当前处于教育信息化转型阶段，国家推进AI+教育相关文件，课堂向智能化加速发展。网页程序因跨平台、易部署、交互性强的特点，成为课堂应用的重要载体。
传统开发门槛问题：传统网页开发门槛高、周期长，多数一线教师望而却步。生成式AI技术成熟后，零编程基础的教师仅通过自然语言指令，即可生成符合教学需求的网页。
AI生成网页的3+1开发法整体介绍
3+1开发法定义：3指三种生成网页的方法，1指一个网页完善技巧，可解决AI生成网页质量低、提示词无思路、需求不明确三类常见问题。
第一种方法：自主构思逐步追问法：该方法适用于教师有明确需求、能够描述网页功能布局且提示词设计能力较强的场景，优点是稳定可靠、定制化程度高，缺点是耗时较长，受教师自身经验创意限制较大。
第二种方法：基于成品的AI反推法：该方法适用于教师在互联网找到满意的参考网页、但无法获取源码的场景，优点是复刻率较高、效率快捷，缺点是一次性复刻容易出现大量bug导致网页无法使用。
第三种方法：AI检索连锁构思法：该方法适用于教师无具体设计思路、也无合适成品参考的场景，优点是AI联网检索产出的功能布局全面丰富，缺点是生成内容可能不符合教师预期，且容易出现大量bug。
完善技巧：AI辅助优化法：该技巧适用于教师自行检查后无法找到更多优化点的场景，核心操作是将最终版网页的HTML代码发送给AI，让AI分析可优化点，教师筛选需求后再让AI优化，能有效提升网页质量。
自主构思逐步追问法实操演示（点名加小组积分网页）
第一步：整体功能构思：明确网页需要支持导入Excel格式小组名单，主体显示小组与成员积分信息，顶部设置随机点名功能，右侧设置可视化积分排行榜，底部设置导出、重置数据功能栏。
第二步：生成提示词设计：提示词遵循“生成XX网页+构思内容+要求以HTML代码输出”的模板，需求描述需详细清晰有层级，避免模糊歧义。本次示例提示词明确要求网页支持导入Excel名单、提供模板下载、实现所有规划功能，最后要求输出HTML代码。
第三步：初版网页测试：测试发现初版网页存在四个问题：刷新后积分数据丢失、界面风格过于简约缺少动效、每行仅显示一个小组查看不便、随机点名是静态效果缺乏趣味性。
第四步：追问修复bug：追问提示词遵循“评价生成结果+基于你刚生成的代码，实现以下需求，并呈现完整代码+新增需求”的模板，其中“刚生成”“完整”两个关键词非常重要，可避免AI基于旧版本代码生成、输出分段代码。本次修复需求包括：刷新不丢失数据、滚动点名、可调整每行显示小组数量、改为科技风界面。
迭代与追问原则：修复后可不断测试，发现新问题后继续迭代更新，本次迭代新增了随机点名音效、积分商城、自定义小组名称与组长、拖拽调换成员功能。追问需遵循**少量多次原则**，每次仅提少量不冲突需求，避免不同需求代码冲突导致网页无法使用。
基于成品的AI反推法实操演示
操作步骤说明：第一步对参考网页截图保存，第二步将截图上传至AI大模型，指令为“反推该点名加小组积分网页的提示词”，第三步教师对AI输出的提示词进行阅读、筛选、修改，第四步将修改后的提示词发给AI生成初版网页，第五步测试网页、修复bug、迭代优化。
输出差异说明：即使提示词完全一致，AI每次输出的网页也会存在差异，核心原因同一个提示词对应多个合理输出，就像同样的西红柿鸡蛋面配方，每次制作出的面也会存在细微差异，只要核心功能符合需求即可。
AI检索连锁构思法实操演示
操作步骤说明：第一步直接将网页名称和大致需求发给开启联网检索功能的Deepseek，让AI自主分析网页的功能板块与结构布局；第二步教师对AI输出的内容进行分析筛选；第三步将筛选后的描述发给AI生成初版网页；第四步测试网页、修复bug、迭代优化。
演示结果说明：AI分析出的功能布局比教师自主构思更全面，生成的网页也更美观，但初版存在无法导入导出班级数据的bug，需要按流程修复迭代后才能使用。
AI生成网页的教育多场景应用展示
课堂教学场景-课堂导入：可制作数学口算互动网页（自定义出题范围和题量）、水果单词消消乐/语文词语连连看（适合低学段）、看字说颜色专注力训练网页（帮助学生快速进入课堂状态）。
课堂教学场景-知识新授：可制作数学函数交互式网页（任意设置参数，可视化展示函数变化）、物理力学交互式网页（任意设置抛体运动发射角度、初速度）、地理太阳系运行网页、化学分子可视化网页，帮助学生建立空间概念，加深知识理解。
课堂教学场景-巩固练习：可制作自定义单词/古诗/公式记忆卡片网页，完全免费且可自定义词库和界面，替代收费的商用记忆软件；还可通过OCR识别旧题目，让AI生成变式题并自动A4排版留空，节省教师出题时间。
课堂教学场景-其他应用：可制作自习安静种树网页（学生保持安静树木就会成长，培养低学段学生自习习惯）、音浪小球网页（监测早读音量，支持自习课噪音警报）、计时打卡网页（激励学生完成限时背诵默写任务）、抽背网页（随机抽取学生背诵古诗单词）。
学生评价场景：可制作成绩分析网页，支持上传班级各科成绩，自动计算平均分，生成饼图、表格等可视化分析结果，还可多维度展示每个学生的成绩，方便教师快速掌握学情，适合级部成绩统计使用。
班级管理场景：可制作综合班级管理网页，在小组积分基础上，支持将班规转化为加减分规则，记录加减分原因，支持数据统计分析；还可制作座位编排网页，支持拖拽排座位，导出PDF打印，方便新教师认学生，减轻工作负担。
教师办公场景：可制作自定义图片压缩网页（可设置压缩质量、输出格式、尺寸、最大大小）、自定义水印添加网页（支持任意位置添加任意内容水印，调整透明度倾斜度，一键批量处理并下载）、数据可视化网页（上传Excel数据生成自定义图表并下载）、数学公式编辑网页（理科教师编辑公式后下载图片插入Word/PPT）。
AI生成网页常见问题与解决方法
问题一：多次生成结果仍不满意：解决方法是更换AI大模型，比如原本用Deepseek可换豆包、通义千问等，对比多个大模型的输出结果，选择最符合需求的版本即可。
问题二：生成的网页无法使用或无法加载：常见原因是一次性提出的需求太多，AI会死板生成所有需求，容易出现代码冲突。解决方法是复制上一版可用网页的HTML代码，开启新对话粘贴代码，拆分需求后少量多次追问，逐步实现所有需求。
问题三：追问后输出内容和上一版差距过大、偏离需求：常见原因是追问提示词中没有添加“基于你刚生成的代码”的指令，AI会基于旧版本代码输出。解决方法是在追问提示词中添加该指令即可。
Deepseek与豆包AI生成网页的优势对比
Deepseek的优劣势：优势是完全遵循提示词要求生成，很少额外添加未提及的功能，生成网页稳定可用，定制化程度高，支持生成几千行的HTML代码，可制作复杂功能完备的网页。劣势是对提示词设计能力要求高，通常需要多次追问才能得到美观元素丰富的网页。
豆包AI的优劣势：优势是会在提示词基础上自动添加丰富的界面元素，弥补教师经验不足的问题，且拥有应用创作1.0功能，支持直接点击网页元素进行定向修改，对零编程基础教师更友好。劣势是容易生成过多元素，对提示词把握不准，容易导致核心功能无法使用，需要后续修复。
教育者角色与教育家精神分享
教师的常规角色：教师除了承担课标制定、教材编写、试题命制、课程实施等教学任务，还需要承担班主任工作，负责班级管理、学生问题解决、家校沟通等，工作内容复杂繁重。
教育者的更高追求：真正的教育创新不是套用新技术、新方法，而是用实际行动创造高品质的教育生活，应当追求像教育家一样工作和生活。
教育家精神的内容：习近平总书记在2023年9月9日致全国优秀教师代表的信中，提出了教育家精神：心有大我、志诚报国的理想信念，言为师德、行为师范的道德情操，启智润心、因材施教的育人智慧，勤学笃行、求实创新的躬耕态度，乐教爱生、甘于奉献的仁爱之心，胸怀天下、以文化人的崇高追求。
