用遍所有 AI PPT 工具后,我决定自己造一个

PPT 界还没有它的 HTML。AI 原生时代的演示文档，需要一套从一开始就为 AI 设计的开放格式。

本文看点

我用过市面上几乎所有能跟 PPT 沾边的 AI 工具——Gamma、美图 AI PPT、Kimi 的演示功能、WPS AI，也试过让 ChatGPT 和 Claude 直接写 reveal.js 和 Slidev 的代码。结论是：都不太对。

不是它们不好用，而是它们都只解决了一半的问题。Gamma 们体验流畅，但生成的演示稿锁在平台里，你没法把它抠出来嵌到自己的产品里，也没法用代码批量改。reveal.js 们确实灵活，但它们从设计之初就没考虑过 AI 的感受——没有声明式的组件描述，没有质量校验，AI 生成的质量基本靠运气。

折腾了一圈之后，我决定自己造一个。它叫 OneAct（一幕），一句话定位是：PPT 界的 HTML + 浏览器。

AI 用 JSON 写幻灯片，框架负责高保真渲染，你像用 WPS 一样逐页预览，还能用自然语言局部修改任意元素。今天想聊聊为什么要造这个轮子，以及做出来之后我学到了什么。

先说说我到底踩了什么坑，也许你也踩过。

坑一：AI 一改就全毁

这是最让人崩溃的。你好不容易让 AI 生成了一版还不错的幻灯片，然后发现第三页的图表位置偏了，你跟它说“把图表往左挪一点”，它回你一版全新的——之前调好的内容全没了。每次修改都像拆盲盒。

这背后的根本原因是：这些工具内部没有一个「可寻址」的结构。AI 不知道“第三页的那个图表”是哪个元素，它只能整页重写。

坑二：AI 排版全靠概率

如果你让 AI 直接写每个元素的 x/y 坐标，大概率会翻车——文字重叠、图片超出画布、字号忽大忽小。这不是模型不够聪明，而是 LLM 的空间推理能力确实弱。你不能怪一个语言模型擅长算像素坐标。

坑三：格式封闭

这是最要命的一点。Gamma 生成的演示稿很好看，但你只能导出成 PDF 或在 Gamma 平台里编辑。你没法拿到那份演示稿的「源代码」，没法用程序改它，没法把它嵌到你的 Web 产品里。你生成的所有内容都锁在别人的服务器上。

OneAct 这个名字来自戏剧术语「独幕剧」（one-act play）。一页幻灯片叫「一幕」，文件格式叫 .act，播放器叫「舞台」。不只是命名上的巧思——它反映了核心设计哲学。

具体怎么做的？AI 生成的是一个 slides.json文件——基于 JSON Schema 的声明式组件树。每一页由「版式 + 组件树」构成，每个元素都有唯一的 id。

这意味着什么？你说“把第三页标题改成红色”，AI 只改那个 id 对应的元素，其余纹丝不动。

做这个项目的过程中，有几个设计决策我觉得值得聊聊。不是说它们有多高深，而是它们反映了一种思维方式：不要让 AI 做它不擅长的事。

决策一：两级生成模式——别让 AI 算坐标

前面说了，AI 写像素坐标必然翻车。那怎么办？我的解法是：大部分页面（约 90%），AI根本不碰坐标。

OneAct 预定义了 20 套版式模板，每套模板有若干「slot」（内容槽位），slot 的坐标由模板固定。AI 只需要做一件事——把内容归类到对应的 slot 里。比如一个「左文右图」版式有三个 slot：title、body、image。AI 输出 {"title": "...", "body": "...", "image": "..."}就完了，坐标的事框架来处理。

这个设计的精妙之处在于：它把 AI 最不擅长的事（精确空间定位）和 AI 最擅长的事（语义归类）做了正确的分工。AI 做“这段文字放进标题还是正文”的判断很准，做“x=64, y=48, width=700”的计算很差——那就别让它算。

对于确实需要精确定位的炫技页面（比如发布会风格的不对称布局），AI 可以通过逃逸块（custom-html / custom-svg）直接写，但这只用于少数页面，且经过校验器严格检查。

决策二：校验器——给 AI 配一个质检员

很多 AI 生成方案的问题是“生成完就完了”，没有质量兜底。我觉得这不行。OneAct 内置了一套完整的校验器，自动检查：元素越界、元素重叠、字号过小、对比度不足、文本溢出。

规则分两级：硬错误（必须修复，否则拒绝渲染）和软警告（提示修复，但不阻塞）。

这里有个工程细节值得一提：终审用离屏真实 DOM 测量。校验器不是靠数学公式估算“文字会不会溢出”——它把元素渲染到离屏 DOM 里，测量实际尺寸。估算永远有误差（尤其是中英文混排、加粗、padding 这些因素），但真实测量不会。这让文本溢出检测的准确度提升了一个数量级。

有了校验器，AI 生成的幻灯片就有了底线保障。即使 AI 偶尔出错，框架也能拦住明显的排版事故。更进一步，多 Agent 编排里的 Healer（修复 Agent）拿到校验器的结构化错误定位，可以精准修复特定元素——“第 3 页的 el-4 元素超出了画布右边界 40px”，而不是盲目重写整页。

决策三：图表语义层——让 AI 几乎不可能写错图表

图表是幻灯片里的重灾区。如果你让 AI 写完整的 ECharts option——告诉它 axis 怎么配、series 怎么填、tooltip 什么样式——一个稍微复杂的图表可能有几百行 JSON，AI极易写错。

我的做法是引入「图表语义层」：AI 只写两样东西——图表类型和数据。指定 type: "bar"，给个数据数组，完了。渲染层负责把它翻译成完整的 ECharts 配置，配色、动画、tooltip 全部根据当前主题自动生成。

AI 只需要理解“这是一个柱状图，数据是这些”，完全不需要理解图表库的配置细节。出错概率被压缩到接近零。

如果 OneAct 只是一个 AI PPT 生成器，那它和市面上的产品没什么区别。折腾到后面我发现，真正有意思的是上面那层东西。

多 Agent 编排

生成一份演示稿不是一次 LLM 调用就完事的。OneAct 设计了4 个 Agent 协作——Director 规划结构、Generator 逐页生成、Inspector 校验检查、Healer 精准修复。中间设了3 道质量门禁。整个过程你随时可以取消、暂停、恢复。这比“一次生成祈祷它别出错”靠谱多了。

Skill 系统

不同场景的 PPT 需要不同的东西。路演 BP 和学术答辩的结构完全不一样，Apple 发布会和咨询报告的风格天差地别。OneAct 内置了 9 个 Skill——路演 BP / 工作汇报 / 学术答辩 / 产品发布会 / Apple 极简 / 咨询专业 / 科技发布会 / 金融 / 医疗。每个 Skill 是三个维度的叠加：结构骨架、视觉风格、行业知识。你甚至可以用 Markdown 自定义自己的 Skill 然后导入。

安全沙箱

OneAct 支持逃逸块（可以在幻灯片里嵌入任意 HTML/SVG），但所有逃逸块都在 iframe sandbox内运行，经过 DOMPurify消毒和可疑内容扫描。你打开陌生人分享的 .act 文件也不用担心安全风险。我觉得这是做开放格式必须守住的底线。

四种产品形态

OneAct 不只是个网页工具，它有四种接入方式：

说说目前的实现状况：

技术栈是 TypeScript + pnpm monorepo + Vite + ECharts + GSAP + PptxGenJS + KaTeX + Tauri，开源协议Apache-2.0。

说实话，做之前我以为这会是个小项目。做着做着发现要补的坑越来越多——校验规则要细化、动画系统要兼容 Office 心智、安全沙箱要做到位、多 Agent 编排要设计门禁机制……最后代码库的规模远超预期。但我觉得值——

       说实话，OneAct 目前还不够完美。v0.1 到 v1 的核心架构已经稳定，但还有很多方向要探索——更多版式和主题、更丰富的动画、导出保真度、更多垂直场景。这些需要社区的力量。

如果你对这个方向感兴趣，无论你是开发者、设计师还是内容创作者，欢迎来看看。提 Issue、提 PR、或者只是点个 Star，都是支持。