HTML Ppt Designer

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

版本: 5.2 架构: LLM 智能设计优先 + 本地模板 fallback + 原文配图提取 + Unsplash 配图 + 真翻页引擎 + 6 种动画 + 视频播客模式 + 内嵌字幕 + 国产 TTS + 纯色设计 + 默认图标装饰 + 控制面板自动隐藏 更新日期: 2026-02-13

🔧 环境变量配置（首次使用必读）

在使用本 Skill 的配图和 AI 功能前，需要配置相应的 API Key。

必需配置

可选配置（视频导出）

配置方法

方法一：临时设置（当前终端会话）

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

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 在生成设计前会分析以下维度：

动态生成的设计元素

1. 色彩方案

/* 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. 字体系统

/* 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. 布局参数

/* 间距系统 */
--spacing-xs: Xpx;
--spacing-sm: Xpx;
--spacing-md: Xpx;
--spacing-lg: Xpx;
--spacing-xl: Xpx;

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

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

4. 页面类型设计

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

📋 完整工作流程

用户输入内容/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 秒，翻页更频繁

内容拆分策略

视觉元素模板

数据卡片

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

进度条/时间线

┌─────●───────────────────────────────┐
│  阶段1 → 阶段2 → 阶段3              │
│  ✓      进行中    待完成             │
└─────────────────────────────────────┘

引用框

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

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

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

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

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 模板

{
  "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% 同步滚动

字幕特性

依赖安装

# 系统依赖
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

字幕相关参数

TTS 服务对比

环境变量配置

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

火山引擎 TTS（8 种）

工作流程图（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-* 属性：

<!-- 自定义讲解文字 -->
<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 格式规范

完整格式示例

{
  "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); }"
  }
}

字段说明

最小可用格式

{
  "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 输入）

{
  "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 ⭐ 在线课程   色彩编码+互动感                     │
└─────────────────────────────────────────────────────────────────────┘

阶段三：详细配置

{
  "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": "经典翻页感"}
      ]
    }
  ]
}

🎯 内容类型 → 风格推荐映射

🖼️ 配图方案详细说明

需要配图

Excalidraw 技术图表方案 (P4)

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

工作流程：

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

支持的图表类型：

脚本用法：

# 基本转换
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 会根据页面内容自动判断是否需要生成技术图表：

不需要配图

重要（v5.1）：即使选择 N4 纯文字方案，也应默认添加轻量级 Iconify 图标装饰，避免页面过于单调。图标应：

• 放置在标题旁作为视觉锚点
• 用于列表项前的装饰
• 选择与内容主题相关的图标
• 保持克制，每页 1-3 个图标即可

Iconify 图标自动匹配规则

🎨 风格系统（16+ 种）

风格快速选择表

🎨 风格 CSS 变量完整定义

A1 - TED 演讲风格

: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 风格

: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 风格

: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 风格

: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 风格

: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 杂志风格

: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 风格

: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 风格

: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 风格

: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 风格

: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 风格

: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 风格

: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 风格

: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 风格

: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 - 红黑白科技风格

: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 风格

: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 风格

: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}

脚本使用：

# 抓取网页并下载图片
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/"
  }
}

图片优先级评分：

配图选择策略（v5.2 优化）：

1. 原文配图（零成本）
   └── 如果原文有合适图片 → 直接使用
   └── 优点：内容相关性强、无 API 成本

2. Unsplash（低成本）
   └── 原文无图或图片不足 → 搜索 Unsplash
   └── 优点：高质量、免费（50次/小时）

3. AI 生成（有成本）
   └── 需要特定风格图片 → AI 生成
   └── 缺点：需要 API Key、有费用

4. 图标补充（零成本）
   └── 始终使用 Iconify 图标丰富视觉
   └── 优点：快速、免费、视觉丰富

配图来源选项

Unsplash API 集成

环境变量: 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 参数：?utm_source=ppt_designer&utm_medium=referral

风格-搜索关键词映射：

页面类型配图规则

AI 配图提示词系统（ZMark）

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

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

动画效果定义

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

1. Fade（淡入淡出）

.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（水平滑动）

.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（电影感：缩放+模糊+透明度）

.transition-cinematic .slide-leaving {
  animation: cinematicOut 0.8s ease forwards;
}
.transition-cin

…(truncated)