html-ppt-skill：开源AI智能PPT生成Skill，36 套主题 47 种动画适配自动化创作

html-ppt-skill是什么

html-ppt-skill（ HTML PPT Studio）是一个专为AI Agent设计的"世界级"演示文稿创作工具集。它不是一个普通的PPT软件，而是一套纯静态HTML/CSS/JS的模板和工具库——无需Node.js、Webpack或任何构建工具，打开浏览器即可使用。

核心数据一览：

功能特色

🎤 演讲者模式（Presenter Mode）——旗舰功能

在任何演示文档页面按下 S键，弹出一个独立的演讲者窗口。该窗口包含四个可拖拽、可调整大小的"磁力卡片"：

• 当前幻灯片：实时显示观众正在看的页面

• 下一张幻灯片预览：提前看到后续内容

• 演讲者脚本（逐字稿）：显示当前幻灯片的讲稿

• 计时器：帮助演讲者控制时间

为什么预览是像素级的？
每个卡片都是一个 <iframe>，加载带有 ?preview=N 参数的同一份HTML文件——使用的CSS、主题、字体和视口与观众看到的完全一致，颜色和布局零偏差。

平滑导航不闪烁：
幻灯片切换时，演讲者窗口通过 postMessage({type:'preview-goto', idx:N}) 与 iframe 通信，仅切换 .is-active 类，不重新加载页面，实现无闪烁切换。

演讲者脚本的3条黄金法则：

1. 使用提示信号，而非照本宣科——关键词加粗，过渡句单独成段

2. 每页150-300字——对应约2-3分钟的演讲节奏

3. 口语化写作——像说话一样写，而非书面语

🎨 36种主题系统

每个主题都是一个纯CSS token文件——只需修改一个 <link> 标签即可为整个演示文稿"换肤"。你可以在 templates/theme-showcase.html 中浏览所有主题（每个幻灯片使用独立iframe渲染，确保主题间视觉隔离）。

主题分类与代表：

📑 15个完整模板

模板分为两大类：

真实世界提取（8个）：

• xhs-white-editorial — 小红书白底杂志风

• graphify-dark-graph — 暗底+力导向知识图谱

• knowledge-arch-blueprint — 蓝图/架构图风

• hermes-cyber-terminal — 终端cyberpunk

• obsidian-claude-gradient — 紫色渐变卡

• testing-safety-alert — 红/琥珀警示风

• xhs-pastel-card — 柔和马卡龙图文

• dir-key-nav-minimal — 方向键极简

通用场景模板（7个）：
pitch-deck（融资路演）、product-launch（产品发布）、tech-sharing（技术分享）、weekly-report（周报）、xhs-post（9页3:4小红书帖子）、course-module（课程模块）、presenter-mode-reveal🎤（自带完整演讲稿的演讲模板）

每个模板都是一个独立文件夹，含有作用域CSS（.tpl-<name>类名），多个模板可以并排预览而不会产生样式冲突。

🧩 31种单页布局

每种布局都配有真实的演示数据，拖入即可立即看到效果。

✨ 27种CSS动画 + 20种Canvas特效

CSS动画（轻量级，27个）：
方向淡入、升起弹出、缩放、模糊进入、故障闪烁、打字机效果、霓虹光效、渐变流动、列表逐项、计数器增长、路径绘制、形态变形、视差倾斜、3D卡片翻转、立方旋转、翻书效果、透视缩放、跑马灯滚动、Ken Burns效果、涟漪揭示、聚光灯等

Canvas特效（电影级，20个）：
粒子爆炸、五彩纸屑、烟花、星空、矩阵雨、知识图谱（力导向物理模拟）、神经网络（信号脉冲）、星座连线、轨道环、银河漩涡、词级级联、字母爆炸、链式反应、磁场、数据流、渐变墨团、闪光轨迹、冲击波、多行打字机、计数器爆炸

每个Canvas特效都是一个真实手写的Canvas模块，通过 fx-runtime.js 在幻灯片进入时自动初始化。

技术细节

项目结构

html-ppt-skill/
├── SKILL.md      # AI Agent 调度文件├── README.md      # 英文文档├── README.zh-CN.md    # 中文文档├── references/     # 详细目录和指南│ ├── themes.md     # 36个主题用法说明│ ├── layouts.md    # 31种布局类型│ ├── animations.md    # 27 CSS + 20 FX 目录│ ├── full-decks.md    # 15个完整模板│ └── authoring-guide.md  # 完整工作流程├── assets/
│ ├── base.css     # 共享样式令牌│ ├── fonts.css     # 网络字体导入│ ├── runtime.js    # 键盘事件+演讲者模式+概览│ ├── themes/*.css    # 36个主题CSS文件│ └── animations/
│  ├── animations.css  # 27个CSS动画│  ├── fx-runtime.js   # Canvas特效自动初始化│  └── fx/*.js    # 20个Canvas特效模块├── templates/
│ ├── deck.html     # 最简起始模板│ ├── theme-showcase.html  # 36主题展示页│ ├── layout-showcase.html  # 31布局展示页│ ├── animation-showcase.html # 47动画展示页│ ├── full-decks-index.html  # 15模板索引页│ ├── full-decks/<name>/  # 15个独立模板文件夹│ └── single-page/*.html  # 31个单页布局文件├── scripts/
│ ├── new-deck.sh    # 脚手架脚本│ ├── render.sh     # Headless Chrome→PNG│ └── verify-output/   # 56张自测截图└── examples/demo-deck/   # 完整示例演示文稿

设计哲学

• Token-driven设计系统：所有颜色、圆角、阴影、字体决策集中在 assets/base.css + 当前主题文件中。修改一个变量，整套幻灯片都会优雅地重新布局。

• Iframe隔离预览：主题、布局、模板展示都使用 <iframe> 渲染每个幻灯片，每个预览都是真实的独立渲染，互不干扰。

• 零构建：纯静态HTML/CSS/JS，CDN仅用于网络字体和可选的 highlight.js、chart.js。

• 中英双语优先：预先导入 Noto Sans SC / Noto Serif SC 两套中文字体。

键盘快捷键

应用场景

1. AI Agent 自动化创作

这是项目的核心场景。安装后，AI Agent可以自动为用户生成演示文稿：

"做一份 8 页的技术分享 slides，用 cyberpunk 主题""turn this outline into a pitch deck""做一个小红书图文，9 张，白底柔和风"

2. 技术分享与开发者演示

适合技术团队内部、开源项目介绍、技术大会演讲。通过 code、diff、terminal 等布局，配合Canvas特效，呈现专业且富有技术感的演示文档。

3. 产品发布与融资路演

使用 pitch-deck 模板，配合 big-quote、stat-highlight、kpi-grid 等布局，快速制作商业路演幻灯片。

4. 自媒体与小红书画风

xhs-post 模板（9页，3:4比例）和 xiaohongshu-white 主题完美适配小红书图文内容。演示文稿可以直接发布为HTML，或通过 render.sh 脚本生成静态图片。

5. 教育与在线课程

course-module 模板支持课程内容结构化呈现。presenter-mode-reveal 模板的演讲者脚本模式，让讲师能够编写完整讲稿，保证讲解节奏。

使用方法

方式一：通过Agent安装（一行命令）

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

安装后，AI Agent可以自动生成演示文稿。

方式二：手动使用（克隆仓库后）

# 从基础模板快速创建新演示文稿./scripts/new-deck.sh my-talk# 浏览所有资源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个完整模板# 渲染为PNG图片（需要Chrome）./scripts/render.sh templates/theme-showcase.html
./scripts/render.sh examples/my-talk/index.html 12

快速上手步骤

1. 复制 templates/deck.html 或使用 new-deck.sh 创建新文件

2. 在 <head> 中选择一个主题（修改CSS链接）

3. 使用 data-index 属性定义幻灯片页数

4. 在每页 <section> 中添加布局类名和内容

5. 按 S 键测试演讲者模式

6. 使用 render.sh 导出为静态图片（可选）

竞品对比

常见问题解答

Q: html-ppt-skill 需要安装Node.js或Webpack吗？

A: 完全不需要。 这是零构建项目，纯静态HTML/CSS/JS，可以直接在浏览器中打开使用。唯一的依赖是网络字体CDN和可选的 highlight.js、chart.js。

Q: 如何更换主题？

A: 修改 <head> 中的CSS链接即可。例如将 <link rel="stylesheet" href="assets/themes/cyberpunk-neon.css"> 换为 <link rel="stylesheet" href="assets/themes/minimal-white.css">。也可以按 T 键实时切换主题。

Q: 演讲者模式如何工作？

A: 打开演示文稿后，按 S 键弹出一个独立的演讲者窗口。该窗口包含4个可拖拽的卡片：当前幻灯片、下一张预览、演讲脚本和计时器。两个窗口通过 BroadcastChannel 保持同步。

Q: 如何编写演讲稿（speaker script）？

A: 在HTML中添加特定属性的 <article> 标签，遵循三条法则：使用提示信号而非照本宣科，每页150-300字，口语化表达。更多细节可参考 references/presenter-mode.md。

Q: 支持中文吗？

A: 原生支持中文。 项目预设了 Noto Sans SC（黑体）和 Noto Serif SC（宋体）两套中文字体，且有完整的中文文档（README.zh-CN.md）。

Q: 如何将演示文稿导出为图片？

A: 项目提供了 scripts/render.sh 脚本，利用Headless Chrome将任何页面渲染为PNG图片。使用方法：./scripts/render.sh templates/theme-showcase.html。

Q: 可以商用吗？

A: 项目采用 MIT许可证，可以自由使用、修改和商用。

Q: 多个模板同时预览会样式冲突吗？

A: 不会。 每个完整模板都使用作用域CSS（.tpl-<name>类名），确保多个模板可并排预览而互不影响。

相关链接

• GitHub仓库地址：https://github.com/lewislulu/html-ppt-skill

总结

html-ppt-skill 是一个设计精良、功能全面的开源HTML演示文稿创作工具集。通过Token-driven设计理念和零构建技术选型，融合了36个主题、15个完整模板、31种单页布局和47种动画效果，再加上专业演讲者模式，大幅降低了创建专业、美观HTML演示文稿的门槛。它原生支持AI Agent调用，覆盖技术分享、产品发布、自媒体内容和企业汇报等多种场景，以MIT许可证开放商用，是一个集实用性、专业性和创新性于一体的优秀开源项目。