html-ppt-skill – 开源 AI PPT 生成 Skill，支持 HTML 文件

1. html-ppt-skill 是什么

html-ppt-skill 是一款基于 HTML 的开源 AI 演示文稿生成工具，通过自然语言指令即可生成浏览器原生支持的 HTML 文件。它内置 36 套主题、31 种布局、47 个动效和 15 套完整模板，遵循 AgentSkill 协议，可在 Claude Code、Cursor、OpenClaw 等多个 Agent 框架中通用。该工具的核心创新在于用纯文本的 HTML 格式替代传统 PPTX，从根本上解决了排版错位、字体丢失等长期困扰演示文稿制作的痛点。

技术定位与领域： 属于 AI 辅助演示文稿生成领域，采用 HTML 输出格式，区别于传统 PPTX 和 PDF 路线。其独特定位在于“预制组件 + AI 组合”的架构，将设计师精心打磨的视觉元素与 LLM 的组合能力相结合，避免 AI 从零创造导致的审美失控问题。该工具面向开发者、技术布道者和内容创作者，提供可编程、可版本控制、跨平台通用的演示文稿解决方案。

研发背景： 由开发者 lewislulu 在 GitHub 上开源发布，项目上线 20 天内获得 3600+ Star，反映出社区对 HTML 格式演示工具的高度认可。研发动机源于传统 PPTX 格式在 AI 生成场景中的固有缺陷——二进制格式对 LLM 不友好，生成结果往往存在排版错位、字体缺失、动画失效等问题。html-ppt-skill 的诞生标志着演示文稿生成从“模拟 PPTX”向“原生 HTML”的技术路线转变。

核心价值： 解决了三个关键痛点：一是 AI 生成的 PPTX 文件质量不可控，排版经常崩坏；二是跨平台投屏时字体和样式不一致；三是传统演示工具缺乏版本控制能力，难以纳入 CI/CD 流程。通过纯 HTML 输出，该工具实现了零依赖、双击即开、像素级精确渲染，同时支持键盘翻页、实时主题切换和演讲者模式等专业功能。

技术特点： 采用“约束良好的预制件 + AI 组合”架构，人提供主题、布局、动效等设计元素，AI 负责根据需求进行组合编排，兼顾了设计质量和生成灵活性。支持 47 个动效（含 27 个 CSS 动画和 20 个 Canvas FX 电影级特效），视觉效果远超传统 PPT 动画。遵循 agentskills.io 开放标准，一次安装可在多个 Agent 框架中使用，实现了能力资产的跨平台迁移。

2. 主要功能

• 36 套主题系统： 覆盖极简学术、赛博朋克、小红书柔和风、东京之夜、终端绿等多种视觉风格，演示时按 T 键即可实时切换，无需重新生成。每套主题均经过精心调色，确保文字可读性和视觉一致性，满足从技术分享到社交媒体的多样化场景需求。

• 31 种专业布局： 包含封面、目录、代码展示、时间线、架构图、流程图等常见演示结构，每种布局都附带真实示例数据，AI 可直接填充内容。布局设计遵循信息层级原则，确保复杂内容（如系统架构）能够清晰呈现，避免传统 PPT 中常见的“信息拥挤”问题。

• 47 个动效引擎： 集成 27 个 CSS 动画（如淡入、滑动、缩放）和 20 个 Canvas FX 特效（粒子爆发、神经网络脉冲、星空轨迹等）。Canvas FX 采用手写 WebGL 模块实现，性能优化至 60fps 流畅运行，提供电影级的视觉冲击力，远超传统 PPT 动画的表现力。

• 15 套完整模板： 提炼自真实项目案例，涵盖 tech-sharing（技术分享）、pitch-deck（融资路演）、xhs-post（小红书图文）、presenter-mode-reveal（演讲者模式）等场景。模板包含完整的页面结构和示例内容，AI 只需替换核心信息即可快速生成专业演示文稿。

• 演讲者模式： 按 S 键弹出独立窗口，包含当前页/下一页预览、逐字稿、计时器功能。采用 iframe + BroadcastChannel 技术实现像素级精确同步，预览画面与观众画面共用同一份 HTML + CSS，彻底消除投屏时字体、间距、颜色不一致的问题。

• 跨平台 Skill 协议： 遵循 agentskills.io 开放标准，一行命令即可安装在 Claude Code、OpenClaw、Hermes Agent、Cursor/Codex 等多个 Agent 框架中。这种标准化设计使得用户的能力资产可以跨平台迁移，不绑定单一生态，具备长期使用价值。

3. 应用场景

• 技术分享与开发者演示： 调用 tech-sharing 模板，配合 tokyo-night、terminal-green 等暗色主题，快速生成含架构图和代码示例的幻灯片。适合技术沙龙、内部培训、开源项目介绍等场景，支持键盘翻页和实时主题切换，演示体验流畅。

• 融资路演与产品 Pitch： 使用 pitch-deck-vc 模板，一键产出 YC 风格的商业计划书，支持数据图表和团队介绍布局。配合 corporate-clean 主题，可生成专业感强的商业演示，适合初创公司向投资人展示产品价值。

• 小红书与社交媒体图文： 通过 xhs-post 模板生成 3:4 竖版内容，配合 soft-pastel、xiaohongshu-white 主题，直接适配社交平台比例。适合品牌营销、产品种草、知识分享等场景，支持 Canvas FX 动效增强视觉吸引力。

• 学术汇报与论文展示： 采用 minimal-white、editorial-serif、academic-paper 主题，风格严谨克制，适合期刊答辩、学术会议和毕业答辩。支持代码展示和时间线布局，方便呈现研究过程和实验数据。

• 企业商务与新闻播报： corporate-clean、news-broadcast 主题满足经营分析、销售复盘、项目月报等正式汇报场景。配合演讲者模式的逐字稿和计时器功能，可提升汇报的专业性和节奏控制力。

4. 如何使用

1. 环境要求： 需要安装 Node.js 18+ 版本和 npm 包管理器。操作系统支持 Windows、macOS 和 Linux 全平台。建议使用现代浏览器（Chrome 110+、Edge 110+、Firefox 120+）以获得最佳 Canvas FX 性能。

2. 安装 Skill： 在终端中执行以下命令将 html-ppt-skill 添加到 Agent：

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

   该命令会自动下载 Skill 定义文件并配置到当前 Agent 环境中，整个过程约需 10-30 秒。

3. 自然语言触发： 在 Agent 中输入需求描述，例如“做一份 10 页微服务架构分享，暗色主题，含架构图和代码示例”。Agent 会根据 SKILL.md 中的规则约束，从 36 套主题、31 种布局和 47 个动效中组合生成 HTML 文件。建议在需求中明确页数、主题风格和核心内容。

4. 浏览器打开与演示： 生成完成后，双击 HTML 文件即可在浏览器中打开，使用键盘方向键或空格键进行翻页。按 T 键可在 36 套主题间实时切换，无需重新生成。按 S 键弹出演讲者模式窗口，方便在投屏场景中使用。

5. 手动创建（可选）： 对于需要定制化开发的高级用户，可以直接 git clone 仓库，运行 ./scripts/new-deck.sh my-talk 命令生成基础文件结构，然后手动编辑 HTML 和 CSS 文件。这种方式适合有前端开发经验的用户进行深度定制。

最佳实践： 建议在生成前明确页数（推荐 5-15 页）和主题风格，避免 AI 过度生成。对于复杂架构图，可在需求中指定使用“架构图”布局。演示前建议在目标设备上测试 Canvas FX 性能，必要时按 B 键切换到低性能静态模式。

5. 优缺点分析

6. 同类工具对比

选型建议：

对于追求 AI 原生生成体验的用户，html-ppt-skill 和 guizang-ppt-skill 是最佳选择。两者都采用 HTML 输出格式，但 html-ppt-skill 在主题数量（36 套 vs 2 套）、动效能力（47 个 vs WebGL 背景）和跨平台兼容性（遵循 AgentSkill 协议）上具有明显优势。如果用户更看重内容生成的严谨性和自检机制，guizang-ppt-skill 的 checklist.md 自检流程更具吸引力。

对于偏好手动编辑和版本控制的开发者，Marp 和 Slidev 是成熟的选择。Marp 支持 Markdown 直接转换为多种格式，适合快速生成技术文档型演示。Slidev 基于 Vue 生态，支持自定义组件和动画，适合需要高度定制化的场景。但这两者缺乏原生 AI 集成，需要用户自行编写内容或使用外部 AI 工具辅助。

7. 编辑点评

html-ppt-skill 在 AI 演示文稿生成领域展现了显著的技术创新。其核心突破在于用 HTML 格式替代传统 PPTX，这一选择不仅解决了 LLM 生成二进制文件的质量不可控问题，更带来了版本控制、跨平台兼容和像素级渲染等额外价值。从技术架构看，“预制组件 + AI 组合”的设计理念体现了对 AI 能力边界的清醒认知——不试图让 LLM 从零创造视觉设计，而是提供经过人工打磨的设计元素库，让 AI 专注于组合编排，这种“人机协作”的思路值得借鉴。

在实用价值方面，该工具特别适合技术团队和开发者使用。HTML 文件天然支持 Git 版本控制，可以纳入 CI/CD 流程，实现演示文稿的自动化构建和部署。演讲者模式的像素级同步功能解决了投屏场景中的长期痛点，对于频繁进行技术分享的开发者来说具有实际价值。36 套主题和 31 种布局的覆盖面足够广，从技术分享到社交媒体图文都能找到合适的视觉风格。

适用人群定位明确：主要面向开发者、技术布道者、产品经理和内容创作者。对于非技术用户，命令行安装和 Agent 使用方式可能有一定学习成本，但一旦掌握，生成效率远超传统 PPT 制作方式。建议团队中至少有一人熟悉 Agent 操作，其他人可通过自然语言指令直接使用。

未来发展潜力巨大。随着 Agent 生态的成熟和 LLM 能力的提升，html-ppt-skill 这类遵循开放标准的能力组件将获得更广泛的应用。如果未来能支持 AI 自动生成配图、信息图和图表，其竞争力将进一步增强。此外，引入社区贡献的主题和布局机制，可以快速扩展视觉资源库。

8. 常见问题 FAQ

Q：html-ppt-skill 是否需要编程基础才能使用？
A：基本使用不需要编程基础，只需执行一行安装命令，然后在 Agent 中输入自然语言需求即可。但如果需要自定义主题、布局或动效，则需要 HTML/CSS/JavaScript 前端开发经验。

Q：生成的 HTML 文件能否导出为 PPTX 或 PDF 格式？
A：目前仅支持 HTML 格式输出。如果需要 PPTX 或 PDF，可以使用浏览器自带的打印功能（Ctrl+P）保存为 PDF，或使用第三方工具将 HTML 转换为 PPTX。未来版本可能会考虑增加导出功能。

Q：如何自定义主题？
A：主题文件位于 themes/ 目录下，每个主题是一个独立的 CSS 文件。用户可以复制现有主题进行修改，或从头创建新主题。修改后需要更新 SKILL.md 中的主题列表，AI 才能识别新主题。

Q：是否支持中文内容？
A：完全支持中文内容。所有主题和布局对中文排版进行了优化，包括字体选择、行高、字间距等。Canvas FX 特效与语言无关，中文内容同样支持。

Q：在哪些 Agent 框架中可以使用？
A：遵循 AgentSkill 协议，目前支持 Claude Code、OpenClaw、Hermes Agent、Cursor/Codex。理论上任何实现了 AgentSkill 协议的框架都可以使用。建议查看 agentskills.io 获取最新兼容列表。

Q：如何贡献新的主题或布局？
A：可以参考现有主题和布局的代码风格，在对应目录下创建新文件，并在 SKILL.md 中注册。建议先通过 Issue 与项目维护者沟通，避免重复工作。贡献者需要具备前端开发基础。

9. 项目地址

• GitHub 仓库： https://github.com/lewislulu/html-ppt-skill
• AgentSkill 协议规范： https://agentskills.io