我们从 5 万多次 AI 幻灯片生成中学到的一切……今天开源给你

我们在 DesignArena 看到了对 AI 生成幻灯片需求的急剧增长——它已成为我们增长最快的创作类别之一。幻灯片在实现层面的细节非常微妙，也经常被忽视。目前我们已经生成了超过 5 万张幻灯片，并尝试了每一种可能的实现方式……长话短说：完美的幻灯片生成管线并不存在。所以我们自己构建了它……并且今天开源给你：） 以下是我们一路走来积累的现场笔记。

生成幻灯片主要有两种实现方式

• 直接通过 python-pptx 库生成 Python 代码
• 生成 HTML/CSS 代码，在浏览器中渲染，再通过 DOM 遍历将布局映射到 python-pptx

方式 1：直接生成 Python-pptx 代码

模型编写 Python 代码，直接调用 python-pptx API（如 add_slide()、add_textbox()、add_picture() 等）。执行代码后输出 .pptx 文件。

优点：

• 完全控制每个 PPTX 基本元素（图表、表格、动画）
• 无需浏览器依赖
• 模型可以直接参考 Python-PPTX 文档并迭代代码

缺点：

• 模型在代码中进行空间推理很困难。从左侧 Inches(2.3)、从顶部 Inches(1.8) 定位元素基本靠猜。模型没有视觉反馈回路。
• 文本溢出不可见。文本框太小会在 PowerPoint 中静默裁剪，模型无法得知。
• 复杂布局（多列、卡片、网格）需要繁琐的坐标计算，模型经常出错。
• 样式局限于 python-pptx 暴露的功能。CSS 渐变、圆角、半透明叠加层需要手动操作 OOXML XML。

模型在 python-pptx 空间推理上挣扎的示例
模型在 python-pptx 空间推理上挣扎的示例

方式 2：HTML/CSS 生成 + 浏览器转换

模型编写一个自包含的 HTML 文件，其中包含元素。无头浏览器渲染该 HTML，转换器将渲染后的 DOM 映射为 python-pptx 形状。

优点：

• 每个前沿模型都已在数十亿网页上训练过布局、排版和色彩。
• 浏览器通过 flexbox、grid、gap、border-radius、linear-gradient 处理空间布局。
• 样式几乎无限制，因为 CSS 能做到的，HTML 就能表达。

缺点：

• 转换步骤有损。并非所有 CSS 内容都能干净地映射到 PPTX（渐变、图标字体、复杂 SVG）。
• 字体可用性问题：PPTX 引用字体名称，但若观众未安装该字体，则会自动替换。
• 转换器是瓶颈。最终 PPTX 的质量完全取决于 HTML 到 PPTX 的映射引擎。

主要问题：转换很难

HTML 方法有一个硬依赖：需要能将渲染后的 HTML 转换为可编辑的 PPTX 的工具。我们找到的方案都存在缺陷：

• Slidev、Marp、Reveal.js 将幻灯片导出为图片。
• PptxGenJS 处理 HTML 表格，而非完整页面。
• Pandoc 通过模板将 Markdown 转换为 PPTX。
• Presenton 和 ppt-master 是完整应用，不是可导入的库。
• deck-to-pptx 将装饰元素烘焙为背景图片，且需要手动配置每个 decks。
• dom-to-pptx 和 html-to-pptx（npm）是客户端 JS 转换器。
• html2pptx 工具使用静态 HTML 解析，而非真实浏览器。

我们想要一个 Python 库：pip install，调用 convert()，得到可编辑的 .pptx。这不存在……所以我们自己构建了它。

我们的 HTML-to-PPTX 库

我们的轻量级库包含两个步骤：

• 测量：在无头 Chromium 中加载 HTML。对每个幻灯片，注入 JS 递归遍历 DOM，记录每个可见元素的位置、大小、颜色、字体、文本和图片。
• 渲染：遍历测量树，将每个元素映射到最近的 python-pptx 形状。文本变成文本框，图片变成图片形状，背景变成填充矩形。渐变、圆角、透明度通过直接操作 OOXML 实现。CSS 像素以固定比例（13.333 英寸 / 1920px）映射到 PPTX 英寸。浏览器测量的结果就是 PowerPoint 得到的。

以下是一些展示其能力的示例：

HTML 截图
HTML 截图
PPTX 转换后格式正确的自定义项目符号列表
PPTX 转换后格式正确的自定义项目符号列表

HTML 截图
HTML 截图
PPTX 转换后深色半透明背景和圆角药丸样式
PPTX 转换后深色半透明背景和圆角药丸样式

HTML 截图
HTML 截图
PPTX 转换后格式正确的卡片、粗体文字和圆角图片
PPTX 转换后格式正确的卡片、粗体文字和圆角图片

局限

以下是一些已知局限——欢迎贡献！

• 字体未嵌入。如果查看者未安装 CSS 字体，PowerPoint 会替换。可能导致部分文本溢出。
• CSS background-image: url(...) 未被转换，仅支持 <img> 标签和内联 SVG。
• 仅支持 linear-gradient，不支持 radial-gradient。
• 图标字体（Lucide、Font Awesome）在未安装字体的机器上显示为方框。

我们正在努力构建最准确的 HTML-to-PPTX 转换器，并将持续更新。如果您有改进系统的想法，欢迎贡献！我们已在 Design Arena 上对数万个 AI 生成的演示文稿使用了此工具。希望对您有用。

GitHub

github.com/Design-Arena/html-to-pptx（MIT 许可证）

代码

pip install html-to-pptx

from html_to_pptx import convert
import asyncio
asyncio.run(convert("slides.html", "output.pptx"))

亲自尝试

HTML-to-PPTX 库是我们 Slides Arena 的一部分，访问 https://www.designarena.ai/ 即可使用。