Menu
演讲脚本 + PPT 一键生成器。输入主题自动生成演讲稿和可播放的 HTML 幻灯片（支持点击/自动播放、键盘控制、导出 PDF）。使用 awesome-design-md 62 种品牌级设计风格。触发词："/ppt"、"做PPT"、"演讲稿"、"presentation"、"幻灯片"、"做个演示"
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | presentation |
| description | 演讲脚本 + PPT 一键生成器。输入主题自动生成演讲稿和可播放的 HTML 幻灯片（支持点击/自动播放、键盘控制、导出 PDF）。使用 awesome-design-md 62 种品牌级设计风格。触发词："/ppt"、"做PPT"、"演讲稿"、"presentation"、"幻灯片"、"做个演示" |
输入一个主题，自动生成演讲脚本和品牌级设计质感的 HTML 幻灯片。支持 62 种世界级品牌设计风格，一键切换。
| 参数 | 必须 | 说明 |
|---|---|---|
| 主题 | 是 | 演讲/演示的主题 |
| 风格 | 否 | 设计风格名称（不指定则引导选择） |
| 时长 | 否 | 目标演讲时长，默认 10 分钟 |
| 语言 | 否 | 脚本语言，默认中文 |
| 页数 | 否 | 幻灯片页数，默认根据时长自动计算（约 1 页/分钟） |
引导选风格 → 生成演讲脚本 → 设计幻灯片 → 输出 HTML → 浏览器预览
如果用户未指定风格，展示风格选择菜单。按场景分类推荐：
🎨 请选择你喜欢的 PPT 设计风格：
━━━ 科技 / AI ━━━
1. claude — 温暖陶土色调，学术优雅
2. vercel — 极简黑白，Geist 字体
3. linear — 超精简紫色调，专业感
4. stripe — 标志性紫色渐变，精致
5. nvidia — 绿黑能量感，技术力量
6. spacex — 纯黑白未来主义
━━━ 商务 / 企业 ━━━
7. apple — 苹果级留白，极致优雅
8. notion — 温暖极简，知识感
9. ibm — 企业级蓝色系统
10. superhuman — 高端暗色，键盘优先
11. hashicorp — 企业级黑白清洁
━━━ 创意 / 设计 ━━━
12. figma — 多彩活泼，专业中带趣味
13. framer — 大胆黑蓝，运动感
14. airbnb — 温暖珊瑚色，摄影驱动
15. spotify — 鲜绿暗色，大胆排版
16. nike — 黑白对比，全大写 Futura
━━━ 金融 / 数据 ━━━
17. coinbase — 信赖蓝，机构感
18. revolut — 暗色渐变卡片，金融精确
19. binance — 币安黄+黑，交易桌紧迫感
━━━ 汽车 / 奢华 ━━━
20. ferrari — 明暗对比，法拉利红点缀
21. tesla — 极简摄影，激进减法
22. lamborghini — 纯黑+金色，奢华感
23. bmw — 暗色精密，德式工程美学
输入编号或名称即可，也可以说"帮我选"让我根据主题推荐。
智能推荐：如果用户说"帮我选"，根据主题自动匹配：
根据用户选择的风格，从 awesome-design-md 仓库获取对应的 DESIGN.md：
https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/designs/{slug}/DESIGN.md
从 DESIGN.md 中提取以下关键设计变量：
| 要素 | 用途 |
|---|---|
| 配色系统 | CSS 变量定义（primary, accent, surface, text 等） |
| 字体层级 | 标题/正文/标注的 font-family, size, weight, line-height |
| 阴影系统 | 卡片/按钮的 box-shadow 层级 |
| 圆角规范 | border-radius 体系 |
| 间距规范 | spacing scale |
根据主题和时长，生成结构化演讲脚本：
# 演讲脚本：{主题}
预计时长：{N} 分钟
幻灯片数：{M} 页
---
## 第 1 页 — 开场（封面）
**幻灯片内容**：标题 + 副标题 + 演讲者
**演讲词**：
> （此处是完整的口语化演讲词，自然、有感染力，不是干巴巴的要点罗列）
**时长**：1 分钟
**提示**：[开场节奏建议、肢体语言提示]
---
## 第 2 页 — 问题引入
**幻灯片内容**：一个引人思考的问题/数据
**演讲词**：
> ...
...以此类推
脚本质量要求：
生成一个单文件 HTML，包含完整的幻灯片播放器。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{演讲标题}</title>
<!-- Google Fonts（根据 DESIGN.md 指定的字体） -->
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
<style>
/* === 设计系统变量（来自 DESIGN.md） === */
:root { ... }
/* === 幻灯片引擎样式 === */
/* === 幻灯片内容样式 === */
/* === 控制栏样式 === */
/* === 打印/PDF 样式 === */
</style>
</head>
<body>
<!-- 幻灯片容器 -->
<div class="slides-container">
<div class="slide active" data-index="0">...</div>
<div class="slide" data-index="1">...</div>
...
</div>
<!-- 控制栏 -->
<div class="controls">...</div>
<!-- 演讲者备注面板 -->
<div class="speaker-notes">...</div>
<script>/* 播放引擎 */</script>
</body>
</html>
必须实现以下功能：
导航控制：
// 键盘控制
document.addEventListener('keydown', (e) => {
switch(e.key) {
case 'ArrowRight':
case 'ArrowDown':
case ' ': // 空格
case 'Enter':
nextSlide(); break;
case 'ArrowLeft':
case 'ArrowUp':
prevSlide(); break;
case 'f':
case 'F':
toggleFullscreen(); break;
case 'a':
case 'A':
toggleAutoplay(); break;
case 'n':
case 'N':
toggleNotes(); break;
case 'Escape':
exitFullscreen(); break;
case 'p':
case 'P':
exportPDF(); break;
}
});
// 点击控制：点击幻灯片右半边 → 下一页，左半边 → 上一页
// 触摸滑动：支持移动端左右滑动切换
自动播放：
let autoplayInterval = null;
let autoplaySpeed = 5000; // 默认 5 秒/页
function toggleAutoplay() {
if (autoplayInterval) {
clearInterval(autoplayInterval);
autoplayInterval = null;
updateAutoplayButton('▶ Auto');
} else {
autoplayInterval = setInterval(nextSlide, autoplaySpeed);
updateAutoplayButton('⏸ Pause');
}
}
全屏模式：
function toggleFullscreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
}
PDF 导出：
function exportPDF() {
// 显示所有幻灯片用于打印
document.body.classList.add('print-mode');
window.print();
document.body.classList.remove('print-mode');
}
底部控制栏（非全屏时可见，全屏时悬停底部显示）：
┌────────────────────────────────────────────────────┐
│ ◀ │ 3 / 12 │ ▶ │ ▶ Auto │ ⛶ Full │ 📥 PDF │ 📝 Notes │
└────────────────────────────────────────────────────┘
控制栏样式使用当前设计风格的 accent 色。
默认使用淡入滑动效果：
.slide {
position: absolute;
inset: 0;
opacity: 0;
transform: translateX(30px);
transition: opacity 0.5s ease, transform 0.5s ease;
pointer-events: none;
}
.slide.active {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.slide.prev {
opacity: 0;
transform: translateX(-30px);
}
@media print {
/* 打印模式：每页一张幻灯片 */
.controls, .speaker-notes, .download-bar { display: none !important; }
.slides-container {
position: static;
overflow: visible;
}
.slide {
position: relative !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
page-break-after: always;
width: 100vw;
height: 100vh;
display: flex !important;
align-items: center;
justify-content: center;
}
}
每张幻灯片的内容遵循以下设计原则：
文字极简：
视觉层级清晰：
常用页面类型：
| 类型 | 布局 | 适用场景 |
|---|---|---|
| 封面 | 居中大标题 + 副标题 + 演讲者 | 第 1 页 |
| 章节页 | 居中章节标题 + 装饰元素 | 章节分隔 |
| 观点页 | 大字号核心观点 + 小字补充 | 关键论点 |
| 列表页 | 标题 + 3-5 条要点（带图标） | 罗列要点 |
| 数据页 | 超大数字 + 说明文字 | 数据冲击 |
| 对比页 | 左右/上下两栏对比 | Before/After |
| 引用页 | 大段引言 + 出处 | 名言/用户反馈 |
| CTA 页 | 行动号召 + 联系方式 | 结尾 |
侧边滑出面板，显示当前页的完整演讲词：
.speaker-notes {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: 350px;
transform: translateX(100%);
transition: transform 0.3s ease;
background: rgba(0,0,0,0.95);
color: #fff;
padding: 24px;
overflow-y: auto;
z-index: 1000;
}
.speaker-notes.open {
transform: translateX(0);
}
/* 幻灯片容器保持 16:9 比例 */
.slides-container {
width: 100vw;
height: 100vh;
max-width: 1920px;
max-height: 1080px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/* 内容自适应缩放 */
.slide {
padding: 60px 80px;
}
@media (max-width: 768px) {
.slide { padding: 30px 40px; }
.slide h1 { font-size: 2em; }
.controls { font-size: 14px; }
}
{主题}_演讲脚本.md{主题}_slides.htmlopen {主题}_slides.html 在浏览器中预览✅ 演讲脚本和幻灯片已生成！
📄 演讲脚本：{主题}_演讲脚本.md
🎬 HTML 幻灯片：{主题}_slides.html（已在浏览器中打开）
操作指南：
→ / ← / Space 翻页
F 全屏
A 自动播放（5秒/页）
N 显示演讲者备注
P 导出 PDF（浏览器打印）
点击右半屏 下一页
点击左半屏 上一页
需要调整内容、风格或页数吗？
如果无法从 GitHub 获取 DESIGN.md：
#0a0a0a，白色文字，渐变 accent