// HTML PPT 精致演示文稿设计器 - 将用户内容转化为精致的HTML演示文稿页面，LLM 智能设计优先，支持多种视觉风格、动效设计、色彩认知系统。触发词：PPT、演示文稿、HTML幻灯片、slide、presentation、做PPT、制作演示。
| name | html-ppt-designer |
| description | HTML PPT 精致演示文稿设计器 - 将用户内容转化为精致的HTML演示文稿页面，LLM 智能设计优先，支持多种视觉风格、动效设计、色彩认知系统。触发词：PPT、演示文稿、HTML幻灯片、slide、presentation、做PPT、制作演示。 |
| allowed-tools | Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion |
版本: 5.2 架构: LLM 智能设计优先 + 本地模板 fallback + 原文配图提取 + Unsplash 配图 + 真翻页引擎 + 6 种动画 + 视频播客模式 + 内嵌字幕 + 国产 TTS + 纯色设计 + 默认图标装饰 + 控制面板自动隐藏 更新日期: 2026-02-13
在使用本 Skill 的配图和 AI 功能前，需要配置相应的 API Key。
| 功能 | 环境变量 | 申请地址 | 免费额度 |
|---|---|---|---|
| Unsplash 配图 | UNSPLASH_ACCESS_KEY | https://unsplash.com/developers | 50次/小时 |
| AI 生成插图 | ZENMUX_API_KEY | https://zenmux.ai | 按用量计费 |
| 功能 | 环境变量 | 申请地址 | 费用 |
|---|---|---|---|
| OpenAI TTS | OPENAI_API_KEY | https://platform.openai.com | ~$0.015/分钟 |
| 火山引擎 TTS | VOLCENGINE_ACCESS_KEY + VOLCENGINE_SECRET_KEY | https://console.volcengine.com | 按用量计费 |
| 智谱 AI TTS | ZHIPUAI_API_KEY | https://open.bigmodel.cn | 按用量计费 |
| Gemini 转录 | GEMINI_API_KEY | https://aistudio.google.com | ~$0.001/分钟 |
方法一：临时设置（当前终端会话）
export UNSPLASH_ACCESS_KEY="your-unsplash-access-key"
export ZENMUX_API_KEY="your-zenmux-api-key"
方法二：永久设置（添加到 shell 配置文件）
# 编辑 ~/.zshrc 或 ~/.bashrc
echo 'export UNSPLASH_ACCESS_KEY="your-unsplash-access-key"' >> ~/.zshrc
echo 'export ZENMUX_API_KEY="your-zenmux-api-key"' >> ~/.zshrc
# 重新加载配置
source ~/.zshrc
export UNSPLASH_ACCESS_KEY="your-key"export ZENMUX_API_KEY="your-key"旧架构（v3.x）：预设 16 种固定模板 → 用户选择 → 填充内容 新架构（v4.0）：LLM 分析内容 → 智能生成设计 → 动态创建 CSS
用户内容
↓
LLM 分析（内容类型、情感基调、主题色彩、目标受众）
↓
LLM 生成：
├── 色彩方案（主色/辅助色/背景色/文字色）
├── 排版风格（字体组合/字号层级/间距系统）
├── 布局结构（封面/内容页/金句页/结尾页 各自的设计）
├── 视觉元素（装饰图形/分隔线/卡片样式）
└── 动效选择（推荐适合的翻页动画）
↓
生成完整 HTML（内嵌自定义 CSS）
↓
[失败时] → fallback 到本地预设模板
| 场景 | 使用方式 |
|---|---|
| 正常使用 | LLM 动态生成设计，不使用本地模板 |
| 网络问题 | LLM 无法响应时，fallback 到 16 种预设模板 |
| 用户指定 | 用户明确要求某种预设风格时使用 |
| 快速预览 | 需要快速生成时可选使用 |
LLM 在生成设计前会分析以下维度：
| 维度 | 分析内容 | 影响设计 |
|---|---|---|
| 内容类型 | 演讲/教程/报告/故事/数据/产品 | 整体风格方向 |
| 情感基调 | 严肃/活泼/专业/温暖/科技/艺术 | 色彩和字体选择 |
| 主题领域 | 科技/商业/教育/生活/艺术 | 配色和装饰元素 |
| 目标受众 | 高管/大众/学生/专业人士 | 信息密度和复杂度 |
| 使用场景 | 演讲/分享/汇报/营销 | 视觉冲击力程度 |
/* LLM 根据内容生成 */
--primary: #XXXXXX; /* 主色 - 品牌感/情感基调 */
--primary-light: #XXXXXX; /* 主色浅版 - hover/强调 */
--secondary: #XXXXXX; /* 辅助色 - 对比/层次 */
--accent: #XXXXXX; /* 点缀色 - 吸引注意 */
--bg-page: #XXXXXX; /* 页面背景 */
--bg-card: #XXXXXX; /* 卡片背景 */
--text-heading: #XXXXXX; /* 标题文字 */
--text-body: #XXXXXX; /* 正文文字 */
--text-muted: #XXXXXX; /* 弱化文字 */
/* LLM 推荐字体组合 */
--font-heading: 'Font Name', fallback; /* 标题字体 */
--font-body: 'Font Name', fallback; /* 正文字体 */
--font-accent: 'Font Name', fallback; /* 强调字体（如数字、引用） */
/* 字号层级 */
--text-hero: XXpx; /* 封面大标题 */
--text-h1: XXpx; /* 页面标题 */
--text-h2: XXpx; /* 段落标题 */
--text-body: XXpx; /* 正文 */
--text-small: XXpx; /* 辅助文字 */
/* 间距系统 */
--spacing-xs: Xpx;
--spacing-sm: Xpx;
--spacing-md: Xpx;
--spacing-lg: Xpx;
--spacing-xl: Xpx;
/* 圆角 */
--radius: Xpx; /* 卡片圆角 */
--radius-sm: Xpx; /* 小元素圆角 */
/* 阴影 */
--shadow: ...; /* 卡片阴影 */
每种页面类型都有独立的设计方案：
| 页面类型 | LLM 设计要点 |
|---|---|
| 封面页 | 标题位置、副标题样式、装饰元素、背景处理 |
| 内容页 | 标题样式、正文排版、图文布局、信息层次 |
| 金句页 | 引号样式、文字大小、背景氛围、强调方式 |
| 结尾页 | 结束语设计、联系方式、行动号召 |
用户输入内容/URL/音视频
↓
[阶段零] 输入处理
├── 纯文本 → 直接进入阶段一
├── 网页 URL → fetch_webpage.py 提取正文 + **下载原始图片** → 进入阶段一
├── YouTube URL → transcribe_audio.py 下载+转录 → 进入阶段一
├── 小宇宙 URL → transcribe_audio.py 下载+转录 → 进入阶段一
└── 音频直链/文件 → transcribe_audio.py 转录 → 进入阶段一
↓
[阶段一] 内容解析
├── 提取标题、副标题、核心观点
├── 分析内容类型和情感基调
└── 拆分幻灯片页面
↓
[阶段二] 设计策略选择（AskUserQuestion）
│
├── D1 LLM 智能设计 ⭐ 推荐
│ └── LLM 根据内容自动生成最佳设计
│
├── D2 指定风格参考
│ └── 用户指定参考风格，LLM 在此基础上定制
│
└── D3 使用预设模板
└── 直接使用 16 种本地模板之一
↓
[阶段三] 输出模式选择（AskUserQuestion）★ 新增
│
├── M1 仅 HTML PPT（默认）
│ └── 标准页数，适合演讲/汇报
│
└── M2 视频播客模式 ⭐ 视频导出推荐
│
├── 内容增强策略：
│ ├── 每个主题拆分为 2-3 个子页面（避免单页停留过久）
│ ├── 增加数据卡片、关键数字、进度条
│ ├── 每页包含：标题 + 核心观点 + 数据/图表 + 引用
│ └── 页数增加 50-100%，内容密度提升
│
└── 配图方案推荐：
├── P1 Unsplash 氛围照片（封面/金句页）
├── P4 Excalidraw 技术图表（数据/流程页）
└── N2 信息图表（数据展示页）
↓
[阶段四] 详细配置（AskUserQuestion）
│
├── 4.1 页数密度（根据模式调整）
│ ├── M1 标准版：10-12 页
│ └── M2 增强版：18-25 页（自动拆分）
│
├── 4.2 配图方案
│ ├── P1 Unsplash 高质量照片
│ ├── P2 AI 生成插图
│ ├── P4 Excalidraw 技术图表 ⭐ 视频播客推荐
│ ├── N1 Iconify 图标方案
│ ├── N2 信息图表方案 ⭐ 视频播客推荐
│ └── N4 纯文字排版
│
└── 4.3 翻页动画
└── Fade / Cinematic / Zoom / Slide / Flip / Cut
↓
[阶段五] 内容增强（M2 视频播客模式专属）
│
├── 拆分长内容为多页
│ └── 原本 1 页 → 拆分为「概念页 + 数据页 + 案例页」
│
├── 添加视觉元素
│ ├── 数据卡片（大数字 + 说明）
│ ├── 时间线/流程图
│ ├── 对比表格
│ └── 引用框/金句框
│
└── 丰富讲解文字
└── 每页生成独立的 data-narration
↓
[阶段六] 配图获取
├── Unsplash 照片搜索
├── AI 生成插图（可选）
├── Excalidraw 技术图表
└── 或纯图标/几何装饰
↓
[阶段七] HTML 生成
├── LLM 生成完整 CSS 样式
├── 内嵌到 HTML 中
├── 添加翻页引擎
└── 生成最终文件（含 data-narration）
↓
[阶段八] 输出与预览
↓
[阶段九] 视频导出（可选，M2 模式强烈推荐）
├── 确认讲解文字（可编辑）
├── 选择配音服务（Edge TTS / OpenAI TTS）
├── 选择语音风格（云健/晓晓/其他）
├── 字幕配置
│ ├── 是否启用内嵌字幕（默认启用）
│ ├── 字幕样式：白字黑背景圆角
│ ├── 字体：PingFang SC（苹果平方）
│ └── 按句子分割，逐句显示，与音频同步
├── 音频驱动截图（每页时长 = 音频时长）
└── 输出 MP4 文件（含内嵌字幕）
问题：普通 PPT 转视频时，单页停留 30-50 秒，画面太单调
解决：
| 原内容类型 | 拆分方案 | 示例 |
|---|---|---|
| 概念介绍 | 概念页 + 案例页 + 总结页 | 「AI 原生代理公司」拆分为 3 页 |
| 数据展示 | 数据概览 + 详细数据 + 趋势分析 | 「市场数据」拆分为 3 页 |
| 方法步骤 | 概述页 + 每步骤独立页 | 「三步法」拆分为 4 页 |
| 对比分析 | 对比概览 + A 方案 + B 方案 + 结论 | 「方案对比」拆分为 4 页 |
数据卡片
┌─────────────────────────────────────┐
│ ████████████ $2.5万亿 │
│ ████████████ 每年政府欺诈损失 │
│ ████████████ │
│ 仅医保每年损失数百亿美元 │
└─────────────────────────────────────┘
进度条/时间线
┌─────●───────────────────────────────┐
│ 阶段1 → 阶段2 → 阶段3 │
│ ✓ 进行中 待完成 │
└─────────────────────────────────────┘
引用框
┌─────────────────────────────────────┐
│ "AI 原生公司现在可以比以往 │
│ 更快、更便宜、更有野心地构建。" │
│ — YC RFS │
└─────────────────────────────────────┘
问题：普通 HTML PPT 字号在视频导出后过小，大量留白，用户看不清。
解决方案：视频模式使用 1.5x 字号，减少边距，提高信息密度。
| 元素 | 普通模式 | 视频模式 | 说明 |
|---|---|---|---|
| 封面大标题 | 72px | 108px | 确保视频封面冲击力 |
| 页面标题 | 42px | 64px | 清晰可读 |
| 正文 | 20px | 32px | 视频舒适阅读 |
| 引用文字 | 36px | 52px | 金句突出 |
| 页边距 | 80-120px | 40-60px | 减少留白 |
| 行高 | 1.8 | 2.0 | 视频舒适间距 |
CSS 变量覆盖：
/* 视频模式专用 */
.video-mode {
--text-hero: 108px;
--text-h1: 64px;
--text-h2: 48px;
--text-body: 32px;
--text-small: 24px;
--spacing-page: 48px;
--line-height: 2.0;
}
{
"questions": [
{
"question": "请选择输出模式（决定内容密度和页数）",
"header": "输出模式",
"multiSelect": false,
"options": [
{
"label": "M1 仅 HTML PPT",
"description": "标准页数（10-12页），适合演讲、汇报、现场展示"
},
{
"label": "M2 视频播客模式 ⭐ 推荐",
"description": "增强页数（18-25页），内容拆分更细，每页10-20秒，适合视频导出"
}
]
}
]
}
将 HTML PPT 幻灯片转换为带配音和字幕的 MP4 视频，支持：
旧流程（v3.0）：
每页 1 张截图 + 完整字幕 → 字幕不随音频滚动
新流程（v3.2）：
讲解文字按句子分割 → 每句生成 1 张截图 → 字幕时长按字数分配 → 100% 同步滚动
| 特性 | 说明 |
|---|---|
| 样式 | 白色文字 + 半透明黑色背景 + 12px 圆角 |
| 字体 | PingFang SC（苹果平方），28px |
| 位置 | 底部居中，距离底部 60px |
| 同步方式 | 按句子分割，每句时长 = (该句字数 / 总字数) × 页面音频时长 |
| 最小显示 | 每句至少 1.5 秒 |
# 系统依赖
brew install ffmpeg
# Python 依赖
pip install playwright edge-tts
# 安装浏览器（首次使用）
playwright install chromium
# 如需使用 OpenAI TTS
pip install openai
# 基本用法 - Edge TTS（免费），默认启用字幕
python3 scripts/ppt_to_video.py presentation.html -o output.mp4
# 禁用字幕
python3 scripts/ppt_to_video.py presentation.html --no-subtitle -o output.mp4
# 使用 OpenAI TTS（需配置 OPENAI_API_KEY）
python3 scripts/ppt_to_video.py presentation.html --tts openai -o output.mp4
# 使用火山引擎 TTS（国产推荐）
python3 scripts/ppt_to_video.py presentation.html \
--tts volcengine --voice zh_female_tianmeixiaoyuan -o output.mp4
# 使用智谱 AI TTS
python3 scripts/ppt_to_video.py presentation.html --tts zhipu -o output.mp4
# 使用 Fish Speech（本地部署）
python3 scripts/ppt_to_video.py presentation.html --tts fish -o output.mp4
# 指定语音
python3 scripts/ppt_to_video.py presentation.html \
--voice zh-CN-YunxiNeural -o output.mp4
# 自定义字幕样式
python3 scripts/ppt_to_video.py presentation.html \
--subtitle-fontsize 32 --subtitle-radius 16 -o output.mp4
# 自定义分辨率和帧率
python3 scripts/ppt_to_video.py presentation.html \
--resolution 1280x720 --fps 24 -o output.mp4
# 列出可用语音
python3 scripts/ppt_to_video.py --list-voices
python3 scripts/ppt_to_video.py --list-voices --tts volcengine
# 列出所有 TTS 服务
python3 scripts/ppt_to_video.py --list-services
| 参数 | 默认值 | 说明 |
|---|---|---|
--no-subtitle | - | 禁用内嵌字幕 |
--subtitle-font | PingFang SC, Noto Sans SC | 字幕字体 |
--subtitle-fontsize | 28 | 字幕字号（像素） |
--subtitle-radius | 12 | 字幕背景圆角（像素） |
| 服务 | 费用 | 音质 | 速度 | 推荐场景 |
|---|---|---|---|---|
| Edge TTS | 免费 | 良好 | 快 | 日常使用 ⭐ 推荐 |
| OpenAI TTS | ~$0.015/分钟 | 优秀 | 快 | 商业/高质量需求 |
| 火山引擎 | 按量付费 | 优秀 | 快 | 中文专业场景 |
| 智谱 AI | 按量付费 | 优秀 | 快 | 中文专业场景 |
| Fish Speech | 免费 | 良好 | 中 | 本地部署/隐私需求 |
# OpenAI TTS
export OPENAI_API_KEY="sk-..."
# 火山引擎 TTS（字节跳动）
export VOLCENGINE_ACCESS_KEY="your-access-key"
export VOLCENGINE_SECRET_KEY="your-secret-key"
export VOLCENGINE_APP_ID="your-app-id"
# 智谱 AI TTS
export ZHIPUAI_API_KEY="your-api-key"
# Fish Speech（本地服务）
export FISH_SPEECH_URL="http://localhost:8080"
| 语音 ID | 描述 |
|---|---|
zh-CN-YunjianNeural | 云健 - 男声，新闻播报 ⭐ 默认 |
zh-CN-XiaoxiaoNeural | 晓晓 - 女声，自然亲切 |
zh-CN-YunxiNeural | 云希 - 男声，年轻活力 |
zh-CN-XiaoyiNeural | 晓伊 - 女声，温柔 |
zh-CN-YunfengNeural | 云枫 - 男声，沉稳 |
zh-CN-YunyangNeural | 云扬 - 男声，专业客服 |
zh-CN-XiaochenNeural | 晓辰 - 女声，新闻 |
zh-CN-XiaohanNeural | 晓涵 - 女声，温暖 |
| 语音 ID | 描述 |
|---|---|
zh_female_tianmeixiaoyuan | 甜美小媛 - 女声，甜美亲切 ⭐ 推荐 |
zh_female_shuangkuaisisi | 爽快思思 - 女声，爽朗 |
zh_female_wanwan | 湾湾 - 女声，台湾腔 |
zh_female_chenshu | 成熟姐姐 - 女声，知性 |
zh_male_chunhou | 醇厚男声 - 男声，稳重 |
zh_male_narration | 解说男声 - 男声，专业 |
zh_male_qingxinnansheng | 清新男声 - 男声，年轻 |
zh_male_huangzhong | 黄钟 - 男声，播音 |
HTML PPT 文件
↓
┌─────────────────────────────────────┐
│ 1. 提取讲解文字 │
│ - 读取 data-narration 属性 │
│ - 或提取页面文本内容 │
└─────────────────────────────────────┘
↓
┌─────────────────────────────────────┐
│ 2. 生成所有音频 │
│ - Edge TTS / OpenAI TTS │
│ - 每页一条音频 │
│ - 使用 ffprobe 获取实际时长 │
└─────────────────────────────────────┘
↓
┌─────────────────────────────────────┐
│ 3. 字幕分割（v3.2 新增） │
│ - 按句号分割讲解文字 │
│ - 按字数比例分配每句时长 │
│ - 确保每句至少 1.5 秒 │
└─────────────────────────────────────┘
↓
┌─────────────────────────────────────┐
│ 4. 带字幕截图（v3.2 新增） │
│ - 每句生成一张截图 │
│ - CSS 渲染字幕到画面上 │
│ - 等待外部图片加载完成 │
└─────────────────────────────────────┘
↓
┌─────────────────────────────────────┐
│ 5. 合成视频 │
│ - 图片序列 → H.264 视频 │
│ - 拼接音频轨道 │
│ - 视频/音频/字幕 100% 同步 │
│ - 输出 MP4 文件 │
└─────────────────────────────────────┘
可在 HTML 的 .slide 元素上添加 data-* 属性：
<!-- 自定义讲解文字 -->
<div class="slide" data-narration="这是自定义的讲解文字，会覆盖自动生成的内容">
...
</div>
<!-- 自定义展示时长（毫秒） -->
<div class="slide" data-duration="8000">
...
</div>
你是一位国际顶级演示文稿设计师。请分析以下内容，并生成最适合的视觉设计方案。
【内容信息】
标题：{title}
类型：{content_type}
情感基调：{emotion}
目标受众：{audience}
主题领域：{domain}
【页面概览】
{slides_overview}
请提供：
1. 设计理念（100字内）
2. 色彩方案（8个颜色值）
3. 字体推荐（中英文各1-2个）
4. 布局特点描述
5. 推荐的翻页动画
基于以下设计规格，生成完整的 CSS 样式：
【设计规格】
{design_spec}
【要求】
1. 使用 CSS 变量定义所有颜色
2. 包含以下页面类型样式：
- .slide-cover（封面页）
- .slide-content（内容页）
- .slide-quote（金句页）
- .slide-ending（结尾页）
3. 包含控制面板样式
4. 包含响应式设计（768px/1024px 断点）
5. 使用 Google Fonts（提供 import 语句）
6. 输出完整可用的 CSS 代码
{
"concept": "温暖科技感 - 结合科技主题的冷峻与人文关怀的温度",
"colors": {
"primary": "#2563EB",
"primary_light": "#3B82F6",
"secondary": "#64748B",
"accent": "#F59E0B",
"bg_page": "#0F172A",
"bg_card": "#1E293B",
"bg_section": "#334155",
"text_heading": "#F1F5F9",
"text_body": "#CBD5E1",
"text_muted": "#94A3B8",
"border": "rgba(148, 163, 184, 0.2)"
},
"fonts": {
"heading": "'Inter', 'Noto Sans SC', sans-serif",
"body": "'Inter', 'Noto Sans SC', sans-serif",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap"
},
"spacing": {
"xs": "4px",
"sm": "8px",
"md": "16px",
"lg": "32px",
"xl": "64px"
},
"radius": "8px",
"transition": "cinematic",
"layouts": {
"cover": ".slide-cover { background: var(--bg-page); border-bottom: 4px solid var(--primary); }",
"content": ".slide-content .content-grid { gap: 48px; }",
"quote": ".slide-quote .quote-text { font-size: 36px; }",
"ending": ".slide-ending { background: var(--bg-page); border-top: 4px solid var(--accent); }"
}
}
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
concept | string | 否 | 设计理念描述，用于日志输出 |
colors | object | 是 | 色彩方案，所有颜色使用 hex 或 rgba |
fonts | object | 是 | 字体设置 |
spacing | object | 否 | 间距系统 |
radius | string | 否 | 圆角大小 |
transition | string | 否 | 默认翻页动画 |
layouts | object | 否 | 各页面类型的自定义 CSS |
{
"colors": {
"primary": "#1A1A1A",
"bg_page": "#FFFFFF",
"bg_card": "#FFFFFF",
"text_heading": "#1A1A1A",
"text_body": "#333333"
},
"fonts": {
"heading": "'Noto Serif SC', serif",
"body": "'Noto Sans SC', sans-serif",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap"
},
"transition": "fade"
}
scripts/transcribe_audio.py用户输入内容/URL/音视频链接/本地文件
↓
[阶段零] 输入类型检测与预处理
├── 纯文本 → 直接进入阶段一
├── 网页 URL → fetch_webpage.py 提取正文 → 进入阶段一
├── YouTube URL → transcribe_audio.py 下载+转录 → 进入阶段一
├── 小宇宙 URL → transcribe_audio.py 下载+转录 → 进入阶段一
├── 音频直链/文件 → transcribe_audio.py 转录 → 进入阶段一
└── 转录模式选择（AskUserQuestion）
├── local 本地 MLX-Whisper（免费，推荐 Apple Silicon）
├── api OpenAI Whisper API（$0.006/分钟，快速）
└── gemini Gemini Flash API（~$0.001/分钟，最快）
↓
[阶段一] 内容解析与大纲生成
├── 提取标题、副标题
├── 识别内容类型（演讲/教程/报告/故事/数据展示）
├── 拆分幻灯片页面
└── 生成预览大纲（展示给用户确认）
↓
[阶段二] 风格选择（直接展示 + 用户输入）
│
├── 第一步：在文本中展示完整风格列表（17种）
│ └── 表格形式，包含编号(A1-E2)、名称、特征、适用场景
│
└── 第二步：AskUserQuestion 让用户选择
├── [智能推荐风格] ⭐ 推荐
├── A1 TED 演讲
├── D2 Dark Mode
└── Other — 输入其他风格编号或名称
↓
[阶段三] 详细配置（AskUserQuestion - 多选一次完成）
│
├── 3.1 页数密度
│ ├── S1 精简版（5-8 页）- 快速概览、电梯演讲
│ ├── S2 标准版（10-12 页）- 常规演示 ⭐ 默认
│ └── S3 详细版（15-20 页）- 完整叙事、深度分享
│
├── 3.2 配图方案（★ 最重要，必须询问）
│ │
│ ├── 需要配图
│ │ ├── P1 Unsplash 高质量照片 ⭐ 推荐
│ │ │ └── 自动搜索匹配内容，含摄影师署名
│ │ ├── P2 AI 生成插图
│ │ │ └── 根据 PPT 风格自动生成匹配插图
│ │ ├── P3 混合方案
│ │ │ └── 封面/金句用照片，内容页用图标
│ │ └── P4 Excalidraw 技术图表 ⭐ 技术PPT推荐
│ │ └── 自动生成架构图/流程图/系统图，输出为SVG
│ │
│ └── 不需要配图（纯文字/图示方案）
│ ├── N1 Iconify 图标方案 ⭐ 推荐
│ │ └── 每页配主题图标，视觉丰富度足够
│ ├── N2 信息图表方案
│ │ └── 流程图/时间线/关系图自动生成
│ ├── N3 几何装饰方案
│ │ └── 色块/线条/形状装饰，现代感强
│ └── N4 纯文字排版
│ └── 极简风格，完全依赖排版和字体
│
└── 3.3 翻页动画（可选，有默认值）
├── Fade（淡入淡出）⭐ 默认
├── Cinematic（电影感）- 适合 TED/叙事风格
├── Zoom（缩放聚焦）- 适合科技/数据风格
├── Slide（水平滑动）- 适合教育/教程风格
├── Flip（3D 翻转）- 适合创意/艺术风格
└── Cut（瞬间切换）- 适合 Brutalist/高节奏
↓
[阶段四] 配图获取/生成（⭐ v5.2 智能优先级）
│
├── 优先级 1：原文配图 ⭐ 零成本、最佳匹配
│ └── 网页抓取时已自动下载到 ~/Desktop/ppt_images/
│ └── 直接使用，无需额外请求
│
├── 优先级 2：Unsplash 照片
│ └── 原文无图时使用，fetch_unsplash.py 自动搜索
│
├── 优先级 3：AI 生成插图
│ └── generate_images.py，需要 ZENMUX_API_KEY
│
├── 优先级 4：Excalidraw 技术图表
│ └── 技术内容自动生成架构图/流程图
│
└── 优先级 5：Iconify 图标
└── 始终作为辅助视觉元素
│ ├── 自动识别技术内容页面（架构/流程/系统）
│ ├── 调用 excalidraw skill 生成 .excalidraw JSON
│ ├── 使用 excalidraw_to_svg.py 转换为 SVG
│ └── SVG 直接嵌入 HTML（或 base64 data URI）
├── 图标方案 → Iconify 自动匹配主题图标
└── 返回视觉资源映射表
↓
[阶段五] HTML 生成
├── 加载对应风格模板（templates/）
├── 插入视觉资源（图片/图标/图表）
├── 添加前端交互控制
│ ├── 6 种翻页动画
│ ├── 自动播放（慢/中/快）
│ └── 导航点 + 键盘 + 触摸
└── 生成完整 HTML 文件
↓
[阶段六] 输出与预览
├── 保存到桌面（~/Desktop/）
├── 展示大纲摘要
└── 询问修改意见（可重新选择风格/配图/页数）
↓
[阶段七] 视频导出（可选，AskUserQuestion 询问）
│
├── V1 导出为视频 ⭐ 推荐（分享/发布场景）
│ ├── 选择配音服务
│ │ ├── Edge TTS（免费，16种中文语音）
│ │ └── OpenAI TTS（$0.015/分钟，高质量）
│ ├── 选择语音风格
│ │ ├── 云健（男声，新闻播报）⭐ 默认
│ │ ├── 晓晓（女声，自然亲切）
│ │ └── 其他语音...
│ ├── 自动生成/编辑讲解文字
│ ├── ppt_to_video.py 转换
│ └── 输出 MP4（同目录）
│
└── V2 跳过（仅保留 HTML）
重要：先在文本中展示完整风格列表，然后让用户直接输入选择。
在回复文本中直接展示所有 17 种风格：
┌─────────────────────────────────────────────────────────────────────┐
│ 🎨 完整风格列表 (17种) — 请输入编号或名称选择 │
├─────────────────────────────────────────────────────────────────────┤
│ Classic/Professional 经典专业 │
│ ├── A1 TED 演讲 ⭐ 叙事演讲 深色背景+大图overlay │
│ ├── A2 Apple Keynote ⭐ 产品发布 极简白底+超大留白 │
│ ├── A3 Typical PPT 商务汇报 深蓝+浅灰标准模板 │
│ ├── A4 Gamma 创业路演 现代卡片+圆角 │
│ └── A5 Consulting 战略咨询 深蓝+金+数据驱动 │
├─────────────────────────────────────────────────────────────────────┤
│ Editorial/Publishing 编辑出版 │
│ ├── B1 Editorial 品牌故事 杂志排版+衬线字体 │
│ ├── B2 Swiss 设计作品 严格网格+红色色带 │
│ └── B3 Newspaper 新闻资讯 报纸版式+多栏文字 │
├─────────────────────────────────────────────────────────────────────┤
│ Design/Art 设计艺术 │
│ ├── C1 Bauhaus 艺术教育 几何色块+红黄蓝三原色 │
│ ├── C2 Kinfolk 生活方式 莫兰迪色调+胶片质感 │
│ ├── C3 Muji 极简品牌 白灰为主+超细线条 │
│ └── C4 Brutalist 先锋设计 粗犷大字+高对比 │
├─────────────────────────────────────────────────────────────────────┤
│ Tech/Future 科技未来 │
│ ├── D1 Neo-Tokyo ⭐ 科技产品 霓虹粉+青+暗黑底+故障艺术 │
│ ├── D2 Dark Mode ⭐ 开发工具 深灰底+冷蓝强调+简洁边框 │
│ └── D3 红黑白科技 国产科技 严格三色+电路风 │
├─────────────────────────────────────────────────────────────────────┤
│ Education/Creative 教育创意 │
│ ├── E1 卡通 2.5D 儿童教育 扁平阴影+多彩圆润 │
│ └── E2 Education ⭐ 在线课程 色彩编码+互动感 │
└─────────────────────────────────────────────────────────────────────┘
💡 根据您的内容类型「{content_type}」，推荐：{recommended_style}
{
"questions": [{
"question": "请选择视觉风格（可输入编号如 A1/D2 或完整名称）",
"header": "风格选择",
"multiSelect": false,
"options": [
{"label": "[推荐风格] ⭐ 推荐", "description": "[推荐理由]"},
{"label": "A1 TED 演讲", "description": "深色背景+大图overlay，叙事演讲"},
{"label": "D2 Dark Mode", "description": "深灰底+冷蓝强调色，开发者工具"},
{"label": "Other — 输入其他风格", "description": "输入编号(A1-E2)或名称，如：A3、C2 Kinfolk、Neo-Tokyo"}
]
}]
}
用户可能输入的格式：
A1、D2、E1TED 演讲、Dark Mode、卡通 2.5DNeo-Tokyo、Editorial、Bauhaus┌─────────────────────────────────────────────────────────────────────┐
│ 🎨 完整风格列表 (17种) │
├─────────────────────────────────────────────────────────────────────┤
│ Classic/Professional 经典专业 │
│ ├── A1 TED 演讲 ⭐ 叙事演讲 深色背景+大图overlay │
│ ├── A2 Apple Keynote ⭐ 产品发布 极简白底+超大留白 │
│ ├── A3 Typical PPT 商务汇报 深蓝+浅灰标准模板 │
│ ├── A4 Gamma 创业路演 现代卡片+圆角 │
│ └── A5 Consulting 战略咨询 深蓝+金+数据驱动 │
├─────────────────────────────────────────────────────────────────────┤
│ Editorial/Publishing 编辑出版 │
│ ├── B1 Editorial 品牌故事 杂志排版+衬线字体 │
│ ├── B2 Swiss 设计作品 严格网格+红色色带 │
│ └── B3 Newspaper 新闻资讯 报纸版式+多栏文字 │
├─────────────────────────────────────────────────────────────────────┤
│ Design/Art 设计艺术 │
│ ├── C1 Bauhaus 艺术教育 几何色块+红黄蓝三原色 │
│ ├── C2 Kinfolk 生活方式 莫兰迪色调+胶片质感 │
│ ├── C3 Muji 极简品牌 白灰为主+超细线条 │
│ └── C4 Brutalist 先锋设计 粗犷大字+高对比 │
├─────────────────────────────────────────────────────────────────────┤
│ Tech/Future 科技未来 │
│ ├── D1 Neo-Tokyo ⭐ 科技产品 霓虹粉+青+暗黑底+故障艺术 │
│ ├── D2 Dark Mode ⭐ 开发工具 深灰底+冷蓝强调+简洁边框 │
│ └── D3 红黑白科技 国产科技 严格三色+电路风 │
├─────────────────────────────────────────────────────────────────────┤
│ Education/Creative 教育创意 │
│ ├── E1 卡通 2.5D 儿童教育 扁平阴影+多彩圆润 │
│ └── E2 Education ⭐ 在线课程 色彩编码+互动感 │
└─────────────────────────────────────────────────────────────────────┘
{
"questions": [
{
"question": "希望生成多少页的演示文稿？",
"header": "页数密度",
"multiSelect": false,
"options": [
{"label": "精简版 (5-8 页)", "description": "核心观点提炼，适合快速分享"},
{"label": "标准版 (10-12 页)", "description": "完整叙事，适合演讲汇报"},
{"label": "详细版 (15-20 页)", "description": "深度解读，适合完整展示"}
]
},
{
"question": "是否需要配图？（重要）",
"header": "配图方案",
"multiSelect": false,
"options": [
{"label": "Unsplash 高质量照片", "description": "自动搜索匹配内容的专业照片"},
{"label": "AI 生成插图", "description": "根据风格自动生成匹配插图"},
{"label": "Excalidraw 技术图表", "description": "自动生成架构图/流程图/系统图，技术PPT推荐"},
{"label": "Iconify 图标方案", "description": "每页配主题图标，无需等待"},
{"label": "纯文字排版", "description": "极简风格，完全依赖排版"}
]
},
{
"question": "翻页动画偏好？",
"header": "动画效果",
"multiSelect": false,
"options": [
{"label": "Fade 淡入淡出", "description": "简洁优雅，适合大多数场景"},
{"label": "Cinematic 电影感", "description": "缩放+模糊，叙事感强"},
{"label": "Zoom 缩放聚焦", "description": "视觉冲击力强"},
{"label": "Slide 水平滑动", "description": "经典翻页感"}
]
}
]
}
| 内容类型 | 推荐风格 | 备选风格 | 推荐配图 |
|---|---|---|---|
| 演讲/叙事 | A1 TED 演讲 | D1 Neo-Tokyo, B1 Editorial | P1 Unsplash |
| 产品发布 | A2 Apple Keynote | A4 Gamma | P1 Unsplash |
| 商务汇报 | A3 Typical PPT | A5 Consulting | N1 图标 |
| 数据报告 | A5 Consulting | B3 Newspaper | N2 信息图表 |
| 科技主题 | D1 Neo-Tokyo | D2 Dark Mode, D3 红黑白科技 | P4 Excalidraw |
| 开发者/工具 | D2 Dark Mode | D1 Neo-Tokyo | P4 Excalidraw |
| 架构设计 | A5 Consulting | D2 Dark Mode | P4 Excalidraw |
| 教育/教程 | E2 Education | E1 卡通 2.5D | P1/P2 |
| 品牌故事 | B1 Editorial | C2 Kinfolk | |
| 生活方式 | C2 Kinfolk | C3 Muji | |
| 艺术创意 | C1 Bauhaus | C4 Brutalist | |
| 新闻资讯 | B3 Newspaper | B2 Swiss | |
| 极简主义 | C3 Muji | A2 Apple Keynote |
| 方案 | 来源 | 适用风格 | 特点 |
|---|---|---|---|
| P1 Unsplash | 真实摄影 | A1/A2/B1/B2/B3/C2 | 高质量免费、需署名 |
| P2 AI 生成 | ZMark AI | D1/D3/E1/C1/C4 | 风格匹配度高、生成时间较长 |
| P3 混合方案 | 两者结合 | 全部 | 灵活性最高 |
| P4 Excalidraw | 自动生成 SVG | D1/D2/D3/A5/E2 | 技术图表、架构图、流程图 |
适用场景：技术演示、架构汇报、系统设计、开发文档
工作流程：
技术内容页面
↓
LLM 识别图表类型（架构图/流程图/时序图/ER图等）
↓
调用 excalidraw skill 生成 .excalidraw JSON
↓
使用 excalidraw_to_svg.py 转换为 SVG
↓
SVG 直接嵌入 HTML（<svg> 标签）或 base64 data URI
支持的图表类型：
| 图表类型 | 触发关键词 | 元素组合 |
|---|---|---|
| 系统架构图 | 架构、系统、微服务 | 矩形+箭头+数据库图标 |
| 数据流程图 | 流程、数据流、管道 | 矩形+箭头+处理节点 |
| 时序图 | 时序、交互、调用 | 矩形+虚线箭头 |
| ER 图 | 实体、关系、数据库 | 矩形+菱形+连接线 |
| 网络拓扑 | 网络、拓扑、节点 | 椭圆+矩形+连线 |
| 组件图 | 组件、模块、依赖 | 矩形+依赖箭头 |
脚本用法：
# 基本转换
python3 scripts/excalidraw_to_svg.py input.excalidraw -o output.svg
# 输出为 base64 data URI（适合直接嵌入 HTML）
python3 scripts/excalidraw_to_svg.py input.excalidraw --base64
# 输出为 HTML img 标签
python3 scripts/excalidraw_to_svg.py input.excalidraw --embed
# 暗色主题
python3 scripts/excalidraw_to_svg.py input.excalidraw --theme dark -o output.svg
HTML 嵌入方式：
<!-- 方式1：直接嵌入 SVG（推荐，可缩放） -->
<div class="diagram-container">
<svg viewBox="0 0 800 600">
<!-- SVG 内容 -->
</svg>
</div>
<!-- 方式2：base64 data URI -->
<img src="data:image/svg+xml;base64,..." alt="系统架构图">
<!-- 方式3：外部文件引用 -->
<img src="diagrams/architecture.svg" alt="系统架构图">
自动识别规则：
LLM 会根据页面内容自动判断是否需要生成技术图表：
| 内容特征 | 图表类型 |
|---|---|
| 包含"架构"、"组件"、"服务" | 系统架构图 |
| 包含"流程"、"步骤"、"→" | 流程图 |
| 包含"数据库"、"表"、"字段" | ER 图 |
| 包含"API"、"请求"、"响应" | 时序图 |
| 包含"模块"、"依赖"、"import" | 组件依赖图 |
| 方案 | 实现方式 | 适用风格 | 特点 |
|---|---|---|---|
| N1 图标方案 | Iconify 图标库 | 全部 | 生成快速、视觉丰富 |
| N2 信息图表 | 自动生成流程图/时间线 | A3/A5/E2 | 适合数据和流程 |
| N3 几何装饰 | CSS 色块/线条 | C1/C3/C4 | 现代感强 |
| N4 纯文字+图标 | 排版+字体+轻量图标 | A2/C3/Muji | 极简但不单调 |
重要（v5.1）：即使选择 N4 纯文字方案，也应默认添加轻量级 Iconify 图标装饰，避免页面过于单调。图标应：
| 页面类型 | 搜索关键词示例 |
|---|---|
| 封面页 | rocket, star, lightbulb |
| 概念介绍 | brain, idea, puzzle |
| 数据展示 | chart, graph, analytics |
| 流程步骤 | arrow-right, flow, process |
| 问题/挑战 | warning, alert, question |
| 解决方案 | check, shield, tool |
| 金句页 | quote, message, speech |
| 结尾页 | heart, thumbs-up, celebrate |
| 编号 | 风格名称 | 配色特征 | 适用场景 |
|---|---|---|---|
| Classic/Professional | |||
| A1 | TED 演讲 | 大图+精简文字、深色 overlay | 叙事、演讲 |
| A2 | Apple Keynote | 极简白底、大标题、留白>60% | 产品发布 |
| A3 | Typical PPT | 深蓝+浅灰、标准模板 | 商务汇报 |
| A4 | Gamma | 现代卡片、圆角、柔和阴影 | 创业路演 |
| A5 | Consulting | 深蓝+金、等距投影、数据驱动 | 战略咨询 |
| Editorial/Publishing | |||
| B1 | Editorial | 杂志排版、衬线字体、分栏 | 品牌故事 |
| B2 | Swiss Style | 网格系统、无衬线、不对称 | 设计作品 |
| B3 | Newspaper | 报纸版式、黑白灰+单点缀 | 新闻资讯 |
| Design/Art | |||
| C1 | Bauhaus | 几何色块、红黄蓝三原色 | 艺术教育 |
| C2 | Kinfolk | 温暖米色/棕/橄榄、胶片质感 | 生活方式 |
| C3 | Muji | 白灰为主、超细线条、日式简约 | 极简品牌 |
| C4 | Brutalist | 原始粗犷、大字体、高对比 | 先锋设计 |
| Tech/Future | |||
| D1 | Neo-Tokyo | 霓虹紫/粉、暗黑底、故障艺术 | 科技产品 |
| D2 | Dark Mode | 深灰底、冷蓝强调色、简洁边框 | 开发者工具 |
| D3 | 红黑白科技 | #E63946红+纯黑+纯白 | 国产科技 |
| Education/Creative | |||
| E1 | 卡通 2.5D | 扁平+阴影、多彩、圆润图标 | 儿童教育 |
| E2 | Education | 色彩编码、互动元素暗示 | 在线课程 |
:root {
--primary: #E62B1E;
--primary-light: #FF4136;
--secondary: #2C2C2C;
--accent: #FFFFFF;
--bg-page: #1A1A1A;
--bg-card: #2C2C2C;
--bg-section: #333333;
--text-heading: #FFFFFF;
--text-body: #E0E0E0;
--text-muted: #999999;
--border: #444444;
}
特征：深色背景、大尺寸全屏图片、overlay 半透明黑色叠加文字、字号巨大（Hero 80px+）、单页信息密度极低（1 个核心观点）
:root {
--primary: #1D1D1F;
--primary-light: #424245;
--secondary: #6E6E73;
--accent: #0071E3;
--bg-page: #FFFFFF;
--bg-card: #FFFFFF;
--bg-section: #F5F5F7;
--text-heading: #1D1D1F;
--text-body: #424245;
--text-muted: #86868B;
--border: #D2D2D7;
}
特征：极简白底、San Francisco 字体气质、留白 >60%、产品图居中、超大标题（56px+）、几乎无边框
:root {
--primary: #2B579A;
--primary-light: #4472C4;
--secondary: #5B9BD5;
--accent: #FFC000;
--bg-page: #F0F4FA;
--bg-card: #FFFFFF;
--bg-section: #E8EEF7;
--text-heading: #1F3864;
--text-body: #404040;
--text-muted: #808080;
--border: #D6DCE4;
}
特征：深蓝(#2B579A)+浅灰背景、标准标题+副标题+正文层次、项目符号列表、页眉页脚、标准布局
:root {
--primary: #0EA5E9;
--primary-light: #38BDF8;
--secondary: #00CEC9;
--accent: #F59E0B;
--bg-page: #FAFEFF;
--bg-card: #FFFFFF;
--bg-section: #F0F9FF;
--text-heading: #2D3436;
--text-body: #545454;
--text-muted: #A0A0A0;
--border: #ECECEC;
--card-radius: 16px;
--card-shadow: 0 2px 12px rgba(14,165,233,0.08);
}
特征：现代卡片式布局、圆角 16px、柔和投影、天蓝色(#0EA5E9)强调、适度留白、创业路演感
:root {
--primary: #1E3A5F;
--primary-light: #2D5F8A;
--secondary: #4A90A4;
--accent: #D4A843;
--accent-warm: #C17F24;
--bg-page: #FAFBFC;
--bg-card: #FFFFFF;
--bg-section: #F0F4F8;
--text-heading: #0F2137;
--text-body: #3A4F66;
--text-muted: #7A8FA3;
--border: #E2E8F0;
}
特征：深蓝+金、数据卡片密集、等距投影图表、框架模型图、多列并排、KPI 大数字
:root {
--primary: #1A1A1A;
--primary-light: #333333;
--secondary: #666666;
--accent: #C0392B;
--bg-page: #FEFEFE;
--bg-card: #FFFFFF;
--bg-section: #F5F5F0;
--text-heading: #1A1A1A;
--text-body: #333333;
--text-muted: #888888;
--border: #E0E0E0;
--font-heading: 'Playfair Display', 'Noto Serif SC', Georgia, serif;
--font-body: 'Source Sans Pro', 'Noto Sans SC', sans-serif;
}
特征：衬线标题+无衬线正文、分栏排版、大面积留白、pull-quote 大引用、黑白摄影配图、首字下沉
:root {
--primary: #D0021B;
--primary-light: #E63946;
--secondary: #2C2C2C;
--accent: #D0021B;
--bg-page: #FFFFFF;
--bg-card: #FFFFFF;
--bg-section: #F2F2F2;
--text-heading: #2C2C2C;
--text-body: #404040;
--text-muted: #808080;
--border: #CCCCCC;
--font-heading: 'Helvetica Neue', 'Arial', sans-serif;
}
特征：严格网格系统、Helvetica 无衬线、红色色带分割、不对称布局、信息层次分明
:root {
--primary: #1A1A1A;
--primary-light: #333333;
--secondary: #555555;
--accent: #B22222;
--bg-page: #F5F1EB;
--bg-card: #FFFDF7;
--bg-section: #F0ECE3;
--text-heading: #1A1A1A;
--text-body: #333333;
--text-muted: #777777;
--border: #D4CFC5;
--font-heading: 'Playfair Display', 'Times New Roman', serif;
}
特征：报纸版式、多栏文字、报头大标题、分割线、黑白灰+单色点缀、引用框
:root {
--primary: #E63B2E;
--primary-light: #FF5A4F;
--secondary: #2B4FA2;
--accent: #F5C300;
--bg-page: #FFFFFF;
--bg-card: #FFFFFF;
--bg-section: #F7F7F7;
--text-heading: #1A1A1A;
--text-body: #333333;
--text-muted: #888888;
--border: #E0E0E0;
}
特征：几何色块（红黄蓝三原色）、粗线条网格、不规则色块拼接、理性构成
:root {
--primary: #9B7B5E;
--primary-light: #B8A08A;
--secondary: #8FA387;
--accent: #D4AAA0;
--bg-page: #FAF7F2;
--bg-card: #FFFCF7;
--bg-section: #F3EDE5;
--text-heading: #5A4A3A;
--text-body: #6B5E52;
--text-muted: #A09585;
--border: #E5DDD3;
}
特征：莫兰迪色调、自然光影质感、胶片颗粒感、温暖米色/棕色/橄榄、大量呼吸留白
:root {
--primary: #5C5C5C;
--primary-light: #7A7A7A;
--secondary: #8B7355;
--accent: #B8A08A;
--bg-page: #F7F5F0;
--bg-card: #FFFFFF;
--bg-section: #F0EDE8;
--text-heading: #3A3A3A;
--text-body: #5C5C5C;
--text-muted: #999999;
--border: #E5E0D8;
}
特征：白灰为主、超细线条（0.5px）、日式简约、自然材质纹理暗示、极致留白
:root {
--primary: #000000;
--primary-light: #333333;
--secondary: #555555;
--accent: #FF3D00;
--bg-page: #FFFFFF;
--bg-card: #FFFFFF;
--bg-section: #F0F0F0;
--text-heading: #000000;
--text-body: #333333;
--text-muted: #777777;
--border: #000000;
}
特征：大字铺满、粗边框（3px+）、高对比黑白、原始粗犷、有意的"不完美"感
:root {
--primary: #FF2D6B;
--primary-light: #FF5A8A;
--secondary: #00B4D8;
--accent: #39FF14;
--bg-page: #0A0A0F;
--bg-card: #141420;
--bg-section: #1A1A2E;
--text-heading: #FFFFFF;
--text-body: #C0C0D0;
--text-muted: #6A6A80;
--border: rgba(255,255,255,0.08);
}
特征：深黑底(#0A0A0F)+霓虹粉(#FF2D6B)/青(#00B4D8)/绿(#39FF14)、故障艺术纹理、日式排版
:root {
--primary: #3B82F6;
--primary-light: #60A5FA;
--secondary: #64748B;
--accent: #06B6D4;
--bg-page: #0F172A;
--bg-card: #1E293B;
--bg-section: #1E293B;
--text-heading: #F1F5F9;
--text-body: #94A3B8;
--text-muted: #475569;
--border: rgba(148,163,184,0.15);
}
特征：深灰底(#0F172A)、冷蓝(#3B82F6)强调色、简洁边框、代码风排版、终端感
:root {
--primary: #E63946;
--primary-light: #FF5A65;
--secondary: #1A1A1A;
--accent: #E63946;
--bg-page: #FFFFFF;
--bg-card: #FFFFFF;
--bg-section: #F5F5F5;
--text-heading: #000000;
--text-body: #1A1A1A;
--text-muted: #808080;
--border: #E0E0E0;
}
特征：严格红黑白三色、几何连接线（电路风）、等距视角图形、高对比
:root {
--primary: #4A90E2;
--primary-light: #6BB5FF;
--secondary: #10B981;
--accent: #F39C12;
--accent-warm: #FFD93D;
--bg-page: #F0F7FF;
--bg-card: #FFFFFF;
--bg-section: #E8F4FD;
--text-heading: #2C3E50;
--text-body: #4A5568;
--text-muted: #A0AEC0;
--border: #D6E8F7;
}
特征：扁平+柔和阴影、蓝+绿+橙多彩和谐、圆润图标、Q 版角色、等距 2.5D 视角
:root {
--primary: #2563EB;
--primary-light: #3B82F6;
--secondary: #10B981;
--accent: #F59E0B;
--highlight: #EF4444;
--bg-page: #FFF7ED;
--bg-card: #FFFFFF;
--bg-section: #FEF3C7;
--text-heading: #1E293B;
--text-body: #4B5563;
--text-muted: #9CA3AF;
--border: #FDE68A;
}
特征：色彩编码知识点（蓝=概念、绿=案例、橙=重点、红=注意）、互动元素暗示、清晰层次
核心理念：优先使用原文自带图片，降低成本，提高内容相关性。
工作流程：
网页 URL 输入
↓
fetch_webpage.py --download-images
↓
├── 智能提取页面图片
│ ├── 过滤：图标、广告、头像、logo
│ ├── 过滤：尺寸过小（<200x150px）
│ ├── 过滤：文件过小（<10KB）
│ └── 优先：article 区域内、有 alt 属性、大尺寸
↓
├── 下载到本地
│ └── ~/Desktop/ppt_images/image_xxx.jpg
↓
└── 生成映射关系
└── {local_path, url, alt, context, priority}
脚本使用：
# 抓取网页并下载图片
python3 scripts/fetch_webpage.py "https://example.com/article" \
--download-images \
--image-dir ~/Desktop/ppt_images/ \
-o content.json --pretty
# 输出示例
{
"title": "文章标题",
"slides": [...],
"images": {
"images": [
{
"local_path": "/Users/xxx/Desktop/ppt_images/image_abc123.jpg",
"filename": "image_abc123.jpg",
"url": "https://example.com/photo.jpg",
"alt": "文章配图描述",
"context": "图片周围的文字上下文",
"priority": 15
}
],
"total_found": 8,
"total_downloaded": 5,
"output_dir": "/Users/xxx/Desktop/ppt_images/"
}
}
图片优先级评分：
| 条件 | 加分 |
|---|---|
| 在 article 区域内 | +10 |
| 有 alt 属性 | +5 |
| 宽度 ≥600px 或高度 ≥400px | +3 |
| 有上下文描述 | +2 |
配图选择策略（v5.2 优化）：
1. 原文配图（零成本）
└── 如果原文有合适图片 → 直接使用
└── 优点：内容相关性强、无 API 成本
2. Unsplash（低成本）
└── 原文无图或图片不足 → 搜索 Unsplash
└── 优点：高质量、免费（50次/小时）
3. AI 生成（有成本）
└── 需要特定风格图片 → AI 生成
└── 缺点：需要 API Key、有费用
4. 图标补充（零成本）
└── 始终使用 Iconify 图标丰富视觉
└── 优点：快速、免费、视觉丰富
| 编号 | 风格 | 来源 | 特征 |
|---|---|---|---|
| I1 | 无配图 | - | 纯文字排版 |
| I2 | Editorial Photo | Unsplash | 编辑风格照片、高品质摄影 |
| I3 | Kinfolk 暖调 | Unsplash | 温暖胶片质感、生活方式 |
| I4 | 红黑白科技 | ZMark AI | 高对比科技风插图 |
| I5 | 卡通 2.5D | ZMark AI | 扁平卡通、等距视角 |
| I6 | 3D 渲染 | ZMark AI | 立体渲染插图 |
| I7 | 抽象艺术 | ZMark AI | 艺术插画 |
环境变量: UNSPLASH_ACCESS_KEY（必需）
脚本: scripts/fetch_unsplash.py
# 搜索照片
python3 scripts/fetch_unsplash.py search "business technology" --orientation landscape --count 5
# 批量为幻灯片获取配图
python3 scripts/fetch_unsplash.py batch slides.json --style editorial -o images.json
Unsplash 使用规则：
Photo by [Name] on Unsplash（含链接）?utm_source=ppt_designer&utm_medium=referral风格-搜索关键词映射：
| 配图风格 | Unsplash 搜索修饰词 |
|---|---|
| I2 Editorial Photo | editorial magazine artistic |
| I3 Kinfolk | lifestyle warm film grain cozy |
| TED 演讲配图 | dramatic dark cinematic |
| Apple Keynote 配图 | minimal clean white product |
| Consulting 配图 | corporate business professional |
| Newspaper 配图 | documentary journalism photojournalism |
| 页面类型 | 是否配图 | 策略 |
|---|---|---|
| 封面页 | 必须 | 全屏/半屏大图 |
| 金句页 | 必须 | 氛围背景图 |
| 结尾页 | 必须 | 前瞻性氛围图 |
| 内容页（长） | 推荐 | 图文混排 |
| 内容页（短） | 可选 | 小图点缀 |
| 数据页 | 不配图 | 图表即视觉 |
保留 v2.4 的 9 种 AI 风格提示词模板（详见 scripts/generate_images.py）。
每种动画有完全不同的 CSS transition/animation，视觉效果截然不同。
.transition-fade .slide-leaving {
animation: fadeOut 0.6s ease forwards;
}
.transition-fade .slide-entering {
animation: fadeIn 0.6s ease forwards;
}
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.transition-slide .slide-leaving {
animation: slideOutLeft 0.5s ease forwards;
}
.transition-slide .slide-entering {
animation: slideInRight 0.5s ease forwards;
}
@keyframes slideOutLeft {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(-100%); opacity: 0; }
}
@keyframes slideInRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.transition-cinematic .slide-leaving {
animation: cinematicOut 0.8s ease forwards;
}
.transition-cinematic .slide-entering {
animation: cinematicIn 0.8s ease forwards;
}
@keyframes cinematicOut {
from { transform: scale(1); opacity: 1; filter: blur(0); }
to { transform: scale(1.15); opacity: 0; filter: blur(8px); }
}
@keyframes cinematicIn {
from { transform: scale(0.8); opacity: 0; filter: blur(8px); }
to { transform: scale(1); opacity: 1; filter: blur(0); }
}
.transition-cut .slide-leaving {
display: none;
}
.transition-cut .slide-entering {
opacity: 1;
}
.transition-flip .slides-viewport {
perspective: 1200px;
}
.transition-flip .slide-leaving {
animation: flipOut 0.6s ease forwards;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.transition-flip .slide-entering {
animation: flipIn 0.6s ease forwards;
transform-style: preserve-3d;
backface-visibility: hidden;
}
@keyframes flipOut {
from { transform: rotateY(0deg); opacity: 1; }
to { transform: rotateY(-90deg); opacity: 0; }
}
@keyframes flipIn {
from { transform: rotateY(90deg); opacity: 0; }
to { transform: rotateY(0deg); opacity: 1; }
}
.transition-zoom .slide-leaving {
animation: zoomOut 0.5s ease forwards;
}
.transition-zoom .slide-entering {
animation: zoomIn 0.5s ease forwards;
}
@keyframes zoomOut {
from { transform: scale(1); opacity: 1; }
to { transform: scale(0.3); opacity: 0; }
}
@keyframes zoomIn {
from { transform: scale(2); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
class SlideEngine {
constructor() {
this.slides = document.querySelectorAll('.slide');
this.current = 0;
this.total = this.slides.length;
this.transitioning = false;
this.transitionStyle = localStorage.getItem('ppt-transition') || 'fade';
this.init();
}
init() {
this.slides.forEach((s, i) => {
s.style.display = i === 0 ? '' : 'none';
s.classList.toggle('slide-active', i === 0);
});
this.updateNav();
this.bindKeys();
this.bindTouch();
}
async goTo(index) {
if (index < 0 || index >= this.total || index === this.current || this.transitioning) return;
this.transitioning = true;
const leaving = this.slides[this.current];
const entering = this.slides[index];
const viewport = document.querySelector('.slides-viewport');
// Apply transition class
viewport.className = `slides-viewport transition-${this.transitionStyle}`;
entering.style.display = '';
leaving.classList.add('slide-leaving');
entering.classList.add('slide-entering');
// Wait for animation
const duration = this.getDuration();
await new Promise(r => setTimeout(r, duration));
leaving.style.display = 'none';
leaving.classList.remove('slide-active', 'slide-leaving');
entering.classList.remove('slide-entering');
entering.classList.add('slide-active');
this.current = index;
this.transitioning = false;
this.updateNav();
}
getDuration() {
const durations = { fade: 600, slide: 500, cinematic: 800, cut: 50, flip: 600, zoom: 500 };
return durations[this.transitionStyle] || 600;
}
next() { this.goTo(this.current + 1); }
prev() { this.goTo(this.current - 1); }
setTransition(style) {
this.transitionStyle = style;
localStorage.setItem('ppt-transition', style);
document.querySelectorAll('.style-btn').forEach(btn => {
btn.classList.toggle('active', btn.dataset.style === style);
});
}
bindKeys() {
document.addEventListener('keydown', e => {
if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') { e.preventDefault(); this.next(); }
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); this.prev(); }
});
}
bindTouch() {
let startX = 0;
document.addEventListener('touchstart', e => { startX = e.touches[0].clientX; });
document.addEventListener('touchend', e => {
const diff = e.changedTouches[0].clientX - startX;
if (Math.abs(diff) > 50) { diff > 0 ? this.prev() : this.next(); }
});
}
updateNav() {
document.querySelectorAll('.nav-dot').forEach((dot, i) => {
dot.classList.toggle('active', i === this.current);
});
const counter = document.querySelector('.slide-counter');
if (counter) counter.textContent = `${this.current + 1} / ${this.total}`;
}
}
// Auto-play controller
class AutoPlayController {
constructor(engine, interval = 5000) {
this.engine = engine;
this.interval = interval;
this.timer = null;
this.isPlaying = false;
}
toggle() { this.isPlaying ? this.stop() : this.start(); }
start() {
if (this.isPlaying) return;
this.isPlaying = true;
this.updateBtn();
this.timer = setInterval(() => {
if (this.engine.current < this.engine.total - 1) this.engine.next();
else this.stop();
}, this.interval);
}
stop() {
this.isPlaying = false;
if (this.timer) { clearInterval(this.timer); this.timer = null; }
this.updateBtn();
}
setSpeed(ms) {
this.interval = ms;
if (this.isPlaying) { this.stop(); this.start(); }
}
updateBtn() {
const btn = document.querySelector('.autoplay-toggle');
if (btn) {
btn.innerHTML = this.isPlaying
? '<span class="iconify" data-icon="ph:pause-circle-bold"></span>'
: '<span class="iconify" data-icon="ph:play-circle-bold"></span>';
}
}
}
功能特性：
<div class="control-panel" id="controlPanel">
<!-- 自动播放 -->
<button class="autoplay-toggle" onclick="autoPlay.toggle()" aria-label="自动播放" title="空格键切换">
<span class="iconify" data-icon="ph:play-circle-bold"></span>
</button>
<!-- 速度控制 -->
<div class="speed-control">
<button onclick="autoPlay.setSpeed(8000)" title="8秒/页">慢</button>
<button onclick="autoPlay.setSpeed(5000)" class="active" title="5秒/页">中</button>
<button onclick="autoPlay.setSpeed(3000)" title="3秒/页">快</button>
</div>
<!-- 分隔线 -->
<span class="divider"></span>
<!-- 6 种动画切换 -->
<div class="style-control">
<button class="style-btn active" data-style="fade" onclick="engine.setTransition('fade')" title="淡入淡出">Fade</button>
<button class="style-btn" data-style="slide" onclick="engine.setTransition('slide')" title="水平滑动">Slide</button>
<button class="style-btn" data-style="cinematic" onclick="engine.setTransition('cinematic')" title="电影感缩放">Cinema</button>
<button class="style-btn" data-style="zoom" onclick="engine.setTransition('zoom')" title="中心缩放">Zoom</button>
<button class="style-btn" data-style="flip" onclick="engine.setTransition('flip')" title="3D翻转">Flip</button>
<button class="style-btn" data-style="cut" onclick="engine.setTransition('cut')" title="瞬间切换">Cut</button>
</div>
<!-- 分隔线 -->
<span class="divider"></span>
<!-- 页码 -->
<span class="slide-counter">1 / N</span>
<!-- 全屏按钮 -->
<button class="fullscreen-btn" onclick="toggleFullscreen()" aria-label="全屏">
<span class="iconify" data-icon="ph:corners-out"></span>
</button>
</div>
<!-- 控制面板自动隐藏 CSS -->
<style>
.control-panel {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 16px;
padding: 12px 20px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
border: 1px solid var(--border);
border-radius: 8px;
z-index: 1000;
transition: opacity 0.3s, transform 0.3s;
}
.control-panel.hidden {
opacity: 0;
transform: translateX(-50%) translateY(20px);
pointer-events: none;
}
.control-panel:hover {
opacity: 1 !important;
transform: translateX(-50%) translateY(0) !important;
}
.divider {
width: 1px;
height: 20px;
background: var(--border);
}
.speed-control button,
.style-btn,
.autoplay-toggle,
.fullscreen-btn {
background: none;
border: 1px solid var(--border);
padding: 6px 12px;
cursor: pointer;
font-size: 13px;
color: var(--text-muted);
border-radius: 4px;
transition: all 0.2s;
}
.speed-control button.active,
.style-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.speed-control button:hover,
.style-btn:hover {
border-color: var(--primary);
color: var(--primary);
}
</style>
<script>
// 控制面板自动隐藏
let hideTimer;
const controlPanel = document.getElementById('controlPanel');
function showControlPanel() {
controlPanel.classList.remove('hidden');
clearTimeout(hideTimer);
if (autoPlay.isPlaying) {
hideTimer = setTimeout(() => {
controlPanel.classList.add('hidden');
}, 3000);
}
}
// 鼠标移动时显示控制面板
document.addEventListener('mousemove', showControlPanel);
// 播放状态变化时处理隐藏
const originalToggle = autoPlay.toggle.bind(autoPlay);
autoPlay.toggle = function() {
originalToggle();
if (this.isPlaying) {
hideTimer = setTimeout(() => {
controlPanel.classList.add('hidden');
}, 3000);
} else {
controlPanel.classList.remove('hidden');
}
};
// 全屏功能
function toggleFullscreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
}
</script>
| 编号 | 页数 | 密度 | 适用 |
|---|---|---|---|
| S1 | 5-8 页 | 精简版 | 快速概览、电梯演讲 |
| S2 | 10-12 页 | 标准版 | 常规演示、汇报 |
| S3 | 15-20 页 | 详细版 | 完整叙事、深度分享 |
你不是一个"能写 HTML 的程序员"。你是一位在国际顶级设计奖项（D&AD、红点、IF）评审团工作过的视觉叙事总监。你的每一张 Slide 都是一件独立的平面作品。
反 AI 审美铁律：
v5.1 新增设计规则： 7. 默认添加图标装饰——即使用户未明确要求配图，也应使用 Iconify 图标丰富视觉层次 8. 内容完整展示——默认展示完整内容，不精简；除非用户主动要求精简版 9. 视频模式字号放大——视频导出时字号 1.5x，减少留白，确保可读性
设计自觉：
| 来源 | URL 模式 | 下载方式 |
|---|---|---|
| YouTube | youtube.com/*, youtu.be/* | yt-dlp |
| 小宇宙播客 | xiaoyuzhoufm.com/episode/* | yt-dlp / HTML 解析 fallback |
| 直接音频链接 | *.mp3, *.m4a, *.wav 等 | curl/requests |
| 本地文件 | /path/to/audio.mp3 | 直接使用 |
| 其他视频站 | 任意 URL | yt-dlp 通用尝试 |
| 模式 | 引擎 | 费用 | 速度（1h 音频） | 适用场景 |
|---|---|---|---|---|
| local（默认） | MLX-Whisper | $0 | ~25 min | 日常使用，Apple Silicon Mac |
| api | OpenAI Whisper API | $0.36 | ~3 min | 赶时间，长音频 |
| gemini | Gemini Flash | ~$0.06 | ~2 min | 最快最便宜，可同时生成摘要 |
# 基本用法 - YouTube 视频，本地 Whisper 转录
python3 scripts/transcribe_audio.py "https://youtu.be/xxx"
# 小宇宙播客，使用 Gemini 快速转录并生成摘要
python3 scripts/transcribe_audio.py "https://www.xiaoyuzhoufm.com/episode/xxx" \
--mode gemini --summary
# 本地音频文件，输出到文件
python3 scripts/transcribe_audio.py "/path/to/podcast.mp3" \
--mode local --output transcript.md
# 英语内容，OpenAI API 转录
python3 scripts/transcribe_audio.py "https://youtu.be/xxx" \
--mode api --language en
# 生成 SRT 字幕格式
python3 scripts/transcribe_audio.py "https://youtu.be/xxx" --format srt -o subtitles.srt
| 参数 | 默认值 | 说明 |
|---|---|---|
url | （必填） | 音视频 URL 或本地文件路径 |
--mode | local | 转录模式: local / api / gemini |
--format | markdown | 输出格式: markdown / srt / txt / json |
--language | zh | 音频语言: zh / en / auto |
--model-size | turbo | 本地模型: turbo（推荐）/ large（最准）/ small（最快） |
--summary | false | Gemini 模式下同时生成摘要 |
--output / -o | stdout | 输出文件路径 |
# 必装
brew install ffmpeg # 音频格式转换
brew install yt-dlp # 下载 YouTube/播客
# 本地模式
pip install mlx-whisper # Apple Silicon 本地 Whisper
# API 模式需设置环境变量
export OPENAI_API_KEY="sk-..." # OpenAI Whisper API
export GEMINI_API_KEY="..." # Gemini Flash API
| 模型 | ID | 速度 | 质量 | 适用 |
|---|---|---|---|---|
| turbo（默认） | whisper-large-v3-turbo | 快 | 优 | 日常播客 |
| large | whisper-large-v3-mlx | 慢 | 最优 | 追求最高质量 |
| small | whisper-small-mlx | 最快 | 够用 | 快速预览/低内存 |
音频/视频转录后的文字会自动进入阶段一的内容解析流程：
transcribe_audio.py 输出 markdown 文本
↓
Claude 整理文字（修正错别字、分段、去口水词）
↓
提取标题和核心观点作为 PPT 大纲
↓
进入正常 PPT 生成流程（风格选择 → 配图 → HTML）
| 场景 | 自动处理 |
|---|---|
| yt-dlp 未安装 | 自动 brew install yt-dlp |
| mlx-whisper 未安装 | 自动 pip install mlx-whisper |
| 本地转录内存不足 | 自动降级到 small 模型 |
| API 文件超 25MB | 自动 ffmpeg 分片后合并 |
| API Key 未配置 | 提示用户设置，或切换到 local |
| 小宇宙 yt-dlp 失败 | Fallback 到 HTML 页面解析提取音频链接 |
<script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
<span class="iconify" data-icon="ph:star-bold" style="font-size: 24px; color: var(--accent);"></span>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
prefers-reduced-motion 支持Skill 状态: v5.2 已实现 版本: 5.2 最后更新: 2026-02-13
--download-images、--image-dir--list-services 列出所有 TTS 服务--no-subtitle 禁用字幕，--subtitle-fontsize、--subtitle-radius 自定义样式scripts/ppt_to_video.pydata-narration 和 data-duration HTML 属性