# html-ppt-skill – 开源 AI PPT 生成 Skill，支持 HTML 文件
- Link: https://paooo.com/aigc-news/24369/
- Published: 2026-07-07T14:07:50+08:00
- Author: 站外新闻
## html-ppt-skill是什么
html-ppt-skill 是基于 HTML 的 AI 演示文稿 Skill，工具支持输出浏览器原生支持的 HTML
文件，内置 36 套主题、31 种布局、47 个动效和 15 套完整模板，Agent 通过自然语言可
组合生成精致演示文稿，支持一键安装并在 [Claude Code](https://ai-bot.cn/sites/56948.html)、
[OpenClaw](https://ai-bot.cn/sites/70880.html)、[Hermes Agent](https://ai-bot.cn/sites/78174.html)、
[Cursor](https://ai-bot.cn/sites/906.html)/[Codex](https://ai-bot.cn/sites/53.html)
等多平台通用。
阅读目录
* [html-ppt-skill是什么](https://paooo.com/aigc-news/24369/#htmlpptskill%e6%98%af%e4%bb%80%e4%b9%88)
* [html-ppt-skill的主要功能](https://paooo.com/aigc-news/24369/#htmlpptskill%e7%9a%84%e4%b8%bb%e8%a6%81%e5%8a%9f%e8%83%bd)
* [如何使用html-ppt-skill](https://paooo.com/aigc-news/24369/#%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8htmlpptskill)
* [html-ppt-skill的核心优势](https://paooo.com/aigc-news/24369/#htmlpptskill%e7%9a%84%e6%a0%b8%e5%bf%83%e4%bc%98%e5%8a%bf)
* [html-ppt-skill的项目地址](https://paooo.com/aigc-news/24369/#htmlpptskill%e7%9a%84%e9%a1%b9%e7%9b%ae%e5%9c%b0%e5%9d%80)
* [html-ppt-skill的同类竞品对比](https://paooo.com/aigc-news/24369/#htmlpptskill%e7%9a%84%e5%90%8c%e7%b1%bb%e7%ab%9e%e5%93%81%e5%af%b9%e6%af%94)
* [html-ppt-skill的应用场景](https://paooo.com/aigc-news/24369/#htmlpptskill%e7%9a%84%e5%ba%94%e7%94%a8%e5%9c%ba%e6%99%af)
## html-ppt-skill的主要功能
* **36 套主题**：覆盖极简学术、赛博朋克、小红书柔和风等场景，按 T 键实时切换。
* **31 种布局**：含封面、目录、代码展示、时间线、架构图、流程图等，附带真实示例
数据。
* **47 个动效**：27 个 CSS 动画 + 20 个 Canvas FX（粒子爆发、神经网络脉冲等电影
级效果）。
* **15 套完整模板**：提炼自真实项目，如 tech-sharing、pitch-deck、xhs-post、presenter-
mode-reveal 等。
* **演讲者模式**：按 S 键弹出独立窗口，含当前页/下一页预览、逐字稿、计时器，通过
iframe + BroadcastChannel 实现像素级精确同步。
* **跨平台 Skill**：遵循 AgentSkill 协议，一行命令安装，Claude Code、OpenClaw、
Hermes、Cursor/Codex 均可调用。
微信关注回复“**开源**”，加入**AI开源项目交流群**
## 如何使用html-ppt-skill
* **安装 Skill**：执行 `npx skills add https://github.com/lewislulu/html-ppt-skill`
将 Skill 添加到 Agent。
* **自然语言触发**：在 Agent 中输入需求，如”做一份 10 页微服务架构分享，暗色主题，
含架构图和代码示例”。
* **浏览器打开**：Agent 生成完整 HTML 文件，双击即可查看，键盘翻页。
* **实时切换主题**：演示时按 T 键在 36 套主题间快速切换。
* **开启演讲者模式**：按 S 键弹出独立演讲者窗口，含预览、逐字稿和计时器。
* **手动创建（可选）**：直接 `git clone` 仓库，运行 `./scripts/new-deck.sh my-talk`
生成基础结构。
## html-ppt-skill的核心优势
* **HTML 替代 PPTX**：纯文本格式，LLM 天然擅长生成，零依赖、双击即开，规避 PPTX
排版错位和字体丢失问题。
* **预制组件 + AI 组合**：人提供约束良好的主题/布局/动效预制件，AI 负责组合，避免
从零创造的审美失控。
* **像素级演讲者同步**：预览与观众画面共用同一份 HTML + CSS，彻底消除投屏字体、
间距、颜色不一致的尴尬。
* **一次安装，处处可用**：遵循 agentskills.io 开放标准，不绑定单一平台，能力资产
可跨 Agent 框架迁移。
* **电影级视觉效果**：手写 Canvas 模块实现粒子、星空、神经网络等特效，远超传统
PPT 动画表现力。
## html-ppt-skill的项目地址
* **GitHub仓库**：https://github.com/lewislulu/html-ppt-skill
## html-ppt-skill的同类竞品对比
| 对比维度 | html-ppt-skill | [guizang-ppt-skill](https://ai-bot.cn/guizang-ppt-skill/) |
| **作者** | lewislulu | 歸藏 (op7418) |
| **Star 数** | 3600+ (20 天) | 16,000+ |
| **输出格式** | 单文件 HTML | 单文件 HTML |
| **视觉系统** | 36 套主题（极简/赛博/小红书等） | 2 套风格：A 电子杂志×电子墨水、B 瑞士国际主义 |
| **布局数量** | 31 种通用布局 | A 风格 10 种 + B 风格 22 种锁定版式 |
| **动效能力** | 47 个（27 CSS + 20 Canvas FX 电影级特效） | WebGL 背景 + 低性能静态模式（B 键切换） |
| **演讲者模式** | 独立窗口，iframe + BroadcastChannel 像素级同步，含逐字稿 | 未明确内置演讲者模式 |
| **内容生成** | Agent 从 101 个 Skill 中组合，约束”不发明新布局” | 7 问清单前置对齐 → 大纲确认 → 选骨架填内容 |
| **配图支持** | 基础图片插入 | 支持生成纪实照片、信息图、流程图、系统关系图 |
| **封面生态** | 15 套完整 deck 模板（含 xhs-post 竖版） | 公众号 21:9 头图、1:1 分享卡、小红书 3:4、视频号横版 |
| **约束校验** | 依赖 SKILL.md 规则约束 | checklist.md 自检 + 校验脚本拦截居中标题、图片脱槽等 |
## html-ppt-skill的应用场景
* **技术分享与开发者演示**：调用 tech-sharing 模板，配合 tokyo-night、terminal-
green 等暗色主题，快速生成含架构图和代码示例的幻灯片。
* **融资路演与产品 Pitch**：用 pitch-deck-vc 模板，一键产出 YC 风格的商业计划书，
支持数据图表和团队介绍布局。
* **小红书与社交媒体图文**：通过 xhs-post 模板生成 3:4 竖版内容，配合 soft-pastel、
xiaohongshu-white 主题，直接适配社交平台比例。
* **学术汇报与论文展示**：采用 minimal-white、editorial-serif、academic-paper 主题，
适合期刊答辩和学术会议，风格严谨克制。
* **企业商务与新闻播报**：corporate-clean、news-broadcast 主题满足经营分析、销售
复盘、项目月报等正式汇报场景。