html-ppt-skill：用 AgentSkill 在终端中一键生成专业 HTML 演示文稿

一句话介绍

html-ppt-skill 是一个 AgentSkill，让你在终端中通过一句自然语言指令就能生成专业级的 HTML 演示文稿。它拥有 36 种主题、31 种页面布局、47 种动画效果和真正的演播室模式——所有输出都是纯静态 HTML/CSS/JS，零构建步骤，打开即用。

项目由 lewis 开发，MIT 许可证，目前收获 5,710 ⭐。

核心特性

1. 真正的演播室模式

按 S 键即可弹出专门的演播室窗口，包含四张可拖拽、可调整大小的磁吸卡片：

两个窗口通过 BroadcastChannel 保持同步——翻页时不需要重新加载，无闪烁。

为什么预览图能保证像素级一致？每张卡片是一个 <iframe>，加载同一份 HTML 文件加上 ?preview=N 参数。运行时检测到预览参数后，只渲染第 N 张幻灯片，不含任何 UI 框架。CSS、主题、字体、视口完全一致。

2. 丰富的主题和布局

• 36 种主题：从简洁商务到炫酷科技风，覆盖各类场景
• 15 套完整模板：全页面的示例模板，拿来即改
• 31 种页面布局：封面、目录、正文、对比、数据、结尾等

3. 动画效果

• 27 种 CSS 动画：入场、强调、转场
• 20 种 Canvas FX：粒子特效、渐变背景等高级视觉效果

4. 纯静态输出

所有输出都是独立的 HTML 文件——不依赖 Node.js、Python、任何构建工具。你可以直接双击打开、嵌入网页、通过邮件分享，或者部署到任何静态托管服务。

快速上手

在支持 Agent Skills 协议的 AI 编程助手中（Claude Code、Codex、Hermes Agent 等），安装 html-ppt-skill 后，只需说出你的需求：

生成一个 8 页的创业计划书演示，使用 dark 主题，包含数据图表

Agent 会在一分钟内生成完整的 HTML 演示文稿，你可以立即打开查看或二次编辑。

技术亮点

• BroadcastChannel API：演播室和主窗口间无刷新同步
• iframe 预览：每张预览都是真实渲染，而非截图
• 零依赖：纯静态，无构建步骤
• AgentSkill 标准：兼容 50+ AI 编程助手运行时

适用场景

• 即席演示：开会前 5 分钟需要一份 PPT
• 开发者分享：技术分享、Code Review 演示
• 快速原型：给客户的方案初稿
• 嵌入式演示：作为网页的一部分嵌入展示

优劣势

适合谁用

适合：技术演讲者、开发者、需要快速出演示内容的人

不太适合：需要交付 .pptx 源文件的用户、非技术背景的商务人员

参考资料

• GitHub: lewislulu/html-ppt-skill — 5,710 ⭐