# HTML PPT Designer v5.2 / 智能演示文稿设计器 **版本** : 5.2 **架构** : **LLM 智能设计优先** \+ 本地模板 fallback + **原文配图提取** \+ Unsplash 配图 + 真翻页引擎 + 6 种动画 + **视频播客模式** \+ **内嵌字幕** \+ **国产 TTS** \+ **纯色设计** \+ **默认图标装饰** \+ **控制面板自动隐藏** **更新日期** : 2026-02-13 * * * ## 🔧 环境变量配置（首次使用必读）在使用本 Skill 的配图和 AI 功能前，需要配置相应的 API Key。 ### 必需配置功能 | 环境变量 | 申请地址 | 免费额度 ---|---|---|--- **Unsplash 配图** | `UNSPLASH_ACCESS_KEY` | | 50次/小时 **AI 生成插图** | `ZENMUX_API_KEY` | | 按用量计费 ### 可选配置（视频导出）功能 | 环境变量 | 申请地址 | 费用 ---|---|---|--- OpenAI TTS | `OPENAI_API_KEY` | | ~$0.015/分钟火山引擎 TTS | `VOLCENGINE_ACCESS_KEY` \+ `VOLCENGINE_SECRET_KEY` | | 按用量计费智谱 AI TTS | `ZHIPUAI_API_KEY` | | 按用量计费 Gemini 转录 | `GEMINI_API_KEY` | | ~$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 ### Unsplash API 申请步骤 1. 访问 2. 注册/登录 Unsplash 账号 3. 点击「New Application」创建新应用 4. 填写应用信息（用途可填：PPT 配图） 5. 创建后获取 **Access Key** 6. 设置环境变量：`export UNSPLASH_ACCESS_KEY="your-key"` ### ZENMUX API 申请步骤 1. 访问 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\. 色彩方案 /* 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\. 页面类型设计每种页面类型都有独立的设计方案：页面类型 | 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 变量覆盖** ： /* 视频模式专用 */ .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% 同步滚动 ### 字幕特性特性 | 说明 ---|--- **样式** | 白色文字 + 半透明黑色背景 + 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 | 字幕背景圆角（像素） ### TTS 服务对比服务 | 费用 | 音质 | 速度 | 推荐场景 ---|---|---|---|--- **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" ### 可用中文语音 #### 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-*` 属性：

...

* * * ## 🔧 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); }" } } ### 字段说明字段 | 类型 | 必填 | 说明 ---|---|---|--- `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" } * * * ## 🆕 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": "经典翻页感"} ] } ] } * * * ## 🎯 内容类型 → 风格推荐映射内容类型 | 推荐风格 | 备选风格 | 推荐配图 ---|---|---|--- 演讲/叙事 | 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（

**自动识别规则** ： 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 演讲风格 :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/" } } **图片优先级评分** ：条件 | 加分 ---|--- 在 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` # 搜索照片 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（淡入淡出） .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-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); } } #### 4\. Cut（瞬间切换） .transition-cut .slide-leaving { display: none; } .transition-cut .slide-entering { opacity: 1; } #### 5\. Flip（3D 翻转） .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; } } #### 6\. Zoom（中心缩放聚焦） .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; } } ### 翻页引擎 JavaScript 类 SlideEngine { 构造函数（）{ this.slides = document.querySelectorAll('.slide'); this.当前 = 0; this.total = this.slides.length; this.transitioning = false; this.transitionStyle = localStorage.getItem('ppt-transition') || '褪色'; this.init(); } 初始化（）{ this.slides.forEach((s, i) => { s.style.display = i === 0 ？ '' : '无'; s.classList.toggle('幻灯片活动', i === 0); }); this.updateNav(); this.bindKeys(); this.bindTouch(); } 异步 goTo(索引) { if (index < 0 || index >= this.total || index === this.current || this.transitioning) return; this.transitioning = true; const left = this.slides[this.current]; const 输入 = this.slides[index]; const viewport = document.querySelector('.slides-viewport'); // 应用过渡类 viewport.className = `幻灯片-视口转换-${this.transitionStyle}`; 输入.style.display = ''; left.classList.add('幻灯片离开'); Entering.classList.add('幻灯片输入'); // 等待动画 const 持续时间 = this.getDuration(); 等待新的 Promise(r => setTimeout(r, 持续时间)); left.style.display = '无'; left.classList.remove('slide-active', 'slide-leave'); Entering.classList.remove('幻灯片输入'); Entering.classList.add('幻灯片活动'); this.current = 索引； this.transitioning = false; this.updateNav(); } 获取持续时间（）{ const 持续时间 = { 淡入淡出：600，幻灯片：500，电影：800，剪切：50，翻转：600，缩放：500 }；返回持续时间[this.transitionStyle] || 600； } next() { this.goTo(this.current + 1); } } prev() { this.goTo(this.current - 1); } } 设置过渡（样式）{ this.transitionStyle = 样式； localStorage.setItem('ppt-transition', style); document.querySelectorAll('.style-btn').forEach(btn => { btn.classList.toggle('active', btn.dataset.style === 样式); }); } 绑定键() { 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(); } }); } 绑定触摸（）{ 让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(); } }); } 更新导航（）{ 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}`; } } // 自动播放控制器类自动播放控制器{ 构造函数（引擎，间隔= 5000）{ this.engine = 引擎； this.interval = 间隔； this.timer = null; this.isPlaying = false; } 切换（）{ this.isPlaying ？ this.stop() : this.start(); } 开始（）{ if (this.isPlaying) 返回； this.isPlaying = true; this.updateBtn(); this.timer = setInterval(() => { if (this.engine.current < this.engine.total - 1) this.engine.next(); 否则 this.stop(); }, this.interval); } 停止（）{ this.isPlaying = false; if (this.timer) { 清除间隔(this.timer); this.timer = null; } this.updateBtn(); } 设置速度（毫秒）{ this.间隔=毫秒； if (this.isPlaying) { this.stop(); this.start(); } } 更新Btn() { const btn = document.querySelector('.autoplay-toggle'); 如果（btn）{ btn.innerHTML = this.isPlaying ？ '' : ''; } } } ### 控制面板 HTML（v5.1 增强版） **功能特性** ： * 自动播放按钮（播放/暂停切换） * 速度控制（慢/中/快） * 6 种动画切换按钮 * 页码显示 * **自动隐藏** ：播放后 3 秒自动隐藏，鼠标移动/悬停时显示 * **键盘提示** ：首次显示快捷键提示

1 / N

## 附录：图表库系统（ECharts） * * * ## 📊 质量验收标准 ### 设计质量 * 色彩不超过 3 种主色 + 2 种中性色 * 所有文本对比度 >= 4.5:1（正文）/ 3:1（大标题） * 封面页必须有配图（除 I1 无配图模式） * 金句页必须有氛围配图 * 配图与内容强相关 * Unsplash 图片含摄影师署名 * 每张 Slide 内容不超过 6 个信息点（标准模式） ### 技术质量 * HTML 语义化标签正确使用 * 响应式在 768px/1024px/1280px 断点表现正常 * 动画仅使用 transform/opacity/filter（GPU 友好） * 6 种翻页动画视觉效果各不相同 * 自动播放功能正常 * `prefers-reduced-motion` 支持 ### 交互质量 * 键盘 ← → 翻页 * 触摸滑动翻页 * 点击导航点跳转 * 自动播放开关 * 动画风格切换（Fade/Slide/Cinematic/Cut/Flip/Zoom） * 速度控制（慢/中/快） * * * **Skill 状态** : v5.2 已实现 **版本** : 5.2 **最后更新** : 2026-02-13 * * * ## 📝 变更日志 ### v5.2 (2026-02-13) - 原文配图提取（零成本方案） * **新增图片提取功能** ：fetch_webpage.py 自动下载网页中的配图 * **智能图片过滤** ：排除图标、广告、logo、小尺寸图片 * **优先级排序** ：article 区域图片 > 有 alt 属性 > 大尺寸 * **配图策略优化** ：原文配图 > Unsplash > AI 生成 > 图标 * **零成本优势** ：原文配图无需 API 调用，内容相关性最佳 * **命令行参数** ：`--download-images`、`--image-dir` ### v5.1 (2026-02-13) - 控制面板增强与视觉优化 * **控制面板自动隐藏** ：播放后 3 秒自动隐藏，鼠标移动时显示 * **动画选择按钮** ：控制面板内置 6 种动画切换（Fade/Slide/Cinematic/Zoom/Flip/Cut） * **全屏按钮** ：新增全屏切换功能 * **默认图标装饰** ：即使 N4 纯文字模式，也默认添加 Iconify 图标丰富视觉 * **内容完整展示** ：默认展示完整内容，不精简 * **视频模式字号规范** ：视频导出使用 1.5x 字号，减少留白，确保可读性 * **设计规则新增** ：第 7-9 条明确图标使用、内容完整性、视频字号要求 ### v5.0 (2026-02-13) - 禁止蓝紫组合 * **禁止蓝+紫色彩组合** ：蓝色和紫色绝不能同时出现在同一配色方案中 * **风格配色调整** ： * A4 Gamma：紫色(#6C5CE7) → 天蓝色(#0EA5E9) * E1 卡通 2.5D：蓝+紫 → 蓝+绿+橙(#4A90E2+#10B981+#F39C12) * **设计宣言新增第6条** ：明确禁止蓝紫组合，科技感用蓝+青/绿，创意感用橙/粉/黄 ### v4.9 (2026-02-13) - 纯色设计原则 * **禁止渐变色** ：移除所有「渐变蓝」「渐变紫」设计，改用纯色方案 * **禁止发光效果** ：边框使用实线，不使用 box-shadow 发光 * **风格更新** ： * A3 Typical PPT：蓝白渐变 → 深蓝+浅灰纯色 * A4 Gamma：渐变强调色 → 天蓝色(#0EA5E9) * D1 Neo-Tokyo：霓虹粉+青+绿（无紫色） * D2 Dark Mode：蓝紫渐变 → 冷蓝(#3B82F6)纯色 * **设计宣言新增** ：明确禁止渐变色和发光效果 ### v4.8 (2026-02-13) - API Key 安全修复 * **移除硬编码 API Key** ：删除 fetch_unsplash.py 和 generate_images.py 中的硬编码 API Key * **新增环境变量配置指南** ：完整的 API Key 申请和配置说明 * **API Key 检查功能** ：未配置时显示友好的错误提示和申请步骤 * **必需配置** ：UNSPLASH_ACCESS_KEY（Unsplash 配图）、ZENMUX_API_KEY（AI 生成插图） * **可选配置** ：OPENAI_API_KEY、VOLCENGINE_*、ZHIPUAI_API_KEY、GEMINI_API_KEY ### v4.7 (2026-02-12) - 国产 TTS 服务 * **新增国产 TTS 服务** ： * 火山引擎 TTS（字节跳动）：8 种中文语音 * 智谱 AI TTS：支持中文语音合成 * Fish Speech：开源本地部署方案 * **TTS 服务对比** ：免费/付费、音质、推荐场景 * **环境变量配置** ：VOLCENGINE_*, ZHIPUAI_API_KEY, FISH_SPEECH_URL * **命令行更新** ：`--list-services` 列出所有 TTS 服务 * **依赖安装** ：zhipuai, volcengine-python-sdk（可选） ### v4.6 (2026-02-12) - 内嵌字幕功能 * **内嵌字幕系统** ：视频导出时自动添加字幕 * **字幕样式** ：白字黑背景圆角，使用 PingFang SC 字体，底部居中 * **字幕同步** ：按句子分割讲解文字，逐句显示 * **时长分配** ：每句字幕时长 = (该句字数 / 总字数) × 页面音频时长 * **截图优化** ：每句字幕生成独立截图，确保字幕与音频 100% 同步 * **图片加载等待** ：自动等待外部图片加载完成后再截图 * **命令行参数** ：`--no-subtitle` 禁用字幕，`--subtitle-fontsize`、`--subtitle-radius` 自定义样式 ### v4.5 (2026-02-12) - 风格选择优化 * **直接展示风格列表** ：在文本中以表格形式展示全部 17 种风格，一目了然 * **简化选择流程** ：用户可直接输入编号(A1-E2)或名称选择，无需分两步 * **Other 选项支持** ：AskUserQuestion 提供 Other 选项，支持自由输入 * **智能推荐保留** ：仍根据内容类型推荐最佳风格，放在选项第一位 ### v4.4 (2026-02-11) - 风格选择优化 * **两阶段风格选择流程** ： * 第一步：展示推荐风格 + 3 个大类（Classic/Professional、Editorial/Design、Tech/Education） * 第二步：选择大类后展开该类别下的所有具体风格 * **完整风格速查表** ：在文本中以表格形式展示全部 17 种风格，方便用户浏览 * **优化 AskUserQuestion 使用** ：每个问题最多 4 个选项，符合工具限制 * **智能推荐优先** ：根据内容类型自动推荐最佳风格，同时保留探索其他风格的入口 ### v4.3 (2026-02-09) - 视频播客模式 * **新增输出模式选择** ：M1 仅 HTML PPT / M2 视频播客模式 * **视频播客模式内容增强** ： * 每个主题拆分为 2-3 个子页面（避免单页停留过久） * 增加数据卡片、关键数字、进度条等视觉元素 * 页数增加 50-100%，内容密度提升 * **内容拆分策略** ：概念页 + 数据页 + 案例页 * **推荐配图方案** ：Excalidraw 技术图表 + 信息图表 * **优化工作流** ：9 个阶段，步骤清晰 ### v4.2 (2026-02-09) - 视频导出 v3.0 音频驱动 * **音频驱动时长** ：每页展示时间 = 该页音频实际时长，视频/音频 100% 同步 * **流程重构** ：先生成音频 → 获取时长 → 按时长截图 → 合成视频 * **ffprobe 时长检测** ：使用 ffprobe 替代 mutagen，更可靠 * **移除 --duration 参数** ：时长完全由讲解文字决定 * **默认语音改为云健** ：zh-CN-YunjianNeural（新闻播报男声） ### v4.1 (2026-02-09) - 视频导出功能 * **新增视频导出系统** ：将 HTML PPT 转换为带配音的 MP4 视频 * **Playwright 截图** ：高清捕获每页幻灯片（2x 分辨率） * **双 TTS 服务** ：Edge TTS（免费，16种中文语音）/ OpenAI TTS（高质量） * **智能时长对齐** ：根据配音长度自动调整每页展示时间 * **新增脚本** ：`scripts/ppt_to_video.py` * **新增工作流阶段** ：阶段七 - 视频导出选项 * **支持自定义讲解** ：`data-narration` 和 `data-duration` HTML 属性 ### v4.0 (2026-02-08) - 架构升级 * **LLM 智能设计优先** ：Claude 直接生成 CSS 设计，不再依赖固定模板 * **本地模板作为 fallback** ：16 种预设模板降级为备选方案 * **新增 LLMDesignGenerator** ：Python 类处理 LLM 生成的设计规范 * **新增 LLMHTMLGenerator** ：使用 LLM 设计生成完整 HTML * **设计 JSON 格式规范** ：标准化的设计描述格式 * **自动播放隐藏功能** ：点击播放后控制面板自动消失 * **动画切换按钮** ：所有模板支持 4 种动画切换 ### v3.2 (2026-02-08) * 优化工作流程，确保完整配置询问 * 新增配图方案细分（图标/信息图表/几何装饰） * 添加 AskUserQuestion 标准 JSON 模板 * 添加内容类型→风格推荐映射表 ### v3.1 (2026-02-08) * 新增音频/视频转录功能 * 16 种风格模板完整实现 * Unsplash API 集成 * 6 种翻页动画

Html Ppt 设计器

包含技能