MAIC-UI: 生成型UIによるインタラクティブ教材の作成

MAIC-UI: Making Interactive Courseware with Generative UI

April 28, 2026

著者: Shangqing Tu, Yanjia Li, Keyu Chen, Sichen Zhang, Jifan Yu, Daniel Zhang-Li, Lei Hou, Juanzi Li, Yu Zhang, Huiqin Liu

cs.AI

要旨

従来、インタラクティブなSTEM教材の作成にはHTML/CSS/JavaScriptの専門知識が必要であり、教育者にとって障壁となっていた。生成AIを用いてHTMLコードを生成する手法はあるものの、既存のツールは静的なプレゼンテーションを生成するにとどまり、インタラクティブなシミュレーションの作成が困難である。さらに、長文ドキュメントの処理に課題があり、教育的正確性を担保する機構も備えていない。加えて、修正のたびに200〜600秒を要する全体再生成は、創造的な作業の流れを妨げる。本研究では、教育者が教科書、PPT、PDFからインタラクティブな教材を作成し、迅速に編集できるノーコードオーサリングシステム「MAIC-UI」を提案する。MAIC-UIは以下の特徴を有する：(1) マルチモーダル理解に基づく構造化された知識分析により、教育的严谨性を確保；(2) コンテンツ整合性の確認と視覚的洗練を分離した、生成-検証-最適化の2段階パイプライン；(3) Unified Diffベースの差分生成によるインクリメンタルな「Click-to-Locate」編集機能により、10秒未満の反復サイクルを実現。40名を対象とした実験室調査では、MAIC-UIが直接的なText-to-HTML生成と比較して、編集反復回数を削減（4.9回対7.0回）し、習得性と制御性を大幅に向上させることが示された。高校生53名を対象とした3か月間の教室導入実験では、MAIC-UIが学習の主体性を促進し、学習成果の格差を縮小することが実証された―パイロットクラスはSTEM科目で9.21ポイントの向上を示したのに対し、対照クラスでは-2.32ポイントであった。コードはhttps://github.com/THU-MAIC/MAIC-UI で公開している。

English

Creating interactive STEM courseware traditionally requires HTML/CSS/JavaScript expertise, leaving barriers for educators. While generative AI can produce HTML codes, existing tools generate static presentations rather than interactive simulations, struggle with long documents, and lack pedagogical accuracy mechanisms. Furthermore, full regeneration for modifications requires 200--600 seconds, disrupting creative flow. We present MAIC-UI, a zero-code authoring system that enables educators to create and rapidly edit interactive courseware from textbooks, PPTs, and PDFs. MAIC-UI employs: (1) structured knowledge analysis with multi-modal understanding to ensure pedagogical rigor; (2) a two-stage generate-verify-optimize pipeline separating content alignment from visual refinement; and (3) Click-to-Locate editing with Unified Diff-based incremental generation achieving sub-10-second iteration cycles. A controlled lab study with 40 participants shows MAIC-UI reduces editing iterations (4.9 vs. 7.0) and significantly improves learnability and controllability compared to direct Text-to-HTML generation. A three-month classroom deployment with 53 high school students demonstrates that MAIC-UI fosters learning agency and reduces outcome disparities -- the pilot class achieved 9.21-point gains in STEM subjects compared to -2.32 points in control classes. Our code is available at https://github.com/THU-MAIC/MAIC-UI.