条条大道通罗马,你要的 AI 生成 PPT 演示文稿,何必一定是 PPT 格式?(上):先别急着要 .pptx

写在前面：这篇文章不是 PPT 工具榜单，也不是"哪家最好"的口水战。它想解决一个更实际的问题——当你说"用 AI 帮我做个 PPT"的时候，你真正想要的，到底是不是一个 .pptx 文件？

过去几年，我看过太多人在不同的"AI 做 PPT"工具间来回试错。问题不在工具不够强，而在于绝大多数人一上来就把目标锁死成"生成 .pptx"，结果一边骂 AI 不会排版，一边自己又得回到 PowerPoint 里改半小时。

这篇文章拆分为上篇和下篇，把 5 条路线进行整理：

• ‎上篇：先回答“真的需要 .pptx 吗”，重点看 HTML 演示文稿和横滑杂志风 deck。注意，这里的 deck，是指一组可横向滑动（水平滚动）的卡片式界面容器，类似于演示文稿的效果。
• ‎下篇：如果必须交付 ‎.pptx，或者你要做企业级品牌化生产线，再看文档转 PPT、模板批量产出和 Open Design。

这一篇先讲最容易被误判的一类：不一定非要 PPTX 的演示文稿。

一、先问一个最基础的问题：你真的需要 .pptx 吗？

很多人之所以被 AI 做 PPT 这件事反复折腾，是因为最开始的"目标格式"就选错了。

我们来过一遍真实场景：

• ‎场景 A：周三下午要在公司大屏上讲 20 分钟方案，听众都在会议室或飞书会议里。→ 你真正需要的是"能流畅放映、动画顺滑、文字图片排得好看"的演示文稿。.pptx 不一定，HTML 反而更舒服。（或者还可以是纯图片！~）

• ‎场景 B：客户要发邮件附件，要求"必须是 PPT 文件，他们要拿去改两页报数字"。→ 这个时候你确实要 .pptx，而且必须是真·形状+真·文字框，而不是"图片塞进 PPT 里"。

• ‎场景 C：你在公众号、知乎、小红书、推特上发图文，要的是 16 张精美海报。→ 你需要的是图片或可导出 PDF 的 HTML，并不需要 .pptx。

• ‎场景 D：每周固定要出一份周报，模板是公司锁死的。→ 你需要的是模板复用 + 内容批量填充，关键不在格式，而在自动化。

• ‎场景 E：要在自家产品里嵌入"AI 自动生成方案手册"功能，文档量上来后必须保证视觉风格一致。→ 你需要的是品牌锁定 + 本地可控，开源和数据隐私优先级比"看起来漂亮"更高。

你看，五种场景，对应的"演示文稿"形态完全不同。把它们都塞进 .pptx 这一种格式里，本来就是效率比较低的做法。

这就是这篇文章的主旨：条条大道通罗马，你要的不是一种格式，而是一种被表达出来的内容结构。

完整系列会拆开讲 5 条具体路线；这一篇先把总览交代清楚，然后重点展开两条“不一定需要 .pptx”的路线。

二、五条路线，五种场景，五种产物

下面这五个工具/Skill 的输出格式、使用门槛、适配场景全都不一样。先给一张总览表，再展开讲。

关于"HTML 演示文稿派"的代表：lewislulu/html-ppt-skill（截至 2026-05-06，2.8k stars / 283 forks）是这一派目前在 GitHub 上最具代表性的实现。它最特别的地方不是输出多漂亮，而是把"现场讲解"这件事做得非常彻底——按 S 键就会弹出一组带逐字稿、下页预览、计时器并且跨窗口同步的"魔法卡片"，是真正面向"讲"而不是"看"设计的 skill。同派还有 zarazhangrui/frontend-slides、花叔的 huashu-design、归藏的 guizang-ppt-skill，下文会按场景错开介绍。

三、路线一：现场演示 / 在线分享 / 讲稿同步 → html-ppt-skill

3.1 它解决的问题

你要做的事是讲（演示/交流），不是发文件。听众坐在会议室里，或者你要把链接丢到飞书 / 钉钉 / 微信里让人"扫一眼就能滑完"。更进一步——你希望演讲/交流时屏幕上只有听众看到的那张幻灯片，但你自己的另一台设备（或同一屏的另一个窗口）里能看到：

• 当前页
• 下一页预览
• 自己的逐字稿
• 计时器

而且这两个窗口要完全同步、零闪烁、零色差。

这是 lewislulu/html-ppt-skill 真正的主战场。它的官方 README 把 presenter mode 描述成"四张可拖拽、可缩放、磁吸对齐的卡片"，每一张卡片其实都是一个加载了同一份 deck HTML 的 <iframe>，靠 BroadcastChannel 跨窗口同步、用 postMessage 做无闪烁翻页。

一句话讲清它的差异：别的 HTML deck 工具是把 PPT 搬上网页，html-ppt-skill 是把"演讲"搬上网页。这种思路，本质上是 reveal.js 的"speaker view"被产品化、被 AI 化、被中文化的版本。

3.2 它能产出什么样的 deck？

来一份硬数据：

• ‎36 套主题（截至 2026-05-06 README 列表）：‎minimal-white / ‎editorial-serif / ‎soft-pastel / ‎sharp-mono / ‎arctic-cool / ‎sunset-warm / ‎catppuccin-latte / ‎catppuccin-mocha / ‎dracula / ‎tokyo-night / ‎nord / ‎solarized-light / ‎gruvbox-dark / ‎rose-pine / ‎neo-brutalism / ‎glassmorphism / ‎bauhaus / ‎swiss-grid / ‎terminal-green / ‎xiaohongshu-white / ‎rainbow-gradient / ‎aurora / ‎blueprint / ‎memphis-pop / ‎cyberpunk-neon / ‎y2k-chrome / ‎retro-tv / ‎japanese-minimal / ‎vaporwave / ‎midcentury / ‎corporate-clean / ‎academic-paper / ‎news-broadcast / ‎pitch-deck-vc / ‎magazine-bold / ‎engineering-whiteprint。
• ‎15 套整 deck 模板：8 个从真实 deck 中抽取的（xhs-white-editorial / graphify-dark-graph / knowledge-arch-blueprint / hermes-cyber-terminal / obsidian-claude-gradient / testing-safety-alert / xhs-pastel-card / dir-key-nav-minimal）+ 7 个场景脚手架（pitch-deck / product-launch / tech-sharing / weekly-report / xhs-post / course-module / presenter-mode-reveal）。
• ‎31 套页面版式：cover / TOC / section-divider / bullets / two-column / three-column / big-quote / stat-highlight / KPI-grid / table / code / diff / terminal / flow-diagram / timeline / roadmap / mindmap / comparison / pros-cons / todo-checklist / gantt / image-hero / image-grid / chart-bar / chart-line / chart-pie / chart-radar / arch-diagram / process-steps / CTA / thanks。
• ‎动效：27 套 CSS 动画 + 20 套 Canvas FX（粒子、撒纸花、打字机、知识图谱等）。
• ‎零 build step：纯静态 HTML/CSS/JS，可选 CDN 依赖只有 highlight.js 和 chart.js。
• ‎中英文一等公民：内置 Noto 字体，是少数把中文渲染当作核心目标设计的 deck skill。

3.3 安装

唯一一条命令：

npx skills add https://github.com/lewislulu/html-ppt-skill

它会被装到你当前 agent 的 skills 目录下，Claude Code、Codex、Cursor、Hermes Agent 等支持 agentskills.io 标准的 Agent（IDE） 都能识别。

安装过程中，会让你选择所需要使用的 Agent（IDE），按需选择即可：

（注意是按空格键进行选择，然后回车键确定选择并进入下一步）

然后选择安装范围（安装在当前目录/项目范围，还是全局范围）：

（我这里选择的是全局安装）

然后选安装方式（安装方式：是软链接也就是符号链接symlink方式，还是拷贝到所有Agent的相应目录下），之后就进行继续安装的选择：

（我这里选择了软链接的方式）

接下来是让你选择是否安装find-skills这个Skill，建议选择安装：

最后，安装完成：

3.4 使用步骤

第一步：触发 skill。直接用自然语言告诉 agent 你要什么：

做一份 [XX] 页的关于“[XXXXX主题]”的技术分享 slides，用 cyberpunk 主题

或者：

将这个大纲转化为一份推介演示文稿（pitch deck）：[XXXXX]

或者：

根据这份[PDF / Word / Markdown]里的内容，做一份[xxx 主题/风格]的 slides。主题是：[演示文稿的主题]听众是：[谁，他们关心什么]需要有配图和图表。

它就会按你的要求选模板、选主题、选版式生成。

这里以 Claude Code 为例，可以看到，它会根据提示词（下图中的①），自动识别到需要加载 html-ppt这个Skill（下图中的②），然后进行下一步的询问与选择（下图中的③）：

(另外还有其他的询问/确认与选择，一路选下去就是了)

之后Claude Code（或Hermes Agent或OpenClaw类似的agent）就调用背后的大模型，哼哧哼哧的干活了：

第二步：等它给出单文件 HTML。打开浏览器双击就能用。

打开这个生成的HTML文件（index.html），就是演示文稿的成品了（这个是未加载完全的样子）：

注意，如果生成的文件不是在本机，可以让Agent帮忙压缩打包成一个压缩包，然后下载或拷贝到本机解压缩。

第三步（关键）：进 presenter mode。在 deck 页面里按 S 键，会弹出四张磁吸卡片：

• ‎当前页：你看到的就是听众看到的
• ‎下一页预览：让你提前知道下一张是什么
• ‎逐字稿（speaker script）：每页对应的演讲词
• ‎计时器：知道自己讲了多久

四张卡片可拖拽、可缩放、可磁吸对齐。多个窗口（比如你电脑上一个、外接屏幕上一个）通过 BroadcastChannel 同步——你按下空格翻页，所有窗口同步翻，零闪烁、零色差。

这里生成的单个演示页面如下（可以用点击左右箭头键翻页，或者点击四卡片页面的Next或Prev按钮）：

HTML作为演示文稿的好处也是有不少的，比如代码可以是可编辑的、图片（柱状图）也是SVG可编辑图（当然基于HTML的版面，比起PPT，还可以更丰富更花里花哨）：

四卡片页面截图如下（有当前页、下页预览、计时及上下页按钮、演讲词等，在分屏演讲时挺不错的）：

第四步（可选）：现场演讲准备清单。如下的实用建议：

• 每页逐字稿控制在 150 - 300 字（约 2 - 3 分钟一页）
• 关键词加粗，过渡句单独成段
• 写得像说话，不要写成书面语

这里，再演示多一个例子，是用同一台主机（云服务器）上 Hermes Agent 生成的 Slides 演示文稿，提示词及截图如下：

根据这份 Markdown 里的内容，做一份 corporate-clean 风格 的 slides。
主题是：什么是 Harness Engineering
听众是：技术分享会的工程师同行
需要有配图和图表

过了几分钟，Hermes Agent 智能体就生成了交付物，包括可编辑 HTML 源文件及资源包的压缩包，以及 PDF 版本文档，并贴心的直接通过飞书发过来了（OpenClaw或者Hermes Agent这类AI智能体助手干活就是积极主动，真好）：

以下是生成的Slides的前几页：

如果觉得效果（包括内容和排版等）不够好，还可以继续调整和优化。

3.5 实用技巧

• ‎演讲必备：双屏 presenter setup。把外接大屏镜像出 deck 页面，把笔记本屏幕保留为 presenter mode（按 S 后的四卡片视图）。这是这个 skill 真正爆发价值的姿势。
• ‎触发词决定模板选择：你说"pitch deck"就走 ‎pitch-deck 模板；说"周报"会走 ‎weekly-report；说"小红书"会走 ‎xhs-post；说"技术分享"会走 ‎tech-sharing。触发词写得越精准，第一版越接近你想要的。
• ‎公网部署：把生成的单文件 HTML 直接拖到 Vercel / Cloudflare Pages / GitHub Pages 即可，或者可以用自己的域名和服务器部署。无需 build。
• ‎配合代码片段：‎code / ‎diff / ‎terminal 这三个版式天生为技术分享准备，highlight.js 自动着色。技术演讲选 ‎tokyo-night / ‎dracula / ‎cyberpunk-neon 之一，质感会立刻起来。
• ‎数据图首选 chart.js 自带版式：‎chart-bar / ‎chart-line / ‎chart-pie / ‎chart-radar 4 套，不需要你自己写 D3。
• ‎中文不需要额外配字体：内置 Noto 系，比绝大多数 reveal.js 模板的中文渲染稳。

另外，需要注意的是，这个HTML文件还引用了css和js文件，所以如果拷贝到其他地方（比如我是从云服务器拷贝到自己的本地电脑），还需要把里面的css和js文件也一起拷贝。这个情况下，也可以输入提示词让Agent工具（比如Claude Code等）帮忙打个压缩包，拷贝压缩包，这样出错概率会更小。

另外的另外，其实还可以在Figma里面（figma.com），使用html.to.design这个插件，将HTML页面转换为Figma设计图，然后进一步地，将其导出为PPT文稿（使用Figma的Deck插件），考虑到这个过程其实也挺繁琐的，并且还涉及到科学上网及付费订阅（免费有限额的限制），这里就不展开详述了。

3.6 它不擅长的

• 必须输出 .pptx 给客户编辑的场合（这是路线 ‎ppt-master 的领地）。
• 重数据表的财务报表（HTML 大表渲染体验仍不如 Excel）。
• 团队协作在线编辑（Google Slides / 飞书演示文稿仍是最佳选择）。

3.7 同派的两个备选

如果你出于某些原因不想用 html-ppt-skill，下面两个 skill 也属于"HTML 演示文稿派"，可以做替代：

• ‎zarazhangrui/frontend-slides：12 套主题、视觉先行（直接给你渲染主题预览图选，而不是描述风格），支持 ‎.pptx 导入转 HTML，适合"老 PPT 重生计划"。
  安装命令（在 Claud Code 里面执行）：‎/plugin marketplace add zarazhangrui/frontend-slides 后 ‎/plugin install frontend-slides@frontend-slides。
• ‎alchaincyf/huashu-design：HTML 原生设计 skill，20 种设计哲学 + 5 维评审 + MP4 导出，适合更偏"高保真原型 / 视频化展示"的场景。

它们三者各有所长：要"讲"用 html-ppt-skill，要"老 PPT 转 HTML"用 frontend-slides，要"高保真设计稿"用 huashu-design。

四、路线二：把页面做得更像样 → guizang-ppt-skill

4.1 它解决的问题

你已经有了内容结构、有了大纲、甚至已经有一份"能用但不够好看"的 deck。你的诉求只剩一句话："再帮我把页面做得更像样、更有质感、更出片。"

这种场景，op7418 / 归藏 的 guizang-ppt-skill 是目前 GitHub 上最具代表性的方案——发布 10 天破 5000 星，本身就是答案。

4.2 风格定位

它的产物是横滑杂志风 + 电子墨水风的单文件 HTML deck，包含：

• 10 套固定版式（封面 / 章节扉页 / 数据展示 / 左文右图 / 网格 / 流程 / Q&A / 引用 / 前后对比 / 混合）
• 5 套固定主题（Ink Classic / Indigo Porcelain / Forest Ink / Kraft Paper / Dune）
• WebGL 流体背景（仅封面）
• 衬线标题 + 无衬线正文
• Motion One 驱动的页面切换动画（5 种 recipe，自动匹配版式）
• 键盘 / 滚轮 / 触控 / 圆点索引 / ESC 概览全套交互

特意提一个反直觉的设计：它禁止你自定义十六进制颜色。这听起来很霸道，但实际上正是它"出片率"高的关键——大多数人根本没有调色板素养，给自由可能就翻车。

4.3 安装

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

或者：

git clone https://github.com/op7418/guizang-ppt-skill ~/.claude/skills/guizang-ppt-skill

安装这个Skill时，也是会让选择需要为哪些Agent（IDE）安装，以及选择安装范围和安装方式：

这里，还是选择全局安装（Global）和软链接（Symlink）安装方式，然后就安装完成了。

4.4 使用步骤

第一步：触发。在 Claude Code 里说类似的话即可（当然，如果认为这样还不够保险，可以指明用 guizang-ppt 这个Skill）：

• "帮我做一份杂志风 PPT"
• "horizontal swipe deck"
• "editorial magazine style presentation"
• "电子墨水风格演讲 slides"

比如，使用如下的提示词，这里用的是 Hermes Agent 这个AI助手，在飞书进行的交互：

帮我用 guizang-ppt 做一份靛蓝瓷风格 PPT，根据附件这份 Markdown 里的内容，可结合网上搜索信息资料：主题是：Hermes Agent 系统架构、部署配置与生产化实践听众是：技术分享会的工程师同行

第二步：回答它的 6 个澄清问题（受众 / 时长 / 素材 / 图片 / 主题色 / 硬约束，可选）。

在上文的这个示例里面，它是全程自己哼哧哼哧干活，中间请求的几次权限，然后就完成了：

第三步：约 几分钟/十几分钟 生成 HTML。

生成 HTML（上图） 之后，如果不是在本地（比如我这个是在云服务器上），可以让它打包发：

下载之后，解压缩，就可以进行预览了。

第四步（可选）：在 Codex 环境下，初稿出来后它会问你要不要生成插画，调用生图大模型做纪实摄影、信息图、流程图等，按版式比例自动插回去。

4.5 实用技巧

• ‎不要试图做超长 deck：它的设计哲学就是"少量高质量页面"。30 页以上 deck 不是它擅长的领域，强上效果会变糟。
• ‎封面 WebGL 默认开：其它页面没有，这是有意为之，避免视觉负担。如果客户要求"全 deck 都要动效"，换 ‎frontend-slides 或者自己写。
• ‎配色限制是优点不是缺点：客户说"我要红色主题色"的时候，引导他选 5 套预设里最接近的那一套，不要试图改 hex——一改就破相。
• ‎它和 Open Design 的关系：归藏这个 skill 已经被 Open Design 默认捆绑为 deck mode。如果你已经在用 Open Design，guizang-ppt-skill 不需要单独装第二遍。

4.6 它不擅长的

• 大量数据表格（设计本身就不是为数字准备的）。
• 重文字的培训教材（每页字数被严格控制，塞不下教材内容）。
• 团队协作编辑（单文件 HTML 不是协作格式）。

五、上篇小结：别把“演示文稿”自动等同于 PPTX

如果你只是要现场讲（演示/交流）、在线分享、发一个可浏览的链接，可考虑优先选 html-ppt-skill。它轻、快、可分享，presenter mode 对真实演讲很有用。

如果你的目标是“页面要出片”，不是“客户要拿去改”，那就选 guizang-ppt-skill。它更像横滑杂志，不像传统 PPT，但视觉完成度高。

这两条路线共同回答的是同一个问题：当你的核心诉求是表达（宣讲交流）、放映、传播，而不是二次编辑时，HTML 往往比 .pptx 更顺手。

下篇再讲另一边：当交付物必须是 .pptx，或者你要做企业级品牌化生产线，应该怎么选工具、怎么搭流程。