PPT解决方案完全指南:从HTML框架到AI生成
- 2026-05-31 18:35:47
为什么选择HTML PPT
传统PPT工具（PowerPoint、Keynote）存在诸多痛点：格式兼容性问题、版本控制困难、无法嵌入动态内容、协作效率低下。HTML形式的演示文稿解决了这些问题：
跨平台兼容：只需浏览器即可展示，无需安装任何软件 版本控制友好：纯文本格式，可使用Git进行版本管理 动态内容支持：可嵌入代码高亮、动画、图表、甚至可交互的Demo 易于分享部署：一个HTML文件即可分享，或部署到任意静态托管服务 开发者友好：使用Markdown或JSX编写，符合开发者工作流
本文将对比主流的HTML PPT框架，并系统介绍开源AI PPT生成工具，提供从框架选型到AI生成的完整实践指南。
主流框架对比
| reveal.js | |||||
| impress.js | |||||
| Slidev | |||||
| Marp | |||||
| nodeppt | |||||
| MDX Deck |
框架详解
reveal.js：最成熟的选择
reveal.js是目前最流行的HTML演示框架，由Hakim El Hattab于2011年创建，至今仍在活跃维护（最新版本6.0.1）。
核心特性：
嵌套幻灯片（垂直/水平导航） Markdown支持 Auto-Animate动画系统 PDF导出 演讲者视图 LaTeX数学公式 代码语法高亮 丰富的插件生态
快速开始：
# 基础方式：直接下载
# 1. 下载 https://github.com/hakimel/reveal.js/archive/master.zip
# 2. 解压后编辑 index.html
# 推荐方式：使用npm
git clone https://github.com/hakimel/reveal.js.git
cd reveal.js
npm install
npm start
# 访问 http://localhost:8000
基础HTML结构：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>幻灯片 1</section>
<section>幻灯片 2</section>
<section>
<section>垂直幻灯片 3.1</section>
<section>垂直幻灯片 3.2</section>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script>
Reveal.initialize();
</script>
</body>
</html>
Markdown写法：
<section data-markdown>
<textarea data-template>
## 标题
- 要点一
- 要点二
```python
def hello():
print("Hello World")
```
</textarea>
</section>
官方资源：
官网：https://revealjs.com GitHub：https://github.com/hakimel/reveal.js 在线编辑器：https://slides.com
impress.js：最具创意的选择
impress.js基于CSS3 Transforms和Transitions，灵感来自Prezi的非线性演示风格。
核心特性：
3D空间定位 非线性导航 CSS3动画驱动 无依赖（纯原生JS）
适用场景：需要强烈视觉冲击的展示、创意演讲、产品发布会
快速开始：
git clone --recursive https://github.com/impress/impress.js.git
cd impress.js
HTML结构示例：
<div id="impress">
<div class="step" data-x="0" data-y="0" data-scale="2">
<h1>标题</h1>
<p>副标题</p>
</div>
<div class="step" data-x="1000" data-y="500" data-rotate="90">
<h2>第二页</h2>
<p>旋转90度</p>
</div>
<div class="step" data-x="2000" data-y="1000" data-scale="0.5" data-rotate="180">
<h2>第三页</h2>
<p>缩小并旋转</p>
</div>
</div>
<script src="js/impress.js"></script>
<script>impress().init();</script>
官方资源：
官网：http://impress.js.org GitHub：https://github.com/impress/impress.js 入门指南：https://github.com/impress/impress.js/blob/master/GettingStarted.md
Slidev：面向开发者的现代方案
Slidev是Anthony Fu创建的基于Vue 3 + Vite的演示工具，专为开发者设计。
核心特性：
Markdown优先 Vue组件支持 代码高亮（Shiki） Monaco Editor集成（可交互代码） 内置录制和摄像头 UnoCSS原子化CSS KaTeX数学公式 Mermaid图表 绘图批注（Drauu）
快速开始：
# 使用pnpm创建项目
pnpm create slidev
# 或全局安装CLI
pnpm i -g @slidev/cli
slidev slides.md
Markdown语法：
---
theme: seriph
background: https://cover.sli.dev
title: 演示标题
---
# 标题
演示内容
---
## 第二页
<v-click>
- 点击后显示的要点
- 动画效果
</v-click>
---
## 代码展示
```python {all|2|3}
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)
```
---
layout: center
---
# 居中布局
官方资源：
官网：https://sli.dev GitHub：https://github.com/slidevjs/slidev 中文文档：https://cn.sli.dev
Marp：最简洁的方案
Marp（Markdown Presentation Ecosystem）是一套Markdown驱动的演示工具生态。
核心工具：
Marp for VS Code：VS Code扩展，实时预览 Marp CLI：命令行转换工具 Marp Core：核心库
快速开始：
# 安装CLI
npm install -g @marp-team/marp-cli
# 创建slides.md后转换
marp slides.md --html # 转换为HTML
marp slides.md --pdf # 转换为PDF
marp slides.md --pptx # 转换为PPTX
Markdown语法：
---
marp: true
theme: default
paginate: true
---
# 第一页
内容
---
<!-- _class: lead -->
# 带特殊样式的页面
---
# 代码块
```javascript
console.log('Hello Marp');
**官方资源**：
- 官网：https://marp.app
- VS Code扩展：https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
- CLI：https://github.com/marp-team/marp-cli
---
### nodeppt：国产优秀方案
nodeppt是国内开发者三水清创建的Web演示工具，基于WebSlides重构。
**核心特性**：
- Markdown编写
- 支持echarts图表
- 支持mermaid流程图
- 支持KaTeX数学公式
- 演讲者模式
- 丰富的布局和样式
**快速开始**：
```bash
npm install -g nodeppt
# 创建新演示
nodeppt new slide.md
# 启动开发服务器
nodeppt serve slide.md
# 构建
nodeppt build slide.md
Markdown语法：
---
title: 演示标题
speaker: 演讲者
---
<slide class="bg-primary aligncenter">
# 标题
副标题内容
---
<slide image="https://example.com/bg.jpg .dark">
# 带背景图的页面
---
<slide :class="size-50">
# 使用组件
:::card
左侧内容
---
右侧内容
::
官方资源：
GitHub：https://github.com/ksky521/nodeppt 在线演示：https://nodeppt.js.org
MDX Deck：React生态方案
MDX Deck基于React和MDX格式，适合React开发者。
核心特性：
MDX格式（Markdown + JSX） React组件导入 Theme UI主题系统 演讲者模式 概览模式
快速开始：
npm i -D mdx-deck
# 在package.json中添加
# "scripts": { "start": "mdx-deck deck.mdx" }
npm start
MDX语法：
# 标题
内容
---
import { Chart } from './components/Chart'
# 使用React组件
<Chart data={[1, 2, 3]} />
---
layout: center
---
# 居中显示
官方资源：
GitHub：https://github.com/jxnblk/mdx-deck 在线演示：https://mdx-deck.jxnblk.com
各框架实际案例
以下是使用各种框架创建的演示示例：
以上介绍了手动编写HTML PPT的主流框架。但随着大语言模型的发展，AI自动生成PPT已成为更高效的替代方案——你只需描述需求，AI即可生成完整的演示文稿。接下来介绍当前最优秀的开源AI PPT工具。
开源AI驱动的PPT生成工具
随着大语言模型（LLM）的快速发展，AI生成PPT已成为2025年最热门的方向之一。与手动编写框架不同，AI方案可以一句话/一段文字→自动生成完整演示文稿，极大提升效率。以下按类型介绍当前最优秀的开源免费工具。
独立AI演示文稿应用
这类工具是完整的、可自部署的AI PPT生成应用，自带前后端，支持通过Web界面交互式生成演示文稿。
banana-slides（14.8k ⭐）—— 最热门的AI PPT应用
banana-slides是目前GitHub上最受欢迎的开源AI PPT生成工具，支持上传任意模板图片和素材，通过一句话、大纲或页面描述自动生成PPT，甚至支持口头修改指定区域。
核心特性：
基于 nano banana pro 引擎，AI原生PPT生成 支持上传模板图片、素材智能解析 一句话/大纲/页面描述多种生成方式 口头修改指定区域 一键导出可编辑PPTX 文本转图片（Text2Image）
快速开始：
git clone https://github.com/Anionex/banana-slides.git
cd banana-slides
# 按照README安装依赖并启动
资源：https://github.com/Anionex/banana-slides | License: AGPL-3.0 | 语言: Python
presenton（7.6k ⭐）—— 开源版 Gamma / Beautiful.ai
presenton是Gamma和Beautiful.ai的开源替代品，不仅提供Web界面，还提供API接口，适合集成到自己的工作流中。
核心特性：
AI生成演示文稿（类似Gamma体验） 提供REST API，可编程调用 支持多种导出格式 TypeScript实现，易于二次开发
快速开始：
git clone https://github.com/presenton/presenton.git
cd presenton
# 配置LLM API Key后启动
资源：https://github.com/presenton/presenton | License: Apache-2.0 | 语言: TypeScript
presentation-ai（2.8k ⭐）—— Gamma开源替代
由ALLWEONE开发的开源AI演示文稿生成器，专注于可定制主题和AI内容生成。
核心特性：
可定制的演示主题系统 AI自动生成内容和布局 专业级幻灯片设计 快速生成，分钟级出稿
资源：https://github.com/allweonedev/presentation-ai | License: MIT | 语言: TypeScript
其他独立AI PPT应用
AI Agent PPT Skills（重点推荐）
AI Agent Skills是2025年兴起的新范式——将PPT生成能力封装为AI编程助手（如Claude Code、Codex）的Skill，用户只需在对话中描述需求，AI Agent即可直接生成专业级演示文稿。
这种模式的优势在于：
零配置：无需搭建独立应用，安装Skill即可使用 高质量：借助AI Agent的代码能力，输出可定制的HTML/PPTX 灵活：可在对话中实时调整风格、内容、布局
guizang-ppt-skill（13.5k ⭐）—— 杂志风/Swiss风格
目前最受欢迎的AI PPT Skill，专注于高端杂志风和瑞士风格的幻灯片设计。
核心特性：
杂志风（Editorial Magazine）和瑞士风格（Swiss Layouts）设计 自动生成图片提示词 社交媒体封面生成 WebGL低功耗演示运行时 适配Claude Code等主流AI Agent
使用方式：安装到Claude Code的skills目录后，在对话中描述需求即可生成。
资源：https://github.com/op7418/guizang-ppt-skill | License: AGPL-3.0
ppt-svg-generator（226 ⭐）—— Markdown转PPT/PDF
一个通用的LLM Skill，帮助你将Markdown文稿快速转化为PPT或PDF，支持多种预设风格选择。
核心特性：
Markdown → PPT/PDF一键转换 多种预设风格可选 效果美观且可控 适用于各种LLM场景
资源：https://github.com/vigorX777/ppt-svg-generator | License: MIT
slide-deck-generator（116 ⭐）—— React生产级幻灯片
专为AI Coding Agent设计的Skill，使用React + Vite + Framer Motion生成生产级的浏览器幻灯片。
核心特性：
React + Vite + Framer Motion技术栈 生产级代码质量 动画丰富的演示效果 浏览器原生展示
资源：https://github.com/code-on-sunday/slide-deck-generator | License: MIT
其他AI Agent PPT Skills
LLM + HTML框架的DIY方案
如果你已经在使用前述的HTML PPT框架（如Marp、reveal.js、Slidev），可以通过LLM API为其增加AI生成能力，打造自己的AI PPT工作流。
方案1：Marp + LLM（最推荐）
利用LLM生成Marp格式的Markdown，再用Marp CLI转换为HTML/PDF/PPTX。
"""
使用LLM API生成Marp格式PPT的示例
依赖: pip install anthropic openai
"""
import anthropic
import subprocess
client = anthropic.Anthropic() # 需设置 ANTHROPIC_API_KEY 环境变量
def generate_marp_ppt(topic: str, num_slides: int = 8) -> str:
"""调用Claude生成Marp格式的Markdown"""
prompt = f"""请为以下主题生成一个Marp格式的演示文稿（{num_slides}页）。
主题：{topic}
要求：
1. 使用 --- 分隔每页幻灯片
2. 第一页使用 frontmatter 设置主题
3. 内容简洁有力，每页不超过5个要点
4. 适当使用Marp的特殊指令如 <!-- _class: lead --> 和 ![bg right:40%]()
请直接输出Marp Markdown，不要包含其他说明。"""
response = client.messages.create(
model="claude-sonnet-4-20250514",
max_tokens=4096,
messages=[{"role": "user", "content": prompt}]
)
return response.content[0].text
def save_and_convert(marp_content: str, output_name: str):
"""保存Markdown并使用Marp CLI转换"""
md_file = f"{output_name}.md"
with open(md_file, "w", encoding="utf-8") as f:
f.write(marp_content)
# 转换为HTML
subprocess.run(["marp", md_file, "--html", "-o", f"{output_name}.html"])
# 转换为PDF
subprocess.run(["marp", md_file, "--pdf", "-o", f"{output_name}.pdf"])
# 转换为PPTX
subprocess.run(["marp", md_file, "--pptx", "-o", f"{output_name}.pptx"])
# 使用示例
if __name__ == "__main__":
content = generate_marp_ppt("2025年前端技术趋势")
save_and_convert(content, "frontend-trends-2025")
print("✅ PPT已生成！")
方案2：reveal.js + LLM
让LLM生成reveal.js格式的HTML文件：
def generate_reveal_ppt(topic: str) -> str:
"""生成reveal.js格式的HTML演示文稿"""
prompt = f"""请创建一个reveal.js演示文稿的完整HTML文件，主题：{topic}
要求：
1. 使用reveal.js CDN引入
2. 包含至少6页幻灯片
3. 使用Markdown section写法
4. 合理使用reveal.js的动画和布局特性
5. 输出完整可运行的HTML文件"""
response = client.messages.create(
model="claude-sonnet-4-20250514",
max_tokens=8192,
messages=[{"role": "user", "content": prompt}]
)
return response.content[0].text
方案3：Slidev + LLM
利用LLM生成Slidev格式的Markdown，借助Slidev丰富的组件生态：
def generate_slidev_ppt(topic: str) -> str:
"""生成Slidev格式的Markdown"""
prompt = f"""请创建一个Slidev格式的演示文稿Markdown，主题：{topic}
要求：
1. 使用 --- 分隔幻灯片
2. 包含frontmatter设置（theme、layout等）
3. 使用 v-click 实现逐步显示
4. 包含代码块（使用Shiki语法高亮标记）
5. 合理使用layout变体（center, cover, two-cols等）
6. 输出Slidev Markdown格式"""
response = client.messages.create(
model="claude-sonnet-4-20250514",
max_tokens=4096,
messages=[{"role": "user", "content": prompt}]
)
return response.content[0].text
提示：以上方案使用Claude API作为示例，也可替换为OpenAI、DeepSeek、Qwen等其他LLM API。关键在于在Prompt中明确指定目标框架的Markdown/HTML语法规范。
选型建议
| 一句话生成PPT | banana-slides | 开源最热门，模板+素材AI生成，导出PPTX |
| AI生成+API集成 | presenton | 开源Gamma替代，提供REST API |
| AI Agent一键生成 | guizang-ppt-skill | 安装到Claude Code即可使用，杂志风设计 |
| 学术答辩PPT | beamer-academic | 论文→答辩PPT，LaTeX学术风格 |
| AI+自定义框架 | Marp + LLM API | 灵活可控，可编程生成+批量转换 |
进阶技巧
1. 主题定制
大多数框架都支持主题定制。以reveal.js为例：
/* 自定义主题 */
.reveal h1 {
color: #42affa;
font-size: 2.5em;
}
.reveal .slides section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
2. 嵌入动态内容
<!-- 嵌入CodePen -->
<iframe height="400" style="width: 100%;" scrolling="no"
src="https://codepen.io/user/pen/xyz"
frameborder="no" loading="lazy">
</iframe>
<!-- 嵌入ECharts图表 -->
<div id="chart" style="width:600px;height:400px;"></div>
<script>
echarts.init(document.getElementById('chart')).setOption({...});
</script>
3. 自动化部署
使用GitHub Actions自动部署到GitHub Pages：
name: Deploy Slides
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 20
- run: npm install
- run: npm run build
- uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
4. 导出为PDF
各框架都支持PDF导出：
# reveal.js
# 访问 http://localhost:8000/?print-pdf
# 然后使用浏览器打印功能
# Slidev
slidev export
# Marp
marp slides.md --pdf
总结
HTML形式的PPT解决方案已经非常成熟，各框架各有特色：
追求功能全面：选择reveal.js 追求编写效率：选择Marp或Slidev 追求视觉效果：选择impress.js 追求生态一致：根据技术栈选择MDX Deck或Slidev 追求极致效率：使用AI Agent Skills（如guizang-ppt-skill）或AI PPT应用（如banana-slides、presenton） 追求AI定制化：用LLM API + Marp/Slidev构建自己的AI PPT工作流
对于大多数开发者，Slidev和reveal.js仍然是手动编写HTML PPT的首选。但在AI时代，越来越多的场景可以直接使用开源AI工具：需要快速出稿时，banana-slides和presenton提供一键生成体验；作为AI编程助手的用户，guizang-ppt-skill等Agent Skills可以让你在对话中直接生成专业级演示；追求深度定制的开发者，则可以用LLM + Marp/Slidev的DIY方案打造专属的AI PPT工作流。
HTML PPT框架和AI生成能力的结合，正在重新定义"做PPT"这件事。
参考资料
HTML PPT框架：
reveal.js官方文档：https://revealjs.com impress.js GitHub仓库：https://github.com/impress/impress.js Slidev官方文档：https://sli.dev Marp官方文档：https://marp.app nodeppt GitHub仓库：https://github.com/ksky521/nodeppt MDX Deck GitHub仓库：https://github.com/jxnblk/mdx-deck
开源AI PPT应用：
banana-slides：https://github.com/Anionex/banana-slides presenton：https://github.com/presenton/presenton presentation-ai：https://github.com/allweonedev/presentation-ai SlideBot-AI：https://github.com/tonyqinatcmu/SlideBot-AI LangChat Slides：https://github.com/LangChat/langchat-slides
AI Agent PPT Skills：
guizang-ppt-skill：https://github.com/op7418/guizang-ppt-skill ppt-svg-generator：https://github.com/vigorX777/ppt-svg-generator slide-deck-generator：https://github.com/code-on-sunday/slide-deck-generator beamer-academic：https://github.com/Faust-Donf/beamer-academic ppt-agent-skill：https://github.com/Akxan/ppt-agent-skill starry-slides：https://github.com/StarryKit/starry-slides ultimate-ppt-master-skill：https://github.com/kdnsna/ultimate-ppt-master-skill
