PPT Agent -- 専門的プレゼンテーション全流程生成

コア理念

専門的 PPT デザイン会社（ページあたり万元級の見積もり）の完全なワークフローをシミュレートします。単に「アウトラインにテンプレートを当てはめる」のではありません：

1. 調査後に生成 -- 実データで内容を埋める、空想で創作しない
2. 企画とデザインを分離 -- 情報構造を先に検証し、次に視覚化する
3. 内容がレイアウトを駆動 -- Bento Grid カード式レイアウト、各ページは内容で版式を決定
4. グローバル全体の統一性 -- スタイルを先に定義し、ページごとに生成、クロスページの統一性を保証
5. インテリジェント配置画像 -- 画像生成機能を活用し、各ページに挿図を配置（ほとんどの環境が対応）

---

環境認識

作業開始前に、エージェントが持つツール機能を自己点検します：

機能	ダウングレード戦略
情報取得（検索/URL/ドキュメント/ナレッジベース）	すべて欠落 → ユーザーが提供する素材に依存
画像生成（ほとんどの環境が対応）	欠落 → 純粋 CSS 装飾で代替
ファイル出力	必須
スクリプト実行（Python/Node.js）	欠落 → 自動パッケージ化と SVG 変換をスキップ

原則：実際に呼び出し可能なツールリストを確認し、利用可能なものを活用します。

---

パス規約

流程全体で繰り返し使用する以下のパスは、Step 1 完了後に即座に確定します：

変数	意味	取得方法
SKILL_DIR	このSKILL.md が配置されているディレクトリの絶対パス	スキルトリガー時に SKILL.md を読み取るディレクトリ
OUTPUT_DIR	成果物出力ルートディレクトリ	ユーザーの現在作業ディレクトリ下の ppt-output/（初回使用時に mkdir -p で作成）

以後のすべてのパスはこの 2 つの変数に基づいており、繰り返し説明しません。

---

入力モードと複雑度判断

エントリ判定

エントリ	例	どのステップから開始
テーマのみ	「Dify 企業紹介 PPT を作成」	Step 1 完全フロー
テーマ＋要件	「15ページの AI セキュリティ PPT、ダークモード」	Step 1（既知の問題をスキップ）
元素材	「このレポートを PPT に変換」	Step 1（素材がメイン）
既存アウトライン	「アウトラインはある、デザイン案を生成」	Step 4 または 5

スキップルール

前置ステップをスキップする場合、対応する依存成果物を補足する必要があります：

開始ステップ	欠落依存	補足方法
Step 4	各ページの内容テキスト	Prompt #3 を使用して各ページの内容割り当てを先に生成
Step 5	企画稿 JSON	ユーザーが提供するか、先に Step 4 を実行

複雑度適応

目標ページ数に応じて流程粒度を自動調整します：

スケール	ページ数	調査	検索	企画	生成
軽量	<= 8 ページ	3 題の簡略版（シーン＋聴衆＋追加情報）	3～5 クエリ	Step 3 は Step 4 と 1 ステップで統合可能	ページごと生成
標準	9～18 ページ	完全 7 題	8～12 クエリ	完全フロー	Part 別に分批、各バッチ 3～5 ページ
大規模	> 18 ページ	完全 7 題	10～15 クエリ	完全フロー	Part 別に分批、各バッチ 3～5 ページ、バッチ間確認

---

6 ステップパイプライン

Step 1: 要件調査 [停止 -- ユーザー回答待ち必須]

スキップ禁止。 テーマがどんなに簡単でも、必ず質問し、ユーザー回答待機後に進める。ユーザーに代わって決定しない。

実行：references/prompts.md の Prompt #1 を使用

1. テーマの背景資料を検索（3～5 件）
2. 複雑度に応じて完全 7 題または簡略 3 題を選択し、一度にユーザーに送信
3. ユーザー回答を待機（ブロッキングポイント）
4. 回答を要件 JSON として整理

7 題三層段階的構造（軽量モードは第 1、2、7 題のみ）：

層	問題	決定する内容
シーン層	1. プレゼン場景（現場/自閲/トレーニング）	情報密度とビジュアルスタイル
シーン層	2. コア聴衆（動的に生成されたペルソナ）	専門深度と説得戦略
シーン層	3. 期待アクション（決定/理解/実行/認識変更）	コンテンツ編成の最終方向
コンテンツ層	4. ナラティブ構造（問題→方案/科学啓蒙/比較/時系列）	アウトラインの骨組みロジック
コンテンツ層	5. コンテンツ重点（検索結果から動的生成、複数選択可）	各 Part 主題の重みづけ
コンテンツ層	6. 説得要素（データ/ケース/権威/方法、複数選択可）	カード内容タイプの選好
実行層	7. 補足情報（スピーカー/ブランドカラー/必須含有/避けるべき/ページ数/配置画像選好）	具体的実行詳細

成果物：要件 JSON（topic + requirements）

---

Step 2: 資料収集

すべての情報取得能力を棚卸しし、すべて活用します。

実行：

1. テーマに基づいてクエリを計画（複雑度表の数量を参考）
2. 利用可能なすべての情報取得ツールで並列検索
3. 各グループ結果を要約整理

成果物：検索結果集合 JSON

---

Step 3: アウトライン企画

実行：references/prompts.md の Prompt #2（アウトラインアーキテクト v2.0）を使用

方法論：ピラミッド原理 -- 結論先行、上から下へ、分類グループ化、論理段階進行

自己チェック：ページ数が要件を満たす / 各 part >= 2 ページ / キーポイントにデータサポート

成果物：[PPT_OUTLINE] JSON

---

Step 4: コンテンツ割り当て＋企画稿 [ユーザー確認推奨]

コンテンツ割り当てと企画稿生成を 1 ステップに統合。各ページに何を置くべきか思考するのと同時に、レイアウトとカードタイプを決定し、より自然で効率的です。

実行：references/prompts.md の Prompt #3（コンテンツ割り当てと企画稿）を使用

要点：

• 検索素材を各ページに精密にマッピング
• 各ページの多層コンテンツ構造を設計（主カード 40～100 字＋データハイライト＋補助ポイント）
• 同時に page_type / layout_hint / cards[] 構造を確定
• 各コンテンツページは最小 3 カード＋2 種カードタイプ＋1 データカード
• レイアウト選択は references/bento-grid.md の決定マトリクスを参照

企画稿の概要をユーザーに表示し、ユーザー確認後に Step 5 に進むことを推奨します。

成果物：各ページ企画カード JSON 配列 → OUTPUT_DIR/planning.json として保存

---

Step 5: スタイル決定＋デザイン稿生成

3 つのサブステップに分割、順序は変更不可：

5a. スタイル決定

実行：references/styles/index.md メインインデックス（決定マトリクス含む）を読み、テーマキーワードで 26 種の預設スタイルから 1 つをマッチング

26 スタイルは 5 板ブロック別に分類（詳細 JSON 定義はブロックファイル内）：

ブロック	数	スタイル ID	ブロックファイル
ダーク専門	7	dark_tech / xiaomi_orange / luxury_purple / nocturne_violet / cyberpunk_neon / chrome_y2k / noir_film	references/styles/dark.md
ライト高級	8	blue_white / fresh_green / minimal_gray / mocha_editorial / medical_pulse / earth_concrete / champagne_gold / liquid_glass	references/styles/light.md
活力鮮明	4	vibrant_rainbow / kindergarten_pop / bauhaus_block / candy_pastel	references/styles/vibrant.md
東方文化	3	royal_red / sakura_wabi / ink_jade	references/styles/cultural.md
自然/レトロ	4	botanic_forest / safari_savanna / retro_70s / gov_authority	references/styles/natural.md

スタイルプレビュー：python3 SKILL_DIR/scripts/gallery.py を実行し、ppt-output/style-gallery/index.html を生成、ブラウザで 26 スタイルの視覚的比較をして確認。

必ず読む：references/typography.md（タイポグラフィ鉄則：字間 / tabular-nums / OpenType / serif italic 混排 / 段落頭の装飾 / 非対称グリッド / フォントスタック三層フォールバック / 微妙なテクスチャ）

成果物：スタイル定義 JSON → OUTPUT_DIR/style.json として保存

5b. インテリジェント配置画像（ユーザーの選好に基づく）

要件調査（Step 1 第 7 題）でユーザーの配置画像選好を確認後に実行。ユーザーが「配置画像不要」を選択した場合はスキップ。

配置画像タイミング

各ページの HTML 生成 前に、先にそのページの配置画像を生成。各ページ最低 1 枚（表紙ページ、チャプターカバーは必須）、生成後 OUTPUT_DIR/images/ に保存。

generate_image プロンプト構成公式

プロンプトは以下の 4 つの側面 を同時に満たす必要があり、次の公式で組み立てます：

[コンテンツテーマ] + [ビジュアルスタイル] + [画面構図] + [技術制約]

側面	説明	例
コンテンツテーマ	そのページの企画稿 JSON のコア概念から抽出、具体的にシーン/対象まで	"DMSO molecular purification process, crystallization flask with clear liquid"
ビジュアルスタイル	style.json のカラースキームと感情基調と整合させる	ダーク技術 → "deep blue dark tech background, subtle cyan glow, futuristic"
画面構図	ページ内での画像配置方法に基づいて決定	右側半透明 → "clean composition, main subject on left, fade to transparent on right"
技術制約	固定サフィックス、出力品質を確保	"no text, no watermark, high quality, professional illustration"

スタイルと配置画像キーワード対応表

PPT スタイル	配置画像スタイルキーワード
ダーク技術	dark tech background, neon glow, futuristic, digital, cyber
小米オレンジ	minimal dark background, warm orange accent, clean product shot, modern
青白ビジネス	clean professional, light blue, corporate, minimal, bright
朱紅宮壁	traditional Chinese, elegant red gold, ink painting, cultural
新鮮自然	fresh green, organic, nature, soft light, watercolor
紫金ラグジュアリー	luxury, purple gold, premium, elegant, metallic
ミニマル灰白	minimal, grayscale, clean, geometric, academic
活力虹	colorful, vibrant, energetic, playful, gradient, pop art

ページタイプ別の調整

ページタイプ	画像特性	Prompt 追加キーワード
表紙ページ	テーマ概観、ビジュアルインパクト	"hero image, wide composition, dramatic lighting"
チャプター表紙	そのチャプター主題の象徴的ビジュアル	"symbolic, conceptual, centered composition"
コンテンツページ	説明補助、主役を奪わない	"supporting illustration, subtle, background-suitable"
データページ	抽象データビジュアライゼーション雰囲気	"abstract data visualization, flowing lines, tech"

禁止事項

• 画像内にテキストを含めない（AI 生成テキストの品質が低い）
• ページのカラースキームと衝突する色を避ける（ダーク主題にはダーク画像、ライト主題にはライト画像）
• コンテンツと無関係な装飾画像を避ける（各画像はそのページのコンテンツと意味的に関連する必要がある）
• 同じプロンプトの繰り返しを避ける（各ページの画像は独特である必要がある）

成果物：OUTPUT_DIR/images/ 下の配置画像ファイル

5c. ページごと HTML デザイン稿生成

実行：references/prompts.md の Prompt #4 + references/bento-grid.md を使用

企画稿をスキップして直接生成禁止。 各ページは Step 4 の構造 JSON が先に必要です。

各ページ Prompt 組み立て公式：

Prompt #4 テンプレート
+ スタイル定義 JSON（5a 成果物）[必須]
+ そのページの企画稿 JSON（Step 4 成果物、cards[]/card_type/position/layout_hint 含む）[必須]
+ そのページのコンテンツテキスト（Step 4 成果物）[必須]
+ 配置画像パス（5b 成果物）[オプション -- 配置画像なし時は IMAGE_INFO ブロック省略]

コア設計制約（完全チェックリストは Prompt #4 内部参照）：

• キャンバス 1280x720px、overflow:hidden
• すべての色は CSS 変数経由で参照、ハードコーディング禁止
• 視覚的に見える要素はすべて実 DOM ノード、図形は内インライン SVG を優先
• ::before/::after 疑似要素をビジュアル装飾に使用禁止、conic-gradient 禁止、CSS border 三角形禁止
• 配置画像の統合：グラデーション融合/色調マスク/雰囲気背景/裁切ウィンドウ/円形裁切（技法詳細は Prompt #4 参照）

分批戦略：Part 単位で分批生成、各バッチ 3～5 ページ。各バッチ完了後に HTML を OUTPUT_DIR/slides/ ディレクトリに書き込み、次のバッチを開始。コンテキスト爆発を避けながら、同一 Part 内のスタイル統一性を保証。

クロスページビジュアルナラティブ（PPT に節奏感を持たせ、独立ページの単なるスタックではなく）：

戦略	ルール	理由
密度交替	高密度ページ（混合グリッド/ヒーロー式）の後に低密度ページ（チャプター表紙/単一焦点）をつけ、張弛有度のリズムを形成	連続 3 ページ以上の高密度コンテンツは視覚疲労を引き起こす
チャプター色彩段階進行	Part 1 カードは accent-1 主使用、Part 2 は accent-2、Part 3 は accent-3 ... 各チャプターで accent 主色を切り替え	色で視聴者に無意識にチャプター切り替えを認識させる
表紙-終了ページの呼応	終了ページのビジュアル要素が表紙ページと呼応（同じ装飾パターン、対称レイアウト）、完全な閉じた感を演出	首尾呼応は最も基本的なナラティブ美学
段階的開示	同一概念が複数ページ展開する時、ビジュアル複雑度は段階的に上昇（第 1 ページシンプル色ブロック → 第 2 ページデータ追加 → 第 3 ページ完全グラフ）	視聴者を段階的に理解へ導く

成果物：各ページ 1 つの HTML ファイル → OUTPUT_DIR/slides/

---

Step 6: 後処理 [必須実行 -- HTML 生成完了後すぐ実行]

スキップ禁止。 HTML 生成完了後は以下 4 ステップを自動実行する、preview.html で終わるな。

slides/*.html --> preview.html --> svg/*.svg --> presentation.pptx

依存チェック（初回実行時に自動実行）：

pip install python-pptx lxml Pillow 2>/dev/null

順序に従って実行：

1. プレビュー統合 -- html_packager.py を実行

   python3 SKILL_DIR/scripts/html_packager.py OUTPUT_DIR/slides/ -o OUTPUT_DIR/preview.html
   

2. SVG 変換 -- html2svg.py を実行（DOM を直接 SVG に変換、<text> を編集可能に保持）

   重要：HTML デザイン稿は references/pipeline-compat.md のパイプラインコンパチビリティルールを遵守する必要があります。そうでない場合、変換後に要素消失、位置ズレなどが発生します。

   python3 SKILL_DIR/scripts/html2svg.py OUTPUT_DIR/slides/ -o OUTPUT_DIR/svg/
   

   背層は dom-to-svg を使用（自動インストール）、初回実行時は esbuild パッケージ化。 ダウングレード：Node.js が利用不可または dom-to-svg インストール失敗時、このステップとステップ 3 をスキップ、preview.html のみ出力。

3. PPTX 生成 -- svg2pptx.py を実行（OOXML ネイティブ SVG 埋め込み、PPT 365 で編集可能）

   python3 SKILL_DIR/scripts/svg2pptx.py OUTPUT_DIR/svg/ -o OUTPUT_DIR/presentation.pptx --html-dir OUTPUT_DIR/slides/
   

   PPT 365 では画像を右クリック → 「図形に変換」でテキストと図形が編集可能。

4. ユーザー通知 -- 成果物位置と使用方法を告知：

   • preview.html -- ブラウザで開くとページめくり可能
   • presentation.pptx -- PPTX（右クリック → 「図形に変換」で編集可能）
   • svg/ -- 各 SVG を PPT に単独でドラッグイン可能
   • ステップ 2-3 がダウングレードスキップされた場合、理由を説明し、ユーザーに Node.js を手動インストール後の再実行を告知

成果物：preview.html + svg/*.svg + presentation.pptx

---

出力ディレクトリ構造

ppt-output/
  slides/              # 各ページ HTML
  svg/                 # ベクトル SVG（PPT に編集可能で導入）
  images/              # AI 配置画像
  preview.html         # ページめくり可能プレビュー
  presentation.pptx    # 編集可能 PPTX（右クリック「図形に変換」）
  outline.json         # アウトライン
  planning.json        # 企画稿
  style.json           # スタイル定義

---

品質自己チェック

側面	チェック項目
コンテンツ	各ページ >= 2 情報カード / >= 60% コンテンツページがデータ含有 / チャプター段階進行
ビジュアル	グローバルスタイル統一 / 配置画像スタイル統一 / カード非重複 / テキスト溢出なし
技術	CSS 変数統一 / SVG 友好制約遵守 / HTML を Puppeteer で描画可能 / pipeline-compat.md 禁止チェックリスト確認

---

リソースルーティング表（フィールド→フォルダ）

企画稿 JSON の各フィールドが、どのディレクトリから対応リソースを抽出するかを決定：

• フィールドルーティング：layout_hint→layouts/、page_type→page-templates/、card_type→blocks/、chart_type→charts/

フィールド	取値	ルーティング先	例
layout_hint	asymmetric / hero-top / l-shape / mixed-grid / primary-secondary / single-focus / symmetric / t-shape / three-column / waterfall	references/layouts/<name>.md	主次結合 → references/layouts/primary-secondary.md
page_type	cover / toc / section / end	references/page-templates/<name>.md	表紙 → references/page-templates/cover.md
card_type	text / data / list / quote / timeline / comparison / diagram / image-hero / matrix-chart / people	references/blocks/<name>.md	データカード → references/blocks/card-styles.md
chart_type	progress-bar / ring / sparkline / radar / funnel / kpi / metric-row / waffle / rating / timeline / treemap / comparison-bar / stacked-bar	references/charts/<name>.md	レーダー → references/charts/radar.md

Step 0/1 採用面接テンプレートルール

Step 0 デフォルト強制テンプレート化：メイン エージェントは OUTPUT_DIR/runtime/prompt-interview.md を先に生成し、レンダリング結果に基づきユーザーに質問する必要があります；採用面接実行時テンプレートは tpl-interview-structured-ui.md と tpl-interview-text-fallback.md の二者択一。

Step 0 構造化採用面接 UI を優先：現在の CLI が AskUserQuestion / request_user_input に相当するネイティブ質問機能を提供する限り、メイン エージェントは構造化採用面接 UI を優先使用する必要があります；非対応時は tpl-interview-text-fallback.md にフォールバック。

Step 0 唯一の例外：prompt 生成が Step 0 で実スクリプトインターフェース障害に遭遇し、BLOCKED_SCRIPT_INTERFACE と判定した場合のみ、メイン エージェントの直接質問を許可；カバー維度は prompt-interview.md の最終要件以下に下がらない。

詳細テンプレート：references/prompts/tpl-interview.md · references/prompts/tpl-interview-structured-ui.md · references/prompts/tpl-interview-text-fallback.md

Reference ファイルインデックス

ファイル	いつ読むか	キーコンテンツ
references/prompts.md	各ステップ生成前（統合版）	5 セット Prompt テンプレート（調査/アウトライン/企画/デザイン/備考）
references/prompts/*.md	モジュール化版本（23 ファイル）	step + module + tpl で分割した Prompt テンプレート
references/playbooks/*.md	各ステップ実行マニュアル（11 ファイル）	outline / research / source / style / step4 各フェーズの実行 playbook
references/styles/index.md	Step 5a	26 種プリセットスタイルインデックス＋