HTML PPT Studio 是开源 AI 演示技能包，36 主题、31 布局、47 动画、演讲者模式一键配齐。纯静态 HTML/CSS/JS 无需构建，Chrome 一键渲染 PNG，配合 Claude/Cursor 一句话生成小红书、技术分享、产品发布等专业 deck。

🎤 引言

做演示文稿最让人头秃的瞬间是什么？打开 PowerPoint 面对空白模板挑半小时主题、从头一行一行排版字号行距、改完配色发现动画全乱——这些痛点 html-ppt-skill 想用一种"反套路"的方式解决：直接生成可播放的 HTML 演示文件，让 AI Agent 当主笔。

这个仓库 4 月上线到现在 3 个月，已经攒下 6.9k Stars、621 Forks，官方 README 也一路从 24 主题升到 36 主题、31 布局、47 动画，还新增了演讲者模式。它的核心玩法不是"换个好看的模板"，而是把整套 PPT 拆成 token 化的主题文件 + 单页布局文件 + 动画注册表，再用 Claude/Cursor 等 Agent 串起来——你给大纲，它出 deck。

⭐ 核心功能

🎤 演讲者模式（最新）

按 S 键弹出一个独立的演讲者窗口，里面有 4 张可拖拽、可缩放的磁吸卡片：当前页、下一页预览、逐字稿（150-300 字/页）、计时器。观众端和演讲者端通过 BroadcastChannel 实时同步，切换页面时通过 postMessage 让 iframe 内部只切 .is-active class——不刷新、不闪烁、像素完全一致。

预览为什么能做到像素级保真？因为演讲者窗口里的下一页预览，是一个 <iframe> 加载同一个 deck HTML，只在 URL 后挂 ?preview=N，runtime 就会只渲染第 N 页、不带任何 chrome。所以预览用的就是和观众端完全相同的 CSS、主题、字体、视口，颜色和布局天然对齐。

🎨 36 套主题（Token 化）

minimal-white、editorial-serif、catppuccin-latte、dracula、tokyo-night、glassmorphism、bauhaus、cyberpunk-neon、xiaohongshu-white……36 个主题每个都是一个纯 CSS tokens 文件，换一个 <link> 标签整套 deck 就换肤。所有色值、圆角、阴影、字号决策集中在 assets/base.css + 当前主题文件，改一个变量全 deck 重新排。

想看完整效果？打开 templates/theme-showcase.html，每个主题在独立 iframe 里渲染——主题之间不会互相串色。

🧩 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

每个布局都自带真实示例数据，拖进 deck 里就能立刻看到渲染效果，不用先造一份假数据。

✨ 47 个动画（27 CSS + 20 Canvas FX）

  • CSS（轻量）：rise-in、zoom-pop、blur-in、glitch-in、typewriter、neon-glow、shimmer-sweep、gradient-flow、stagger-list、counter-up、path-draw、card-flip-3d、page-turn-3d……
  • Canvas FX（电影感）：particle-burst、firework、starfield、matrix-rain、knowledge-graph（力导向物理）、neural-net（信号脉冲）、orbit-ring、galaxy-swirl、data-stream、shockwave……

每个 Canvas 动画都是一个独立的 JS 模块，由 fx-runtime.js 在 slide 进入时自动初始化——不用手写注册代码。

📑 15 个完整 deck 模板

8 个是从真实演示里提取的成品风格（小红书白底杂志风、暗底力导向知识图谱、蓝图架构图、终端 cyberpunk、紫色渐变卡……），7 个是通用场景脚手架（pitch-deck、product-launch、tech-sharing、weekly-report、xhs-post 9 张 3:4、course-module）。每个模板独立 CSS scope，多个 deck 并排预览不会冲突。

🛠 零构建 + 渲染脚本

纯静态 HTML/CSS/JS，没有 webpack、没有 Vite、没有 npm install。CDN 只引了 webfonts、highlight.js、chart.js（可选）。配套 ./scripts/render.sh templates/theme-showcase.html 可以用 headless Chrome 一键渲染成 PNG，./scripts/new-deck.sh my-talk 一行脚手架出新 deck。

📥 安装与使用

一行命令安装

npx skills add https://github.com/lewislulu/html-ppt-skill

这一行把你的 Agent（Claude Code、Cursor 等支持 AgentSkill 的工具）注册上这个技能。

手动克隆 + 本地浏览

git clone https://github.com/lewislulu/html-ppt-skill.git
cd html-ppt-skill

# 浏览器直接打开
open templates/theme-showcase.html    # 36 个主题逐一预览
open templates/layout-showcase.html   # 31 个布局逐一预览
open templates/animation-showcase.html# 47 个动画逐一预览
open templates/full-decks-index.html  # 15 个完整 deck 预览

🎯 重点玩法：让 Claude 一句话生成 PPT

CSDN 社区 java小吕布 分享的实际用法：

Step 1：告诉 Claude 启用技能

请使用 html-ppt-skill 技能，帮我生成一份 PPT

Step 2：给它大纲

帮我生成一份技术分享 PPT，主题：AI 智能体时代的高效工具链
内容结构：1. html-ppt-skill 介绍 2. Agent 编排 3. 工具链图谱 4. 实操案例 5. 总结

Step 3：Claude 直接输出完整可播放的 HTML PPT 文件

整个过程不到 10 秒，出来的不是 Word/PPT 文件，是可以直接双击在浏览器打开播放的 .html 文件。如果要指定风格，直接在提示词里写「cyberpunk 主题」「小红书白底柔和风」即可。

键盘快捷键速查

← → Space PgUp PgDn Home End   翻页
F                               全屏
S                               打开演讲者窗口
N                               底部速记抽屉
R                               重置计时器（在演讲者窗口）
O                               全部页面缩略图
T                               循环切换主题（同步到演讲者窗口）
A                               当前页循环播放 demo 动画
?preview=N (URL)                预览模式（只显示第 N 页，无 chrome）

🎯 适用场景

  • 小红书/公众号图文作者：内置 xiaohongshu-white 和 xhs-pastel-card 两套主题，加上 xhs-post 9 张 3:4 的 deck 模板，AI 一键出图文
  • 技术博主/讲师：写完一篇技术文章大纲，让 Claude 直接生成 tech-sharing 模板的 deck，配 27 种 CSS 动画 + 47 个动画效果，比 PowerPoint 现成模板精致
  • 独立开发者做 pitch deck：pitch-deck 模板 + pitch-deck-vc 主题，配合 kpi-grid、comparison、chart-line 等布局，10 分钟出一份投资人看的 deck
  • 产品经理周报：weekly-report 模板 + process-steps、roadmap、gantt 布局，搭 AI 一键出周会 slides
  • 想做开源分享但不会排版的人：HTML/CSS 不会写也能用，AI 帮你写

🔍 对比 / 替代方案

工具输出AI 集成学习成本适合场景
HTML PPT Studio静态 HTML原生支持 Claude/Cursor零（AI 代写）跨平台、AI 自动化演示
Microsoft PowerPoint.pptx弱（Copilot）中传统商务汇报
Google SlidesWeb中（Gemini）低协作编辑
reveal.js静态 HTML无高（手写 Markdown）极客、Markdown 党
Slidev静态 HTML弱中（Vue + Markdown）开发者技术分享

最大差异化：Tosea AI GitHub Slide Skill Directory 把 html-ppt-skill 列为 GitHub 同类 HTML 演示项目里 Stars 数第一梯队（6.9k+），同时是少有的原生适配 AgentSkill 协议、配套 36 主题 31 布局 47 动画一站式配齐的项目。reveal.js 和 Slidev 需要自己写 Markdown 和 CSS，HTML PPT Studio 让 AI 帮你写。

⚠️ 注意事项

  • AI Agent 兼容性：Skill 协议需要 Agent 运行时支持，目前 Claude Code、Cursor、Codex 等较新 Agent 已支持，老版本 IDE 或纯命令行 LLM 需要手动参考 SKILL.md 调用
  • 中文/英文字体：Noto Sans SC / Noto Serif SC 已经预导入，但如果是生僻字或特殊符号，建议在 deck 里手动测一下渲染
  • 演讲者模式依赖浏览器：BroadcastChannel 是浏览器 API，必须在 Chrome / Edge / Firefox 里打开才能用；Safari 部分版本对 BroadcastChannel 支持有限
  • 零构建不等于零配置：如果你想替换主题色或加自定义 token，需要懂一点 CSS variables，不算完全零门槛
  • 仓库活跃度：项目从 2026-04-15 创建至今约 3 个月，pushed_at 是 2026-04-26，最近 2 个月无新 commit，建议关注 GitHub 仓库动态 看后续维护节奏
  • 17 个 open issues：作者虽然更新频繁但仍有未关闭 issue，使用前可以快速扫一眼 issues 区 确认有没有 blocker

✅ 总结

HTML PPT Studio 是当下 GitHub 上少有的"AI 友好型演示工具包"——把演示文稿拆成主题 + 布局 + 动画三个原子，让 Claude/Cursor 这类 Agent 像搭积木一样组装 deck。6.9k Stars、621 Forks、MIT 协议，加上演讲者模式 + 36 主题 + 47 动画 + iframe 像素级预览，整体完成度很高。

最大卖点不是"用 HTML 写 PPT"这件事本身，而是让 AI 能完美生成专业级 PPT。配合 Claude Code 一句话出 deck 这件事，比 PowerPoint 模板省心太多。

缺点：依赖 Agent 运行时支持（不是所有 LLM 客户端都跑得起来）、最近 2 个月没新 commit、Safari 对演讲者模式支持有限。

适合谁：技术博主、独立开发者、产品经理、AI 工具爱好者、不想被 PPT 排版折磨的所有人。不适合谁：需要导出 .pptx 给同事用 Office 打开的人、Mac 老 Safari 用户、对 AI 生成内容不信任的传统设计师。

推荐指数：⭐⭐⭐⭐（4/5）

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