🔥 html-ppt-skill：36主题×31布局×47动画，AI Agent一键生成专业HTML演示文稿
一个世界级的 AgentSkill，让 AI 直接生成可直接播放、可交互、带提词器的 HTML 幻灯片。上线两周斩获 5.3k Stars，MIT 免费开源。
还在用传统 PPT 软件一页一页排版？html-ppt-skill 彻底改变了这个游戏规则。
它是一套专为 AI Agent 设计的 HTML 演示文稿引擎，包含 36 个可换肤主题、31 种页面布局、47 种动画效果，以及一个真正的演示者模式（提词器 + 双屏预览 + 计时器）。更重要的是——全部使用纯静态 HTML/CSS/JS，零构建，AI 说一句"帮我做个技术分享 PPT"，它就能直接给你生成一个完整的可播放网页。
作者 Lewis 在 GitHub 上开源了这个项目（MIT 协议），上线仅两周就收割了 5.3k Stars，社区评价极高。
核心定位：让 AI Agent 像写网页一样做 PPT，36 套主题一键换肤，零构建纯静态，专业级演示体验。
✨ 核心功能一览
🛠️ 快速上手：5 分钟跑通示例
安装
最简单的安装方式（需要 Node.js）：
# 一键添加 skillnpx skills add https://github.com/lewislulu/html-ppt-skill# 或直接 git clonegit clone https://github.com/lewislulu/html-ppt-skill.gitcd html-ppt-skill# 从基础模板创建新演示./scripts/new-deck.sh my-talk# 在浏览器中打开open my-talk/index.html
预览所有主题和布局
# 浏览 36 个主题open templates/theme-showcase.html# 浏览 31 种布局open templates/layout-showcase.html# 浏览 47 种动画open templates/animation-showcase.html# 浏览 15 个完整演示模板open templates/full-decks-index.html
核心代码示例
一个最基本的 HTML 幻灯片只需要几行：
<!DOCTYPE html><html><head> <!-- 选择主题：36套任选 --> <link rel="stylesheet" href="assets/themes/cyberpunk-neon.css"> <script src="assets/runtime.js"></script></head><body> <section class="slide cover" data-anim="glitch-in"> <h1>Hello World</h1> <p class="subtitle">一行 link 换主题</p> </section> <section class="slide two-column" data-anim="rise-in"> <div class="col"> <h2>左栏</h2> <p>内容区域</p> </div> <div class="col"> <h2>右栏</h2> <p>内容区域</p> </div> </section></body></html>
注意：每张幻灯片只需 <section class="slide 布局名" data-anim="动画名">，配合 <link> 切换主题，完全不用写 CSS。
演示者模式
在任意打开的演示文稿中按 S 键，即可弹出演示者窗口，包含 4 个可拖拽磁吸卡片：
键盘快捷键一览：← → 翻页、F 全屏、O 概览网格、T 循环换主题、N 快速笔记。
📊 与竞品对比
💡 适用场景
场景 1：AI Agent 一键生成技术分享 PPT
告诉 AI "做一份 8 页的技术分享 slides，用 cyberpunk 主题"，它就能直接输出完整的 HTML 演示文稿，含大纲、代码高亮、动画效果。
功能说明：Agent 通过 SKILL.md 协议理解 html-ppt-skill 的模板系统，自动选择最合适的主题和布局组合。 输入要求：只需文字描述演讲主题和页数 输出效果：完整可播放的 HTML 文件，S 键打开演示者模式即可开讲 适用场景：技术分享会、周报汇报、产品路演
场景 2：小红书图文创作
内置的 xhs-post 和 xhs-white-editorial 模板，专为小红书内容设计，9 页 3:4 竖版比例，柔和风格。
功能说明：直接把文案转化为小红书图文，自带白底杂志风或柔和马卡龙风。 输入要求：文案内容 + 想要的风格描述 输出效果：可直接截图的竖版图文 适用场景：小红书内容创作、社交媒体运营
场景 3：商业路演/产品发布
内置 pitch-deck 和 product-launch 两个商业模板，配合演示者模式的逐字稿功能，让演讲者自信满满。
功能说明：商业模板自动生成投资路演标准结构（问题→方案→市场→竞争→团队→融资）。 输入要求：商业计划书概要 输出效果：专业风商业路演 PPT，每页含逐字稿 适用场景：投资人路演、产品发布会、创业比赛
用户群体总结
- • ✅ AI Agent 用户：一句话生成专业演示文稿，效率提升 10 倍
- • ✅ 开发者/技术团队：技术分享、周报、项目答辩，零构建纯静态
- • ✅ 内容创作者：小红书图文、知识分享，5 分钟产出专业内容
- • ✅ 创业者：商业路演演示，7 个场景化模板直接使用
- • ❌ 零代码用户：需要基础的 HTML 概念（标签、class）才能自定义
💰 定价方案
完全免费开源！
- • 开源协议： MIT License — 可自由使用、修改、商用
- • 不需要注册，不需要 API Key，本地运行零成本
- • 配合 AI Agent（Claude/ChatGPT/Gemini）使用才需对应平台的 API 费用
GitHub 仓库：lewislulu/html-ppt-skill
💡 新用户福利：完全免费，开箱即用，不需要任何订阅费用！
🎯 总结
html-ppt-skill 不仅仅是一个 PPT 工具——它是一套完整的 HTML 演示文稿设计系统。36 个主题 + 31 种布局 + 47 种动画的体量，让它成为开源社区中功能最丰富的 HTML 幻灯片引擎。而演示者模式的加入，更是让它在实用性上碾压了大部分商业工具。
最酷的是，它是原生为 AI Agent 设计的，你只需要告诉 AI 想要的风格和内容，它就能自动完成从选主题、排版、加动画到生成完整文件的全部工作。MIT 协议完全免费，没有任何隐藏收费。
推荐指数： ⭐⭐⭐⭐⭐（满分5星）
适合人群： AI Agent 用户、开发者、技术团队、内容创作者、创业者
立即体验：GitHub 仓库
安装命令：
npx skills add https://github.com/lewislulu/html-ppt-skill
数据截至 2026-06-02，最新信息请以 GitHub 为准。
