name	generate
description	Use this skill when the user asks to "generate an image", "generate images", "create an image", "make an image", or requests multiple images like "generate 5 images". Generates images using Google's Gemini 2.5 Flash for any purpose - frontend designs, web projects, illustrations, graphics, hero images, icons, backgrounds, or standalone artwork. Invoke this skill for ANY image generation request.

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

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

Install Skill

SKILL.md