【Hello AI 科技致善】用 SOLO 打造教学搭档工具网站
①摘要
面向乡村小学教师，在日常备课、课堂教学与作业批改场景下，提供AI 驱动的课件/教案生成、教学辅助与作业批改等一站式教学工具，帮助教师将备课时间从数小时缩短至几分钟，同时获得专业级的教学资源与个性化反馈建议。
②真实场景与需求
目标人群
乡村小学教师（主要覆盖小学 1-6 年级语文、数学、英语、科学等学科）。他们通常一人承担多学科教学任务，工作量大但可获得的教研支持极为有限。
痛点描述
- 备课环节：教师在准备一节新课的课件和教案时，需要翻阅教参、搜索网络资源、手动排版，往往花费 2-3 小时甚至更久，且找到的资源质量参差不齐，难以适配乡村学校的实际条件（如缺少多媒体设备、学生基础薄弱）。
- 课堂教学：面对重难点知识，教师缺乏系统的拆解方法和现成的讲解脚本，课堂效率难以保证；临时出课堂练习题也耗时耗力。
- 作业批改：批改作业后需要逐个撰写反馈意见，工作量大且难以做到个性化；对学生错误背后的知识点薄弱环节缺乏精准分析。
现有做法
- 依赖教参和网络搜索：教师主要依靠纸质教参或在百度、公众号等平台零散搜索资源，但资源质量不可控、与教学进度匹配度低，且需要大量手动整合。
- 求助教研组或同事：乡村学校师资有限，教研组形同虚设，同事间互助机会少。
- 购买商业教案平台会员：费用高、资源同质化严重，且大多针对城市学校设计，不适配乡村教学实际。
为什么不够：成本高（时间/金钱）、难持续（资源更新慢）、缺资源（优质资源匮乏）、不稳定（依赖个人经验和网络环境）。
③作品介绍
教学搭档是一个面向乡村教师的 Web 端 AI 教学辅助工具网站，基于阿里云通义千问大模型（Qwen3.6-Plus）提供智能生成能力，涵盖以下核心功能模块：
核心功能一览
| 模块 | 功能 | 说明 |
|---|---|---|
| 课件/教案生成 | 智能生成 + 内容适配 | 输入学科、年级、章节，AI 自动生成完整课件与教案；支持设备限制、学生基础、教学时间等适配选项 |
| 教学辅助工具 | 重难点拆解 | 输入学科和知识点，AI 生成教学建议与注意事项 |
| 课堂练习 | 输入学科、知识点和题目数量，AI 生成含答案解析的练习题 | |
| 讲解脚本 | 输入学科、知识点和预计时长，AI 生成结构化课堂讲解脚本 | |
| 作业辅助工具 | 知识点拆解 | 输入作业内容，AI 分析知识点分布，帮助教师了解学生掌握情况 |
| 批改辅助 | 对比学生答案与标准答案，AI 给出批改建议 | |
| 反馈建议 | 根据学生表现描述，AI 生成个性化反馈意见 | |
| 我的资源 | 资源管理 | 查看、管理所有已生成的教学资源，支持 Markdown 渲染预览 |
技术特点
- 纯前端实现：HTML + CSS + JavaScript，无需服务器部署，打开即用
- AI 驱动：接入阿里云 DashScope API（Qwen3.6-Plus 模型），内容生成质量高
- 多格式导出：支持导出为 PPT（PptxGenJS）、Word（.doc）、PDF（html2pdf.js）
- 响应式设计：适配桌面端、平板和移动端，绿色主题清新友好
- 本地存储：使用 LocalStorage 保存资源，无需注册登录
④用 SOLO 实现的过程
任务拆解思路
整个项目按照"需求分析 → 架构设计 → 前端开发 → AI 集成 → 功能完善"的流程推进：
- 需求定义：通过 SOLO 的对话能力，明确了产品定位（乡村教师）、目标用户画像和核心功能范围
- 架构设计：利用 SOLO 生成了完整的产品需求文档（PRD）和技术架构文档，包含功能模块划分、页面流程图（Mermaid）、UI 设计规范
- 前端开发：基于设计规范，使用 SOLO 逐步生成 HTML 页面结构、CSS 样式和 JavaScript 交互逻辑
- AI 集成：通过 SOLO 完成阿里云 DashScope API 的接入，设计 Prompt 模板，实现 7 个功能模块的 AI 内容生成
- 功能完善：添加导出功能（PPT/Word/PDF）、资源管理、响应式适配等
使用的 SOLO 能力
| 能力 | 用途 |
|---|---|
| 对话理解与需求分析 | 将模糊的"教学助手"想法细化为具体的功能模块和用户故事 |
| 文档生成 | 自动生成 PRD 和技术架构文档，包含流程图和设计规范 |
| 代码生成 | 生成完整的 HTML/CSS/JavaScript 代码，覆盖页面结构、样式和交互逻辑 |
| API 集成 | 完成阿里云 DashScope API 的调用封装和 Prompt 设计 |
| 调试与修复 | 修复开发过程中的样式问题、交互 bug 和兼容性问题 |
关键 Prompt 示例
生成 PRD 文档：
“请为乡村教育 AI 教学助手生成一份完整的产品需求文档，包含产品概述、用户角色、功能模块、页面详情、核心流程（含 Mermaid 流程图）和 UI 设计规范。”
生成课件/教案：
“生成一个{年级}年级{学科}学科关于{章节}的课件和教案，{适配条件}”
重难点拆解：
“拆解{学科}学科关于{知识点}的重难点，提供教学建议和注意事项”
课堂练习生成：
“生成{数量}道{学科}学科关于{知识点}的课堂练习题，包含答案和解析”
踩过的坑
- API Key 安全问题：初期将 API Key 硬编码在前端 JS 中，存在泄露风险。后续应改为后端代理或环境变量管理。
- 架构文档与实际实现不一致：技术架构文档规划使用 React + Vite + Tailwind CSS，但实际为了快速落地采用了纯原生 HTML/CSS/JS 方案。SOLO 在执行时根据实际情况做了合理调整。
- PPT 导出兼容性：PptxGenJS 对 Markdown 格式内容的解析有限，部分复杂排版（如表格、代码块）无法完美转换，最终增加了 PDF 降级导出方案。
- LocalStorage 容量限制：浏览器 LocalStorage 通常只有 5MB 空间，大量保存资源后可能触发容量不足，需要考虑清理策略或迁移到 IndexedDB。
- AI 生成内容格式不稳定：大模型输出的 Markdown 格式偶尔不规范（如缺少换行、标题层级混乱），通过优化 System Prompt 和增加后处理逻辑缓解。
⑤成果展示
访问网站 https://charming-bienenstitch-0145f0.netlify.app
功能截图说明
- 首页：展示"让 AI 成为您的教学搭档"标语、三大核心功能卡片入口、推荐教学资源（B 站链接）和最近生成资源 TOP 5
- 课件/教案生成：表单输入学科/年级/章节，支持设备限制、学生基础、教学时间等适配选项，一键生成并支持 PPT/Word 导出
- 教学辅助工具：三个标签页（重难点拆解、课堂练习、讲解脚本），覆盖课前备课和课中教学全流程
- 作业辅助工具：三个标签页（知识点拆解、批改辅助、反馈建议），覆盖课后作业全流程
- 我的资源：资源列表管理，支持查看（Markdown 渲染）和删除操作
技术栈
| 类别 | 技术 |
|---|---|
| 前端 | 原生 HTML5 / CSS3 / JavaScript |
| AI 模型 | 阿里云 Qwen3.6-Plus（DashScope API） |
| Markdown 渲染 | marked.js |
| PPT 导出 | PptxGenJS 3.12.0 |
| PDF 导出 | html2pdf.js 0.10.1 |
| 图标 | Font Awesome 6.4.0 |
| 字体 | Google Fonts（Noto Sans SC / Noto Serif SC） |
| 数据存储 | 浏览器 LocalStorage |