Nano Banana Pro - Gemini Image Generation

Generate custom images using Google's Gemini models for integration into frontend designs.

Prerequisites

Set the GEMINI_API_KEY environment variable with your Google AI API key.

Available Models

Model ID Best For Max Resolution

Flash gemini-2.5-flash-image

Speed, high-volume tasks 1024px

Pro gemini-3-pro-image-preview

Professional quality, complex scenes Up to 4K

Image Generation Workflow

Step 1: Generate the Image

Use scripts/image.py with uv. The script is located in the skill directory at skills/generate/scripts/image.py :

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

Where ${SKILL_DIR} is the directory containing this SKILL.md file.

Options:

• --prompt (required): Detailed description of the image to generate

• --output (required): Output file path (PNG format)

• --aspect (optional): Aspect ratio - "square", "landscape", "portrait" (default: square)

• --reference (optional, repeatable): Path to a reference image for style, composition, or content guidance. Can be specified multiple times for multiple references.

• --model (optional): Model to use - "flash" (fast) or "pro" (high-quality) (default: flash)

• --size (optional): Image resolution for pro model - "1K", "2K", "4K" (default: 1K, ignored for flash)

Using Different Models

Flash model (default) - Fast generation, good for iterations:

uv run "${SKILL_DIR}/scripts/image.py"
--prompt "A minimalist logo design"
--output "/path/to/logo.png"
--model flash

Pro model - Higher quality for final assets:

uv run "${SKILL_DIR}/scripts/image.py"
--prompt "A detailed hero illustration for a tech landing page"
--output "/path/to/hero.png"
--model pro
--size 2K

Using Reference Images

To generate an image based on an existing 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"

To use multiple reference images (e.g., blend styles from several sources):

uv run "${SKILL_DIR}/scripts/image.py"
--prompt "Combine the color palette of the first image with the composition of the second"
--output "/path/to/output.png"
--reference "/path/to/style-ref.png"
--reference "/path/to/composition-ref.png"

Reference images help Gemini understand the desired style, composition, or visual elements you want in the generated image. When multiple references are provided, all images are sent to the model together.

Step 2: Integrate with Frontend Design

After generating images, incorporate them into frontend code:

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 Background:

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

Crafting Effective Prompts

Write detailed, specific prompts for best results:

Good prompt:

A minimalist geometric pattern with overlapping translucent circles in coral, teal, and gold on a deep navy background, suitable for a modern fintech landing page hero section

Avoid vague prompts:

A nice background image

Prompt Elements to Include

• Subject: What the image depicts

• Style: Artistic style (minimalist, abstract, photorealistic, illustrated)

• Colors: Specific color palette matching the design system

• Mood: Atmosphere (professional, playful, elegant, bold)

• Context: How it will be used (hero image, icon, texture, illustration)

• Technical: Aspect ratio needs, transparency requirements

Integration with Frontend-Design Skill

When used alongside the frontend-design skill:

• Plan the visual hierarchy - Identify where generated images add value

• Match the aesthetic - Ensure prompts align with the chosen design direction (brutalist, minimalist, maximalist, etc.)

• Generate images first - Create visual assets before coding the frontend

• Reference in code - Use relative paths to generated images in your HTML/CSS/React

Example Workflow

• User requests a landing page with custom hero imagery

• Invoke nano-banana-pro to generate the hero image with a prompt matching the design aesthetic

• Invoke frontend-design to build the page, referencing the generated image

• Result: A cohesive design with custom AI-generated visuals

Output Location

By default, save generated images to the project's assets directory:

• ./assets/ for simple HTML projects

• ./src/assets/ or ./public/ for React/Vue projects

• Use descriptive filenames: hero-abstract-gradient.png , icon-user-avatar.png