html-ppt-skill：让 AI 生成专业 HTML 演示文稿

一句话定位

html-ppt-skill 是一套面向 AI Agent 的 HTML PPT 生成技能包，用纯静态 HTML/CSS/JS 快速产出带主题、布局、动效和演讲者模式的专业演示文稿。

基础信息卡片

解决什么问题

很多 AI 工具可以生成 PPT 大纲，但真正落到“可展示、好看、能演讲”的页面时，往往还需要大量人工排版。

html-ppt-skill 解决的是：让 Agent 不只是写内容，而是直接生成可以打开、演示、导出截图的 HTML 演示文稿。

它把常见 PPT 制作能力封装成一个 AgentSkill，包括：

• 视觉主题
• 页面布局
• 完整演示模板
• CSS / Canvas 动效
• 演讲者模式
• 导出脚本
• 示例 deck 和验证截图

对使用者来说，可以直接对支持 AgentSkill 的 AI 工具说：

“做一份 8 页的技术分享 slides，用 cyberpunk 主题”
“把这段 outline 变成投资人 pitch deck”
“做一个小红书图文，9 张，白底柔和风”

然后让 Agent 根据这套技能生成对应的 HTML PPT。

核心功能

1. 36 套视觉主题

项目内置 36 套主题，覆盖极简、杂志、暗色、赛博朋克、蓝图、小红书、投资人路演、学术论文等风格。

主题是 CSS token 驱动的，换一行 <link> 就能给整份 deck 换皮。适合让 Agent 根据内容类型自动选择风格，比如：

• 技术分享：tokyo-night、cyberpunk-neon、engineering-whiteprint
• 商业汇报：corporate-clean、pitch-deck-vc
• 小红书图文：xiaohongshu-white、soft-pastel
• 学术内容：academic-paper
• 架构方案：blueprint

2. 15 套完整 deck 模板

它不是只给几个单页组件，而是提供了完整的多页演示模板。

模板分两类：

真实风格提炼款

• 小红书白底杂志风
• 暗底知识图谱风
• 蓝图 / 架构图风
• 终端 cyberpunk 风
• 紫色渐变卡片风
• 警示 / 安全测试风
• 柔和马卡龙图文
• 方向键极简风

通用场景款

• 投资人 pitch deck
• 产品发布会
• 技术分享
• 周报
• 小红书 9 页图文
• 教学模块
• 带完整逐字稿的演讲者模式模板

这些模板对 Agent 很有用，因为它不需要从零设计每页结构，可以直接基于场景套用骨架。

3. 31 种单页布局

项目提供 31 种常见页面布局，覆盖大多数 PPT 页面类型。

包括：

• 封面
• 目录
• 章节页
• bullet 列表
• 双栏 / 三栏
• 引用页
• 数据高亮
• KPI 网格
• 表格
• 代码
• diff
• 终端
• 流程图
• 时间线
• 路线图
• 思维导图
• 对比页
• 甘特图
• 图片大图
• 图片网格
• 柱状图 / 折线图 / 饼图 / 雷达图
• 架构图
• CTA
• Thanks 页

README 里还展示了自动轮播的真实布局预览：

4. 47 个动效

html-ppt-skill 内置 27 个 CSS 动画和 20 个 Canvas FX 动画。

CSS 动效包括：

• 淡入
• 上升进入
• 缩放弹出
• 模糊进入
• 打字机
• 霓虹光效
• 渐变流动
• 列表错开入场
• 数字滚动
• 路径绘制
• 3D 翻卡
• 页面翻转
• 聚光灯等

Canvas FX 包括：

• 粒子爆发
• 彩带
• 烟花
• 星空
• Matrix 代码雨
• 知识图谱
• 神经网络脉冲
• 星座连线
• 数据流
• 磁场
• 冲击波等

这让 Agent 做出来的不是“静态网页截图”，而是可以真正播放和展示的 HTML slides。

5. 演讲者模式

这是项目里比较亮眼的功能。

在任意 deck 中按 S 键，可以打开独立的演讲者窗口。窗口里有 4 个可拖拽、可调整大小的磁吸卡片：

• 当前页预览
• 下一页预览
• 逐字稿
• 计时器

它的设计比较认真：预览不是截图，而是 iframe 加载同一份 deck HTML，通过 ?preview=N 只显示指定页面。因此演讲者看到的预览和观众视图使用同一套 CSS、字体、主题和 viewport，视觉上保持一致。

翻页时通过 BroadcastChannel 和 postMessage 同步，不需要重新加载页面，避免白屏和闪烁。

适合谁

这个项目适合：

• 想让 AI 直接生成演示文稿的用户
• 使用 Claude Code、Codex、Cursor、OpenClaw 等 Agent 工具的人
• 经常做技术分享、产品发布、周报、课程内容的人
• 想用 HTML/CSS/JS 替代传统 PPT 的开发者
• 需要批量生成小红书图文、课程 slides、项目介绍页的人
• 想把演示文稿变成可版本管理、可脚本化、可导出的静态资产的人

尤其适合“内容由 AI 生成，但希望页面也有设计感”的场景。

快速上手

安装命令很简单：

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

安装后，可以让支持 AgentSkill 的 Agent 直接调用这套能力。

如果手动 clone 项目，也可以用脚本新建 deck：

./scripts/new-deck.sh my-talk

查看内置资源：

open templates/theme-showcase.html
open templates/layout-showcase.html
open templates/animation-showcase.html
open templates/full-decks-index.html

导出 PNG：

./scripts/render.sh templates/theme-showcase.html
./scripts/render.sh examples/my-talk/index.html 12

常用快捷键：

← → Space PgUp PgDn Home End   翻页
F                               全屏
S                               打开演讲者窗口
N                               打开 notes 抽屉
R                               重置计时器
O                               slide 总览
T                               切换主题
A                               演示当前页动画
#/N                             跳转到第 N 页
?preview=N                      单页预览模式

结论

html-ppt-skill 的价值不只是“用 HTML 写 PPT”，而是把 主题、布局、模板、动效、演讲者模式和导出流程 打包成一套 Agent 可调用的标准能力。

如果你已经在用 AI Agent 写文档、做方案、生成代码，这个项目可以让下一步变得更自然：直接让 Agent 把内容变成一套能展示的 HTML slides。