一行命令，AI 帮你用 HTML 做出专业幻灯片

html-ppt-skill 是一个开源的 AgentSkill 项目，让 Claude Code、Cursor 等 AI 编程助手用纯 HTML、CSS 和 JavaScript 生成专业级演示文稿——不需要 PowerPoint，不需要安装任何软件，一行命令就能开始。

它不是在线幻灯片工具（如 Google Slides），不是 SaaS 产品，也不是 PowerPoint 插件。它是一套设计系统 + 模板库 + AI 调用规范，装进你的 AI 编程助手后，你只需要用自然语言描述需求，AI 就会帮你生成一份完整的、可以在浏览器中直接播放的 HTML 演示文稿。

项目地址：github.com/lewislulu/html-ppt-skill

为什么值得关注

如果你经常做技术分享、产品演示、投资人路演或小红书图文，大概率会遇到 PowerPoint 的这些痛点：

• 文件传来传去，版本管理混乱
• 动画效果有限，想要电影级效果基本不可能
• 分享给别人还得确认对方有没有装 Office
• 和 AI 的集成很别扭，插件体验参差不齐
• 二进制格式，git diff 看不出改了什么

html-ppt-skill 用 HTML/CSS/JS 解决了这些问题。因为幻灯片本身就是代码文件，所以：

• 用 Git 管理版本，PR 审查改动
• CSS 动画 + Canvas 特效，从轻量过渡到电影级粒子效果
• 直接发链接，任何设备的浏览器都能打开
• AI 原生支持，自然语言描述需求即可生成
• 文本文件，改动一目了然

和传统方案的关键区别：

36 套主题覆盖全场景

html-ppt-skill 内置了 36 套精心设计的主题，覆盖从极简到赛博朋克的各种风格。每套主题本质上是一份 CSS 变量文件，只需要换一行 <link> 代码就能给整份演示文稿换肤。

主题按风格分为 6 大类：

Light & calm（轻柔浅色）

适合正式汇报、学术报告、产品展示。代表主题：minimal-white（极简白）、editorial-serif（杂志风衬线）、xiaohongshu-white（小红书白底）。

Bold & statement（大胆宣言）

适合创业路演、设计演讲、品牌发布。代表主题：neo-brutalism（厚描边硬阴影）、bauhaus（几何三原色）、swiss-grid（瑞士网格）。

Cool & dark（冷色深色）

适合技术分享、代码演示、基础设施讲解。代表主题：tokyo-night（蓝夜风）、dracula（经典紫红）、terminal-green（绿屏终端）。

Warm & vibrant（暖色活力）

适合生活方式、颁奖典礼、情绪正向的场景。代表主题：sunset-warm（橘珊瑚渐变）。

Effect-heavy（特效型）

适合产品发布会、视觉冲击力强的场景。代表主题：glassmorphism（毛玻璃）、aurora（极光渐变）、blueprint（蓝图工程风）。

v2 新增（专业/编辑/戏剧）

包括 corporate-clean（企业白底海军蓝）、pitch-deck-vc（YC 风融资路演）、academic-paper（论文风）、cyberpunk-neon（赛博霓虹）、vaporwave（蒸汽波）等 12 套新主题。

按场景选择主题的快速指南：

在浏览器里打开演示文稿后，按 T 键 就能实时切换主题，预览效果。

演讲者模式：比 PowerPoint 更精准的演讲体验

这是 html-ppt-skill 最具差异化的功能。在任何演示文稿里按 S 键，会弹出一个独立的演讲者窗口，包含 4 个可拖拽、可调整大小的磁吸卡片：

当前页预览 — 用 iframe 加载同一份 HTML 文件的当前页，和观众看到的完全一致（同一个 CSS、同一个主题、同一个字体），不存在 PowerPoint 演讲者视图那种"预览和实际有出入"的问题。

下一页预览 — 提前看到下一页内容，准备翻页时的过渡话术。

逐字稿 — 大字体可滚动的演讲文稿，支持关键词加粗、强调等排版。

计时器 — 已用时间 + 翻页计数 + 快捷控制按钮。

两个窗口通过 BroadcastChannel 双向同步。在任一窗口翻页，另一个自动跟上。翻页时 iframe 只切换 CSS class，不重新加载页面，所以零白屏、零闪烁。

逐字稿的编写有一套清晰的方法论，项目称为"三铁律"：

1. 提示信号，不是讲稿 — 把关键词用粗体标注，过渡句独立成段，看一眼就能接上
2. 每页 150-300 字 — 大约 2-3 分钟一页的节奏，少了提示不够会忘词，多了扫不完
3. 用口语，不用书面语 — "所以"不是"因此"，"这个"不是"该"，写完读一遍，听起来像说话才对

项目还专门提供了一个 presenter-mode-reveal 模板，每一页都带 150-300 字的示例逐字稿，直接改内容就能用。

15 套完整模板和 31 种布局

完整 Deck 模板

html-ppt-skill 提供了 15 套完整的多页模板，分为两类：

8 套从真实作品中提炼的视觉语言：

这些不是凭空设计的——每一套都从真实的演示文稿中提炼而来，保证了实战可用性。

7 套通用场景模板：

• pitch-deck — 投资人路演（10 页，白底蓝紫渐变）
• product-launch — 产品发布（8 页，暗色暖橙渐变）
• tech-sharing — 技术分享（8 页，GitHub-dark + 终端风）
• weekly-report — 周报（7 页，企业风 KPI 网格）
• xhs-post — 小红书图文（9 页，3:4 竖版 810×1080）
• course-module — 教学模块（7 页，暖纸衬线 + 左侧学习目标）
• presenter-mode-reveal — 演讲者模式专用（6 页，含完整逐字稿示例）

31 种单页布局

如果不想用完整模板，也可以像搭积木一样组合 31 种单页布局：

开场与过渡：cover（封面）、toc（目录）、section-divider（章节分隔）

文字为主：bullets（要点列表）、two-column（双栏）、three-column（三栏）、big-quote（大段引用）

数据展示：stat-highlight（大数字）、kpi-grid（4 格 KPI）、table（表格）、chart-bar/line/pie/radar（各种图表）

代码与终端：code（代码高亮）、diff（差异对比）、terminal（终端窗口模拟）

图表与流程：flow-diagram（流程图）、arch-diagram（架构图）、process-steps（步骤）、mindmap（思维导图）

计划与对比：timeline（时间线）、roadmap（路线图）、gantt（甘特图）、comparison（对比）、pros-cons（优劣势）、todo-checklist（待办清单）

视觉：image-hero（全屏大图）、image-grid（图片网格）

收尾：cta（行动号召）、thanks（感谢页）

每种布局都带有真实的示例数据，拖进你的 deck 就能直接看到效果。

47 个动效：从轻量 CSS 到电影级 Canvas

html-ppt-skill 的动效系统分两层：

27 个 CSS 动画（轻量级）

通过 data-anim 属性添加到任何元素上，每次进入该页时自动触发。适合大多数场景：

• 方向性入场：fade-up（从下方淡入）、fade-left、fade-right
• 戏剧性入场：rise-in（升起 + 清晰）、zoom-pop（缩放弹出）、blur-in（模糊渐清）
• 文字特效：typewriter（打字机）、neon-glow（霓虹光晕）、shimmer-sweep（流光扫过）
• 列表与数字：stagger-list（列表逐项入场）、counter-up（数字从 0 滚到目标值）
• 3D 效果：card-flip-3d、cube-rotate-3d、page-turn-3d
• 持续效果：marquee-scroll（无限滚动）、kenburns（慢速推拉）、confetti-burst（彩纸爆发）

使用方式很简单：

<h1 data-anim="rise-in">标题</h1>
<ul data-anim="stagger-list">
  <li>项目 1</li>
  <li>项目 2</li>
</ul>

20 个 Canvas FX（电影级）

由 fx-runtime.js 自动管理生命周期——进入页面时启动，离开时销毁。适合需要视觉冲击力的场景：

• 粒子与庆祝：particle-burst（粒子爆发）、confetti-cannon（彩带喷射）、firework（烟花）
• 宇宙与科幻：starfield（星空飞行）、galaxy-swirl（星系漩涡）、constellation（星座连线）
• 数据与技术：matrix-rain（代码雨）、knowledge-graph（力导向知识图谱，含物理引擎）、neural-net（神经网络脉冲）、data-stream（数据流）
• 文字与数字：letter-explode（字母飞散聚合）、counter-explosion（数字爆炸）、word-cascade（文字瀑布）

使用方式：

<script src="../assets/animations/fx-runtime.js"></script>

<div data-fx="knowledge-graph" style="width:100%;height:360px;"></div>

Canvas FX 会自动读取当前主题的颜色变量（--accent、--accent-2 等），所以换主题后效果颜色也会跟着变。

动效使用建议：一页一个主要动效就够了。混合太多反而显得杂乱。CSS 动画适合日常内容页，Canvas FX 留给需要震撼效果的关键页面。

怎么开始使用

安装

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

装好后，任何支持 AgentSkill 的 AI 编程助手（Claude Code、Cursor、Codex 等）都能用自然语言制作幻灯片了。

常用自然语言指令

"做一份 8 页的技术分享 slides，用 tokyo-night 主题"
"把这段 outline 变成投资人 pitch deck"
"做一个小红书图文，9 张，白底柔和风"
"做一份带演讲者模式的产品分享，我想要有逐字稿"

键盘快捷键速查

打开生成的 HTML 文件后，用键盘控制播放：

导出 PNG

项目自带 headless Chrome 渲染脚本，可以把幻灯片导出为 PNG 图片：

./scripts/render.sh examples/my-talk/index.html 12

默认输出 1920×1080。小红书 3:4 竖版可以改为 1242×1660。

适合谁，不适合谁

适合

• 技术团队：技术分享、周报、架构图，用 Git 管理 + 链接分享比传文件高效
• 创业者：融资路演用 pitch-deck-vc 模板，一键切换主题试不同风格
• 内容创作者：小红书图文用 xhs-post 3:4 竖版模板，比 Canva 更灵活
• 演讲者：演讲者模式 + 逐字稿，像素级预览比 PowerPoint 演讲者视图更可靠
• 设计师：Token 驱动的主题系统，改一个变量整份 deck 重排

暂时不适合

• 需要实时多人协作编辑的场景（目前是单文件静态方案）
• 非技术用户自助操作（需要基本的命令行和 HTML 知识）
• 需要导出 .pptx 格式的场景（输出是 HTML/PNG）

设计理念

html-ppt-skill 背后有几个清晰的设计理念值得了解：

Token 驱动。所有视觉决策（颜色、圆角、阴影、字体）都定义在 CSS 变量里。改一个变量，整份演示文稿优雅地重新排版。这让主题切换变得极其简单。

Iframe 隔离预览。主题、布局、完整模板的展示页面都用独立的 <iframe> 渲染，确保每个预览互不干扰，看到的就是真实效果。

零构建。纯静态 HTML/CSS/JS，不需要 webpack、vite 或任何打包工具。只有字体、highlight.js 和 chart.js 走 CDN（可选）。

中英双语一等公民。预导入了 Noto Sans SC 和 Noto Serif SC 中文字体，中文排版不需要额外配置。

尊重动效偏好。所有动画自动响应 prefers-reduced-motion: reduce 设置，对动效敏感的用户不会被干扰。

试一试吧

1. 直接试用：运行 npx skills add https://github.com/lewislulu/html-ppt-skill，然后告诉你的 AI 编程助手"做一份 5 页的技术分享 slides"
2. 浏览主题：clone 仓库后打开 templates/theme-showcase.html，用 T 键循环切换 36 套主题
3. 从模板开始：templates/full-decks/tech-sharing/ 或 templates/full-decks/pitch-deck/ 是很好的起点
4. 探索更多：项目在 references/ 目录下提供了详细的主题目录、布局目录、动画目录和完整创作指南