html-ppt-designer

HTML PPT Designer v5.2 / スマートプレゼンテーションデザイナー

バージョン: 5.2 アーキテクチャ: LLM によるスマートデザインを優先 + ローカルテンプレートへのフォールバック + 原文から画像を抽出 + Unsplash の画像 + リアルなページめくりエンジン + 6 種類のアニメーション + ビデオポッドキャストモード + 字幕の埋め込み + 中国製 TTS + 単色デザイン + デフォルトのアイコン装飾 + コントロールパネルの自動非表示 更新日: 2026-02-13

---

🔧 環境変数の設定（初回使用前に必ずお読みください）

この Skill の画像機能と AI 機能を使用する前に、該当する API Key を設定する必要があります。

必須の設定

機能	環境変数	申請先	無料利用枠
Unsplash の画像	UNSPLASH_ACCESS_KEY	https://unsplash.com/developers	1 時間あたり 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	利用量に応じて課金
Zhipu AI TTS	ZHIPUAI_API_KEY	https://open.bigmodel.cn	利用量に応じて課金
Gemini の文字起こし	GEMINI_API_KEY	https://aistudio.google.com	約 $0.001／分

設定方法

方法 1：一時的な設定（現在のターミナルセッション）

export UNSPLASH_ACCESS_KEY="your-unsplash-access-key"
export ZENMUX_API_KEY="your-zenmux-api-key"

方法 2：永続的な設定（シェル設定ファイルに追加）

# 编辑 ~/.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 が応答できない場合、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 をビデオに変換すると、1 枚のスライドが 30～50 秒間表示され、画面が単調になりすぎます。

解決策：

1. コンテンツの分割：元の 1 ページを 2～3 ページに分割します
2. ビジュアルの充実：データカード、グラフ、引用ボックスを追加します
3. テンポの調整：各ページを 10～20 秒表示し、ページをより頻繁に切り替えます

コンテンツの分割方法

元のコンテンツの種類	分割方法	例
概念の紹介	概念ページ + 事例ページ + まとめページ	「AI ネイティブなエージェント企業」を 3 ページに分割
データの表示	データ概要 + 詳細データ + 傾向分析	「市場データ」を 3 ページに分割
手順の説明	概要ページ + 各手順の個別ページ	「3 ステップの方法」を 4 ページに分割
比較分析	比較の概要 + A 案 + B 案 + 結論	「案の比較」を 4 ページに分割

ビジュアル要素のテンプレート

データカード

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

プログレスバー／タイムライン

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

引用ボックス

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

ビデオモードのフォントサイズ規定（v5.1 で追加）

問題：通常の HTML PPT のフォントサイズは、ビデオにエクスポートすると小さくなりすぎ、余白も多く、ユーザーが読み取れません。

解決策：ビデオモードではフォントサイズを 1.5 倍にし、余白を減らして情報密度を高めます。

要素	通常モード	ビデオモード	説明
表紙の大見出し	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 ビデオに変換できます。以下の機能に対応しています。

• 音声に基づく表示時間：各ページの表示時間は、そのページの音声の実際の長さと一致し、完全に同期します
• 字幕の埋め込み：白文字と黒い背景の角丸スタイルで、文ごとに分割して表示します
• 字幕の同期：各字幕の表示時間を文字数の比率で割り当て、音声と完全に同期します
• 自動スクリーンショット：Playwright を使用して各スライドを高画質でキャプチャします
• スマートなナレーション生成：Edge TTS（無料）または OpenAI TTS（高品質）
• 多言語対応：中国語／英語の音声

v3.2 の主な改善点

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

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

字幕の特性

特性	説明
スタイル	白い文字 + 半透明の黒い背景 + 12px の角丸
フォント	PingFang SC（Apple の角ゴシック体）、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-* 属性を追加できます：

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


<div class="slide" data-duration="8000">
  ...
</div>

---

🔧 LLM デザイン生成プロンプトテンプレート

デザイン分析プロンプト

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

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

【页面概览】
{slides_overview}

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

CSS 生成プロンプト

基于以下设计规格，生成完整的 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、小宇宙ポッドキャスト、直接音声リンク、ローカル音声ファイルを入力としてサポートします
• 3 種類の文字起こしモード：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. 画像ソースを 2 種類から選択

• 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 完全設定テンプレート

フェーズ 2：スタイルの選択（一覧を直接表示＋ユーザー入力）

重要：まずテキスト内にスタイルの一覧をすべて表示してから、ユーザーに選択内容を直接入力してもらいます。

手順 1：スタイルの一覧をすべて表示

返信テキスト内に 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}

手順 2：ユーザーによる選択（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 ⭐ 在线课程   色彩编码+互动感                     │
└─────────────────────────────────────────────────────────────────────┘

フェーズ 3：詳細設定

{
  "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 图	实体、关系、数据库	矩形+菱形+连接线
网络拓扑	网络、拓扑、节点	椭圆+矩形+连线
组件图	组件、模块、依赖	矩形+依赖箭头

脚本用法：

# 基本转换
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 嵌入方式：

<div class="diagram-container">
  <svg viewBox="0 0 800 600">
    
  </svg>
</div>


<img src="data:image/svg+xml;base64,..." alt="系统架构图">


<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 演讲风格

: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 - スイススタイル

: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 - 新聞スタイル

: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 - バウハウススタイル

: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 - ブルータリストスタイル

: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 - ネオ東京スタイル

: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 - ダークモードスタイル

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

特徴：赤・黒・白の3色を厳格に使用、幾何学的な接続線（回路風）、等角投影図、高コントラスト

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

特徴：フラット＋柔らかな影、青・緑・オレンジの調和のとれた多彩な色使い、丸みのあるアイコン、デフォルメキャラクター、等角投影の 2.5D 視点

E2 - 教育スタイル

: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	エディトリアル写真	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 magazine artistic
I3 Kinfolk	lifestyle warm film grain cozy
TED 講演の画像	dramatic dark cinematic
Apple Keynote の画像	minimal clean white product
コンサルティングの画像	corporate business professional
新聞の画像	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

class SlideEngine {
  constructor() {
    this.slides = document.querySelectorAll('.slide');
    this.current = 0;
    this.total = this.slides.length;
    this.transitioning = false;
    this.transitionStyle = localStorage.getItem('ppt-transition') || 'fade';
    this.init();
  }

  init() {
    this.slides.forEach((s, i) => {
      s.style.display = i === 0 ? '' : 'none';
      s.classList.toggle('slide-active', i === 0);
    });
    this.updateNav();
    this.bindKeys();
    this.bindTouch();
  }

  async goTo(index) {
    if (index < 0 || index >= this.total || index === this.current || this.transitioning) return;
    this.transitioning = true;

    const leaving = this.slides[this.current];
    const entering = this.slides[index];
    const viewport = document.querySelector('.slides-viewport');

    // Apply transition class
    viewport.className = `slides-viewport transition-${this.transitionStyle}`;

    entering.style.display = '';
    leaving.classList.add('slide-leaving');
    entering.classList.add('slide-entering');

    // Wait for animation
    const duration = this.getDuration();
    await new Promise(r => setTimeout(r, duration));

    leaving.style.display = 'none';
    leaving.classList.remove('slide-active', 'slide-leaving');
    entering.classList.remove('slide-entering');
    entering.classList.add('slide-active');

    this.current = index;
    this.transitioning = false;
    this.updateNav();
  }

  getDuration() {
    const durations = { fade: 600, slide: 500, cinematic: 800, cut: 50, flip: 600, zoom: 500 };
    return durations[this.transitionStyle] || 600;
  }

  next() { this.goTo(this.current + 1); }
  prev() { this.goTo(this.current - 1); }

  setTransition(style) {
    this.transitionStyle = style;
    localStorage.setItem('ppt-transition', style);
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.classList.toggle('active', btn.dataset.style === style);
    });
  }

  bindKeys() {
    document.addEventListener('keydown', e => {
      if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') { e.preventDefault(); this.next(); }
      if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); this.prev(); }
    });
  }

  bindTouch() {
    let startX = 0;
    document.addEventListener('touchstart', e => { startX = e.touches[0].clientX; });
    document.addEventListener('touchend', e => {
      const diff = e.changedTouches[0].clientX - startX;
      if (Math.abs(diff) > 50) { diff > 0 ? this.prev() : this.next(); }
    });
  }

  updateNav() {
    document.querySelectorAll('.nav-dot').forEach((dot, i) => {
      dot.classList.toggle('active', i === this.current);
    });
    const counter = document.querySelector('.slide-counter');
    if (counter) counter.textContent = `${this.current + 1} / ${this.total}`;
  }
}

// Auto-play controller
class AutoPlayController {
  constructor(engine, interval = 5000) {
    this.engine = engine;
    this.interval = interval;
    this.timer = null;
    this.isPlaying = false;
  }

  toggle() { this.isPlaying ? this.stop() : this.start(); }

  start() {
    if (this.isPlaying) return;
    this.isPlaying = true;
    this.updateBtn();
    this.timer = setInterval(() => {
      if (this.engine.current < this.engine.total - 1) this.engine.next();
      else this.stop();
    }, this.interval);
  }

  stop() {
    this.isPlaying = false;
    if (this.timer) { clearInterval(this.timer); this.timer = null; }
    this.updateBtn();
  }

  setSpeed(ms) {
    this.interval = ms;
    if (this.isPlaying) { this.stop(); this.start(); }
  }

  updateBtn() {
    const btn = document.querySelector('.autoplay-toggle');
    if (btn) {
      btn.innerHTML = this.isPlaying
        ? '<span class="iconify" data-icon="ph:pause-circle-bold"></span>'
        : '<span class="iconify" data-icon="ph:play-circle-bold"></span>';
    }
  }
}

コントロールパネルの HTML（v5.1 強化版）

機能：

• 自動再生ボタン（再生／一時停止の切り替え）
• 速度調整（遅い／中／速い）
• 6 種類のアニメーション切り替えボタン
• ページ番号の表示
• 自動非表示：再生開始から 3 秒後に自動で非表示になり、マウスを動かす／ホバーすると表示されます
• キーボードのヒント：初回表示時にショートカットキーのヒントを表示します

<div class="control-panel" id="controlPanel">
  
  <button class="autoplay-toggle" onclick="autoPlay.toggle()" aria-label="自动播放" title="空格键切换">
    <span class="iconify" data-icon="ph:play-circle-bold"></span>
  </button>

  
  <div class="speed-control">
    <button onclick="autoPlay.setSpeed(8000)" title="8秒/页">慢</button>
    <button onclick="autoPlay.setSpeed(5000)" class="active" title="5秒/页">中</button>
    <button onclick="autoPlay.setSpeed(3000)" title="3秒/页">快</button>
  </div>

  
  <span class="divider"></span>

  
  <div class="style-control">
    <button class="style-btn active" data-style="fade" onclick="engine.setTransition('fade')" title="淡入淡出">Fade</button>
    <button class="style-btn" data-style="slide" onclick="engine.setTransition('slide')" title="水平滑动">Slide</button>
    <button class="style-btn" data-style="cinematic" onclick="engine.setTransition('cinematic')" title="电影感缩放">Cinema</button>
    <button class="style-btn" data-style="zoom" onclick="engine.setTransition('zoom')" title="中心缩放">Zoom</button>
    <button class="style-btn" data-style="flip" onclick="engine.setTransition('flip')" title="3D翻转">Flip</button>
    <button class="style-btn" data-style="cut" onclick="engine.setTransition('cut')" title="瞬间切换">Cut</button>
  </div>

  
  <span class="divider"></span>

  
  <span class="slide-counter">1 / N</span>

  
  <button class="fullscreen-btn" onclick="toggleFullscreen()" aria-label="全屏">
    <span class="iconify" data-icon="ph:corners-out"></span>
  </button>
</div>


<style>
.control-panel {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 8px;
  z-index: 1000;
  transition: opacity 0.3s, transform 0.3s;
}

.control-panel.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
}

.control-panel:hover {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

.divider {
  width: 1px;
  height: 20px;
  background: var(--border);
}

.speed-control button,
.style-btn,
.autoplay-toggle,
.fullscreen-btn {
  background: none;
  border: 1px solid var(--border);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  border-radius: 4px;
  transition: all 0.2s;
}

.speed-control button.active,
.style-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.speed-control button:hover,
.style-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
</style>

<script>
// 控制面板自动隐藏
let hideTimer;
const controlPanel = document.getElementById('controlPanel');

function showControlPanel() {
  controlPanel.classList.remove('hidden');
  clearTimeout(hideTimer);
  if (autoPlay.isPlaying) {
    hideTimer = setTimeout(() => {
      controlPanel.classList.add('hidden');
    }, 3000);
  }
}

// 鼠标移动时显示控制面板
document.addEventListener('mousemove', showControlPanel);

// 播放状态变化时处理隐藏
const originalToggle = autoPlay.toggle.bind(autoPlay);
autoPlay.toggle = function() {
  originalToggle();
  if (this.isPlaying) {
    hideTimer = setTimeout(() => {
      controlPanel.classList.add('hidden');
    }, 3000);
  } else {
    controlPanel.classList.remove('hidden');
  }
};

// 全屏功能
function toggleFullscreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
}
</script>

---

📏 ページ数と密度の選択肢

番号	ページ数	密度	用途
S1	5-8 ページ	簡潔版	すばやい概要、エレベーターピッチ
S2	10-12 ページ	標準版	通常のプレゼンテーション、報告
S3	15-20 ページ	詳細版	完全なストーリー、深掘りした共有

---

中核となるデザイン宣言

あなたは「HTML が書けるプログラマー」ではありません。国際的な最高峰のデザイン賞（D&AD、レッド・ドット、IF）の審査員を務めたことのあるビジュアル・ストーリーテリング・ディレクターです。あなたが作るすべての Slide は、それ自体で独立したグラフィック作品です。

AI 的な美意識を避けるための鉄則：

1. ありきたりな角丸カードの積み重ねは禁止――それは Bootstrap のテンプレートであり、プレゼンテーションではありません
2. 根拠のない glow/blur 装飾は禁止――意味のない光の効果はノイズです
3. アイコンを視覚的な主役にすることは禁止――アイコンはナビゲーションの補助であり、デザイン言語ではありません
4. グラデーションの使用は禁止――青のグラデーション、紫のグラデーション、あらゆる色のグラデーションは安っぽいデザインです。代わりに、単色と階層で表現します
5. 発光効果（glow）の使用は禁止――枠線には実線を使い、box-shadow による発光は使いません
6. 青と紫の色の組み合わせは禁止――青と紫を同じ配色に使ってはいけません。テクノロジー感には青＋シアン／緑、クリエイティブ感にはオレンジ／ピンク／黄を使います

v5.1 で追加されたデザインルール： 7. デフォルトでアイコン装飾を追加――ユーザーが画像を明示的に求めていない場合でも、Iconify のアイコンで視覚的な階層を豊かにします 8. コンテンツを省略せずに表示――デフォルトでは内容をすべて表示し、簡略化しません。ユーザーが簡潔版を明示的に求めた場合を除きます 9. 動画モードでは文字サイズを拡大――動画を書き出す際は文字サイズを 1.5x にし、余白を減らして読みやすさを確保します

デザインの自覚：

• 配色には必ず出典（雑誌、展覧会、ブランド事例）を設け、感覚だけに頼らない
• 余白はすべて意図的な「静かな表現」であり、手抜きではありません
• すべての動きは物語のリズムに役立て、技術を誇示するために使いません
• レイアウトの緊張感は「非対称のバランス」から生まれ、すべてを中央揃えにすることではありません

---

🎙 音声／動画の文字起こしシステム

支持的输入源

来源	URL 模式	下载方式
YouTube	youtube.com/*, youtu.be/*	yt-dlp
小宇宙播客	xiaoyuzhoufm.com/episode/*	yt-dlp / HTML 解析 fallback
直接音频链接	*.mp3, *.m4a, *.wav 等	curl/requests
本地文件	/path/to/audio.mp3	直接使用
其他视频站	任意 URL	yt-dlp 通用尝试

三种转录模式

模式	引擎	费用	速度（1h 音频）	适用场景
local（默认）	MLX-Whisper	$0	~25 min	日常使用，Apple Silicon Mac
api	OpenAI Whisper API	$0.36	~3 min	赶时间，长音频
gemini	Gemini Flash	~$0.06	~2 min	最快最便宜，可同时生成摘要

脚本用法

# 基本用法 - YouTube 视频，本地 Whisper 转录
python3 scripts/transcribe_audio.py "https://youtu.be/xxx"

# 小宇宙播客，使用 Gemini 快速转录并生成摘要
python3 scripts/transcribe_audio.py "https://www.xiaoyuzhoufm.com/episode/xxx" \
  --mode gemini --summary

# 本地音频文件，输出到文件
python3 scripts/transcribe_audio.py "/path/to/podcast.mp3" \
  --mode local --output transcript.md

# 英语内容，OpenAI API 转录
python3 scripts/transcribe_audio.py "https://youtu.be/xxx" \
  --mode api --language en

# 生成 SRT 字幕格式
python3 scripts/transcribe_audio.py "https://youtu.be/xxx" --format srt -o subtitles.srt

参数说明

参数	默认值	说明
url	（必填）	音视频 URL 或本地文件路径
--mode	local	转录模式: local / api / gemini
--format	markdown	输出格式: markdown / srt / txt / json
--language	zh	音频语言: zh / en / auto
--model-size	turbo	本地模型: turbo（推荐）/ large（最准）/ small（最快）
--summary	false	Gemini 模式下同时生成摘要
--output / -o	stdout	输出文件路径

依赖安装

# 必装
brew install ffmpeg       # 音频格式转换
brew install yt-dlp       # 下载 YouTube/播客

# 本地模式
pip install mlx-whisper   # Apple Silicon 本地 Whisper

# API 模式需设置环境变量
export OPENAI_API_KEY="sk-..."   # OpenAI Whisper API
export GEMINI_API_KEY="..."       # Gemini Flash API

本地模型选择

模型	ID	速度	质量	适用
turbo（默认）	whisper-large-v3-turbo	快	优	日常播客
large	whisper-large-v3-mlx	慢	最优	追求最高质量
small	whisper-small-mlx	最快	够用	快速预览/低内存

与 PPT 生成的集成

音频/视频转录后的文字会自动进入阶段一的内容解析流程：

transcribe_audio.py 输出 markdown 文本
      ↓
Claude 整理文字（修正错别字、分段、去口水词）
      ↓
提取标题和核心观点作为 PPT 大纲
      ↓
进入正常 PPT 生成流程（风格选择 → 配图 → HTML）

错误处理

场景	自动处理
yt-dlp 未安装	自动 brew install yt-dlp
mlx-whisper 未安装	自动 pip install mlx-whisper
本地转录内存不足	自动降级到 small 模型
API 文件超 25MB	自动 ffmpeg 分片后合并
API Key 未配置	提示用户设置，或切换到 local
小宇宙 yt-dlp 失败	Fallback 到 HTML 页面解析提取音频链接

---

附录：图标库系统（Icon Library）

Iconify 图标库（推荐）

<script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>

<span class="iconify" data-icon="ph:star-bold" style="font-size: 24px; color: var(--accent);"></span>

附录：图表库系统（ECharts）

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>

---

📊 质量验收标准

设计质量

• 色彩不超过 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 种翻页动画