开源项目地址：html-ppt-skill
在 AI Agent 浪潮下，我们对内容产出的需求已经从"手动创作"转向了"自动化生成"。然而，传统的 .pptx 格式因其封闭的二进制结构，一直是自动化工作流中的一块硬骨头。
今天，我们要深度拆解的开源项目 html-ppt-skill，正是为了解决这一痛点而生。它不仅是一个 PPT 工具，更是一套为 Agent 量身定制的视觉表达标准。
一、 核心架构：Zero Build 的力量
大多数现代 Web 项目都依赖复杂的构建工具（Vite, Webpack），但这对于需要实时生成、即时交付的 Agent 来说是沉重的负担。
html-ppt-skill 采用了 Zero Build (零构建) 架构：
- 纯静态驱动: 整个项目基于标准的 HTML5, CSS3 和原生 JavaScript。
- 模块化资源 : 通过 ES Modules 引入动画特效，通过标准
<link>切换主题。 - 无缝集成: Agent 只需生成一段符合结构的 HTML 代码，引用项目托管的静态资源，即可产出专业级幻灯片。
二、 Token 驱动：设计系统的降维打击
为什么这个项目能提供 36 套风格迥异的主题（从 Cyberpunk 到极简学术风），却依然保持极高的代码整洁度？
答案在于其 Token 驱动的设计系统 。在 assets/base.css 中，作者定义了一套严谨的 CSS 变量（Tokens）：
--color-primary,--bg-color--font-family-heading,--font-size-base--spacing-unit,--border-radius-lg
所有的布局组件（Layouts）都仅依赖 these Token。这意味着，当你切换到 cyberpunk-neon.css 时，你只是重写了一组变量值，而底层的排版逻辑、间距比例依然保持完美的视觉节奏。
三、 硬核技术：演讲者模式的底层实现
最令人惊艳的是其"演讲者模式"。在纯静态环境下，它是如何实现多窗口同步的？
- BroadcastChannel: 利用该 API 在同源的多个窗口（观众页与演讲者页）之间建立实时通讯隧道。
- 磁贴式 UI: 演讲者窗口使用了类似 IDE 的磁贴布局，将当前页、下一页预览、计时器和逐字稿（Speaker Script）高度集成。
- 像素级 Iframe 预览 : 预览窗内嵌入了
<iframe>，通过 URL 参数?preview=N触发运行时的"静默模式"，只渲染幻灯片内容，不加载任何交互层，确保演讲者看到的与观众完全一致。
四、 性能怪兽：Canvas FX 动画引擎
为了追求极致的视觉冲击力，项目内置了 20 种 Canvas 特效。
- 按需加载 :
fx-runtime.js会在幻灯片切入时初始化 Canvas 实例，切出时立即销毁。 - 资源隔离 : 每个特效（如
matrix-rain,neural-net）都是独立的 JS 模块，不会互相干扰。
五、 未来展望：Agent 的视觉出口
html-ppt-skill 的出现，标志着幻灯片创作从"排版工具"向"内容协议"的进化。
在未来，Agent 不再只是给你一段文字大纲，它将通过调用 html-ppt-skill，直接交付一套包含专业视觉、丝滑动画、甚至带有逐字稿的完整演示文稿。
项目地址 : https://github.com/lewislulu/html-ppt-skill
作者 : lewis
许可: MIT