【标签】 学习工作 | 社会公益
【标题】【学习工作赛道】【社会公益】AI文脉智课：中小学古籍与传统文化视觉化备课平台
【正文】
0. 先和大家打个招呼吧 
-
**
我是谁：**我是一名拥有十多年经验的公考培训讲师，也是一名教育领域的OPC创业者。十多年的教学教研经历，让我对教育行业的真实需求有很强的洞察力，也积累了大量把复杂知识体系化、结构化的方法论。同时，我也是一名正在探索跨界的教育创客。最近一直在思考：多年积累的教育底层结构化逻辑，能不能和当下的AI工具结合，突破传统教育产品的边界？这次参赛，算是我第一次真正动手做一个互联网产品——从一个完全不懂技术的外行，到做出一个能跑起来的Demo。 -
**
我怎么用TRAE做出这个Demo的：**说实话，在此之前我是彻彻底底的技术外行。最开始听到技术人员说"API"，我第一反应是问"什么是API"——那种感觉就像问"1+1为什么等于2"一样的基础，甚至怕被人嘲笑。但TRAE Work完全改变了我的认知。我不需要懂技术行话，不需要会写代码——就像和一个能听懂大白话的技术合伙人对话一样，我把需求一点点"讲"给它听，它就帮我一步步实现。我说"我想让内容嵌在手机壳里不要溢出"，它就写出CSS手机外壳；我说"配色太土要高级感中国风"，它就一轮轮调整；我说"我要接入AI让它能自动生成备课素材"，它就帮我写好API调用代码。
最触动我的，是AI真的能"翻译"我的想法。哪怕我表达得不够专业，它也能理解我在说什么，然后朝我想要的方向靠近。这种体验给了我很大的信心——原来普通人也可以像产品经理一样做产品。现在回头看，从"连API是什么都不知道"到做出一个17页面、真实AI调用的多端Demo，整个过程就像一场跨界实验，也让我对教育+AI的未来有了更多想象。
1. Demo 简介
-
**是什么：**AI文脉智课是一款面向中小学教师的AI智能备课平台（手机App原型），专注于传统文化课程领域。教师只需输入教材章节名称和教学目标，AI即可自动生成包含视频脚本、分镜脚本、知识卡片、随堂练习、互动PPT在内的完整课堂素材包。
-
**面向谁：**中小学语文教师、传统文化课程教师、海外中文学校教师、学生群体。
-
主要功能：
- AI一键生成课堂素材包 — 输入任意教材章节，AI自动生成视频脚本、分镜脚本、知识卡片、练习题等完整教学资源
- 多端多角色覆盖 — 教师备课端（内容定制+素材库+教师交流园地）、学生学习端（年级导航+训练强化+视频推荐）、海外双语端（6国语言+中文双语内容）
- 素材库+教师社区 — 平台提供9大学科素材包，教师可一键使用；教师交流园地支持分享、评论、名师工作室
**【产品定位】**古籍活化不是把古籍数字化就结束了，关键是要让古籍走进课堂、走进教学。AI文脉智课用AI能力将古籍内容转化为可直接用于课堂教学的素材包，真正实现古籍活化从"存"到"用"的跨越。
【首页】
【身份选择页】
【教师端界面展示】
【调用AIP生成内容过程】
【内容定制结果生成】
【海外端身份选择页】
【海外端内容展示页】
2. Demo 创作思路
- 灵感来源
这个研究方向虽然不是我的本专业方向，但灵感来自日常和身边中小学教师的交流，同时个人也是一名传统文化的爱好者。作为一名在教育行业深耕十多年的从业者，我日常接触的教师群体很广泛，逐渐发现传统文化课程备课存在三大核心痛点：
- 素材分散难找：《草船借箭》《岳阳楼记》等经典篇目的优质备课素材散落在各大平台，教师需要花费大量时间搜索、筛选、拼凑，效率极低。
- **形式单一枯燥：**大多数教师只能依赖课本和基础PPT，难以让学生真正"走进"传统文化情境，课堂参与度不高。
- **跨文化传播断层：**中国古籍走向国际时，缺乏适合海外学习者的多语言解读材料，海外中文教学资源严重不足。而随着全球"中文热"持续升温，越来越多的海外中华文化爱好者渴望用母语+中文双语的方式学习中国传统文化，但优质的双语教学资源严重匮乏。
-
想解决的问题
打造一个"AI备课助手"，让教师从"找素材"的苦力活中解放出来，把精力投入到教学设计本身。同时让学生能接触到更有趣的传统文化内容，让海外学习者能获得优质的双语学习资源。 -
为什么做这个方向
恰逢TRAE AI创造力大赛设置"古籍活化工具"附加赛题，这个方向瞬间激发了我的兴趣——古籍活化不仅仅是把古籍数字化存档，更应该是让古籍走进课堂、走进教学，真正被用起来。这与我从教师交流中观察到的真实痛点高度契合。
同时，AI+文化出海也是当前极具潜力的方向。随着"讲好中国故事"的国家战略推进，海外中文学习者群体快速增长。我们的海外端通过"目标国母语+中文"的双语教学模式，有效降低了海外学习者的语言门槛，增加了文化交流的机会，让更多人通过自己的母语理解中国传统文化，真正把"讲好中国故事"落地到了教育场景中。
我决定以“AI让古籍走进课堂”为切入点，打造一款真正帮助一线教师减负增效的备课工具，同时延伸出海外的文化传播场景，形成国内教学+海外传播的双闭环。
- 产品取舍：
- 核心聚焦教师端"内容定制"功能，确保主备课场景体验完整闭环
- 学生端、海外端作为教师生成素材的延伸使用场景，体现产品生态完整度
- 教师交流园地作为平台型内容沉淀与社区运营机制，形成可持续发展路径
3.Demo 体验地址
-
**体验方式：**下载附件中的 HTML 文件，用浏览器直接打开即可体验完整交互。
-
体验路径：
- 打开页面 → 看到"AI文脉智课"启动页 → 点击"开启体验"
- 选择身份"我是老师" → 进入教师端 → 切换到"内容定制"Tab → 输入教材章节（如"草船借箭"）→ 点击"AI生成课堂素材包" → 查看AI生成的完整素材包
- 切换到"素材库"Tab → 点击分类标签筛选 → 点击任意素材卡片查看详情
- 切换到"教师交流园地"Tab → 查看教师分享内容
- 返回首页 → 选择"我是学生" → 体验年级筛选、答题反馈、视频推荐
- 返回首页 → 选择"海外中文爱好者" → 选择国家 → 查看双语内容
4. TRAE 实践过程
本作品全程使用 TRAE Work 完成，从需求分析、产品定位、UI设计、前端开发到AI API集成，全部在TRAE对话中完成。以下分四个阶段呈现开发过程：
阶段一：创意从想法到原型
在TRAE中完成大赛报名、赛道选择、产品定位讨论，确定"AI+传统文化备课"方向。同时完成报名创意产物HTML的生成，并在TRAE中进行了多轮修改优化，确保报名帖内容清晰、定位精准。
**本阶段产出：**报名帖创意产物HTML、产品定位文档、功能规划方案。
**Session ID ：**3911393742692009:9f2e2d80d63894f85af78bdce00c1737_6a4533fd3628e8d6ac05a1db.6a460a6b31efbef774b1a41a.6a460a6b95bf683cec85b526:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/7/2 14:52:16)
阶段二：从网页到手机App原型
这是最关键的阶段。在TRAE中完成了整个Demo的UI设计与交互开发：
**手机外壳设计：**CSS实现仿真手机外壳（黑色边框+侧键+圆角），将内容嵌入手机屏幕
**多页面导航系统：**设计了17个独立页面的导航架构，底部Tab栏切换
**配色迭代：**从最初的大红底色→调整为低饱和朱砂色系→最终确定米色纸底+朱砂红点缀的中国风配色
**内容定制页面：**实现教材章节输入、教学目标选择、快捷推荐标签等交互
**本阶段产出：**教师端完整原型（工作台+素材库+交流园地+我的）。
**Session ID ：**3911393742692009:a8ce2bda7a956f42484e5cb04dffd5ba_6a4533fd3628e8d6ac05a1db.6a4652017bb848d411d1b0b7.6a46520107f8760d348c9fef:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/7/2 20:03:01)
**Session ID ：**3911393742692009:18f5920642e3edda2551859d40cd877c_6a4533fd3628e8d6ac05a1db.6a465eab7bb848d411d1b152.6a465eabbfddd7a65ab30393:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/7/2 20:54:46)
阶段三：多角色延展与AI接入
在TRAE中完成了学生端、海外端、机构合作端的开发，并接入真实AI API：
**学生端：**学习导航（10篇课文覆盖全年级）、训练强化（答题+对错反馈+解析）、视频推荐
**海外端：**6国语言双语系统（选国家后自动切换母语）、定制学习、个人中心
**AI API接入：**注册智谱AI开发者账号，接入glm-4-flash模型，设计Prompt模板，实现真实AI内容生成
**功能测试：**使用Node.js脚本验证API调用成功，确认返回内容结构正确
**本阶段产出：**全角色多端原型、真实AI生成功能、API调用验证报告。
**Session ID ：**13911393742692009:0aca518332b352d48e76eacc88b40bf5_6a4533fd3628e8d6ac05a1db.6a4865c9e3e7c12a4bcb1bca.6a4865c933cd3b92676ad783:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/7/4 09:46:51)
阶段四：功能优化与评分对标
以大赛评分标准（创新性30%+实用性30%+完成度20%+美观度20%）为导向进行逐项优化：
- 素材库从6个扩展到9个，增加分类筛选功能
- 学生端添加年级+素材类型双维度筛选
- 知识卡片和练习题改为可视化卡片样式渲染
- 学生答题增加对错反馈和解析展示
- AI生成结果增加"换一种风格重新生成"按钮
- 补充机构合作页面完整内容
**本阶段产出：**最终版Demo（17页面、真实AI调用、全角色交互）。
**Session ID ：**3911393742692009:e7690577b0f897ee81f35d0544bd305f_6a4533fd3628e8d6ac05a1db.6a4854cbe3e7c12a4bcb1b28.6a4854cbc98fd08d58312bb4:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/7/4 08:36:49)
【说明】由于全程在一个对话中完成，Session ID 为同一对话的不同任务节点。
5.报名帖链接
报名审核通过的帖子：https://forum.trae.cn/t/topic/67887
附：技术实现说明
AI大模型接入（核心亮点）
本作品接入了智谱AI（BigModel）大模型API，实现了真实的AI内容生成能力，而非模拟数据。
-
**模型选择：**glm-4-flash（免费模型，响应速度快）
-
**API平台：**智谱AI开放平台
-
**调用方式：**前端JavaScript通过fetch直接调用Chat Completions API
-
**Prompt设计：**使用【】标记符进行结构化输出，Prompt模板包含角色设定（资深传统文化教研专家）、章节输入、教学目标、输出格式要求
-
**输出解析：**前端解析AI返回的文本，按【视频脚本】【分镜脚本】【知识卡片】【练习题】分段提取，动态渲染为可视化卡片样式
-
**支持范围：**任意K12古诗文、名著导读、传统文化课程章节均可输入，AI自动生成对应素材包
***复赛规划：*复赛阶段将接入视频生成API，实现从文字脚本到可视化视频的自动生成，包括古诗词意境动画、历史场景还原、数字人课堂口播视频等，打造完整的"AI备课→素材生产→视频生成"闭环。
前端技术方案
-
**前端框架：**纯HTML/CSS/JavaScript单文件实现，零依赖
-
**UI方案：**手机App原型模拟，CSS实现手机外壳效果（黑色边框+侧键+圆角），绝对定位+flex布局实现多页面切换
-
**多页面系统：**17个独立页面（4角色入口 + 教师端4tab + 学生端4tab + 海外端3tab + 通用详情页 + 机构合作页），通过goPage()函数统一导航
-
**数据筛选：**学生端支持按年级（一二年级~高中）和素材类型双维度筛选；教师素材库支持按分类（诗词/古文/名著/成语/历史）筛选
-
**答题反馈：**学生端客观题支持对错判断、自动高亮正确答案、显示详细解析
-
**双语系统：**海外端支持6国语言（英/日/韩/泰/法/新加坡）自动切换，选国家后所有页面文字自动替换为对应母语
-
**可视化渲染：**AI生成的知识卡片渲染为独立卡片样式（浅红底+红边框），练习题渲染为带左侧竖线标记的题目卡片，分镜脚本渲染为红色圆点时间线
-
附件
Demo体验文件：
AI文脉智课_初赛Demo.html (127.6 KB)
