项目研究报告：html-ppt-skill
---
> 「这是什么」 > 一句话定性：一个纯 HTML/CSS/JS 的 PPT 生成工具集，以 OpenClaw AgentSkill 的形式交付——支持 36 个主题、15 套完整模板、31 种页面布局、47 种动画（27 CSS + 20 Canvas FX），以及带演讲稿和计时器的 presenter mode。
---
> 「它怎么转」 逻辑全景图
├─ 触发层：什么情况下需要用它？
│ └─ AI Agent 需要生成专业 PPT 时：
│ → 想让 AI 直接生成一套完整的演示文稿
│ → 需要多种主题风格（从 corporate 到 cyberpunk）
│ → 需要 presenter mode（含演讲稿 + 计时器）
│
├─ 核心层：它的关键动作是什么？
│ ├─ 主题系统 → 36 个纯 CSS token 主题文件，换 <link> 即可全局换肤
│ ├─ 布局系统 → 31 种单页布局（cover/bullets/chart/arch-diagram 等）
│ ├─ 模板系统 → 15 套完整 PPT 模板（知识图谱/小红书/cyberpunk 等）
│ ├─ 动画系统 → 27 种 CSS 动画 + 20 种 Canvas FX（粒子/烟火/矩阵雨等）
│ ├─ Presenter Mode → 按 S 键弹出独立演讲窗口，4 张磁力卡（当前页/下一页/演讲稿/计时器）
│ └─ PNG 渲染 → 用 headless Chrome 把 HTML 导出为图片
│
├─ 输出层：最终产出什么？
│ ├─ 一个 .html 文件（纯静态，可浏览器直接打开）
│ ├─ PNG 格式的幻灯片截图
│ ├─ Presenter window（演讲者视角的独立窗口）
│ └─ Speaker script（逐字稿，每页 150-300 词）
│
└─ 卡点层：新手最容易在哪里卡住？
├─ 多个主题同时预览会 CSS 冲突 → 用 iframe 隔离每个 slide 解决
├─ Canvas FX 初始化时机 → 靠 data-fx 属性在 slide enter 时自动触发
└─ 演讲稿写法不规范 → 项目要求 150-300 词/页，按 prompt signal 而非朗读线写
---
> 「怎么升级」 三段位路线图
| 段位 | 掌握目标 | 关键动作 |
|------|----------|----------|
| 入门段（能用） | 让 AI 帮我生成一套 PPT | 对 AI 说"做一份 8 页技术分享，用 cyberpunk 主题" |
| 进阶段（用好） | 手动搭配主题/布局/动画 | 打开 templates/theme-showcase.html 挑主题 → templates/layout-showcase.html 挑布局 → 拼成完整 deck |
| 高手段（用活） | 二次开发 / 创建自己的模板 | 看 assets/base.css 的设计 token 系统 → 在 templates/full-decks/<name>/ 基础上改 |
---
> 「能用在哪」 场景迁移建议
1. 迁移到 AI 视频脚本生成 - 变量：PPT 的每一页可以当成视频"分镜"，动画效果可映射到视频转场 - 注意：需要把 HTML 动画逻辑转成视频编辑器的关键帧
2. 迁移到静态网站 landing page 生成 - 变量：HTML/CSS 设计系统 + 主题 token + 动画，直接可以做单页网站 - 注意：PPT 是全屏 slide 模式，网站是滚动长页，需要调整布局
3. 如果部署了这个项目，好处是： - AI Agent 可以直接生成专业 PPT，不需要手动排版 - 纯静态 HTML，分发和托管零成本 - 中文 + 英文双语优先，有 Noto Sans SC 字体
4. 风险和注意事项： - ⚠️ 和我们现有的 pptx-generator 技能重叠：两个都是 PPT 生成工具，html-ppt-skill 是纯 HTML 输出，pptx-generator 生成 .pptx 文件 - ⚠️ PNG 渲染依赖 headless Chrome：生产环境需要装 Chrome - ⚠️ 不是 PowerPoint：输出是 HTML 文件，甲方要 .pptx 的场景不适用
---
🔍 特别观察
数据速览：4884 stars，1.5 个月，468 forks（fork/star ≈ 0.096，正常）
这是一个工具型 skill，有几个亮点：
1. AgentSkill 原生设计：安装命令是 npx skills add，专门给 AI Agent 调用的 skill，不是给人直接当工具用的
2. 主题系统设计得好：36 个主题都是纯 CSS token 文件，换皮肤只需要换一行 <link>，这个设计值得学习
3. Presenter Mode 有巧思：用 BroadcastChannel 做双窗口同步，用 ?preview=N query param 让 iframe 渲染单页——像素级一致的预览
4. 和我们现有技能的关系：
- pptx-generator → 生成 .pptx 文件（甲方汇报、正式场合）
- html-ppt-skill → 生成 .html 演示文稿（技术分享、AI Agent 输出）
---
一句话总结
> html-ppt-skill 的灵魂是"让 AI Agent 也能生成专业级 HTML 演示文稿"，本质是一套设计系统和动画资产的集合——对 AI Agent 有用，对需要 .pptx 文件的场景不适合。
GitHub：lewislulu/html-ppt-skill
Stars：4884 | Forks：468（1.5个月）
安装命令：npx skills add https://github.com/lewislulu/html-ppt-skill
技术栈：纯 HTML/CSS/JS（零构建）+ Canvas FX + CSS Animations
主题：36个 | 布局：31种 | 动画：47种 | 完整模板：15套