/ ディレクトリ / プレイグラウンド / banana-claude
● コミュニティ AgriciDaniel ⚡ 即起動

banana-claude

作者 AgriciDaniel · AgriciDaniel/banana-claude

Claude Code向けAI画像生成スキル — Geminiを活用するクリエイティブディレクターが、あなたの代わりにプロンプトを組み立てます。

Banana ClaudeはClaude CodeをAI画像のクリエイティブディレクターに変えます。ハイレベルなショットの説明をするだけで、スキルが構図・ライティング・スタイルの指示を含むGemini向けプロンプトに展開し、Geminiを呼び出してレンダリングします。ヒーロー画像、ソーシャルカード、ブランド統一のスチール制作に最適です。

なぜ使うのか

主な機能

ライブデモ

実際の動作

banana-claude-skill.replay ▶ 準備完了
0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "banana-claude-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/AgriciDaniel/banana-claude",
        "~/.claude/skills/banana-claude"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "banana-claude-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/AgriciDaniel/banana-claude",
        "~/.claude/skills/banana-claude"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "banana-claude-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/AgriciDaniel/banana-claude",
        "~/.claude/skills/banana-claude"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "banana-claude-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/AgriciDaniel/banana-claude",
        "~/.claude/skills/banana-claude"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "banana-claude-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/AgriciDaniel/banana-claude",
        "~/.claude/skills/banana-claude"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "banana-claude-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/AgriciDaniel/banana-claude",
          "~/.claude/skills/banana-claude"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add banana-claude-skill -- git clone https://github.com/AgriciDaniel/banana-claude ~/.claude/skills/banana-claude

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方: banana-claude

ブログ記事用のヒーロー画像を生成する方法

👤 ワンショットで完成度の高いヒーロー画像が欲しいライターやマーケター ⏱ ~5 min beginner

使うタイミング: 記事タイトルと雰囲気のイメージがある状態で、2分以内にヒーロー画像が1枚必要なとき。

前提条件
  • Gemini APIキー — 環境変数にGEMINI_API_KEYを設定
  • スキルのインストール — git clone https://github.com/AgriciDaniel/banana-claude ~/.claude/skills/banana-claude
フロー
  1. ショットを説明する
    Banana Claude: hero image for 'The 2AM Bug That Cost Us $40k' — moody, cinematic, developer at a laptop lit by monitor glow.✓ コピーしました
    → レンズやライティングの詳細を含む展開済みプロンプトが返される
  2. 確認して生成する
    Generate 2 variants and save to assets/hero-2am-bug.png✓ コピーしました
    → ブリーフに対する異なるアプローチの2枚のPNG

結果: 生成っぽさがなく、プロに依頼したようなヒーロー画像。

注意点
  • すべての出力が「Geminiっぽい見た目」になる — スタイルアンカーを追加する — 例: 'in the style of Annie Leibovitz portraits' — デフォルトの見た目を崩すため
組み合わせ: smart-illustrator-skill

ブランド統一感のあるソーシャル画像パックを生成する

👤 一貫したフィードの見た目を維持したいソロマーケター ⏱ ~15 min beginner

使うタイミング: 統一感のある6〜10枚の画像セットが必要なとき。

前提条件
  • ブランドスタイルのメモ(カラーパレット、ムード) — 3〜5行で記述。スキルがスタイルのガードレールとして使用
フロー
  1. スタイルアンカーを固定する
    My brand style: muted pastels, isometric, soft shadows. Lock that as the anchor for the session.✓ コピーしました
    → スキルがアンカーを確認しエコーバックする
  2. 投稿ごとに反復生成する
    Now generate images for these 6 post titles using the anchor.✓ コピーしました
    → ブランドに沿った6枚の画像

結果: 1週間分の投稿に使えるまとまりのある画像セット。

注意点
  • 3枚目以降でスタイルがブレる — 2〜3回の生成ごとにアンカーを再提示する。Geminiの画像固有のコンテキストは曖昧になりやすい

組み合わせ

他のMCPと組み合わせて10倍の力を

banana-claude-skill + smart-illustrator-skill

Bananaはヒーロー画像やブランド画像に、Smart Illustratorは記事内のダイアグラムに使用

For posts/launch.md: banana-claude for the hero, smart-illustrator for the architecture diagrams inside.✓ コピーしました
banana-claude-skill + ai-marketing-claude-code-skill

マーケティングスキルがキャンペーンを企画し、Bananaがクリエイティブをレンダリング

Draft a 7-post launch campaign with the marketing skill, then generate hero images for each with banana-claude.✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
expand_brief brief: str, style_anchor?: str 生成前にリッチなプロンプトを構築するため ~1k Claude tokens
generate_image prompt: str, variants?: int, out_path?: str ブリーフの展開が承認された後 1 Gemini call per variant
save_template name, prompt プロンプトパターンが安定して良い結果を出すとき 0

コストと制限

運用コスト

APIクォータ
Gemini無料枠: 15リクエスト/分、1500リクエスト/日
呼び出しあたりのトークン
プロンプト展開に1〜3k Claudeトークン
金額
Gemini無料枠なら無料。有料枠では1画像あたり約$0.04
ヒント
成功したプロンプトをテンプレートとして保存すれば、展開の再課金を回避できます。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管: 環境変数にGEMINI_API_KEYを設定
データ送信先: すべてのブリーフと出力はGoogle Geminiに送信されます

トラブルシューティング

よくあるエラーと対処法

Geminiがぼやけた低品質の画像を返す

ブリーフに解像度とアスペクト比のヒントを含めてください。'photographic, high detail, 4K'を指定すると効果的です

Safety filterが生成をブロックする

ブリーフを簡潔にし、人物やブランドへの曖昧な言及を削除してください

スキルがトリガーされない

明示的な呼び出しが最も確実です: 'Use banana-claude to ...'

確認: ls ~/.claude/skills/banana-claude/SKILL.md

代替案

banana-claude 他との比較

代替案代わりに使う場面トレードオフ
smart-illustrator-skill単なるスチールではなく、位置検出付きのダイアグラムやカバーが必要なときクリエイティブブリーフのサポートは少なめ
Midjourney / Soraより高品質なフィデリティが必要なとき別のUIが必要で、Claudeとの統合なし

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る