feat: image-generator スキルの追加

[ShuntaToda]

概要

Gemini API（google-genai）を使用した画像生成スキルを追加します。Marpスライド作成時に、インフォグラフィックやアーキテクチャ図などの画像をAIで生成し、スライドに埋め込むワークフローを実現します。

背景・モチベーション

• 現在のmarp-creatorスキルではスライドの構造化・Marp化は可能だが、スライド内で使う図やイラストの生成は手作業に頼っている
• Gemini APIの画像生成機能を活用することで、プロンプトベースでスライド用の画像を自動生成できる
• クラスメソッドのMarpテーマとの整合性を保つためのデザインガイドライン（カラーパレット、レイアウト規約）も含めて提供する

追加するファイル構成

.claude/skills/image-generator/
├── SKILL.md                          # スキル定義（メタデータ + 使用方法）
├── design-guidelines.md              # デザインガイドライン
└── scripts/
    └── generate_image.py             # 画像生成スクリプト

実装内容

1. SKILL.md（スキル定義）

• スキル名: image-generator
• トリガー: 画像生成、AI画像、Gemini画像が必要なとき
• 必要な環境変数: GEMINI_API_KEY（Google AI Studioで取得）
• 依存関係: google-genai（uv pip install google-genai）

主な内容:

• プロンプト作成ルール（日本語テキスト必須、詳細情報の記載）
• プロンプトに含めるべき情報（目的、主題、構成要素、スタイル、色彩、レイアウト、雰囲気）
• CLIオプション（--prompt, --output, --size）
• 良い/悪いプロンプトの具体例

2. design-guidelines.md（デザインガイドライン）

Marpテーマとの視覚的整合性を保つためのルール:

• カラーパレット: コーラル、ティール、インディゴ、ウォームイエロー、ダークグレー（青系を避ける理由: Marpテーマの青色アクセントとの重複回避）
• レイアウト: 横長（ランドスケープ）基本、スライド全幅配置前提
• テキストルール: スライドタイトルとの重複禁止、補足テキストは日本語必須
• 背景: 白背景基本、派手なグラデーション禁止
• スタイル: フラットデザイン / モダンインフォグラフィック

3. generate_image.py（画像生成スクリプト）

• Gemini API（gemini-3-pro-image-previewモデル）を使用
• .envファイルからAPIキーを自動読み込み（カレントディレクトリから親を辿って探索）
• ストリーミングレスポンスから画像データを取得・保存
• 出力ディレクトリの自動作成
• サイズオプション: 1K（デフォルト）/ 2K / 4K

使用例

# スライド用インフォグラフィック
uv run python .claude/skills/image-generator/scripts/generate_image.py \
  --prompt "マイクロサービスアーキテクチャ図。中央にAPIゲートウェイ..." \
  --output "images/architecture.png" \
  --size 2K

marp-creatorスキルとの連携

image-generatorはmarp-creatorと組み合わせて使うことを想定しています:

1. marp-creator でスライド構成を設計（ステップ1〜2）
2. スライド設計書に基づき image-generator で必要な画像を生成
3. marp-creator のステップ3で生成した画像をスライドに埋め込み

チェックリスト

• SKILL.md の追加
• design-guidelines.md の追加
• scripts/generate_image.py の追加
• 既存のmarp-creatorスキルからimage-generatorを参照する導線の検討