"职场上有一件事，几乎所有打工人都逃不掉——做 PPT。"
周报要 PPT，项目汇报要 PPT，季度复盘要 PPT，给客户提案还是要 PPT。折磨人的不是写内容，而是排版——对齐、字号、配色、间距，调完这页调下页，一个周五下午开始的 PPT，周日晚上还在微调标题的圆角大小 。
今天给大家介绍一个GitHub 上爆火的神级 Skill——html-ppt-skill，它让 AI 直接帮你生成专业级 HTML 演示文稿，彻底告别手动排版的痛苦。
一、html-ppt-skill 是什么？
html-ppt-skill是一个专为Claude Code / Cursor / Codex等 AI Agent 设计的AgentSkill，它让 AI 能够直接生成基于纯静态 HTML 的专业演示文稿。🔥 为什么"爆火"？
🎯 核心定位
它不是传统 PPT 软件的替代品，而是AI 时代的"幻灯片内容协议"——从"排版工具"进化为"内容协议"，让 Agent 不再只是给你文字大纲，而是直接交付一套包含专业视觉、丝滑动画、甚至带逐字稿的完整演示文稿。
二、强大功能一览
🎨 1. 36 套主题，一键换肤
清淡系、暗色系、赛博朋克系、职业商务系等多种风格
通过 CSS 变量驱动，切换主题只需按T键
📐 2. 31 种布局组件，像搭积木一样拼页面
封面页、目录页、KPI 网格、架构图、终端窗口
时间线、对比页、团队介绍、Q&A 页等
✨ 3. 47 种动效，电影级视觉冲击
27 种 CSS 入场动画：淡入上浮、缩放弹出、打字机效果等
20 种 Canvas 特效：粒子爆发、代码雨、神经网络、知识图谱等
按需加载，幻灯片切入时初始化，切出时销毁，性能优化到位
📑 4. 15 套完整模板
从封面到结尾页的完整结构，开箱即用，覆盖技术分享、产品发布、投资人路演等真实场景🖥️ 5. 专业演讲者模式
当前页与下一页的像素级 iframe 预览
大字号逐字稿显示
计时器功能
适合公开演讲场景
三、安装与使用方法
🚀 步骤 1：一行命令安装
npx skills add https://github.com/lewislulu/html-ppt-skill
💡 无需 build，没有 node_modules 黑洞，没有 npm install 半天转圈圈。纯静态 HTML + CSS + JS，字体走 CDN。
终端中执行 npx skills add 命令，显示安装成功的界面
预期画面：命令行显示 "Skill registered successfully" 或类似成功提示
📝 步骤 2：对 AI 说人话，生成 PPT
安装完成后，在 Claude Code 中直接说：做一份 8 页的技术分享 slides，用 cyberpunk 主题，包含封面、目录、架构图、时间线和总结页。
把这段 outline 变成投资人 pitch deck
Claude Code 对话界面，用户输入需求，AI 正在生成 HTML 代码的过程。终端显示 AI 分析需求、选择主题、生成各页 HTML 结构的日志
🌐 步骤 3：浏览器打开，即刻演示
浏览器中打开的 HTML PPT，展示 cyberpunk 主题的封面页，带有霓虹灯效果和粒子动画。深色背景、霓虹文字、Canvas 粒子特效，底部显示页码导航
🎨 步骤 4：实时切换主题
演示过程中随时按T键，即可在 36 套主题间实时切换，找到最适合当前场景的风格。同一页内容在不同主题下的对比展示（如清淡系 vs 暗色系 vs 赛博朋克系。预期画面：三张并排截图，展示同一页架构图在不同主题下的视觉效果差异
四、进阶玩法
📤 导出 PDF
用浏览器打印功能，选择"另存为 PDF"，每页一张 A4：或者批量导出 PNG（需无头 Chrome）
./scripts/render.sh 你的PPT文件.html
🔄 迭代修改
第 3 页的字号调大点，第 5 页换成 timeline 布局
AI 会基于具体页码修改，流程比传统 PPT 更"文本优先"，但也更适合被 Git 管理、被 Agent 修改、被自动化复制。
五、用户反馈与评价
💬 开发者真实评价
"做 PPT 这件事真正折磨人的不是写内容——内容你有想法就能写。折磨人的是排版。然后我记起前两天装的一个 skill... 打开生成的 HTML，双击，浏览器里直接出 slides。按 ← → 翻页，按 F 全屏。嗯，就那么丝滑。"
—— 纸枫林，技术博主，使用 2 个月后的真实感受
"最直观的感受是——做 PPT 这件事，终于不需要在'好看'和'快'之间选了。"
—— 同上
"html-ppt-skill 的出现，标志着幻灯片创作从'排版工具'向'内容协议'的进化。在未来，Agent 不再只是给你一段文字大纲，它将通过调用 html-ppt-skill，直接交付一套包含专业视觉、丝滑动画、甚至带有逐字稿的完整演示文稿。"
—— CSDN 技术博主，Agent 时代深度解析
"AI 做 slides 的关键不是模板多，而是版式纪律。这个 skill 的定位很清楚：不是替代 PowerPoint，而是给 Agent 一个稳定生成 HTML 演示文稿的工作台。"
—— jun.ee 技术评论
📊 社区热度数据
六、适用人群与场景
✅ 特别适合
频繁用 Claude 生成内容，还要手动排版成 PPT 的用户
技术分享、教学、公开演讲较多的讲师和开发者
需要批量生成小红书图文或社交媒体图片的创作者
对设计有要求但不想花几小时调细节的职场人士
❌ 不太适合
需要大段表格数据的培训课件
必须输出.pptx格式的公司流程（可导出 PDF 替代）
多人协作编辑场景（当前为静态 HTML）
七、同类工具对比
| | | | |
|---|
| Gamma | | | | |
| Beautiful.ai | | | | |
| Canva | | | | |
| html-ppt-skill | | | | 高 |
"更多用户面对的定制选项，反而持续产出更低质量的编辑输出。html-ppt-skill 的锁定主题集是唯一能在首次生成时就达到出版级质量的配置。"
—— R2ClickThrough 深度评测
八、总结
html-ppt-skill代表了AI 原生 PPT 生成的新范式：🎯对 AI 说人话，不用学复杂软件
⚡一行命令安装，零配置零依赖
🎨36 主题 + 31 布局 + 47 动效，专业级输出
🖥️纯 HTML 文件，双击即开，跨平台兼容
🎤演讲者模式，带逐字稿和计时器
对于习惯了高效工作、不想在排版上浪费时间的开发者来说，这是一个低投入、高回报的生产力工具。
📌 相关链接
🐙 GitHub：github.com/lewislulu/html-ppt-skill
🌐 主题展示：templates/theme-showcase.html（36 套主题预览）
📑 模板浏览：templates/full-decks-index.html（15 套完整模板）
"Agent 不再只是给你一段文字大纲，它直接交付一套完整的演示文稿。"
