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