html-ppt-skill：给 AI agent 装上 PPT 技能包，一句话生成专业 HTML 幻灯片

一句话出 slides

html-ppt-skill 是一个 AgentSkill——可以直接装进 AI 编程 agent 的 PPT 制作能力模块。

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

装好之后，你对 agent 说“做一份 8 页的技术分享，用 cyberpunk 主题”，agent 就能直接产出一份完整的 HTML 演示文稿——浏览器打开，键盘翻页，效果跟手动调过的差不多。

支持 Claude Code、Codex、Cursor、OpenClaw 等任何兼容 AgentSkill 协议的 agent。

这个项目没有图形编辑器，没有拖拽面板，也不导出 .pptx。产出的就是纯静态 HTML/CSS/JS。但“专业感”来自模板体系的密度：36 套主题、31 种页面布局、27 个 CSS 动画 + 20 个 Canvas FX，再加 15 套完整 deck 模板和演讲者模式。

初看似乎只是一个模板集合 demo，翻完源码才发现设计系统做得相当扎实。

CSS Token 驱动的换肤

架构核心是 token 化。所有颜色、圆角、阴影、字体都定义在 assets/base.css 的 CSS 变量里。每个主题是一份独立 CSS 文件，只覆盖这些变量：

/* tokyo-night 主题，只有 14 行 */
:root{
  --bg:#1a1b26;--surface:#24283b;
  --text-1:#c0caf5;--accent:#7aa2f7;
  --grad:linear-gradient(135deg,#7aa2f7,#bb9af7 55%,#f7768e);
}

换主题就是换一行 <link>，或按 T 键在预设列表里循环，所有 slide 同步更新。

SKILL.md 里有一条硬规则：slide 内容写 var(--text-1) 而非 #111。这让主题切换不会出现颜色残留。

36 套主题覆盖面很广——minimal-white、corporate-clean 是正式风，cyberpunk-neon、vaporwave 走暗黑，xiaohongshu-white 直接为小红书图文做了适配。中文字体（Noto Sans SC / Noto Serif SC）也预装了。

31 布局 + 15 套完整 deck

31 种单页布局各是一个独立 HTML 文件，带真实示例数据。cover、toc、bullets、two-column、code、flow-diagram、timeline、gantt、chart-bar、arch-diagram、mindmap——常见类型基本覆盖了。

做 deck 时从布局文件复制 <section class="slide"> 块，替换内容即可。SKILL.md 里甚至写了一条规则：不要发明新布局，优先组合现有的。这种约束对 AI agent 生成内容特别有用，能避免出现各类奇怪的发散设计。

15 套完整 deck 模板分两类。8 套从真实作品提炼视觉风格：

• graphify-dark-graph — 暗底 + 力导向知识图谱
• knowledge-arch-blueprint — 蓝图架构图风
• hermes-cyber-terminal — 终端 cyberpunk 风
• xhs-white-editorial — 小红书白底杂志风
• xhs-pastel-card — 柔和马卡龙图文

7 套场景脚手架：pitch-deck、product-launch、tech-sharing、weekly-report、xhs-post（9 页 3:4 竖版）、course-module。

每个模板用 scoped .tpl-<name> CSS 命名空间，多模板同时加载不污染。这个细节说明作者确实考虑过“同时展示多个模板”的真实场景，不是纯 demo 思维。

动效：从 CSS 到 Canvas

动画分两层。CSS 层是 27 个命名入场动画，通过 data-anim="fade-up" 声明式使用。包括方向性淡入、zoom-pop、glitch-in、typewriter、neon-glow、stagger-list（列表错开入场）、counter-up（数字滚动）等。

Canvas FX 层更重：20 个手写的 canvas 模块，通过 <div data-fx="knowledge-graph"> 触发。包括 particle-burst（粒子爆发）、matrix-rain（代码雨）、knowledge-graph（力导向图谱）、neural-net（神经网络脉冲）、firework（烟花）、confetti-cannon（彩带）等。

这些 FX 由 fx-runtime.js 管理——它用 MutationObserver 监听 slide 的 is-active class 变化，进入时自动初始化 canvas 动画，离开时调用 stop() 清理。完全不需要手动管理生命周期。

FX 模块通过 _util.js 的 U.accent() 直接读当前主题的 CSS 变量取色。换主题后粒子颜色、图谱节点颜色自动跟随，不需要每个主题单独配置参数。这个巧妙设计藏在 60 行的 _util.js 里，很容易忽略。

演讲者模式：零闪烁同步

按 S 键弹出独立演讲者窗口，4 个可拖拽、可调整大小的卡片：

• CURRENT — 当前页的像素级预览
• NEXT — 下一页预览
• SPEAKER SCRIPT — 逐字稿
• TIMER — 计时器 + 翻页控制

为什么预览是像素级一致的

每个预览卡片是一个 <iframe>，加载的是同一份 deck HTML 文件，只是 URL 带了 ?preview=N 参数。runtime.js 检测到这个参数后进入“预览模式”——只渲染第 N 页，隐藏所有 chrome（进度条、页码等）。

这意味着预览使用的和观众视图完全相同的 CSS、主题、字体和 viewport。颜色、排版、字号 100% 一致，不存在“截图式预览”的色差或缩放失真。

翻页时，演讲者窗口通过 postMessage({type:'preview-goto', idx:N}) 通知 iframe，iframe 只是切换 .is-active class——不重新加载、不白屏、不闪烁。两个窗口还通过 BroadcastChannel 双向同步翻页和主题切换。

卡片位置和大小会保存到 localStorage，下次打开自动恢复。

该注意什么

几个实际会用到的边界：

没有在线编辑器。 目前 issue #6 里用户反馈最多的就是这个。流程是 agent 生成 → 浏览器预览 → 不满意就重新描述。没有可视化微调的手段。

不导出 .pptx。 issue #4 有人提。目前只能 headless Chrome 截图导出 PNG，正式场合需要交 .pptx 文件就不太适用。

Canvas FX 没有性能分级。 20 个 FX 全部以 requestAnimationFrame 满帧跑，力导向图谱这类计算密集型 FX 在手机上的表现有待验证。

演讲者模式依赖弹出窗口。 S 键会 window.open() 一个新窗口，浏览器如果拦截弹窗就没法用。

不过，零构建这个特点，在“AI agent 生成内容”的场景下其实是加分项——agent 不需要跑任何构建工具，直接写 HTML 就完事。在前端工程化日趋复杂的今天，这种回到原点的轻量化思路反而更贴合 agent 的工作流。

如果你在用 Claude Code、Cursor 或 Codex，经常做技术分享、周报、产品 pitch 或小红书图文，值得装来试试。一行命令，不满意卸掉就是。

---

云栈社区也在持续关注这类将 前端工程化与 AI agent 能力融合 的实践，如果你有类似的项目拆解或经验，欢迎一起来交流。