一个专为AI编辑器设计的零依赖HTML PPT演示模板，支持16:9比例显示和丰富的功能。
- 🤖 AI 驱动：专为 Cursor、Trae 等AI编辑器优化，让AI帮你创建专业PPT
- 🚀 开箱即用：直接打开
index.html即可使用，无需安装任何软件 - 📁 模块化设计：每个幻灯片独立HTML文件，便于AI生成和管理
- 📱 响应式设计：完美适配桌面、平板和手机设备
- 🎯 16:9比例：专业的PPT显示比例，适合各种演示场景
- 🎨 现代化UI：基于shadcn/ui设计语言，美观简洁
- ⚡ 功能丰富：演示计时器、幻灯片概览、快捷键导航等
- 📝 配置简单：自动检测文件夹，无需手动配置
- PDF导出：支持导出为PDF格式
使用 AI 编辑器（如 Cursor、Trae、 WindSurf）创建专业PPT：
当然你也可以直接在 deepseek / chatgpt 等 AI 对话界面让它生成 html 然后手动复制到文件夹中
- 在 AI 编辑器中打开项目
- 直接对AI说：
请基于本HTML PPT模板创建一个关于 [你的主题] 的演示文稿。
要求：
- 在 ppt/ 文件夹中创建新的项目文件夹（如 ppt/my-presentation/）
- 使用现代化设计和 Tailwind CSS，良好的视觉体验
- 文件命名：01-cover.html, 02-content.html...
- 每个文件包含完整的HTML结构
- 16:9比例布局，响应式设计，使用一致的设计语言和层次结构
- 使用真实UI图片（如 Unsplash、 Apple官方 UI 等资源）
- 重要：创建完成后，请在 ppt-list.js 配置文件中添加新项目信息
示例文件结构：
ppt/
├── my-presentation/ # 你的演示文稿
│ ├── 01-cover.html # 封面页
│ ├── 02-agenda.html # 议程页
│ ├── 03-content.html # 内容页
│ └── 04-thanks.html # 感谢页
然后在 ppt-list.js 中新增对应的文件信息
- AI 会自动生成所有幻灯片文件
- 刷新浏览器即可看到新内容
小贴士：
- 如果你想要动画效果，可以告诉 AI：
添加美观的过渡动画与交互元素 - 可以指定要多少张PPT："创建5张幻灯片"
- 如果有logo或照片，放在
assets/images文件夹下，告诉AI使用它们，比如记得使用 assets/images 中的 logo.png 和 大合照.png 照片
"请为我的产品发布会创建一个现代化的PPT，包括：
- 第1页：产品介绍
- 第2页：核心功能
- 第3页：市场优势
- 第4页：未来规划
记得在 ppt-list.js 中添加项目配置：
'product-launch': {
name: '产品发布会',
description: '新产品发布演示',
badge: '发布',
badgeClass: 'launch',
files: ['01-intro.html', '02-features.html', '03-advantage.html', '04-roadmap.html']
}"
💡 重要提醒： 本项目完全零依赖，无需安装任何工具（如 npm、python 等），直接双击 index.html 即可使用！创建新项目后需要刷新网页！（
Ctrl / Cmd + R刷新，或者浏览器左上角刷新按钮）
→/Space：下一张幻灯片←：上一张幻灯片F11：全屏演示Alt + T：演示计时器B：黑屏模式
- 点击工具栏的文件夹图标
- 选择想要查看的项目
- 立即切换到新的PPT内容
项目包含两套的示例PPT供参考，这些都是 AI 生成的
- 大胆色彩、强对比、动态效果
- 适用：产品发布、创意展示、年轻化品牌
- 简洁优雅、黑白配色、字体居中
- 适用：商务汇报、学术演讲、专业展示
Q: 如何使用AI生成内容？
A: 在AI编辑器中描述你的需求，让AI在 ppt/ 文件夹中创建新的项目文件夹和HTML文件即可。
Q: 为什么新添加的幻灯片没有显示？ A: 刷新浏览器页面，系统会自动检测新文件。
Q: 如何创建多个PPT项目？
A: 在 ppt/ 文件夹中创建不同的子文件夹，每个包含独立的幻灯片文件，然后使用文件夹选择器切换。
Q: 需要安装什么软件吗？
A: 不需要！直接双击 index.html 即可使用，无需安装任何开发工具。
Q: 可以离线使用吗？ A: 是的，除了在线字体和图标，所有功能都可以离线使用。
- 演示计时器 (
Alt + T)：专业的时间管理工具 - 全屏演示 (
F11)：沉浸式演示体验 - 黑屏模式 (
B)：临时黑屏功能
- 文件夹选择器：切换不同的PPT项目文件夹
- 代码高亮：自动语法高亮显示
- 现代化UI：基于shadcn/ui设计语言
- 响应式布局：完美适配各种设备
- 16:9比例：专业演示标准
- 零依赖：纯HTML/CSS/JS实现
- 多项目支持：轻松管理多个PPT项目
ppt-html-template/
├── index.html # 主文件（双击即可打开）
├── config.js # 自动配置文件
# 幻灯片同步工具已移除
├── ppt/ # PPT文件夹 ⭐
│ ├── default/ # 默认演示文稿
│ │ ├── 01-welcome.html
│ │ ├── 02-features.html
│ │ └── 03-how-to-use.html
│ └── examples/ # 示例演示文稿
│ ├── neobrutalism/ # 新野兽派风格
│ │ ├── 01-cover.html
│ │ ├── 02-content.html
│ │ └── 03-thanks.html
│ └── minimal/ # 极简风格
│ ├── 01-cover.html
│ ├── 02-content.html
│ └── 03-thanks.html
├── assets/
│ ├── css/ # 样式文件
│ │ ├── main.css # 主样式
│ │ ├── responsive.css # 响应式样式
│ │ └── editor.css # 编辑器样式
│ └── js/ # 功能模块
│ ├── main.js # 核心功能
│ ├── keyboard.js # 键盘快捷键
│ ├── sidebar-thumbnails.js # 侧边栏缩略图
│ ├── presentation-timer.js # 演示计时器
│ ├── layout-templates.js # 布局模板
│ ├── code-highlight.js # 代码高亮
│ └── pdf-export.js # PDF导出
└── README.md # 项目说明
⭐ 重要：
ppt/文件夹是核心，所有演示文稿都在这里。AI 会自动在此创建新的项目文件夹。
| 快捷键 | 功能 | 说明 |
|---|---|---|
→ / Space |
下一张 | 切换到下一张幻灯片 |
← |
上一张 | 切换到上一张幻灯片 |
F11 |
全屏 | 进入/退出全屏演示模式 |
Alt + T |
演示计时器 | 专业的时间管理工具 |
B |
黑屏模式 | 临时黑屏 |
项目采用现代化的设计语言：
- 现代简洁：基于 shadcn/ui 设计语言
- 响应式布局：完美适配各种设备尺寸
- 专业外观：16:9 比例，适合演示使用
自定义样式： 可在
assets/css/目录下修改样式文件
- 使用有意义的名称：
ppt/product-launch、ppt/quarterly-report - 避免使用特殊字符和空格，使用连字符分隔单词
- 所有项目都应该在
ppt/文件夹下
- 保持同一项目中所有幻灯片使用相同的设计风格
- 使用有序的文件名：
01-cover.html、02-content.html - 确保在不同设备上都能正常显示
- 桌面端：Chrome、Firefox、Safari、Edge 最新版本
- 移动端：iOS Safari、Android Chrome
- 演示设备：完美适配投影仪和大屏幕
MIT License - 自由使用、修改和分发
欢迎提交Issue和Pull Request来改进这个项目。
🎉 开始使用AI创建专业PPT吧！
专为AI编辑器设计，让创建演示文稿变得简单而高效