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/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)

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

1. Subject: What the image depicts
2. Style: Artistic style (minimalist, abstract, photorealistic, illustrated)
3. Colors: Specific color palette matching the design system
4. Mood: Atmosphere (professional, playful, elegant, bold)
5. Context: How it will be used (hero image, icon, texture, illustration)
6. Technical: Aspect ratio needs, transparency requirements

Integration with Frontend-Design Skill

When used alongside the frontend-design skill:

1. Plan the visual hierarchy - Identify where generated images add value
2. Match the aesthetic - Ensure prompts align with the chosen design direction (brutalist, minimalist, maximalist, etc.)
3. Generate images first - Create visual assets before coding the frontend
4. Reference in code - Use relative paths to generated images in your HTML/CSS/React

Example Workflow

1. User requests a landing page with custom hero imagery
2. Invoke nano-banana-pro to generate the hero image with a prompt matching the design aesthetic
3. Invoke frontend-design to build the page, referencing the generated image
4. 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