mcpField
N
nano-banana-pro

nano-banana-pro

github.com/buildatscale-tvクリエイティブ・メディア22199 回インストール41 週間前に更新
リポジトリ

nano-banana-pro について

nano-banana-pro は Google's Gemini 2.5 Flash model でカスタム画像を生成するスキルで、フロントエンド設計のワークフローを対象としています。プロンプトに加えて参照画像も指定でき、Web プロジェクト向けに PNG を出力します。

主な機能

  1. 01プロンプトから画像を生成
  2. 02参照画像で生成結果を誘導
  3. 03正方形・横長・縦長の比率を選択
  4. 04生成画像を PNG で保存

活用シーン

  1. 01ランディングページのメイン画像を作成
  2. 02フロントエンド用のビジュアル素材を生成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/buildatscale-tv/gemini-skills --skill nano-banana-pro

インストール後、Claude Code で/nano-banana-proを入力して読み込まれたか確認します。

同梱ファイルscripts/image.py

詳細

Nano Banana Pro - Gemini Image Generation

Google の Gemini 2.5 Flash モデルを使用して、フロントエンドのデザインに組み込むカスタム画像を生成します。

前提条件

Google AI API キーを使って、環境変数 GEMINI_API_KEY を設定してください。

画像生成のワークフロー

ステップ 1：画像を生成する

uv を使って scripts/image.py を実行します。スクリプトはスキルディレクトリ内の skills/nano-banana-pro/scripts/image.py にあります。

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "Your image description" \
  --output "/path/to/output.png"

${SKILL_DIR} は、この SKILL.md ファイルが置かれているディレクトリです。

オプション：

  • --prompt（必須）：生成する画像の詳細な説明
  • --output（必須）：出力ファイルのパス（PNG 形式）
  • --aspect（任意）：アスペクト比。「square」、「landscape」、「portrait」のいずれか（デフォルト：square）
  • --reference（任意）：スタイル、構図、コンテンツの参考にする画像のパス
参照画像を使う

既存の参照画像をもとに画像を生成するには、次のようにします。

uv run "${SKILL_DIR}/scripts/image.py" \
  --prompt "Create a similar abstract pattern with warmer colors" \
  --output "/path/to/output.png" \
  --reference "/path/to/reference.png"

参照画像を使うと、生成画像に求めるスタイル、構図、視覚要素を Gemini が把握しやすくなります。

ステップ 2：フロントエンドのデザインに組み込む

画像を生成したら、フロントエンドのコードに組み込みます。

HTML/CSS：

<img src="./generated-hero.png" alt="Description" class="hero-image" />

React：

import heroImage from './assets/generated-hero.png';
<img src={heroImage} alt="Description" className="hero-image" />

CSS 背景：

.hero-section {
  background-image: url('./generated-hero.png');
  background-size: cover;
  background-position: center;
}

効果的なプロンプトの作成

最良の結果を得るには、詳細で具体的なプロンプトを書いてください。

良いプロンプト：

モダンなフィンテックのランディングページのヒーローセクションに適した、濃紺の背景にコーラル、ティール、ゴールドの半透明な円が重なり合う、ミニマルな幾何学模様

曖昧なプロンプトは避けてください：

素敵な背景画像

プロンプトに含める要素
  1. 被写体：画像に何を描くか
  2. スタイル：アートスタイル（ミニマリスト、抽象的、フォトリアリスティック、イラスト風）
  3. 色：デザインシステムに合った具体的なカラーパレット
  4. 雰囲気：印象（プロフェッショナル、遊び心のある、エレガント、大胆）
  5. 用途：どのように使うか（ヒーロー画像、アイコン、テクスチャ、イラスト）
  6. 技術要件：アスペクト比や透過の要件

Frontend-Design スキルとの連携

frontend-design スキルと併用する場合：

  1. ビジュアルの階層を計画する - 生成画像が効果を発揮する場所を特定します
  2. 美的方向性を合わせる - プロンプトが選択したデザインの方向性（ブルータリスト、ミニマリスト、マキシマリストなど）に沿うようにします
  3. 先に画像を生成する - フロントエンドのコーディング前にビジュアルアセットを作成します
  4. コード内で参照する - HTML/CSS/React で生成画像への相対パスを使います
ワークフローの例
  1. ユーザーがカスタムのヒーロー画像を使ったランディングページをリクエストする
  2. nano-banana-pro を呼び出し、デザインの美的方向性に合うプロンプトでヒーロー画像を生成する
  3. frontend-design を呼び出してページを構築し、生成画像を参照する
  4. 結果：AI が生成したオリジナルのビジュアルを使った、統一感のあるデザイン

出力先

デフォルトでは、生成画像をプロジェクトのアセットディレクトリに保存します。

  • シンプルな HTML プロジェクトでは ./assets/
  • React/Vue プロジェクトでは ./src/assets/ または ./public/
  • hero-abstract-gradient.png、icon-user-avatar.png のように、内容が分かるファイル名を使います

コメント

Markdown 対応