nano-banana-pro

Nano Banana Pro - Gemini Image Generation

Generate custom images using Google's Gemini 2.5 Flash model for integration into frontend designs.

Prerequisites

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

Image Generation Workflow

Step 1: Generate the Image

Use scripts/image.py with uv. The script is located in the skill directory at skills/nano-banana-pro/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): Path to a reference image for style, composition, or content guidance

Using a Reference Image

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"

The reference image helps Gemini understand the desired style, composition, or visual elements you want in the generated image.

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