这个开源工具让我戒掉了PPT

你有没有这种感觉：每次做技术分享，打开 PowerPoint 或 Keynote，调格式、对齐、选模板，折腾半小时还没开始写内容？或者用 reveal.js，结果要先装 Node.js、装依赖、配 webpack，一整套工程化流程走下来，分享的激情都凉了。

今天给大家推荐一个让我眼前一亮的开源项目：html-ppt-skill（作者 lewislulu，GitHub 地址在文末）。它的核心理念简单粗暴——一个 HTML 文件，就是一份完整的专业演示文稿。双击打开，直接开讲。

小红书图文效果展示 - 封面页

五个让我心动的理由

零构建零依赖

这是我最喜欢的一点。没有 package.json，没有 node_modules，没有 build 步骤。一个 .html 文件，浏览器打开就是 PPT。分享给别人？发个文件就行。放到 GitHub Pages？拖上去就能访问。这种极简体验，在 2026 年各种工具越来越臃肿的大环境下，反而是一种清流。

36 个主题，换皮肤只需一行代码

项目内置了 36 个精心设计的主题，从商务风的 corporate 到赛博朋克风的 tokyo-night，从小红书风格的 xhs-post 到学术风的 academic。切换主题只需要改一个 <link> 标签的 href：

<!-- 换主题就改这一行 --> <link rel="stylesheet" href="themes/tokyo-night.css">

底层实现是 CSS 变量（Design Tokens）。base.css 定义了所有变量，每个主题文件只覆盖颜色、间距、圆角这些变量值。这种架构设计很优雅，扩展性极强——想要自定义主题？复制一个主题文件，改几个颜色值就完事。

技术分享 PPT 效果 - 封面页

技术分享 PPT 效果 - 内容页

演讲者模式，专业级体验

按 S 键，弹出演讲者视图。四个磁吸卡片：当前幻灯片预览、下一页预览、逐字稿/备注、计时器。做过正式分享的朋友都知道，演讲者视图有多重要。

技术实现上挺有意思：用 window.open() 打开一个新窗口，里面用 iframe 加载当前页面（带 ?preview=N 参数），然后通过 BroadcastChannel API 实现主窗口和演讲者窗口的同步。翻页时两边像素级同步，延迟几乎为零。纯原生 Web API，没有引入任何框架。

20 个 Canvas 特效

知识图谱、神经网络可视化、粒子喷射、代码雨……20 个 Canvas 动画特效可以嵌入到幻灯片里。做技术分享的时候，一个动态的知识图谱比静态图片有说服力得多。这些特效也是纯原生实现，不需要 Three.js 或者 D3.js。

配合 AI Agent，一句话生成 PPT

这个是我认为最有未来感的特性。html-ppt-skill 可以安装为 OpenClaw 或 Claude Code 的 skill。安装后，你只需要对 AI 说一句：

帮我做一份关于 Transformer 架构的技术分享 PPT，用 tokyo-night 主题

AI 就会自动生成一份完整的 HTML 演示文稿，包含内容、布局、动画，直接打开就能用。从"想法"到"成品 PPT"，中间零人工操作。

技术原理揭秘

作为一个有技术洁癖的人，我特别欣赏这个项目的架构设计。整个系统只有三层：

第一层：Design Tokens（base.css）定义所有视觉变量——颜色、字号、间距、圆角、阴影。这是整个主题系统的基石。

第二层：主题覆盖（themes/*.css）每个主题文件只做一件事：覆盖 base.css 中的变量值。东京夜景主题把主色设为深蓝+霓虹色，学术主题把主色设为深蓝+金色。切换主题本质上是切换变量值。

第三层：运行时控制（runtime.js）用 CSS class 切换实现翻页。每一页是一个 section 元素，.is-active 控制当前显示页。方向键、触摸滑动、点击都能触发翻页。逻辑简洁，代码量小。

没有虚拟 DOM，没有响应式框架，没有编译步骤。就是 HTML + CSS + JS 最原始的组合，但是组织得非常合理。这种"用最简单的方式解决问题"的工程哲学，我觉得比堆技术栈更值得学习。

技术分享 PPT 效果 - 总结页

我的使用体验

我实际用 html-ppt-skill 做了两份东西：

第一份是 Karpathy LLM Wiki 的技术分享，用 tokyo-night 主题。内容是关于大语言模型的技术梳理，配上 Canvas 动画特效，效果比我之前用 PowerPoint 做的强太多。而且整个过程，从写内容到最终成品，不到半小时。

第二份是用 xhs-post 模板做的小红书图文。是的，这个工具不只是做 PPT，还能做社交媒体图文内容。一套工具，多种输出。

小红书图文 - 内容页展示

小红书图文 - 排版细节

小红书图文 - 视觉效果

小红书图文 - 图文排版

小红书图文 - 结尾页

适合谁用？

我觉得三类人会特别喜欢这个工具：

第一类：技术分享者。 经常需要做技术分享的工程师，不需要花时间调 PowerPoint 格式，专注于内容本身。

第二类：AI Agent 用户。 如果你已经在用 OpenClaw 或 Claude Code，安装这个 skill 后，PPT 生成效率会有质的飞跃。

第三类：追求极简的开发者。 不喜欢臃肿工具链的人，会觉得这个项目的设计理念很对胃口。

不足和期待

客观说，目前也有一些不足：对非技术用户有门槛（需要懂一点 HTML）；没有所见即所得的编辑器；协作功能依赖 Git 而不是实时协同。但这些对于一个开源项目来说，已经足够优秀了。期待后续社区能贡献更多主题和布局。

总结

html-ppt-skill 用最简洁的技术栈，解决了一个真实痛点：做 PPT 太麻烦。36 个主题、31 种布局、47 种动画、演讲者模式、Canvas 特效、AI Agent 集成——这些功能加在一起，MIT 开源协议，白嫖不香吗？

项目地址：https://github.com/lewislulu/html-ppt-skill

如果你也做了什么有趣的东西，欢迎在评论区分享。

作者：玄木新视角 | 感谢 lewislulu 的开源贡献