大家好，我是小智，专注 AI 工具、AI 智能体和编程提效
做 PPT 的痛点
做 PPT 这件事，大概率是绝大多数打工人的噩梦。对程序员来说尤其如此，平时写代码、查 Bug、跟产品经理对线已经够累了，结果一到季度总结、年终报告、晋升述职，还得乖乖坐下来排版。更离谱的是，代码写得好不好别人不一定看得懂，但 PPT 做得丑不丑，那可是一眼就能看出来（血泪教训）。
找模板、调格式、对齐文字、配图、改了又改……我以前也是这么干的，踩了无数坑才总结出来--与其在 PowerPoint 里拖拽，不如让 AI Agent 直接生成 HTML 演示文稿。
今天给大家介绍一款我最近用下来非常顺手的开源 Skill：html-ppt-skill（HTML PPT Studio）。别看这玩意儿不起眼，36 主题 + 47 动画 + 演示者模式，在 GitHub 上拿了 7.6k star，是一位叫 lewis 的开发者做的，MIT 协议完全免费。
html-ppt 封面与实时预览咱们言归正传，看看它到底能打在哪。
html-ppt是什么
html-ppt 是一个AgentSkill--装进 Claude Code、Codex 等 agent 里就能用的技能包。它生成的是纯静态 HTML 演示文稿，浏览器直接打开就能演示，不需要构建工具、不需要 npm install、不需要服务器。
核心卖点我总结了几条：
- •中英文一等支持：预导入 Noto Sans SC 字体，中文不翻车
- •设计师级默认样式：告别"Corporate PowerPoint 2006"那种陈旧观感
- •Token 驱动：改一个变量，整套 deck 优雅重排
简单来说，它把"做出有设计感的 PPT"这件事的门槛，拉到了"会打字就行"。
一行命令搞定
这是一个非常好用的工具，而且完全免费。安装就一行命令：
npx skills add https://github.com/lewislulu/html-ppt-skill
装完后，任何支持 AgentSkill 的 agent 都能用自然语言生成演示文稿。没有 npm install，没有构建步骤，clone 下来浏览器打开就能跑。
装好之后怎么用？直接对 agent 说人话就行：
做一份 8 页的技术分享 slides，用 cyberpunk 主题
做一个小红书图文，9 张，白底柔和风
就这么简单，agent 会自己搞定剩下的。
我测下来最惊喜的几点
🎤 演示者模式：现场演讲神器
这是我最惊喜的功能。在任意 deck 上按S键，弹出独立的演示者窗口，里面有四张可拖拽的磁吸卡片：当前幻灯片、下一页预览、演讲稿（逐字稿）、计时器。两个窗口通过 BroadcastChannel 同步。
演示者模式与 4 张磁吸卡片这里有个细节做得很好--预览是像素级精准的。每张预览卡片其实是一个 iframe，加载同一个 deck 并带?preview=N参数，渲染时只用同一套 CSS、主题、字体。意思是你在预览里看到什么，观众就看到什么，颜色布局保证一致，不会出现"预览挺好，全屏翻车"的尴尬。
切换页面时用 postMessage 通知 iframe 切.is-active，无刷新无闪烁，这点很贴心。
演讲稿还有三条黄金规则：标注提示信号而非照念的台词、每页 150-300 字（约 2-3 分钟）、口语化写作。项目自带presenter-mode-reveal模板，每页都配好了演讲稿，直接拿来用。
🎨 36 套主题：选择困难症的双刃剑
36 套主题，从极简白到赛博朋克霓虹都有。我挑几个有代表性的念一下：minimal-white、dracula、tokyo-night、nord、neo-brutalism、glassmorphism、bauhaus、swiss-grid、terminal-green、cyberpunk-neon、y2k-chrome、vaporwave、academic-paper、pitch-deck-vc……
36 套主题（展示其中 8 套）每套主题就是一个纯 CSS Token 文件，换一个<link>就能给整个 deck 换肤。可以在theme-showcase.html里浏览全部，每页在隔离 iframe 渲染，主题之间互不干扰。
说句直白的话，36 套主题是好事也是坏事--选择多，新手可能纠结半天。建议先从minimal-white、swiss-grid、tokyo-night这几套百搭的开始。
📑 15 套完整模板 + 31 种布局
15 套完整 deck 模板，8 套从真实项目提取 + 7 套通用场景：
15 套完整模板真实项目提取的包括小红书白底杂志风、暗底知识图谱、蓝图架构图风、终端 cyberpunk、紫色渐变卡、警示风、马卡龙图文、方向键极简。场景模板覆盖 pitch deck、产品发布、技术分享、周报、小红书图文、课程模块、演讲模板。
31 种单页布局更是良心：cover、toc、bullets、two-column、table、code、terminal、flow-diagram、timeline、roadmap、mindmap、comparison、gantt、chart-bar/line/pie/radar、arch-diagram、process-steps、cta、thanks……基本你能想到的页面类型都有。
31 种单页布局而且每个布局都带真实 demo 数据，拖进 deck 立刻看到渲染效果，不用自己填占位。
31 布局自动循环展示真实模板文件✨ 47 种动画：CSS + Canvas 双管齐下
47 种动画，分两路：27 种 CSS 轻量动画 + 20 种 Canvas 电影级特效。
47 种动画 - 27 CSS + 20 Canvas 特效CSS 动画包括方向淡入、rise-in、zoom-pop、blur-in、glitch-in、typewriter、neon-glow、card-flip-3d、cube-rotate-3d、page-turn-3d、kenburns 这些，够日常用。
Canvas FX 才是真炸裂的：particle-burst、confetti-cannon、firework、starfield、matrix-rain、knowledge-graph（力导向物理）、neural-net（信号脉冲）、galaxy-swirl、shockwave……每个都是手写 canvas 模块，通过fx-runtime.js在幻灯片进入时自动初始化。
没想到一个 PPT 工具能把动画做到这种程度，这就很离谱了。
进阶：键盘快捷键
背下来这几个快捷键，演示时效率翻倍：
← -> Space PgUp PgDn Home End 导航F 全屏S 打开演示者窗口（磁吸卡片）N 快速笔记抽屉（底部）R 重置计时器（演示者窗口内）O 幻灯片概览网格T 循环切换主题（同步到演示者）A 在当前页循环演示动画?preview=N (URL) 仅预览模式（单页，无 chrome）
踩坑经验
我花了不少时间测这个 skill，有几个坑大家千万注意：
- 1.主题别贪多。36 套主题容易挑花眼，一份 deck 最好从头到尾用一套主题，别中途换，否则风格割裂。我以前也是这么干的--每页换个主题觉得"丰富"，结果做出来像个大杂烩。
- 2.Canvas 动画别滥用。20 种 Canvas FX 确实炫，但别每页都放。粒子爆炸、星云漩涡这种重特效，放在 hero 页和结尾页点睛就够了，正文页用 CSS 轻量动画即可，否则演示设备扛不住。
- 3.演讲稿要口语化。演示者模式的演讲稿功能很香，但别写成书面语。按它说的 150-300 字、口语化、标注关键词，现场讲起来才顺。
- 4.手动用法也有。不想用 agent 的话，
./scripts/new-deck.sh my-talk能脚手架创建新 deck，./scripts/render.sh能用 headless Chrome 渲染成 PNG，灵活度够。
适合谁
- •产品发布/融资路演：pitch-deck-vc 主题 + 演示者模式
- •周报展示：weekly-report 模板直接套
如果你想要的是"原生可编辑 PPTX"，它不是最优解（它出的是 HTML）；但如果你要的是"有设计感、能直接演示、动画炫酷的 HTML 演示文稿"，它目前是最能打的之一。
总结
html-ppt-skill 的核心优势就两个字：丰富。36 主题 × 47 动画 × 31 布局 × 15 模板 × 演示者模式，这套组合在同类 Skill 里几乎没有对手。
它适合追求视觉表现力和现场演讲体验的人。选择多意味着自由，也意味着需要花点时间摸索搭配。但只要摸熟了，出片效率和质感都拉满。
项目地址：https://github.com/lewislulu/html-ppt-skill数据：7.6k ⭐ / HTML / MIT / 更新于 2026-08-03
感兴趣的自己去 clone 一个试试，一行命令的事。
如果本文对您有帮助，也请帮忙点个 赞👍 + 在看 哈！❤️关注小智AI指南公众号，AI 路上不迷路
10个月宝宝每天需要喝多少奶粉？
