一个让AI做PPT的Skill，36套主题47种动效还带演讲者模式
一个让AI做PPT的Skill，36套主题47种动效还带演讲者模式
以前做PPT要手动排版配色，现在只需要对AI说一句话。
痛点
让AI写代码很顺，让AI做PPT？
要么生成一堆文字让你自己排版，要么套个丑到离谱的默认模板。
AI做PPT最大的问题不是内容，是视觉。
没有设计感的PPT，拿出去比不做还丢人。
html-ppt-skill 是什么
这是一个开源的AgentSkill项目，安装后，AI Agent（Claude Code、Cursor等）就能生成专业级的HTML演示文稿。
一句话：让AI做的PPT，真正能拿出手。
核心数字
- 🎨 36 套主题 — 从极简白底到赛博朋克，从学术论文风到小红书马卡龙色
- 📑 15 套完整 deck 模板 — 直接用，涵盖技术分享、产品发布、投资人Pitch、小红书图文
- 🧩 31 种页面布局 — 封面、目录、流程图、时间轴、KPI卡片、代码对比、知识图谱…
- ✨ 47 种动效 — 27个CSS动画 + 20个Canvas电影级特效（粒子爆发、烟花、星空、代码雨…）
- 🎤 演讲者模式 — 按S键弹出提词器，逐字稿+计时器+下一页预览
36套主题，总有一款适合你
选几个有代表性的：
| 主题 | 风格 | 适合场景 |
|---|---|---|
cyberpunk-neon | 赛博朋克霓虹 | 科技分享、黑客松 |
glassmorphism | 毛玻璃质感 | 现代产品演示 |
blueprint | 蓝图/架构图风 | 技术方案、架构设计 |
xhs-white-editorial | 小红书白底杂志风 | 种草图文 |
obsidian-claude-gradient | 紫色渐变卡 | AI相关分享 |
corporate-clean | 商务简洁 | 工作汇报、周报 |
pitch-deck-vc | 投资人风格 | 融资Pitch |
每个主题都是纯CSS token文件——换皮肤只需要改一行<link>，整个deck自动重排。
演讲者模式：真正的演示利器
按S键弹出独立的演讲者窗口，包含4个可拖拽磁吸卡片：
- 当前页预览 — 像素级完美（和观众看到的一模一样）
- 下一页预览 — 提前知道下一页长什么样
- 逐字稿 — 根据演讲内容自动生成提示词
- 计时器 — 演讲节奏不失控
逐字稿三原则
项目文档里写了逐字稿的写作规范，很实用：
- 提示信号，不是讲稿 — 关键词加粗，过渡句独立成段
- 每页150-300字 — 约2-3分钟/页的节奏"
- 用口语，不用书面语 — "所以"不是"因此"，"这个"不是"该"
31种布局，覆盖所有场景
封面 / 目录 / 分隔页 / 列表 / 双栏 / 三栏
大引用 / 数据高亮 / KPI卡片 / 表格 / 代码
终端 / 流程图 / 时间轴 / 路线图 / 思维导图
对比 / 优缺点 / 清单 / 甘特图 / 图片大图
图集 / 柱状图 / 折线图 / 饼图 / 雷达图
架构图 / 步骤流 / CTA / 感谢页每个布局都带真实示例数据，拖进deck立即看到效果。
47种动效，让PPT活起来
CSS动画（轻量级）
fade-in— 淡入rise-in— 升起blur-in— 模糊渐清晰typewriter— 打字机neon-glow— 霓虹光晕shimmer-sweep— 流光扫过card-flip-3d— 3D翻卡page-turn-3d— 3D翻页
Canvas FX（电影级）
particle-burst— 粒子爆发confetti-cannon— 彩带礼炮firework— 烟花starfield— 星空matrix-rain— 代码雨knowledge-graph— 力导向知识图谱neural-net— 神经网络脉冲galaxy-swirl— 星系漩涡constellation— 星座连线
怎么用
一行命令安装
npx skills add https://github.com/lewislulu/html-ppt-skill装好后对AI说人话
"做一份8页的技术分享slides，用cyberpunk主题" "把这段outline变成投资人pitch deck" "做一个小红书图文，9张，白底柔和风" "做一份带演讲者模式的产品分享，我想要有逐字稿"
AI会自动调用Skill里的主题、布局、动效，生成完整的HTML文件。
手动使用（不需要AI）
# 从模板新建一个deck
./scripts/new-deck.sh my-talk
# 浏览所有主题
open templates/theme-showcase.html
# 浏览所有布局
open templates/layout-showcase.html
# 浏览所有动效
open templates/animation-showcase.html
# 用headless Chrome导出PNG
./scripts/render.sh examples/my-talk/index.html 1215套完整deck模板
提炼自真实作品：
xhs-white-editorial— 小红书白底杂志风graphify-dark-graph— 暗底+知识图谱knowledge-arch-blueprint— 蓝图/架构图风hermes-cyber-terminal— 赛博朋克终端testing-safety-alert— 红/琥珀警示风xhs-pastel-card— 马卡龙图文
通用场景款：
pitch-deck— 投资人Pitchproduct-launch— 产品发布会tech-sharing— 技术分享weekly-report— 周报xhs-post— 小红书图文（9页3:4）presenter-mode-reveal🎤 — 完整演讲模板，每页带逐字稿
设计理念
项目文档里写了几条设计原则，值得一读：
Token驱动的设计系统。 所有颜色、圆角、阴影、字体决策都在base.css+主题文件里。改一个变量，整份deck优雅地重排。
零构建。 纯静态HTML/CSS/JS，不需要npm install，不需要webpack。
资深设计师的默认值。 字号规律、间距节奏、渐变、卡片处理都有态度——绝不是"PowerPoint 2006"那种味道。
和传统PPT工具比
| PowerPoint | html-ppt-skill | |
|---|---|---|
| 学习成本 | 高 | 低（说人话就行） |
| 视觉上限 | 受模板限制 | 取决于AI理解力 |
| 动效 | 预设动画 | 47种+可叠加 |
| 版本控制 | .pptx二进制 | HTML文本，可Git |
| 协作 | 多人编辑麻烦 | Markdown+Git原生友好 |
| 演讲者模式 | 有 | 有，且更强大 |
| 导出 | 固定格式 | PNG/PDF/HTML均可 |
最后
html-ppt-skill解决的不是"AI能不能做PPT"的问题——
它解决的是"AI做的PPT能不能拿出手"的问题。
36套主题让AI有审美，47种动效让PPT有生命，演讲者模式让演示有保障。
一个命令行，装完AI就能做专业PPT。
项目地址：https://github.com/lewislulu/html-ppt-skill
MIT协议，感兴趣的可以研究一下源码，贡献主题和布局。
关注公众号 Fen9Pi，聊聊AI时代的工具与效率。