generate-slide

Generate Slide Skill

プロジェクトの内容を紹介・説明する1枚スライド画像を、Nano Banana Pro（Gemini 3 Pro Image Preview）API で自動生成します。

---

概要

3パターン x 各2枚候補 = 計6枚生成 → パターンごとに品質チェック → NG ならリトライ → 各パターンの最良1枚、計3枚を出力。

前提条件

• GOOGLE_AI_API_KEY 環境変数が設定済み
• Google AI Studio で Nano Banana Pro（Gemini 3 Pro Image Preview）が有効化済み

機能詳細

機能	詳細
スライド画像生成	See references/slide-generator.md
品質判定	See references/slide-quality-check.md

---

実行フロー

/generate-slide
    |
    +--[Step 1] 情報収集
    |   +-- ユーザー指定テキスト or コードベース自動分析（README, package.json 等）
    |   +-- プロジェクト名・概要・主要機能・技術スタックを抽出
    |
    +--[Step 2] 仕様確認（AskUserQuestion）
    |   +-- サイズ・アスペクト比（デフォルト: 16:9 / 2K）
    |   +-- トーン（テック、カジュアル、コーポレート等）
    |   +-- 強調したいポイント（曖昧な場合のみ質問）
    |
    +--[Step 3] 3パターン x 2枚生成（Nano Banana Pro API x 6回）
    |   +-- Pattern A: Minimalist（2枚）
    |   +-- Pattern B: Infographic（2枚）
    |   +-- Pattern C: Hero Visual（2枚）
    |
    +--[Step 4] パターンごとに品質チェック
    |   +-- 各パターンの2枚を Claude が Read で読み込み
    |   +-- 5段階スコアリング → 高い方を採用候補
    |   +-- 両方スコア2以下 → プロンプト改善してリトライ（最大3回）
    |   +-- リトライ上限到達 → ユーザーに報告、続行 or スキップを選択
    |
    +--[Step 5] 最良3枚を出力
        +-- 各パターンのベスト1枚を selected/ にコピー
        +-- 結果一覧（パス + スコア + 評価コメント）をユーザーに提示

---

デザインパターン

パターン	コンセプト	特徴
Minimalist	余白とタイポグラフィ主体	clean, whitespace, typography-driven, elegant
Infographic	データ/フロー可視化	data visualization, metrics, flow diagram, structured
Hero Visual	大ビジュアル + キャッチコピー	bold visual, impactful, hero image, catchy headline

---

出力先

out/slides/
+-- minimalist_1.png       # Pattern A 候補1
+-- minimalist_2.png       # Pattern A 候補2
+-- infographic_1.png      # Pattern B 候補1
+-- infographic_2.png      # Pattern B 候補2
+-- hero_1.png             # Pattern C 候補1
+-- hero_2.png             # Pattern C 候補2
+-- selected/
|   +-- minimalist.png     # Pattern A 最良
|   +-- infographic.png    # Pattern B 最良
|   +-- hero.png           # Pattern C 最良
+-- quality-report.md      # 品質チェック結果レポート

---

実行手順

Step 1: 情報収集

プロジェクト情報を以下の優先順位で収集:

1. ユーザー指定テキスト: 引数でプロジェクト説明が渡された場合はそれを使用
2. コードベース自動分析: 引数がない場合、以下を自動分析
   • README.md — プロジェクト概要
   • package.json / Cargo.toml / pyproject.toml — プロジェクト名・説明・依存関係
   • CLAUDE.md — プロジェクト構成・目的
   • Plans.md — 進行中のタスク（存在する場合）

抽出する情報:

項目	例
プロジェクト名	Claude Code Harness
概要（1-2文）	Claude Code を Plan-Work-Review で自律運用するプラグイン
主要機能（3-5個）	スキル管理、品質チェック、並列実行
技術スタック	TypeScript, Node.js, Claude Code Plugin
カラー（あれば）	ブランドカラー or 推測

Step 2: 仕様確認

AskUserQuestion で以下を確認（デフォルト値があるため、曖昧な場合のみ質問）:

質問1: スライドのサイズ・アスペクト比は？
  - 16:9 / 2K（推奨）
  - 4:3 / 2K
  - 1:1 / 2K
  - カスタム

質問2: トーンは？
  - テック（ダークテーマ、コード感）
  - カジュアル（明るい、フレンドリー）
  - コーポレート（フォーマル、信頼感）
  - クリエイティブ（大胆、アート寄り）

Step 3: 画像生成

slide-generator.md の手順に従い、3パターン x 2枚 = 6枚を生成。

各パターンの生成は独立しているため、可能な限り並列で curl を実行:

# 並列実行例（3パターン x 2枚）
for pattern in minimalist infographic hero; do
  for i in 1 2; do
    # slide-generator.md の curl パターンを実行
    # → out/slides/${pattern}_${i}.png に保存
  done
done

Step 4: 品質チェック

slide-quality-check.md の基準に従い、各パターンの2枚を評価:

1. 各画像を Read で読み込み
2. 5段階スコアリング（情報伝達力、レイアウト、テキスト可読性、プロフェッショナル感、ブランド整合性）
3. パターン内でスコアが高い方を採用候補
4. 両方スコア2以下 → プロンプト改善して再生成（最大3回）

Step 5: 結果出力

# 最良画像を selected/ にコピー
mkdir -p out/slides/selected
cp out/slides/minimalist_best.png out/slides/selected/minimalist.png
cp out/slides/infographic_best.png out/slides/selected/infographic.png
cp out/slides/hero_best.png out/slides/selected/hero.png

品質レポート（out/slides/quality-report.md）を生成:

# Slide Quality Report

## 生成情報
- プロジェクト: {project_name}
- 生成日時: {datetime}
- アスペクト比: {aspect_ratio}
- トーン: {tone}

## 結果サマリー

| パターン | 候補1 | 候補2 | 採用 | スコア |
|---------|-------|-------|------|--------|
| Minimalist | 3/5 | 4/5 | 候補2 | 4/5 |
| Infographic | 4/5 | 3/5 | 候補1 | 4/5 |
| Hero Visual | 5/5 | 4/5 | 候補1 | 5/5 |

## 詳細評価
...

---

エラーハンドリング

GOOGLE_AI_API_KEY 未設定

GOOGLE_AI_API_KEY が設定されていません。

設定方法:
1. Google AI Studio でAPIキーを取得: https://ai.google.dev/aistudio
2. export GOOGLE_AI_API_KEY="your-api-key"

全パターンでリトライ上限到達

AskUserQuestion で選択肢を提示:

パターン {pattern} の画像が3回のリトライでも基準を満たしませんでした。

選択肢:
1. 最も高スコアの画像を採用して続行
2. このパターンをスキップ
3. プロンプトを手動で指定して再生成

---

関連スキル

• generate-video — プロダクトデモ動画生成（画像生成エンジンを共有）
• notebookLM — ドキュメント・スライド生成（別アプローチ）