写在前面：这篇文章不是 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-ppt-skill（lewislulu 出品） | 单文件 HTML 幻灯片 + presenter mode | | | 36 主题 / 15 模板 / 31 版式 / 27 CSS 动画 + 20 Canvas FX；按 S 键打开同步逐字稿与计时器的演讲模式 |
| | | | 10 套版式 + 5 种主题 + WebGL 动效 |
| | | | |
| | | | /create-template 抓取已有 PPT 当模板 |
| | | | |
关于"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）
- 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）：
- "editorial magazine style presentation"
比如，使用如下的提示词，这里用的是 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 它不擅长的
- 重文字的培训教材（每页字数被严格控制，塞不下教材内容）。
五、上篇小结：别把“演示文稿”自动等同于 PPTX
如果你只是要现场讲（演示/交流）、在线分享、发一个可浏览的链接，可考虑优先选 html-ppt-skill。它轻、快、可分享，presenter mode 对真实演讲很有用。
如果你的目标是“页面要出片”，不是“客户要拿去改”，那就选 guizang-ppt-skill。它更像横滑杂志，不像传统 PPT，但视觉完成度高。
这两条路线共同回答的是同一个问题：当你的核心诉求是表达（宣讲交流）、放映、传播，而不是二次编辑时，HTML 往往比 .pptx 更顺手。
下篇再讲另一边：当交付物必须是 .pptx，或者你要做企业级品牌化生产线，应该怎么选工具、怎么搭流程。
