一行命令让 AI 做 PPT:纯静态零构建的开源演示方案
- 2026-11-04 17:27:59
跑通 Claude / OpenClaw / Hermes——一句话出片，数据不出本地。
它是什么？
html-ppt-skill 是一款面向 AI Agent 的开源 Skill，让 AI 直接生成纯静态 HTML/CSS/JS 演示文稿——无需构建步骤、无需 PowerPoint、无需注册任何 SaaS 账号。
Skill 是什么？ 简单来说，它是一个标准化的能力插件（核心是 SKILL.md 文件），定义了 Agent 可以调用的工具、模板和工作流程。Claude Code / OpenClaw / Hermes 等支持 AgentSkill 协议的平台，安装后就能"理解"这个 Skill 的能力并自动调用。
MIT 协议开源，作者 Lewis（GitHub @lewislulu），上线 20 天狂揽 2600+ Star。
安装：一行命令
npx skills add https://github.com/lewislulu/html-ppt-skill适用环境：Claude Code（需 AgentSkill 支持）/ OpenClaw。其他平台安装方式见项目 README。
安装完成后，支持 AgentSkill 的平台（Claude Code / Codex / Cursor / OpenClaw / Hermes 等）即可直接调用。
端到端示例：从安装到出片
第 1 步：完成安装（见上一节命令）第 2 步：打开 Claude Code（或 OpenClaw），输入："做一份 8 页的技术分享 slides，用 cyberpunk 主题"第 3 步：Agent 生成结果 → 在浏览器中打开 index.html，即可看到完整演示文稿生成的产物是一个自包含的 HTML 文件夹（HTML + CSS + JS），直接用浏览器打开就能播放。分享给他人：直接发 HTML 文件、部署到 GitHub Pages、或用 headless Chrome 导出为 PDF/PNG。
以 cyberpunk 主题为例——深色背景配霓虹光效，代码块自带语法高亮，标题页有粒子动画背景，整体接近 Keynote 级别的视觉呈现。
能力一览
| 36 套 | |
| 15 套 | |
| 31 种 | |
| 27 个 | |
| 20 个 | |
中英双语原生支持：预导入 Noto Sans SC / Noto Serif SC，中文排版开箱即用。
怎么用？跟 Agent 说话就行
"做一份 8 页的技术分享 slides，用 cyberpunk 主题" "把这段 outline 变成投资人 pitch deck" "做一个小红书图文，9 张，白底柔和风" "做一份带演讲者模式的产品分享，我想要有逐字稿"
Agent 会自动读取 SKILL.md 中定义的能力清单，根据你的需求选择合适的主题、布局和动画，生成完整的 HTML 演示文稿。
演讲者模式：专业演讲的最后一公里
在任何演示文稿里按 S 键，弹出独立演讲者窗口，4 个可拖拽磁吸卡片：
当前页预览（iframe 实时渲染，像素级与观众视图一致） 下一页预览 逐字稿提词器（AI 自动生成 150–300 字/页的口语化逐字稿） 计时器
翻页通过轻量通信双向同步——零闪烁、零重新加载。
与传统方案对比：PowerPoint 需要安装 Office，Keynote 需要 Mac，而这里是纯 Web 方案——浏览器打开即用，零依赖。
对比 Gamma / MindShow：差异化在哪？
| 部署 | ||
| 数据 | ||
| 定制 | ||
| 演讲者模式 | ||
| 开源 / 成本 |
核心价值：它不是"又一个 AI PPT 工具"，而是让 AI Agent 拥有原生、本地、可定制的演示文稿能力——数据不出本地、无需订阅。
适用场景
技术分享：代码块 + cyberpunk/terminal 主题，开发者专属质感 投资人 Pitch：KPI 网格 + 数据图表布局 小红书图文：9 页 3:4 比例直接出图 周报/汇报：结构化模板，一分钟出片
还有教学课件、产品发布等 15+ 模板可选。
它的设计哲学很简单：改一个 CSS 变量就能换肤，零构建步骤，打开浏览器就能用——没有 PowerPoint 2006 的古早感，只有成熟设计师的默认审美。
局限性
需要说明的是，纯静态 HTML 方案目前不支持嵌入视频、复杂动态图表（如交互式 ECharts）等高级功能。如果做发布会级别的大型演示，PowerPoint / Keynote 仍是更稳妥的选择。但日常分享、技术汇报、内部 pitch，它绰绰有余。
下一步
现在就装好这个 Skill，下次开会前 5 分钟让 AI 帮你做 PPT——然后告诉同事们你是怎么做到的。
npx skills add https://github.com/lewislulu/html-ppt-skill📌 项目地址：https://github.com/lewislulu/html-ppt-skill
