MAIC-UI：用生成式 UI 制作可交互课件 MAIC-UI: Making Interactive Courseware with Generative UI
清华团队零代码生成可交互 STEM 课件，3 个月课堂试点让学困生收益最大
前置知识
生成式 UI (Generative UI)
由大语言模型根据自然语言指令直接生成用户界面（HTML/CSS/JS）的前沿范式。区别于传统模板化界面，生成式 UI 在运行时动态构建网页代码，使界面能自适应用户的意图。本文正是把这一范式应用于教育课件场景。
MAIC-UI 整个系统建立在生成式 UI 之上，理解它能帮助你抓住为什么作者不满足于'让 ChatGPT 写 HTML'这种朴素的 text-to-HTML 路径，以及它如何被扩展到长文档、增量编辑、教学准确性等更复杂的需求。
End-User Programming (EUP, 终端用户编程)
让没有编程背景的领域专家（教师、设计师、办公人员）也能修改或创建程序的研究方向。代表工作包括 TweakIt、Ply、SketchGPT 等。其核心原则是让用户关注'想做什么'而非'怎么用代码实现'。
MAIC-UI 的 Click-to-Locate 模块是 EUP 思想在 GenUI 时代的延伸：教师点击元素后用自然语言描述修改意图，系统把视觉元素和 DOM 代码桥接起来。这是为了让 0 编程经验的教师也能精确编辑生成出来的课件。
Unified Diff 格式
一种标准的代码差异表示法，原本用于 Git 等版本控制系统来描述文件的增删行。它由若干 hunk（@@ 标记）组成，每个 hunk 包含上下文行（以空格开头）、新增行（以 + 开头）和删除行（以 - 开头）。在 MAIC-UI 中被复用为'增量编辑协议'。
这是论文最重要的工程创新之一。直接让 LLM 输出整份 HTML 太大、太慢；改为只输出改动行加上下文，输出 token 量减少约 90%，让编辑响应从 200–600 秒降到 10 秒以内，是 sub-10s 迭代闭环的技术基础。
多模态大模型 (VLM) 与结构化抽取
视觉-语言模型能从图像和文本中联合推理，常用于文档理解。把 PDF 每一页渲染成图像后送入 VLM，并配合结构化提示词（要求返回 JSON），可抽出'主题、关键概念、学习目标、程序性步骤'等结构化字段。这是当前处理教育长文档的主流方法。
MAIC-UI 用 GLM-4.6V 配合精心设计的结构化提示词，从 50 页以内的 PDF 教科书/PPT 中抽取教学要素，再驱动后续生成。这一步直接决定了内容准确性，所以论文把它单独列为三大技术创新之首。
研究动机
在 K-12 与高校 STEM 课堂中，可交互课件（如让学生拖动滑块改变质量、实时观察重力势能变化的模拟器）被大量研究证实能提升参与度与概念理解，但制作门槛极高：教师必须手写 HTML/CSS/JavaScript、调试跨浏览器兼容性、设计可视化与实时反馈机制，这把绝大多数一线教师挡在门外。研究者在 6 位有教学经验的研究生中做的预备性访谈（P1–P6）系统性地暴露了四个具体问题：F1 知识准确性焦虑（P3：'它呈现知识的方式有问题'，P4：'有时候生成的知识就是错的'），F2 编辑能力薄弱（P3：'修改编辑没那么容易'，P5：'需要三到四次迭代'），F3 课件过于被动（P4：'PPT 是固定内容，学生容易觉得无聊'），F4 理论与实践脱节（P4：'课本和真实场景之间存在 gap'）。即使引入现成的 LLM Text-to-HTML 工具，作者也指出三类系统性问题：(a) 产物多为静态图文而非可交互模拟，(b) 处理长篇教材/PPT 时容易丢失关键上下文（典型 LLM 长文档失败模式），(c) 每次教师要求修改时系统都会整页重新生成，单次耗时 200–600 秒，强烈打断创作心流。
本文的目标是本文的目标是构建一个零代码、低门槛的交互式 STEM 课件生成与编辑系统，让普通教师能直接上传 PDF/PPT 教材或手写一段结构化教学描述，在分钟级时间内得到可让学生自由调参、可视化过程步骤的 HTML 模拟页；并把日常'小修小改'的迭代周期压到 10 秒以内，从而让教师真正保持创作心流。最终在受控实验和真实课堂部署两个层面验证：(1) 编辑效率与可控性显著优于直接 Text-to-HTML；(2) 学生学习效果有可测量的提升，尤其是学困生能从中获益。
与已有工作不同的是，现有 GenUI 工具的研究重心多在通用网页/数据可视化生成，几乎没有专门为 STEM 教学做的端到端工作流。本文的核心切入角度是把'教学准确性'与'零代码精确编辑'作为同等优先级的设计目标，并用一个完整的双阶段生成 + Click-to-Locate 增量编辑流水线把它们统一起来：先用结构化知识分析保证内容正确（解决 F1/F4），再用 Click-to-Locate + Unified Diff 把局部修改压到秒级（解决 F2），最后通过可调参数+实时反馈的真实可交互控件把被动 PPT 转为主动探究（解决 F3）。这条'准确性 ↔ 交互性 ↔ 迭代速度'三位一体的设计，是它区别于 DynaVis、SketchGPT、TutorCraftEase 等通用 GenUI 工具的关键。
核心方法
MAIC-UI 的整体思路可以一句话概括为：'先读懂教材，再分两步做出既正确又好看的交互页，最后用秒级增量编辑让教师敢改、能改、愿改'。技术上是一条端到端的多模态 LLM 流水线：教师上传 PDF/PPT（≤50 页）或直接填写结构化教学表单，系统先用 GLM-4.6V 把内容抽成'主题/概念/目标/先修/程序步骤/学科年级'六个字段；然后进入两阶段生成——Stage 1 用 GLM-4.7 生成左右双栏的可交互 HTML（左栏步骤，右栏可调参控件），并通过自动校验保证交互可用；Stage 2 在 Stage 1 输出上叠加学科主题色、排版、动画等视觉打磨，且做 HTML 合法性校验；若任一阶段失败，系统按预定义策略优雅降级。最后是 Click-to-Locate 编辑：教师在前端预览里点击任意元素，前端捕获它的 XPath 和 CSS 选择器，与教师的自然语言指令一并送入后端，LLM 仅返回 Unified Diff 格式的补丁，前端把它合并回原文，整个闭环控制在 10 秒以内。
MAIC-UI 的核心创新不在某一个模型技巧，而在于'流程级'的工程化整合。与最朴素的 Text-to-HTML 基线相比，它做了三件本质不同的事：(1) 把'内容正确性'和'视觉专业度'拆成两个独立可验证的阶段（generate-verify-optimize），打破'一次 LLM 调用要么对要么美'的取舍，避免 hallucination 污染；(2) 用 DOM-aware 的视觉元素选择协议把所见即所得（WYSWYG）和自然语言编辑合二为一，让教师无需理解 CSS 选择器或 DOM 结构也能精准定位元素；(3) 把版本控制领域的 Unified Diff 借用到 GenUI 增量生成，把 LLM 的输出从'整页 HTML'压缩成'几行补丁'，这是让 10 秒内迭代成为可能的根本原因。三者结合才是 MAIC-UI 的壁垒，任何单点都不够。
方法步骤详情
完整方法流程包含六个串联环节。第一步是双模态输入接入：(a) 教师上传 PDF，系统用 PDF 渲染把每页转成图像，配合 ANALYSIS_PROMPT 让 GLM-4.6V 返回六个字段（Main Topics / Key Concepts / Learning Objectives / Prerequisite Knowledge / Procedural Concepts / Subject Area + Grade Level），其中 Procedural Concepts 字段明确要求列出可调参数与步骤，是能否生成交互模拟的关键；(b) 教师也可直接填写结构化表单（学科、概念名、概览、掌握要点、设计想法）。第二步是主题与年级映射：依据抽出的学科从预置调色板中选主题（物理蓝、生物绿、化学橙等）。第三步是 Stage 1 内容对齐生成：基于结构化字段用 STAGE1_PROMPT 提示 GLM-4.7 生成左右双栏 HTML+CSS+JS 模拟页（要求 left panel 显示步骤+高亮当前步，right panel 提供参数滑块，process 与 simulation 通过状态变量耦合，所有公式必须科学准确，并附带工具提示）。同时自动校验交互是否响应输入，不通过则把错误回灌给 LLM 重生。第四步是 Stage 2 视觉打磨：用 STAGE2_PROMPT 对 Stage 1 输出应用主题色、字体层级、过渡动画、统一间距，再次跑 HTML 合法性校验。第五步是 Click-to-Locate 编辑：教师在前端预览里点击任意元素，前端调用 getXPath() 和 getCSSSelector() 拿到定位信息并把 outerHTML 摘要显示在侧栏；教师的自然语言指令和元素上下文一起发到后端，LLM 返回 Unified Diff 格式的补丁，前端用 Python 的 difflib 把 patch 合并回原文（通过 fuzzy context matching 容忍轻微上下文漂移），典型 p50 6.2s、p95 8.8s 完成一次编辑。第六步是课堂使用：教师把生成的 HTML 部署到课堂，学生用平板打开后自由调整参数实时观察公式与可视化效果。
技术新颖性
技术上把已有的多种思想做了'教育场景定制化'重整，并非完全原创的底层模型，而是新颖的系统工程。三个较突出的技术贡献分别是：(1) 把多模态结构化抽取（VLM + JSON 约束）作为教育 GenUI 的前置步骤，相比传统 RAG 方案更适合教科书这类图像+公式密集的长文档；(2) 显式把'内容准确性'与'视觉专业度'拆成两阶段，并对每阶段都嵌入自动验证+多轮重试+优雅降级，这种 generate-verify-optimize 模式在 GenUI 文献中较少见；(3) 把 Unified Diff 作为 LLM 的'增量输出协议'，让 10 秒级本地编辑成为可能，是把软件工程工具巧妙搬到 GenUI 流水线里、跨领域借鉴的典型例子。此外，DOM-aware Click-to-Locate 把浏览器的开发者工具范式（XPath/CSS selector）反向暴露给非程序员用户，是 EUP 思想在 GenUI 时代的新表达。
实验结果
论文用受控实验与真实课堂部署两类证据交叉验证 MAIC-UI 的有效性。在受控实验（N=40，20 名 MAIC-UI + 20 名 Baseline 代理教师）方面，Table 1 显示 MAIC-UI 条件下教师完成课件修改所需的迭代轮次 Mdn=4.50、IQR 2.75–7.00，显著少于 Baseline 的 Mdn=7.00、IQR 5.00–9.00（Mann-Whitney U=113.0, p=0.019, 效应量 r=0.37），直接证明 Click-to-Locate 的增量编辑让教师'少走弯路'。Figure 4 的问卷四项中，Item 1（上手速度，M=3.80 vs 3.15, p=0.042）和 Item 3（编辑可控性，M=4.25 vs 3.60, p=0.032）显著优于 Baseline，Item 2（备课时间）和 Item 4（使用意愿）虽无统计显著差异，但都处于偏高的天花板区间，可能受到天花板效应限制。Figure 5 进一步展示了 MAIC-UI 在六维感知质量上（布局直观性 M=4.15、注意力吸引 M=4.20、概念准确性 M=4.30、教学要点覆盖 M=4.45、语言清晰度 M=4.40、概念直观呈现 M=4.35）全部高于 4.0 的正面反馈。访谈中 P1/P8 等认为 MAIC-UI 把备课效率提高约 3 倍，'只需要给它目标，它就能直接生成'。在三个月课堂部署（N=53，C1 试点班 vs 同年级 493 人对照）方面，Figure 6 给出关键发现：C1 在 STEM 学科平均提分 +9.21 分，对照班平均 -2.32 分（Mann-Whitney U=16691.5, p<0.001, r=0.14）；人文学科 C1 提分 +6.43 分但不是年级最高，符合 MAIC-UI 强项在 STEM 的定位。Figure 7 显示 C1 提分的方差（562）低于其他班（598–1054），说明进步更均匀地分布在不同水平的学生中。最关键的等式公平性证据来自底层 25% 学生：C1 这部分学生 STEM 提分 M=15.46（对照班 12.42）、正向提分占比 78.6%（对照班 63.5%）、提分方差 251.02（对照班 671.34），三指标全面占优，说明 MAIC-UI 让学困生获益最大。访谈中原本不爱发言的学生'在智能在线学习环境中完全打开了心扉'，教师也观察到'以前只是对着黑板讲，现在能和学生一起玩知识点'，验证了学习主动性的提升。
查看结构化数据
| 任务 | 指标 | 本文 | 基线 | 提升 |
|---|---|---|---|---|
| 课件编辑迭代轮数 | 编辑次数（中位数 / IQR） | MAIC-UI: Mdn=4.50, IQR=2.75–7.00 | Text-to-HTML Baseline: Mdn=7.00, IQR=5.00–9.00 | 迭代次数减少约 30%，Mann-Whitney U=113.0, p=0.019, r=0.37 |
| 上手学习速度（问卷 Item 1） | 5 点李克特量表均值 | MAIC-UI: M=3.80 | Baseline: M=3.15 | p=0.042，显著优于 Baseline |
| 编辑可控性（问卷 Item 3） | 5 点李克特量表均值 | MAIC-UI: M=4.25 | Baseline: M=3.60 | p=0.032，显著优于 Baseline |
| 课堂 STEM 学科提分（三个月部署） | 全班平均提分（分） | C1 试点班 (n=53): M=9.21 | 同年级其他班 (n=493): M=-2.32 | 差值约 11.5 分，Mann-Whitney U=16691.5, p<0.001, r=0.14 |
| 底层 25% 学生 STEM 提分 | 提分均值 / 正向提分占比 / 提分方差 | C1 后 25% (n=14): 15.46 / 78.6% / 251.02 | 其他班后 25% (n=137): 12.42 / 63.5% / 671.34 | 三指标全面占优，对学困生增益最明显 |
| 编辑响应时间 | Click-to-Locate 编辑的端到端时延 | MAIC-UI: p50=6.2s, p95=8.8s | 整页重新生成: 200–600s | 提速约 30–100 倍，token 量减少约 90% |
局限与改进
作者在论文中坦承了三方面局限。其一是系统层面只能生成单页交互模拟，不支持需要长篇叙事或顺序课程结构的多页课件；其二是依赖 VLM 做内容抽取，对专业符号（如化学结构式、复杂电路图）仍可能误读，需要领域微调或 OCR+视觉混合方案；其三是受控实验用的是有教学经验的研究生做代理教师，与一线 K-12 教师在技术熟练度、教学压力上存在差距；课堂部署只在单所中国县城公立高中完成，结论在不同国家、学科、学生群体上的可推广性仍需进一步验证。除此之外还可以观察到几个隐含限制：(a) 两阶段生成与 VLM 抽取都依赖外部商用大模型（GLM-4.7/4.6V），离线场景或数据隐私敏感场景下不可用，作者也提到可以探索本地化部署或混合策略；(b) Unified Diff 假设代码结构稳定，经过多轮大幅度编辑后可能出现 patch 上下文漂移，需要 fuzzy matching 兜底，论文没有量化 patch 应用的失败率；(c) 三月课堂部署的样本量只有 53 人，统计功效有限，未来需要更大规模、随机分组的 RCT。
独立分析的弱点
从工程与研究设计角度，我认为 MAIC-UI 仍有若干可改进的具体弱点。第一，依赖商用 LLM 服务的可重复性较差——同一份教材两次生成的结果可能差异明显，文中没有给出种子控制或重测一致性指标；改进方向是引入'生成多样性控制'或多次采样投票机制。第二，论文没有量化 Click-to-Locate 的 patch 应用失败率，只说 fuzzy matching 能'高成功率'容忍上下文漂移；可改进为提供 patch 失败的可视化回退界面，并在累计编辑次数超过阈值时主动提示教师进行全页重生。第三，目前只支持单页课件，但真实课堂常常需要 5–10 个相关概念的连续讲解；扩展方向是引入'组件级 + 页面级'两层 Diff，把每页课件拆成可复用组件。第四，VLM 对化学式、数学符号的抽取准确率没有公开评测，建议加入 DocVQA、ChartQA 这类基准上的子集测试。第五，代理教师与真实教师的差距在编辑习惯和课堂节奏上较大——真实教师往往在 10 分钟课间就要快速调整一页课件，作者虽提到'教学压力大'但实验中没有模拟这种时间约束；可改进为引入限时编辑子任务。第六，问卷设计上 Item 2、Item 4 触到天花板效应（M≥3.55, p>0.1），未来应替换为更具区分度的题目或加入行为指标。第七，课堂部署没有做随机化分组（C1 是基于'教学安排和部署可行性'被挑出来的，可能本身就更适合试点），存在选择偏差。
未来方向
作者明确提到的未来方向是扩展为多页课件模板、扩展学科覆盖、推进多场景长期集成。可延伸的研究方向至少包括：(1) 引入更细粒度的学生画像做自适应课件，让可调参数与学生当前掌握度挂钩；(2) 接入 LLM-based 学生行为分析，识别学生卡点并自动调整控件范围；(3) 探索教师间的协作模式，让教研组协同编辑同一份课件并保留生成-编辑版本历史；(4) 把生成式 UI 范式拓展到其他学科（如艺术的可调滤镜、历史的时间轴交互）和职业培训场景；(5) 研究 Click-to-Locate 在多页课件中的元素跨页引用机制，以及配套的撤销/重做与协作编辑；(6) 做一次严格随机分班的 RCT，覆盖多所学校、多个学科，把'学困生增益最大'这一发现从描述性证据升级为因果证据。
复现评估
代码已开源在 https://github.com/THU-MAIC/MAIC-UI，论文附录 E 还提供了完整 API 规范、AI 模型配置、提示词模板和代码级实现细节，对研究者比较友好。复现所需的输入包括：教师准备的 PDF/PPT（典型 20–30 页 STEM 课件，作者用的是真实中小学到研究生级别的教材，IRB 批准并经作者与原作者双方知情同意）；后端依赖 Zhipu AI 的 GLM-4.7（文本生成，temperature=0.3, max_tokens=8192，带 GLM-4.6 fallback）和 GLM-4.6V（多模态抽取，temperature=0.2, max_tokens=4096，带 GLM-4.5V fallback）；技术栈为 React 18 + TypeScript + Tailwind + Monaco Editor（前端），Python 3.11 + FastAPI + SQLite + SQLAlchemy + Celery/Redis（后端）。整体生成一份课件约 2.5 分钟，单次 Click-to-Locate 编辑 <10 秒，所以完整复现一份课件 + 做若干次编辑大约需要一台能稳定访问 Zhipu AI API 的开发机即可，没有特别高的算力门槛（云 API 调用，不需本地 GPU）。不过，复现整套实验（即受控研究 N=40 + 三月课堂部署 N=53）的成本和门槛很高：需要招募有教学经验的研究生、协调中学班级并获得 IRB 同意、对照班与试点班的数据收集等；特别是三个月课堂部署需要和学校深度合作，对绝大多数研究者不现实。建议普通研究者只复现系统搭建和受控实验部分，课堂效果数据更多作为'信号'参考。
论文图表