/ 目錄 / 演練場 / 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

何時使用: 你已有文章標題和氛圍方向,需要在兩分鐘內產出一張主視覺圖。

前置條件
  • Gemini API key — 在環境變數中設定 GEMINI_API_KEY
  • Skill installed — 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✓ 已複製
    → 兩張針對同一構想呈現不同詮釋的 PNG

結果: 產出一張看起來像委託製作而非 AI 生成的主視覺圖。

注意事項
  • 所有輸出都有一種「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 張符合品牌風格的圖像

結果: 產出一套凝聚一致、可用於一週發文的圖像組合。

注意事項
  • 第 3 張之後風格開始飄移 — 每生成 2 到 3 張就重新陳述錨點;Gemini 對圖像細節的脈絡記憶較模糊

組合

與其他 MCP 搭配,撬動十倍槓桿

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 次
每次呼叫 Token 數
提示詞擴展每次消耗 1 到 3k Claude tokens
費用
Gemini 免費方案下零費用;付費方案約每張圖 $0.04
提示
將成效良好的提示詞儲存為範本,避免重複支付擴展費用。

安全

權限、密鑰、影響範圍

憑證儲存: GEMINI_API_KEY in env
資料出站: 所有構想描述與輸出內容均會傳送至 Google Gemini

故障排查

常見錯誤與修復

Gemini returns blurry/low-quality image

在構想描述中加入解析度與長寬比提示;要求「photographic, high detail, 4K」

Safety filter blocks the generation

簡化構想描述,移除對人物或品牌的模糊指涉

Skill not triggering

明確呼叫效果最佳:「Use banana-claude to ...」

驗證: ls ~/.claude/skills/banana-claude/SKILL.md

替代方案

banana-claude 對比其他方案

替代方案何時用它替代權衡
smart-illustrator-skill需要具備位置偵測的示意圖與封面圖,而非單純靜態影像對創意構想的引導輔助較少
Midjourney / Sora需要更高品質的影像保真度需使用獨立介面,無法與 Claude 整合

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills