html-ppt-skill：AI Agent 的 HTML 演示文稿生成工具

项目研究报告：html-ppt-skill

蓝色像素虾用主题、布局、动画和演讲者视图生成 HTML 演示文稿 — 图 1：html-ppt-skill 是 Web 原生演示系统，不是 .pptx 生成器。

「这是什么」 一句话定性：一套纯 HTML/CSS/JS 的演示文稿设计资产和 Agent Skill，并不绑定单一 Agent。当前 README 列出 36 个主题、15 套完整模板、36 种页面布局、47 种动画（27 CSS + 20 Canvas FX），以及带演讲稿和计时器的 presenter mode；这些是项目目录规模，不是效果评分。官方 README

「它怎么转」

主题布局模板汇入浏览器演示并分流为演讲视图与静态截图 — 图 2：主题、布局和模板组成演示文稿，静态截图只是另一种交付物。

逻辑全景图

├─ 触发层：什么情况下需要用它？
│   └─ AI Agent 需要生成专业 PPT 时：
│       → 想让 AI 直接生成一套完整的演示文稿
│       → 需要多种主题风格（从 corporate 到 cyberpunk）
│       → 需要 presenter mode（含演讲稿 + 计时器）
│
├─ 核心层：它的关键动作是什么？
│   ├─ 主题系统 → 36 个纯 CSS token 主题文件，换 <link> 即可全局换肤
│   ├─ 布局系统 → README 列出 36 种单页布局，旧目录说明仍有 31 的残留
│   ├─ 模板系统 → 15 套完整 PPT 模板（知识图谱/小红书/cyberpunk 等）
│   ├─ 动画系统 → 27 种 CSS 动画 + 20 种 Canvas FX（粒子/烟火/矩阵雨等）
│   ├─ Presenter Mode → 按 S 键弹出独立演讲窗口，4 张磁力卡（当前页/下一页/演讲稿/计时器）
│   └─ PNG 渲染 → 用 headless Chrome 把 HTML 导出为图片
│
├─ 输出层：最终产出什么？
│   ├─ HTML 演示入口及其引用的 CSS/JS/图片资产（分发时一起带上）
│   ├─ PNG 格式的幻灯片截图
│   ├─ Presenter window（演讲者视角的独立窗口）
│   └─ Speaker script（作者建议每页 150-300 词，按语言和时长调整）
│
└─ 卡点层：新手最容易在哪里卡住？
    ├─ 多个主题同时预览会 CSS 冲突 → 用 iframe 隔离每个 slide 解决
    ├─ Canvas FX 初始化时机 → 靠 data-fx 属性在 slide enter 时自动触发
    └─ 演讲稿过长 → 150-300 词是写作建议，不是自动生成或语速保证

「怎么升级」 三段位路线图

段位	掌握目标	关键动作
入门段（能用）	让 AI 帮我生成一套 PPT	对 AI 说"做一份 8 页技术分享，用 cyberpunk 主题"
进阶段（用好）	手动搭配主题/布局/动画	打开 `templates/theme-showcase.html` 挑主题 → `templates/layout-showcase.html` 挑布局 → 拼成完整 deck
高手段（用活）	二次开发 / 创建自己的模板	看 `assets/base.css` 的设计 token 系统 → 在 `templates/full-decks/<name>/` 基础上改

「能用在哪」 场景迁移建议

迁移到 AI 视频脚本生成 - 变量：PPT 的每一页可以当成视频"分镜"，动画效果可映射到视频转场 - 注意：需要把 HTML 动画逻辑转成视频编辑器的关键帧
迁移到静态网站 landing page 生成 - 变量：HTML/CSS 设计系统 + 主题 token + 动画，直接可以做单页网站 - 注意：PPT 是全屏 slide 模式，网站是滚动长页，需要调整布局
如果部署了这个项目，好处是： - AI Agent 可以借现成主题和布局起稿，但仍要检查换行、图表和投影效果 - 纯静态 HTML，不要求后端；托管、模型调用和维护成本另算 - 默认引入中英文字体；Google Fonts 离线不可用时会回退，最好把获授权字体本地化
风险和注意事项：

html-ppt-skill 的 HTML 输出、浏览器渲染、主题隔离和演讲稿边界图 — 图 3：Web 演示很轻，但输出格式、渲染环境、主题隔离和演讲稿规范都要提前确认。

⚠️ 和 PPTX 工具是不同交付路线：这里主要是 HTML，不能把截图当作可编辑的 PowerPoint 文稿
⚠️ PNG 脚本有平台限制：当前 render.sh 写死 macOS 的 Chrome 安装路径、1920×1080 窗口和截图等待预算；Linux/Windows 需要改路径或另配渲染器。PNG 不保留动画、备注和可编辑对象
⚠️ 不是 PowerPoint：输出是 HTML 文件，甲方要 .pptx 的场景不适用
⚠️ 许可和外部资源分开看：源码采用 MIT，复制或分发需保留相应声明；字体、第三方图片和可选 CDN 库另核授权与离线可用性

🔍 特别观察

数据速览：旧稿记录了 4884 stars / 468 forks，但未保存对应时间快照。本次不据此判断项目质量，更不能用 fork/star 比例推断“正常”或可信。

这是一个工具型 skill，有几个亮点：

AgentSkill 原生设计：官方安装命令是 npx skills add，也提供手动复制和 scripts/new-deck.sh 起稿；不用 Agent 也能直接编辑静态模板
主题系统设计得好：36 个主题都是纯 CSS token 文件，换皮肤只需要换一行 <link>，这个设计值得学习
Presenter Mode 有巧思：用 BroadcastChannel 做双窗口同步，用 ?preview=N 让 iframe 渲染同一文稿的单页，减少两套预览代码造成的差异；实际字体、缩放和浏览器环境仍需检查
和我们现有技能的关系： - pptx-generator → 生成 .pptx 文件（甲方汇报、正式场合） - html-ppt-skill → 生成 .html 演示文稿（技术分享、AI Agent 输出）

一句话总结

html-ppt-skill 的灵魂是"让 AI Agent 也能生成专业级 HTML 演示文稿"，本质是一套设计系统和动画资产的集合——对 AI Agent 有用，对需要 .pptx 文件的场景不适合。

GitHub：lewislulu/html-ppt-skill 安装命令：npx skills add https://github.com/lewislulu/html-ppt-skill 技术栈：纯 HTML/CSS/JS（零构建）+ Canvas FX + CSS Animations 数量口径：2026-10-13 读取的 main 分支 README，非固定发行版本。主题 36 个 | 布局标为 36 种（旧说明仍有 31）| 动画 47 种 | 完整模板 15 套。

资料核对（2026-10-13）

本次读取官方仓库 README、MIT LICENSE 和 PNG 渲染脚本，修正布局数量与交付、字体、平台边界；未安装或运行生成、演讲者模式与截图流程，不是实测报告。