HTML幻灯片一键转可编辑PPT：文字随便改，视觉不走样

做PPT改文字，改完就变丑？这个开源工具把问题拆开了

你有没有这种经历：PPT做完了，同事说“标题改一下”“第三段换个说法”。你打开文件，改完文字，发现字体变了、颜色乱了、版式全跑了。一份好好的演示文稿，改着改着就成了四不像。

问题出在哪？传统PPT把设计和内容绑在一起，你一动文字，样式就可能跟着崩。

今天聊一个开源工具，叫 html-to-editable-ppt-skill。它的思路很直接：先用HTML/CSS把设计做好，再转成可编辑的PPTX。文字随便改，视觉不走样。

核心思路：把PPT拆成“皮肤”和“内容”

传统做PPT，你一边打字一边调样式，改文字的时候字体可能跑，换配色的时候排版可能乱。

这个工具把流程倒过来：先把设计做死，再把内容放进去。技术实现分三层：

• 底图层：用Playwright渲染HTML，截图生成PNG底图。字体、颜色、布局、图形，全部原样保留。
• 文字层：用JavaScript提取每个文字元素的坐标（x、y、宽、高）和样式（字体、大小、颜色）。
• 叠加层：用pptxgenjs生成PPTX，把底图放进去，再把文字作为可编辑文本框覆盖在对应位置上。

你改文字，底图不动，样式自然不走样。相当于把PPT拆成了“皮肤层”和“内容层”，两层互不干扰。

实测三步走：从HTML到可编辑PPT

我跑通了整个流程，以下是完整步骤。

第一步：准备好HTML幻灯片

HTML幻灯片可以用任何工具生成。我用了另一个开源项目 guizang-ppt-skill 做了个测试用的2页幻灯片。第一页是封面，第二页是内容页，深蓝渐变加金色几何风格。HTML源码大概长这样：

<section>
  <h1>AI Agent 进化指南</h1>
  <p>让AI从工具变成团队</p>
</section>

第二步：运行转换脚本

克隆仓库，进入工作目录，安装依赖，然后跑一行命令：

git clone https://github.com/fredliu168/html_to_editable_ppt_skill.git
cd html_to_editable_ppt_skill
npm install playwright-core pptxgenjs
node scripts/html_to_ppt.mjs 
  --html /tmp/test_slides.html 
  --out /tmp/test_output.pptx 
  --mode editable 
  --slides 2 
  --chrome "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" 
  --width 1600 --height 900

第三步：打开PPTX，文字随便改

生成的PPTX文件，底层是一张张设计好的截图，表层是精确叠加的文本框。你在PowerPoint里双击文字就能编辑，改完关掉——底层的视觉设计纹丝不动。

实测生成了一个289KB的PPTX文件，里面嵌了2张底图（slide-01.png 227KB、slide-02.png 6KB），文字全部作为独立文本框存在，坐标与HTML原始位置精确对应。

坐标提取有多准？看数据

转换过程中最关键的一步是“文字坐标提取”。Playwright加载HTML后，用JavaScript读取每个文字元素的精确位置和样式。我实测拿到的数据结构如下：

{
  "slide": 1,
  "elements": [
    {
      "id": "el0_line0",
      "sourceId": "h1",
      "x": 653.34,
      "y": 330,
      "w": 293.31,
      "h": 80,
      "text": "AI Agent",
      "fontFamily": "Arial, sans-serif",
      "fontSize": "72px",
      "fontWeight": "700",
      "color": "rgb(255, 255, 255)",
      "textAlign": "center"
    }
  ]
}

坐标精确到小数点后两位，字体大小、颜色、粗细全部保留。pptxgenjs就是用这些数据，把文字文本框“钉”在截图的对应位置上。

这个数据还会保存为JSON文件（slide-01.json、slide-02.json），方便你二次修改坐标，或者处理其他语言版本的PPT。

完整工作流：guizang + html-to-ppt

这个方案最完整的使用场景，是和 guizang-ppt-skill 串联起来，形成一个“HTML生成 → 可编辑PPT输出”的闭环。

• guizang-ppt-skill 负责第一步：用一行命令生成炫酷的HTML幻灯片（WebGL背景、动画效果、几何图形），设计质量远超市面上大多数PPT模板。
• html-to-editable-ppt-skill 负责第二步：把HTML幻灯片转成可编辑PPTX，保留炫酷视觉，同时让文字可以直接修改。

以前你要在PPT里手动调字体、调颜色、调间距，改完样式全乱。现在用guizang生成视觉，用html-to-ppt保留编辑性，两者相加，效率和美观都有了。

适用场景和局限性

最适合的场景：

• 需要炫酷视觉效果的演示文稿（营销提案、产品介绍、公司汇报）
• 多人协作时，设计稿和内容稿需要分离——设计师给底图，文字内容由其他人编辑
• 有固定模板需要反复填充内容（季度汇报模板、月度周报模板），每次只改文字不碰设计

目前还不太适合的场景：

• 需要随时新增或删除幻灯片页面——目前每次需要重新运行转换
• 文字内容特别多（超过几十页）——HTML文件会变得很大
• 纯数据表格和复杂图表——HTML的表格渲染在截图里可能精度不足

小结

html-to-editable-ppt-skill 的核心价值，是把“视觉设计”和“文字内容”彻底解耦。底层是设计好的截图，表层是可编辑的文字，两层分开维护，各不干扰。

配合guizang-ppt-skill使用，一个做视觉，一个保编辑，构成了目前我见过的最完整的HTML→PPT工作流。如果你对PPT的视觉效果有要求，同时又需要让内容可以被随时修改，这个组合值得试试。

GitHub仓库：fredliu168/html_to_editable_ppt_skill，可以自己去探索。