# HTML Ppt Designer

> HTML PPT 精致演示文稿设计器 - 将用户内容转化为精致的HTML演示文稿页面，LLM 智能设计优先，支持多种视觉风格、动效设计、色彩认知系统。触发词：PPT、演示文稿、HTML幻灯片、slide、presentation、做PPT、制作演示。

- Skill: `andyhuo520/html-ppt-designer` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add andyhuo520/html-ppt-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/andyhuo520/html-ppt-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: andyhuo520 (https://skillmd.com/u/andyhuo520)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/andyhuo520/html-ppt-designer

---


# HTML PPT Designer v5.2 / 智能演示文稿设计器

**版本**: 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/分钟 |

### 配置方法

**方法一：临时设置（当前终端会话）**
```bash
export UNSPLASH_ACCESS_KEY="your-unsplash-access-key"
export ZENMUX_API_KEY="your-zenmux-api-key"
```

**方法二：永久设置（添加到 shell 配置文件）**
```bash
# 编辑 ~/.zshrc 或 ~/.bashrc
echo 'export UNSPLASH_ACCESS_KEY="your-unsplash-access-key"' >> ~/.zshrc
echo 'export ZENMUX_API_KEY="your-zenmux-api-key"' >> ~/.zshrc

# 重新加载配置
source ~/.zshrc
```

### Unsplash API 申请步骤

1. 访问 https://unsplash.com/developers
2. 注册/登录 Unsplash 账号
3. 点击「New Application」创建新应用
4. 填写应用信息（用途可填：PPT 配图）
5. 创建后获取 **Access Key**
6. 设置环境变量：`export UNSPLASH_ACCESS_KEY="your-key"`

### ZENMUX API 申请步骤

1. 访问 https://zenmux.ai
2. 注册账号并登录
3. 在控制台获取 API Key
4. 设置环境变量：`export ZENMUX_API_KEY="your-key"`

---

## 🆕 v4.0 核心架构升级

### 设计理念转变

**旧架构（v3.x）**：预设 16 种固定模板 → 用户选择 → 填充内容
**新架构（v4.0）**：**LLM 分析内容 → 智能生成设计 → 动态创建 CSS**

### LLM 优先设计流程

```
用户内容
    ↓
LLM 分析（内容类型、情感基调、主题色彩、目标受众）
    ↓
LLM 生成：
├── 色彩方案（主色/辅助色/背景色/文字色）
├── 排版风格（字体组合/字号层级/间距系统）
├── 布局结构（封面/内容页/金句页/结尾页 各自的设计）
├── 视觉元素（装饰图形/分隔线/卡片样式）
└── 动效选择（推荐适合的翻页动画）
    ↓
生成完整 HTML（内嵌自定义 CSS）
    ↓
[失败时] → fallback 到本地预设模板
```

### 本地模板的新定位

| 场景 | 使用方式 |
|------|---------|
| 正常使用 | LLM 动态生成设计，不使用本地模板 |
| 网络问题 | LLM 无法响应时，fallback 到 16 种预设模板 |
| 用户指定 | 用户明确要求某种预设风格时使用 |
| 快速预览 | 需要快速生成时可选使用 |

---

## 🎨 LLM 智能设计系统

### 设计分析维度

LLM 在生成设计前会分析以下维度：

| 维度 | 分析内容 | 影响设计 |
|------|---------|---------|
| **内容类型** | 演讲/教程/报告/故事/数据/产品 | 整体风格方向 |
| **情感基调** | 严肃/活泼/专业/温暖/科技/艺术 | 色彩和字体选择 |
| **主题领域** | 科技/商业/教育/生活/艺术 | 配色和装饰元素 |
| **目标受众** | 高管/大众/学生/专业人士 | 信息密度和复杂度 |
| **使用场景** | 演讲/分享/汇报/营销 | 视觉冲击力程度 |

### 动态生成的设计元素

#### 1. 色彩方案
```css
/* 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;    /* 弱化文字 */
```

#### 2. 字体系统
```css
/* 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;   /* 辅助文字 */
```

#### 3. 布局参数
```css
/* 间距系统 */
--spacing-xs: Xpx;
--spacing-sm: Xpx;
--spacing-md: Xpx;
--spacing-lg: Xpx;
--spacing-xl: Xpx;

/* 圆角 */
--radius: Xpx;        /* 卡片圆角 */
--radius-sm: Xpx;     /* 小元素圆角 */

/* 阴影 */
--shadow: ...;        /* 卡片阴影 */
```

#### 4. 页面类型设计

每种页面类型都有独立的设计方案：

| 页面类型 | 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 秒，画面太单调

**解决**：
1. **内容拆分**：原本 1 页 → 拆分为 2-3 页
2. **视觉丰富**：增加数据卡片、图表、引用框
3. **节奏感**：每页 10-20 秒，翻页更频繁

### 内容拆分策略

| 原内容类型 | 拆分方案 | 示例 |
|-----------|---------|------|
| **概念介绍** | 概念页 + 案例页 + 总结页 | 「AI 原生代理公司」拆分为 3 页 |
| **数据展示** | 数据概览 + 详细数据 + 趋势分析 | 「市场数据」拆分为 3 页 |
| **方法步骤** | 概述页 + 每步骤独立页 | 「三步法」拆分为 4 页 |
| **对比分析** | 对比概览 + A 方案 + B 方案 + 结论 | 「方案对比」拆分为 4 页 |

### 视觉元素模板

**数据卡片**
```
┌─────────────────────────────────────┐
│  ████████████  $2.5万亿            │
│  ████████████  每年政府欺诈损失      │
│  ████████████                       │
│  仅医保每年损失数百亿美元            │
└─────────────────────────────────────┘
```

**进度条/时间线**
```
┌─────●───────────────────────────────┐
│  阶段1 → 阶段2 → 阶段3              │
│  ✓      进行中    待完成             │
└─────────────────────────────────────┘
```

**引用框**
```
┌─────────────────────────────────────┐
│ "AI 原生公司现在可以比以往           │
│  更快、更便宜、更有野心地构建。"     │
│                          — YC RFS   │
└─────────────────────────────────────┘
```

### 视频模式字号规范（v5.1 新增）

**问题**：普通 HTML PPT 字号在视频导出后过小，大量留白，用户看不清。

**解决方案**：视频模式使用 1.5x 字号，减少边距，提高信息密度。

| 元素 | 普通模式 | 视频模式 | 说明 |
|------|---------|---------|------|
| 封面大标题 | 72px | **108px** | 确保视频封面冲击力 |
| 页面标题 | 42px | **64px** | 清晰可读 |
| 正文 | 20px | **32px** | 视频舒适阅读 |
| 引用文字 | 36px | **52px** | 金句突出 |
| 页边距 | 80-120px | **40-60px** | 减少留白 |
| 行高 | 1.8 | **2.0** | 视频舒适间距 |

**CSS 变量覆盖**：
```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;
}
```

### 视频播客模式 AskUserQuestion 模板

```json
{
  "questions": [
    {
      "question": "请选择输出模式（决定内容密度和页数）",
      "header": "输出模式",
      "multiSelect": false,
      "options": [
        {
          "label": "M1 仅 HTML PPT",
          "description": "标准页数（10-12页），适合演讲、汇报、现场展示"
        },
        {
          "label": "M2 视频播客模式 ⭐ 推荐",
          "description": "增强页数（18-25页），内容拆分更细，每页10-20秒，适合视频导出"
        }
      ]
    }
  ]
}
```

---

## 🎬 视频导出系统（v3.2 内嵌字幕）

### 功能概述

将 HTML PPT 幻灯片转换为带配音和字幕的 MP4 视频，支持：

- **音频驱动时长**：每页展示时间 = 该页音频实际时长，100% 同步
- **内嵌字幕**：白字黑背景圆角样式，按句子分割逐句显示
- **字幕同步**：每句字幕时长按字数比例分配，与音频完美同步
- **自动截图**：使用 Playwright 高清捕获每页幻灯片
- **智能配音**：Edge TTS（免费）或 OpenAI TTS（高质量）
- **多语言支持**：中文 / 英文语音

### v3.2 核心改进

```
旧流程（v3.0）：
每页 1 张截图 + 完整字幕 → 字幕不随音频滚动

新流程（v3.2）：
讲解文字按句子分割 → 每句生成 1 张截图 → 字幕时长按字数分配 → 100% 同步滚动
```

### 字幕特性

| 特性 | 说明 |
|------|------|
| **样式** | 白色文字 + 半透明黑色背景 + 12px 圆角 |
| **字体** | PingFang SC（苹果平方），28px |
| **位置** | 底部居中，距离底部 60px |
| **同步方式** | 按句子分割，每句时长 = (该句字数 / 总字数) × 页面音频时长 |
| **最小显示** | 每句至少 1.5 秒 |

### 依赖安装

```bash
# 系统依赖
brew install ffmpeg

# Python 依赖
pip install playwright edge-tts

# 安装浏览器（首次使用）
playwright install chromium

# 如需使用 OpenAI TTS
pip install openai
```

### 脚本使用

```bash
# 基本用法 - 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 | 字幕背景圆角（像素） |

### TTS 服务对比

| 服务 | 费用 | 音质 | 速度 | 推荐场景 |
|------|------|------|------|---------|
| **Edge TTS** | 免费 | 良好 | 快 | 日常使用 ⭐ 推荐 |
| **OpenAI TTS** | ~$0.015/分钟 | 优秀 | 快 | 商业/高质量需求 |
| **火山引擎** | 按量付费 | 优秀 | 快 | 中文专业场景 |
| **智谱 AI** | 按量付费 | 优秀 | 快 | 中文专业场景 |
| **Fish Speech** | 免费 | 良好 | 中 | 本地部署/隐私需求 |

### 环境变量配置

```bash
# 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"
```

### 可用中文语音

#### Edge TTS（16 种）

| 语音 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` | 晓涵 - 女声，温暖 |

#### 火山引擎 TTS（8 种）

| 语音 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` | 黄钟 - 男声，播音 |

### 工作流程图（v3.2）

```
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-*` 属性：

```html
<!-- 自定义讲解文字 -->
<div class="slide" data-narration="这是自定义的讲解文字，会覆盖自动生成的内容">
  ...
</div>

<!-- 自定义展示时长（毫秒） -->
<div class="slide" data-duration="8000">
  ...
</div>
```

---

## 🔧 LLM 设计生成 Prompt 模板

### 设计分析 Prompt

```
你是一位国际顶级演示文稿设计师。请分析以下内容，并生成最适合的视觉设计方案。

【内容信息】
标题：{title}
类型：{content_type}
情感基调：{emotion}
目标受众：{audience}
主题领域：{domain}

【页面概览】
{slides_overview}

请提供：
1. 设计理念（100字内）
2. 色彩方案（8个颜色值）
3. 字体推荐（中英文各1-2个）
4. 布局特点描述
5. 推荐的翻页动画
```

### CSS 生成 Prompt

```
基于以下设计规格，生成完整的 CSS 样式：

【设计规格】
{design_spec}

【要求】
1. 使用 CSS 变量定义所有颜色
2. 包含以下页面类型样式：
   - .slide-cover（封面页）
   - .slide-content（内容页）
   - .slide-quote（金句页）
   - .slide-ending（结尾页）
3. 包含控制面板样式
4. 包含响应式设计（768px/1024px 断点）
5. 使用 Google Fonts（提供 import 语句）
6. 输出完整可用的 CSS 代码
```

---

## 📦 LLM 设计 JSON 格式规范

### 完整格式示例

```json
{
  "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 |

### 最小可用格式

```json
{
  "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"
}
```

---

## 🆕 v3.2 更新概要

### 0. 音频/视频语音转录（NEW）
- 支持 **YouTube**、**小宇宙播客**、**直接音频链接**、**本地音频文件** 作为输入
- 三种转录模式：**local**（MLX-Whisper 本地免费）/ **api**（OpenAI）/ **gemini**（最快最便宜）
- 自动下载音频 → 预处理 → 转录 → 整理文字 → 生成 PPT 大纲
- Apple Silicon Mac 本地运行 Whisper，零成本
- 脚本：`scripts/transcribe_audio.py`

### 1. 16+ 风格系统（4 大类别）
- **Classic/Professional**：TED 演讲、Apple Keynote、标准 PPT、Gamma、Consulting
- **Editorial/Publishing**：Editorial 杂志、Swiss 国际、Newspaper 报纸
- **Design/Art**：Bauhaus、Kinfolk、Muji、Brutalist
- **Tech/Future**：Neo-Tokyo、Dark Mode、红黑白科技
- **Education/Creative**：卡通 2.5D、Education 教育

### 2. Unsplash API 配图
- 集成 Unsplash API，高质量免费照片
- 根据幻灯片内容自动搜索匹配照片
- 支持按风格、颜色、方向筛选
- 自动生成摄影师署名（Unsplash 要求）

### 3. 6 种真正不同的翻页动画
- **Fade**：纯透明度淡入淡出
- **Slide**：水平滑动（translateX）
- **Cinematic**：缩放+模糊+透明度（电影感）
- **Cut**：瞬间切换（无过渡）
- **Flip**：3D 翻转（rotateY）
- **Zoom**：中心缩放聚焦

### 4. 配图来源双选
- **Unsplash**：真实摄影照片（Editorial Photo / Kinfolk 风格等）
- **ZMark AI**：AI 生成插图（卡通 2.5D / 红黑白科技 / 3D 渲染等）

---

## 📋 完整工作流程

```
用户输入内容/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）
```

---

## 🔧 AskUserQuestion 完整配置模板

### 阶段二：风格选择（直接展示 + 用户输入）

**重要**：先在文本中展示完整风格列表，然后让用户直接输入选择。

#### 第一步：展示完整风格列表

在回复文本中直接展示所有 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}
```

#### 第二步：用户选择（AskUserQuestion + Other 输入）

```json
{
  "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`、`E1`
- 名称：`TED 演讲`、`Dark Mode`、`卡通 2.5D`
- 英文名：`Neo-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 ⭐ 在线课程   色彩编码+互动感                     │
└─────────────────────────────────────────────────────────────────────┘
```

### 阶段三：详细配置

```json
{
  "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 | 技术图表、架构图、流程图 |

### Excalidraw 技术图表方案 (P4)

**适用场景**：技术演示、架构汇报、系统设计、开发文档

**工作流程**：
```
技术内容页面
    ↓
LLM 识别图表类型（架构图/流程图/时序图/ER图等）
    ↓
调用 excalidraw skill 生成 .excalidraw JSON
    ↓
使用 excalidraw_to_svg.py 转换为 SVG
    ↓
SVG 直接嵌入 HTML（<svg> 标签）或 base64 data URI
```

**支持的图表类型**：

| 图表类型 | 触发关键词 | 元素组合 |
|---------|-----------|---------|
| 系统架构图 | 架构、系统、微服务 | 矩形+箭头+数据库图标 |
| 数据流程图 | 流程、数据流、管道 | 矩形+箭头+处理节点 |
| 时序图 | 时序、交互、调用 | 矩形+虚线箭头 |
| ER 图 | 实体、关系、数据库 | 矩形+菱形+连接线 |
| 网络拓扑 | 网络、拓扑、节点 | 椭圆+矩形+连线 |
| 组件图 | 组件、模块、依赖 | 矩形+依赖箭头 |

**脚本用法**：
```bash
# 基本转换
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 嵌入方式**：

```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 图标装饰，避免页面过于单调。图标应：
- 放置在标题旁作为视觉锚点
- 用于列表项前的装饰
- 选择与内容主题相关的图标
- 保持克制，每页 1-3 个图标即可

### 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 |

---

## 🎨 风格系统（16+ 种）

### 风格快速选择表

| 编号 | 风格名称 | 配色特征 | 适用场景 |
|------|---------|---------|---------|
| **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** | 色彩编码、互动元素暗示 | 在线课程 |

---

## 🎨 风格 CSS 变量完整定义

### A1 - TED 演讲风格

```css
: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 个核心观点）

### A2 - Apple Keynote 风格

```css
: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+）、几乎无边框

### A3 - Typical PPT 风格

```css
: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)+浅灰背景、标准标题+副标题+正文层次、项目符号列表、页眉页脚、标准布局

### A4 - Gamma 风格

```css
: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)强调、适度留白、创业路演感

### A5 - Consulting 风格

```css
: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 大数字

### B1 - Editorial 杂志风格

```css
: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 大引用、黑白摄影配图、首字下沉

### B2 - Swiss Style 风格

```css
: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 无衬线、红色色带分割、不对称布局、信息层次分明

### B3 - Newspaper 风格

```css
: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;
}
```
**特征**：报纸版式、多栏文字、报头大标题、分割线、黑白灰+单色点缀、引用框

### C1 - Bauhaus 风格

```css
: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;
}
```
**特征**：几何色块（红黄蓝三原色）、粗线条网格、不规则色块拼接、理性构成

### C2 - Kinfolk 风格

```css
: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;
}
```
**特征**：莫兰迪色调、自然光影质感、胶片颗粒感、温暖米色/棕色/橄榄、大量呼吸留白

### C3 - Muji 风格

```css
: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）、日式简约、自然材质纹理暗示、极致留白

### C4 - Brutalist 风格

```css
: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+）、高对比黑白、原始粗犷、有意的"不完美"感

### D1 - Neo-Tokyo 风格

```css
: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)、故障艺术纹理、日式排版

### D2 - Dark Mode 风格

```css
: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)强调色、简洁边框、代码风排版、终端感

### D3 - 红黑白科技风格

```css
: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;
}
```
**特征**：严格红黑白三色、几何连接线（电路风）、等距视角图形、高对比

### E1 - 卡通 2.5D 风格

```css
: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 视角

### E2 - Education 风格

```css
: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;
}
```
**特征**：色彩编码知识点（蓝=概念、绿=案例、橙=重点、红=注意）、互动元素暗示、清晰层次

---

## 🖼 配图系统

### ⭐ v5.2 原文配图提取（零成本方案）

**核心理念**：优先使用原文自带图片，降低成本，提高内容相关性。

**工作流程**：
```
网页 URL 输入
      ↓
fetch_webpage.py --download-images
      ↓
├── 智能提取页面图片
│   ├── 过滤：图标、广告、头像、logo
│   ├── 过滤：尺寸过小（<200x150px）
│   ├── 过滤：文件过小（<10KB）
│   └── 优先：article 区域内、有 alt 属性、大尺寸
      ↓
├── 下载到本地
│   └── ~/Desktop/ppt_images/image_xxx.jpg
      ↓
└── 生成映射关系
    └── {local_path, url, alt, context, priority}
```

**脚本使用**：
```bash
# 抓取网页并下载图片
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 API 集成

**环境变量**: `UNSPLASH_ACCESS_KEY`（必需）

**脚本**: `scripts/fetch_unsplash.py`

```bash
# 搜索照片
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 参数：`?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 |

### 页面类型配图规则

| 页面类型 | 是否配图 | 策略 |
|---------|---------|------|
| 封面页 | 必须 | 全屏/半屏大图 |
| 金句页 | 必须 | 氛围背景图 |
| 结尾页 | 必须 | 前瞻性氛围图 |
| 内容页（长） | 推荐 | 图文混排 |
| 内容页（短） | 可选 | 小图点缀 |
| 数据页 | 不配图 | 图表即视觉 |

### AI 配图提示词系统（ZMark）

保留 v2.4 的 9 种 AI 风格提示词模板（详见 `scripts/generate_images.py`）。

---

## 🎬 翻页动画系统（6 种真正不同的动画）

### 动画效果定义

每种动画有完全不同的 CSS transition/animation，视觉效果截然不同。

#### 1. Fade（淡入淡出）
```css
.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; } }
```

#### 2. Slide（水平滑动）
```css
.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; }
}
```

#### 3. Cinematic（电影感：缩放+模糊+透明度）
```css
.transition-cinematic .slide-leaving {
  animation: cinematicOut 0.8s ease forwards;
}
.transition-cin

…(truncated)