• 请不要在回答技术问题时复制粘贴 AI 生成的内容
zythum
V2EX  ›  程序员

[开源] 折腾了个让 Coding Agent 生成可编辑 PPTX 的工具,想听听大家意见

  •  
  •   zythum ·
    zythum · 1h 47m ago · 282 views

    最近搞了两个和 PowerPoint 生成有关的小项目:

    先说下起因。

    我家“领导”前阵子要在木兰开源社区做一次分享。内容写完后,她用 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。用 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 。这样颜色不是临时凭感觉凑,而是有一套可复用的依据。

    这一层解决的是:写完后怎么更快地生成、查看和检查。

    设计方法

    工具只能保证能生成,不能保证好用。

    参考了:

    我现在把做一套 PPT 的过程拆成:

    明确 brief
      → 决定是否要调研
      → 整理 research
      → 确认 outline
      → 定设计 spec
      → 逐页组合内容和视觉
      → QA
    

    每个项目会有一个 .deck/ 目录:

    • brief.md:听众是谁、拿来干什么、讲多久、有什么限制;
    • research.md:哪些是有来源的事实,哪些是用户材料,哪些还要确认;
    • outline.md:每一页负责讲什么,前后怎么串起来;
    • spec.md:颜色、字体、布局、密度、图片和图表怎么处理。

    代码里再用 token 管颜色和字号,用 components 提取公共组件。这样 Agent 不至于每页临时发明一套样式。

    此外还有一个 design Skill ,里面放模板、配色、排版、页面密度、叙事结构和 QA 规则。

    现在这套东西可以分成三层:

    • pptxgenjsx能不能表达
    • scripts 和预览环境:能不能生成、看结果、查问题
    • design Skill 和 .deck/该怎么做,才不容易做成一套能打开但不好用的 PPT

    现在怎么用

    大致链路是:

    brief / research / outline / design spec
                        ↓
              Coding Agent 编写 TSX
                        ↓
                 pptxgenjsx runtime
                        ↓
                     PptxGenJS
                        ↓
            原生、可以继续编辑的 .pptx
    

    最简单的启动方式:

    npx tiged zythum/pptxgen-ts-starter my-presentation
    cd my-presentation
    npm install
    npm run dev
    

    运行后会打开浏览器,也可以手动访问 http://localhost:5173

    接着把仓库交给常用的 Coding Agent ,告诉它主题、听众、用途、页数、已有材料和视觉方向。例如:

    请基于当前项目做一份 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 往往能理解“图里应该有什么”,但不太擅长让图片、文字和背景真正融成一页。图片可能还不 ai 用 pptx 中的形状(矩形圆形等)搭出来的抽象形状好看。

    3. PptxGenJS 的持续维护问题

    目前对于 PptxGenJS 遇到一些问题

    但是这个东西已经一年没有 commit 了,估计维护遥遥无期。 图表的 bug ,我 hack 的方式通过修改 ooxml 的方式解决了。如果后续 bug 以及 feature 也需要继续改 ooxml 那就很难受了。

    简单案例

    下面给一些简单案例, 使用的是 deepseek-v4-flash 。

    请基于 https://github.com/zythum/pptxgen-ts-starter 创建一个 PPT 项目,主题是“介绍 Kimi K3 模型”。请自行查找并核实公开资料,采用小红书风格,制作 5 页左右的内容。请标注重要信息的来源,不要编造未经验证的事实。
    

    请基于 https://github.com/zythum/pptxgen-ts-starter 创建一个 PPT 作为中学语文课件。主题为“《江雪》古诗解析”,采用水墨风格,时长大概 20 分钟。请结合课文内容设计教学结构、讲解重点和课堂互动。
    

    12 replies    2026-08-07 12:13:18 +08:00
    CykaBlyat
        1
    CykaBlyat  
       1h 35m ago
    太牛了 刚好需要!
    caocong
        2
    caocong  
       1h 26m ago
    我做过一段时间 ai 生成 ppt 的工具,试过各种方式:套用 ppt 模版 html 转 ppt ,svg 转 ppt ,生成图片转 ppt ,总会这样那样的问题,样式太难看,文字溢出,图片图标插入不合适等等。看看 op 的质量如何,单纯从截图来看,样式还是偏网页设计
    justfindu
        3
    justfindu  
       1h 23m ago
    zythum
        4
    zythum  
    OP
       1h 16m ago
    @caocong 文字溢出是我主要的解决方向,给 agent 做了个简单的文字排版测量测量脚本,可以知道文字对应字体大小在多宽的情况下能有多高,这样他就好判断了。你可以用用试试。 https://github.com/zythum/pptxgen-ts-starter/blob/master/scripts/estimate-text.ts

    图片现在确实是难点:
    排版的话,如果放个图片加个边框放那里也还行,直接做大 hero 也凑合。但是要和文字背景配合起来,目前没有什么头绪。
    图片来源也是问题,现在图库 ai 基本找不到可用的,全靠图片生成,图片质量全靠抽奖。
    surfwave
        5
    surfwave  
       1h 8m ago
    别折腾了,chatgpt 最近推出的 work 模式,已经支持生成可编辑的 ppt 了,实际使用过,很好用。
    op351
        6
    op351  
       1h 8m ago
    @zythum 文字溢出和排版美化这块有考虑过拿 mimo-v2.5 这种多模态模型单独进行视觉分析,然后把修改意见交给 deepseek-v4-flash ,这样做循环改进吗?
    ktyang
        7
    ktyang  
       1h 7m ago
    看着挺好的了,支持一下。
    CykaBlyat
        8
    CykaBlyat  
       1h 0m ago
    @zythum #4 我试了下还是会有溢出,加入了识图自检之后就好多了
    CykaBlyat
        9
    CykaBlyat  
       1h 0m ago
    @zythum #4 图片的话可以靠接入 pexels 的 api 拿到高质量的
    zythum
        10
    zythum  
    OP
       55 mins ago   ❤️ 1
    @op351 尝试过,这个道路比较曲折。
    1. 现在 pptx 预览我用的 @silurus/ooxml。目前对比是还原度最高的了。但是他渲染 canvas 目前只能跑在浏览器环境,所以还需要类似 puppetter 的工具去模拟并截图。一个截图成本挺高(时间成本)。
    3. 多模态只能告诉右边的卡片文字溢出了。溢出多少,卡片增加多少英寸,文字怎么调整,还是不知道,然后就纯靠无脑试,我在边上看着想骂娘。

    所以最终做了 script 做计算的方式。直接给她计算结果,这样改下文本再测一下,改下文本再测一下。效率很高。
    目前我自己跑的结果,基本上九成都不会出现文字溢出的问题了。
    zythum
        11
    zythum  
    OP
       49 mins ago
    @CykaBlyat 我试试
    alexluo1
        12
    alexluo1  
    PRO
       9 mins ago
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3609 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 44ms · UTC 04:23 · PVG 12:23 · LAX 21:23 · JFK 00:23
    ♥ Do have faith in what you're doing.