开源：折腾了个让 Coding Agent 生成可编辑 PPTX 的工具，想听听大家意见
最近搞了两个和 PowerPoint 生成有关的小项目：
- [pptxgen-ts-starter](https://github.com/zythum/pptxgen-ts-starter)
- [@zythum02/pptxgenjsx](https://github.com/zythum/pptxgenjsx)
先说下起因。
我家“领导”前阵子要在木兰开源社区做一次分享。内容写完后，她用 Coze 生成了一版 PPT，效果挺惊喜的。
不过继续微调时遇到了困难：下载成 `.pptx` 后，里面不少文字实际是图片，不方便改；继续和 Coze 对话修改，往往会重新生成整套内容，已经调好的部分也很难稳定保留。
这事让我开始琢磨：能不能让 AI 参与做 PPT，同时保留 PowerPoint 里逐项可编辑、可以稳定修改的体验。于是就开始折腾。
- 开源项目，可泛用，高自定义性，且不绑定商业产品。
- 最终产物是 `.pptx` 文件。虽然 HTML/CSS 能够制作更加精良的视觉效果，但并不是所有场合都可交付，特别是传统行业。
- 可以持续集成，可以版本管理。
- 视觉设计基于设计方法和理念，而不是套模版。（我也搞不来那么多模版）
## 从 PptxGenJS 到 JSX
我最早走的是最直接的路线：让 Agent 写 PptxGenJS。
如果写过 Python，可以把 PptxGenJS 理解成 JS/TS 生态里类似 `python-pptx` 的库：用代码生成 `.pptx`，文字、形状、图片、表格、图表和备注都还是 PowerPoint 里的原生对象，可以继续编辑。
直接写一堆 `slide.addText()`、`slide.addShape()` 当然能做，但代码比较命令式，重复内容多，页面之间也不太好复用。坐标、样式和图表都堆在一起后，维护成本会慢慢上来。
后来我看到了 Artifact Kit 的 [pptxgenjs-jsx](https://github.com/artifact-kit/pptxgenjs-jsx)。用 JSX 描述页面结构顺手很多：PPT 本来就是页面、文字、图片和图形组成的 jsx 树，组件化能把重复的视觉元素抽象，也比较符合 Coding Agent 的工作方式。
实际拿来做完整 PPT 后，我还需要 async component、按页懒加载、用 Group 组织和复用元素、通过 Context Hooks 获取运行时上下文，以及更适合当前工作流的校验能力。这些需求牵涉 JSX runtime 本身的执行和解析方式，不太适合在原包外面补几个组件就完成，所以我另起了 `@zythum02/pptxgenjsx`。
这样一来，页面生成时可以异步准备数据或素材，页面可以按文件拆开加载，一组元素可以基于相对坐标复用，组件内也能知道当前页码和画布尺寸。
## Runtime 以外：工具和方法
后来发现，能把 PPT 写出来，和能稳定地做出一套可用的 PPT，是两回事。
所以 `pptxgen-ts-starter` 还有两块东西：工程工具和设计方法。
### 工程工具
starter 提供了一个轻量的 Web 开发/预览环境，用来写 TSX、看生成结果和导出 PPTX，比在 PowerPoint 里反复拖元素轻一些。
另外放了几个小工具：
- **`estimate-text.ts`**：AI 很难准确算出“这段字在这个字体、字号和宽度下到底会占几行”。中文还有逐字换行、行首行尾禁则、emoji 和 fallback font。这个工具先测文字高度，再决定文本框高度，目的是减少文字溢出、截断和内容碰撞。
- **`image-tool.ts`**：检查图片尺寸和比例，必要时裁切或缩放，避免图片在 PPT 里被拉变形。
- **`color-tool.ts`**：从主色派生浅色、深色和灰阶，检查前景/背景对比度，再把结果写回统一的 design token。这样颜色不是临时凭感觉凑，而是有一套可复用的依据。
这一层解决的是：**写完后怎么更快地生成、查看和检查。**
### 设计方法
工具只能保证能生成，不能保证好用。
参考了:
- Guizang PPT Skill [GitHub](https://github.com/op7418/guizang-ppt-skill)
- ppt-master [GitHub](https://github.com/hugohe3/ppt-master)
我现在把做一套 PPT 的过程拆成：
```plaintext
明确 brief
→ 决定是否要调研
→ 整理 research
→ 确认 outline
→ 定设计 spec
→ 逐页组合内容和视觉
→ QA
```
每个项目会有一个 `.deck/` 目录：
- [`brief.md`](http://brief.md/)：听众是谁、拿来干什么、讲多久、有什么限制；
- [`research.md`](http://research.md/)：哪些是有来源的事实，哪些是用户材料，哪些还要确认；
- [`outline.md`](http://outline.md/)：每一页负责讲什么，前后怎么串起来；
- [`spec.md`](http://spec.md/)：颜色、字体、布局、密度、图片和图表怎么处理。
代码里再用 `token` 管颜色和字号，用 `components` 提取公共组件。这样 Agent 不至于每页临时发明一套样式。
此外还有一个 design Skill，里面放模板、配色、排版、页面密度、叙事结构和 QA 规则。
现在这套东西可以分成三层：
- `pptxgenjsx`：**能不能表达**；
- scripts 和预览环境：**能不能生成、看结果、查问题**；
- design Skill 和 `.deck/`：**该怎么做，才不容易做成一套能打开但不好用的 PPT**。
## 现在怎么用
大致链路是：
```plaintext
brief / research / outline / design spec
↓
Coding Agent 编写 TSX
↓
pptxgenjsx runtime
↓
PptxGenJS
↓
原生、可以继续编辑的 .pptx
```
最简单的启动方式：
```bash
npx tiged zythum/pptxgen-ts-starter my-presentation
cd my-presentation
npm install
npm run dev
```
运行后会打开浏览器，也可以手动访问 `http://localhost:5173`。
接着把仓库交给常用的 Coding Agent，告诉它主题、听众、用途、页数、已有材料和视觉方向。例如：
```plaintext
请基于当前项目做一份 10 页左右的 PPT 。
主题是……，听众是……，用于……。
```
项目本身没有内置 LLM，AI 能力来自用户自己的 Agent，只要折腾过一些基础的 ai 工具，应该都能用得上。
## 它是 / 它不是
它是：一个把 PPT 放进代码、数据和自动化流程里的 starter。最终交付是原生可编辑 PPTX；代码、数据、设计 token 和组件都在项目里，可以接 API、数据库、CI 或定时任务。
它不是：一站式 AI PPT 产品，不是在线协作编辑器，也不是 Gamma、Canva、Copilot 或 Presenton 的替代品。它需要 Node.js、Coding Agent 和一点代码能力； PPT 仍然是固定画布，很多布局最后还是绝对坐标。
## 有几件事我还没解决，想听听大家建议
### 1. 系统字体和安全字体
PPTX 对内置字体的支持有限，实际经常要依赖系统字体。但不同系统上的字体差异很大：`estimate-text.ts` 可以在当前环境把高度算得比较准，换一台电脑后仍然可能有出入。
现在只能通过选择更稳的字体、预留 buffer 来降低风险。大家有没有更可靠的跨平台字体策略？
### 2. 图片和背景怎么融合
从图库找图到图片生成，AI 往往能理解“图里应该有什么”，但不太擅长让图片、文字和背景真正融成一页。图片可能还不如 PPTX 中的形状（矩形、圆形等）搭出来的抽象形状好看。
### 3. PptxGenJS 的持续维护问题
目前对于 PptxGenJS 遇到一些问题
- 图表的 bug [GitHub](https://github.com/gitbrent/PptxGenJS/pull/1327)
- 渐变色的支持 [GitHub](https://github.com/gitbrent/PptxGenJS/pull/1470)
但是这个东西已经一年没有 commit 了，估计维护遥遥无期。图表的 bug，我 hack 的方式通过修改 ooxml 的方式解决了。如果后续 bug 以及 feature 也需要继续改 ooxml，那就很难受了。
## 简单案例
下面给一些简单案例, 使用的是 deepseek-v4-flash。
```plaintext
请基于 https://github.com/zythum/pptxgen-ts-starter 创建一个 PPT 项目，主题是“介绍 Kimi K3 模型”。请自行查找并核实公开资料，采用小红书风格，制作 5 页左右的内容。请标注重要信息的来源，不要编造未经验证的事实。
```
```plaintext
请基于 https://github.com/zythum/pptxgen-ts-starter 创建一个 PPT 作为中学语文课件。主题为“《江雪》古诗解析”，采用水墨风格，时长大概 20 分钟。请结合课文内容设计教学结构、讲解重点和课堂互动。
```
- [pptxgen-ts-starter](https://github.com/zythum/pptxgen-ts-starter)
- [@zythum02/pptxgenjsx](https://github.com/zythum/pptxgenjsx)
---
原文链接：[点击查看](https://www.v2ex.com/t/1232640)
- [pptxgen-ts-starter](https://github.com/zythum/pptxgen-ts-starter)
- [@zythum02/pptxgenjsx](https://github.com/zythum/pptxgenjsx)
先说下起因。
我家“领导”前阵子要在木兰开源社区做一次分享。内容写完后，她用 Coze 生成了一版 PPT，效果挺惊喜的。
不过继续微调时遇到了困难：下载成 `.pptx` 后，里面不少文字实际是图片，不方便改；继续和 Coze 对话修改，往往会重新生成整套内容，已经调好的部分也很难稳定保留。
这事让我开始琢磨：能不能让 AI 参与做 PPT，同时保留 PowerPoint 里逐项可编辑、可以稳定修改的体验。于是就开始折腾。
- 开源项目，可泛用，高自定义性，且不绑定商业产品。
- 最终产物是 `.pptx` 文件。虽然 HTML/CSS 能够制作更加精良的视觉效果，但并不是所有场合都可交付，特别是传统行业。
- 可以持续集成，可以版本管理。
- 视觉设计基于设计方法和理念，而不是套模版。（我也搞不来那么多模版）
## 从 PptxGenJS 到 JSX
我最早走的是最直接的路线：让 Agent 写 PptxGenJS。
如果写过 Python，可以把 PptxGenJS 理解成 JS/TS 生态里类似 `python-pptx` 的库：用代码生成 `.pptx`，文字、形状、图片、表格、图表和备注都还是 PowerPoint 里的原生对象，可以继续编辑。
直接写一堆 `slide.addText()`、`slide.addShape()` 当然能做，但代码比较命令式，重复内容多，页面之间也不太好复用。坐标、样式和图表都堆在一起后，维护成本会慢慢上来。
后来我看到了 Artifact Kit 的 [pptxgenjs-jsx](https://github.com/artifact-kit/pptxgenjs-jsx)。用 JSX 描述页面结构顺手很多：PPT 本来就是页面、文字、图片和图形组成的 jsx 树，组件化能把重复的视觉元素抽象，也比较符合 Coding Agent 的工作方式。
实际拿来做完整 PPT 后，我还需要 async component、按页懒加载、用 Group 组织和复用元素、通过 Context Hooks 获取运行时上下文，以及更适合当前工作流的校验能力。这些需求牵涉 JSX runtime 本身的执行和解析方式，不太适合在原包外面补几个组件就完成，所以我另起了 `@zythum02/pptxgenjsx`。
这样一来，页面生成时可以异步准备数据或素材，页面可以按文件拆开加载，一组元素可以基于相对坐标复用，组件内也能知道当前页码和画布尺寸。
## Runtime 以外：工具和方法
后来发现，能把 PPT 写出来，和能稳定地做出一套可用的 PPT，是两回事。
所以 `pptxgen-ts-starter` 还有两块东西：工程工具和设计方法。
### 工程工具
starter 提供了一个轻量的 Web 开发/预览环境，用来写 TSX、看生成结果和导出 PPTX，比在 PowerPoint 里反复拖元素轻一些。
另外放了几个小工具：
- **`estimate-text.ts`**：AI 很难准确算出“这段字在这个字体、字号和宽度下到底会占几行”。中文还有逐字换行、行首行尾禁则、emoji 和 fallback font。这个工具先测文字高度，再决定文本框高度，目的是减少文字溢出、截断和内容碰撞。
- **`image-tool.ts`**：检查图片尺寸和比例，必要时裁切或缩放，避免图片在 PPT 里被拉变形。
- **`color-tool.ts`**：从主色派生浅色、深色和灰阶，检查前景/背景对比度，再把结果写回统一的 design token。这样颜色不是临时凭感觉凑，而是有一套可复用的依据。
这一层解决的是：**写完后怎么更快地生成、查看和检查。**
### 设计方法
工具只能保证能生成，不能保证好用。
参考了:
- Guizang PPT Skill [GitHub](https://github.com/op7418/guizang-ppt-skill)
- ppt-master [GitHub](https://github.com/hugohe3/ppt-master)
我现在把做一套 PPT 的过程拆成：
```plaintext
明确 brief
→ 决定是否要调研
→ 整理 research
→ 确认 outline
→ 定设计 spec
→ 逐页组合内容和视觉
→ QA
```
每个项目会有一个 `.deck/` 目录：
- [`brief.md`](http://brief.md/)：听众是谁、拿来干什么、讲多久、有什么限制；
- [`research.md`](http://research.md/)：哪些是有来源的事实，哪些是用户材料，哪些还要确认；
- [`outline.md`](http://outline.md/)：每一页负责讲什么，前后怎么串起来；
- [`spec.md`](http://spec.md/)：颜色、字体、布局、密度、图片和图表怎么处理。
代码里再用 `token` 管颜色和字号，用 `components` 提取公共组件。这样 Agent 不至于每页临时发明一套样式。
此外还有一个 design Skill，里面放模板、配色、排版、页面密度、叙事结构和 QA 规则。
现在这套东西可以分成三层：
- `pptxgenjsx`：**能不能表达**；
- scripts 和预览环境：**能不能生成、看结果、查问题**；
- design Skill 和 `.deck/`：**该怎么做，才不容易做成一套能打开但不好用的 PPT**。
## 现在怎么用
大致链路是：
```plaintext
brief / research / outline / design spec
↓
Coding Agent 编写 TSX
↓
pptxgenjsx runtime
↓
PptxGenJS
↓
原生、可以继续编辑的 .pptx
```
最简单的启动方式：
```bash
npx tiged zythum/pptxgen-ts-starter my-presentation
cd my-presentation
npm install
npm run dev
```
运行后会打开浏览器，也可以手动访问 `http://localhost:5173`。
接着把仓库交给常用的 Coding Agent，告诉它主题、听众、用途、页数、已有材料和视觉方向。例如：
```plaintext
请基于当前项目做一份 10 页左右的 PPT 。
主题是……，听众是……，用于……。
```
项目本身没有内置 LLM，AI 能力来自用户自己的 Agent，只要折腾过一些基础的 ai 工具，应该都能用得上。
## 它是 / 它不是
它是：一个把 PPT 放进代码、数据和自动化流程里的 starter。最终交付是原生可编辑 PPTX；代码、数据、设计 token 和组件都在项目里，可以接 API、数据库、CI 或定时任务。
它不是：一站式 AI PPT 产品，不是在线协作编辑器，也不是 Gamma、Canva、Copilot 或 Presenton 的替代品。它需要 Node.js、Coding Agent 和一点代码能力； PPT 仍然是固定画布，很多布局最后还是绝对坐标。
## 有几件事我还没解决，想听听大家建议
### 1. 系统字体和安全字体
PPTX 对内置字体的支持有限，实际经常要依赖系统字体。但不同系统上的字体差异很大：`estimate-text.ts` 可以在当前环境把高度算得比较准，换一台电脑后仍然可能有出入。
现在只能通过选择更稳的字体、预留 buffer 来降低风险。大家有没有更可靠的跨平台字体策略？
### 2. 图片和背景怎么融合
从图库找图到图片生成，AI 往往能理解“图里应该有什么”，但不太擅长让图片、文字和背景真正融成一页。图片可能还不如 PPTX 中的形状（矩形、圆形等）搭出来的抽象形状好看。
### 3. PptxGenJS 的持续维护问题
目前对于 PptxGenJS 遇到一些问题
- 图表的 bug [GitHub](https://github.com/gitbrent/PptxGenJS/pull/1327)
- 渐变色的支持 [GitHub](https://github.com/gitbrent/PptxGenJS/pull/1470)
但是这个东西已经一年没有 commit 了，估计维护遥遥无期。图表的 bug，我 hack 的方式通过修改 ooxml 的方式解决了。如果后续 bug 以及 feature 也需要继续改 ooxml，那就很难受了。
## 简单案例
下面给一些简单案例, 使用的是 deepseek-v4-flash。
```plaintext
请基于 https://github.com/zythum/pptxgen-ts-starter 创建一个 PPT 项目，主题是“介绍 Kimi K3 模型”。请自行查找并核实公开资料，采用小红书风格，制作 5 页左右的内容。请标注重要信息的来源，不要编造未经验证的事实。
```
```plaintext
请基于 https://github.com/zythum/pptxgen-ts-starter 创建一个 PPT 作为中学语文课件。主题为“《江雪》古诗解析”，采用水墨风格，时长大概 20 分钟。请结合课文内容设计教学结构、讲解重点和课堂互动。
```
- [pptxgen-ts-starter](https://github.com/zythum/pptxgen-ts-starter)
- [@zythum02/pptxgenjsx](https://github.com/zythum/pptxgenjsx)
---
原文链接：[点击查看](https://www.v2ex.com/t/1232640)
· 0 个赞
· 0 个赞
· 0 个赞
· 0 个赞