OrangeViolin Presentation — 演讲脚本 + PPT 一键生成
输入一个主题，自动生成演讲脚本和品牌级设计质感的 HTML 幻灯片。支持 62 种世界级品牌设计风格，一键切换。
触发词
- "/ppt"
- "做PPT"
- "做个PPT"
- "演讲稿"
- "presentation"
- "幻灯片"
- "做个演示"
- "演示文稿"
输入
| 参数 | 必须 | 说明 |
|---|---|---|
| 主题 | 是 | 演讲/演示的主题 |
| 风格 | 否 | 设计风格名称（不指定则引导选择） |
| 时长 | 否 | 目标演讲时长，默认 10 分钟 |
| 语言 | 否 | 脚本语言，默认中文 |
| 页数 | 否 | 幻灯片页数，默认根据时长自动计算（约 1 页/分钟） |
工作流程
引导选风格 → 生成演讲脚本 → 设计幻灯片 → 输出 HTML → 浏览器预览
Step 1：引导用户选择设计风格
如果用户未指定风格，展示风格选择菜单。按场景分类推荐：
🎨 请选择你喜欢的 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 — 暗色精密，德式工程美学
输入编号或名称即可，也可以说"帮我选"让我根据主题推荐。
智能推荐：如果用户说"帮我选"，根据主题自动匹配：
- 技术分享 → vercel / linear / claude
- 产品发布 → apple / stripe / framer
- 商业提案 → notion / ibm / superhuman
- 创意展示 → figma / airbnb / spotify
- 数据报告 → coinbase / posthog / sentry
- 教育培训 → claude / notion / mintlify
Step 2：获取设计规范
根据用户选择的风格，从 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 |
Step 3：生成演讲脚本
根据主题和时长，生成结构化演讲脚本：
# 演讲脚本：{主题}
预计时长：{N} 分钟
幻灯片数：{M} 页
---
## 第 1 页 — 开场（封面）
**幻灯片内容**：标题 + 副标题 + 演讲者
**演讲词**：
> （此处是完整的口语化演讲词，自然、有感染力，不是干巴巴的要点罗列）
**时长**：1 分钟
**提示**：[开场节奏建议、肢体语言提示]
---
## 第 2 页 — 问题引入
**幻灯片内容**：一个引人思考的问题/数据
**演讲词**：
> ...
...以此类推
脚本质量要求：
- 演讲词必须是完整的口语句子，不是关键词列表
- 开头要有钩子（故事/数据/提问），不要自我介绍开场
- 每页有一个核心观点，不堆砌
- 转场自然，页与页之间有过渡句
- 结尾有行动号召（CTA）
Step 4：生成 HTML 幻灯片
生成一个单文件 HTML，包含完整的幻灯片播放器。
4.1 整体结构
<!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>
4.2 幻灯片引擎（JavaScript）
必须实现以下功能：
导航控制：
// 键盘控制
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');
}
4.3 控制栏 UI
底部控制栏（非全屏时可见，全屏时悬停底部显示）：
┌────────────────────────────────────────────────────┐
│ ◀ │ 3 / 12 │ ▶ │ ▶ Auto │ ⛶ Full │ 📥 PDF │ 📝 Notes │
└────────────────────────────────────────────────────┘
- 进度条：页码指示器 + 可点击的进度条
- 自动播放按钮：切换自动播放，显示当前状态
- 全屏按钮：进入/退出全屏
- PDF 按钮：触发打印/导出 PDF
- 备注按钮：显示/隐藏演讲者备注
控制栏样式使用当前设计风格的 accent 色。
4.4 幻灯片切换动画
默认使用淡入滑动效果：
.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);
}
4.5 打印 / PDF 样式
@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;
}
}
4.6 幻灯片内容设计原则
每张幻灯片的内容遵循以下设计原则：
文字极简：
- 标题：最多 1 行
- 内容：最多 3-5 个要点，每个要点一行
- 绝不放大段文字，演讲词放在备注里
视觉层级清晰：
- 大标题突出核心观点
- 数字/数据用超大字号呈现
- 图标使用 emoji 或 SVG inline，不依赖外部图片
常用页面类型：
| 类型 | 布局 | 适用场景 |
|---|---|---|
| 封面 | 居中大标题 + 副标题 + 演讲者 | 第 1 页 |
| 章节页 | 居中章节标题 + 装饰元素 | 章节分隔 |
| 观点页 | 大字号核心观点 + 小字补充 | 关键论点 |
| 列表页 | 标题 + 3-5 条要点（带图标） | 罗列要点 |
| 数据页 | 超大数字 + 说明文字 | 数据冲击 |
| 对比页 | 左右/上下两栏对比 | Before/After |
| 引用页 | 大段引言 + 出处 | 名言/用户反馈 |
| CTA 页 | 行动号召 + 联系方式 | 结尾 |
4.7 演讲者备注面板
侧边滑出面板，显示当前页的完整演讲词：
.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);
}
4.8 响应式适配
/* 幻灯片容器保持 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; }
}
Step 5：输出与交付
- 演讲脚本保存为
{主题}_演讲脚本.md - HTML 幻灯片保存为
{主题}_slides.html - 两个文件都保存到用户当前工作目录
- 用
open {主题}_slides.html在浏览器中预览 - 告知用户操作方式：
✅ 演讲脚本和幻灯片已生成！
📄 演讲脚本：{主题}_演讲脚本.md
🎬 HTML 幻灯片：{主题}_slides.html（已在浏览器中打开）
操作指南：
→ / ← / Space 翻页
F 全屏
A 自动播放（5秒/页）
N 显示演讲者备注
P 导出 PDF（浏览器打印）
点击右半屏 下一页
点击左半屏 上一页
需要调整内容、风格或页数吗？
风格获取失败的降级方案
如果无法从 GitHub 获取 DESIGN.md：
- 使用内置的通用设计变量（基于 Stripe 风格的中性渐变方案）
- 告知用户获取失败，已使用默认风格
- 默认配色：深色背景
#0a0a0a，白色文字，渐变 accent
注意事项
- HTML 是单文件，不依赖本地资源
- 外部依赖仅限：Google Fonts CDN
- 幻灯片保持 16:9 比例
- 每页内容极简，详细内容放演讲者备注
- 动画轻量，不卡顿
- 打印 PDF 时隐藏所有控制元素
- 如果主题是英文，脚本默认用英文；中文主题默认中文