# Nano Banana Assets

> Generate any kind of visual asset using OpenRouter's Nano Banana Pro (Google Gemini 3 Pro Image Preview). Handles images, graphics, illustrations, icons, banners, backgrounds, UI elements, stickers, characters, and more. Flexible and adaptable to any creative request.

- Skill: `majiayu000/nano-banana-assets` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/nano-banana-assets`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/nano-banana-assets/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/nano-banana-assets

---


# Nano Banana Assets Generator Skill

This skill enables AI agents to generate **any kind of visual asset** using OpenRouter's Nano Banana Pro model (Google Gemini 3 Pro Image Preview). 

**Use this skill when users request:**
- Any image, graphic, or visual content
- Icons, logos, banners, backgrounds, UI elements
- Illustrations, characters, stickers, avatars
- Product mockups, designs, compositions
- Social media graphics, marketing materials
- Creative artwork of any style or type

**Key Philosophy:** Be flexible and creative. Adapt to the user's needs rather than forcing predefined templates.

## About Nano Banana Pro

Nano Banana Pro is Google's most advanced image-generation and editing model, built on Gemini 3 Pro. It extends the original Nano Banana with significantly improved multimodal reasoning, real-world grounding, and high-fidelity visual synthesis.

**Key Features:**
- **Multi-Image Support**: Can blend and edit up to **14 reference images** per request
- **Identity Preservation**: Maintains consistency across up to **5 distinct subjects/characters** simultaneously
- **Multi-Image Blending**: Consistent style across multiple generations with superior quality
- **Text Rendering**: Industry-leading text placement in images (94-96% accuracy) with multilingual layouts
- **Fine-Grained Controls**: Localized edits, lighting adjustments, focus control, camera transformations
- **Flexible Outputs**: Support for 2K/4K outputs and multiple aspect ratios (1:1, 16:9, 9:16, 4:3, 3:4, 21:9, 9:21, 2:3, 3:2, 5:4, 4:5)
- **Context-Rich Graphics**: From infographics and diagrams to cinematic composites
- **Conversational Editing**: Iterative, multi-turn editing workflows for refinement
- **Photorealistic Quality**: Advanced multimodal reasoning for professional-quality outputs

**Understanding Image Limits:**
- **Reference Images**: You can include up to 14 reference images in a single API request
- **Identity Subjects**: The model can maintain consistency for up to 5 different characters/subjects within those references
- **Series Generation**: For generating series of many images (10+, 20+, 50+), use the **sliding window technique** (detailed in section 5 below) to maintain visual consistency across the entire collection by using the most recent 5-14 generated images as references for each new image.

## Known Limitations

### ⚠️ Transparent Backgrounds Not Supported

**IMPORTANT:** Nano Banana Pro (Google Gemini 3 Pro Image Preview) **does not generate images with true alpha transparency**. This is a model limitation, not a configuration issue.

**What Actually Happens:**
- Generated images are RGB PNG files (color type 2) without alpha channels
- When you request "transparent background," the model paints a solid color or pattern
- The background may appear white, gray, or have a checkered pattern painted as pixels
- The resulting PNG files cannot be overlaid on other backgrounds with transparency

**Implications for Agents:**
- ❌ **Do NOT promise users transparent backgrounds** or alpha channel support
- ❌ **Do NOT include "transparent background" in prompts** - it creates fake checkered patterns
- ✅ **DO use chroma key colors** for easy background removal (#00FF00 bright green recommended)
- ✅ **DO inform users** that post-processing is needed for true transparency

**Recommended Approach: Chroma Key Backgrounds**

When users need transparency, use a **bright chroma key color** that can be easily removed:

**Best Chroma Key Colors:**
1. **Bright Green (#00FF00)** - Most common, rarely appears in subjects
2. **Bright Magenta (#FF00FF)** - Alternative if subject contains green
3. **Bright Blue (#0000FF)** - For subjects with green/magenta elements

**Example Prompts:**
```
- "Solid bright green background (#00FF00) for chroma key removal"
- "Pure #00FF00 green background, flat and uniform"
- "Subject isolated on solid bright green (#00FF00) chroma key background"
```

**Why This Works:**
- ✅ Model generates clean, uniform color fills
- ✅ No fake checkered patterns painted as pixels
- ✅ Easy to select and remove using color-based tools
- ✅ Chroma key removal is cleaner than edge detection
- ✅ Works perfectly with standard video/photo editing workflows

**Automated Scripts Available:**

The skill includes several helper scripts in `scripts/` directory for various workflows:

**1. Single Asset with Transparency (Recommended):**
```bash
cd .github/skills/nano-banana-assets/scripts
python generate_with_transparency.py "Your prompt" "1:1" "1024x1024"
```
- ✅ Generates with #00FF00 chroma key (no fake checkered patterns)
- ✅ Removes background with rembg (AI-powered)
- ✅ Outputs transparent RGBA PNG files
- ✅ Saves both transparent and original versions

**2. Batch Generation:**
```bash
# From config file
python batch_generate.py --config example_batch_config.json --transparent

# From prompts
python batch_generate.py --prompts "Icon 1" "Icon 2" "Icon 3" --transparent
```
- ✅ Generate multiple assets at once
- ✅ Optional transparency support
- ✅ Progress tracking and error handling

**3. Post-Process Existing Images:**
```bash
# Remove backgrounds from already-generated images
python remove_backgrounds.py --directory ./images/

# Or with chroma key
python remove_backgrounds.py --chroma-key "#00FF00" image.png
```
- ✅ AI-powered removal with rembg
- ✅ Chroma key color removal
- ✅ Batch directory processing

**See `scripts/README.md` for complete documentation and examples.**

**Requirements:**
```bash
pip install rembg requests Pillow
```

**Post-Processing Background Removal:**

**Recommended: Using rembg (AI-powered removal)**

The **rembg** tool provides automated, high-quality background removal that works with any background color (including chroma key backgrounds):

1. **Install rembg:**
   ```bash
   pip install rembg[gpu]  # For GPU acceleration
   # or
   pip install rembg       # CPU only
   ```

2. **Remove background (single file):**
   ```bash
   rembg i input.png output.png
   ```

3. **Batch process all files:**
   ```bash
   # Process all PNG files in directory
   for file in *.png; do
     rembg i "$file" "transparent_$file"
   done
   
   # Or use rembg's built-in batch processing
   rembg p input_folder output_folder
   ```

4. **Python API (for integration):**
   ```python
   from rembg import remove
   from PIL import Image
   
   input_path = 'input.png'
   output_path = 'output.png'
   
   with open(input_path, 'rb') as i:
       with open(output_path, 'wb') as o:
           input_data = i.read()
           output_data = remove(input_data)
           o.write(output_data)
   ```

**Why rembg is Best:**
- ✅ AI-powered edge detection (U²-Net model)
- ✅ Works with any background color (chroma key or natural)
- ✅ High-quality results with fine details (hair, fur, transparent objects)
- ✅ Fully automated - no manual selection needed
- ✅ Fast batch processing
- ✅ Open source and free

**Alternative: Manual Chroma Key Removal**

If you prefer manual control or don't want to install rembg:

1. **Using ImageMagick (CLI):**
   ```bash
   # Remove bright green background with tolerance
   convert input.png -fuzz 5% -transparent "#00FF00" output.png
   
   # Batch process all files
   for file in *.png; do
     convert "$file" -fuzz 5% -transparent "#00FF00" "transparent_$file"
   done
   ```

2. **Using Photoshop:**
   - Select → Color Range → Sample the green background
   - Adjust tolerance as needed
   - Delete selection → Save as PNG with transparency

3. **Using GIMP:**
   - Colors → Color to Alpha → Select the green (#00FF00)
   - Export as PNG with alpha channel

4. **Using FFmpeg (for batch):**
   ```bash
   ffmpeg -i input.png -filter_complex "colorkey=0x00FF00:0.3:0.2" output.png
   ```

**Not Recommended:**

1. **Plain White/Gray Backgrounds:**
   - ⚠️ Harder to remove if subject has similar colors
   - Requires more manual editing around edges

2. **Request "Transparent" (Avoid):**
   - ❌ Creates fake checkered patterns painted as pixels
   - ❌ Very difficult to remove cleanly

**What to Tell Users:**
```
Note: Generated images have solid backgrounds (RGB PNG format). 
The model cannot create true transparent backgrounds (RGBA). 

For transparency removal, I recommend using rembg (AI-powered):
  pip install rembg
  rembg i input.png output.png

Or for manual chroma key removal with the bright green (#00FF00) background:
  convert image.png -fuzz 5% -transparent "#00FF00" output.png

The chroma key approach avoids the "fake checkered pattern" issue.
```

## Core Capabilities

1. **Generate Single Assets**: Create icons, banners, backgrounds, UI elements, and more
2. **Generate Asset Packs**: Create cohesive sets of related assets with consistent branding
3. **Edit Existing Assets**: Apply fine-grained edits to existing images
4. **Ensure Brand Consistency**: Analyze and maintain visual identity across multiple assets
5. **Generate Consistent Series (6+ Images)**: Create large image series maintaining consistency using the sliding window technique

## Prerequisites

Before using this skill, ensure you have:

- OpenRouter API key (get one from https://openrouter.ai/)
- The API key should be stored as `OPENROUTER_API_KEY` environment variable
- Internet access to call the OpenRouter API

## API Configuration

### Base URL
```
https://openrouter.ai/api/v1/chat/completions
```

### Model
```
google/gemini-3-pro-image-preview
```

### Authentication
```
Authorization: Bearer <OPENROUTER_API_KEY>
```

## Core Operations

### 1. Generate a Single Asset

Use this when the user needs one specific asset (icon, banner, background, etc.).

**When to use:**
- User asks for "create an icon"
- User wants "generate a banner"
- User needs "make a background image"
- User requests any single graphic asset

**Steps:**
1. Collect requirements:
   - What type of asset (icon, banner, background, UI element, etc.)
   - Description/prompt (be detailed and specific)
   - Aspect ratio (1:1, 16:9, 9:16, 4:3, 21:9, etc.)
   - Resolution (1080x1080, 1920x1080, 2K, 4K)
   - Color palette (hex codes)
   - Any reference images or logos

2. Build the prompt using the **Six-Element Framework** (Google's recommended approach):
   ```
   Generate a high-quality [asset type] with the following specifications:
   
   Subject: [Who/what is in the image - be specific about physical attributes, elements]
   Composition: [Framing, perspective, layout - e.g., "centered", "rule of thirds", "close-up", "wide shot"]
   Action: [What is happening - static pose, interaction, movement]
   Location: [Setting, environment, context - where the scene takes place]
   Style: [Overall aesthetic - photorealistic, flat design, minimalist, bold, etc.]
   Lighting: [Specific lighting setup - "soft diffused daylight", "dramatic side lighting", "golden hour", etc.]
   
   Camera Details: [Optional - "85mm lens", "shallow depth of field", "low angle", etc.]
   Materiality: [Optional - texture details like "matte finish", "brushed steel", "translucent glass"]
   
   Technical Specifications:
   Aspect Ratio: [ratio]
   Resolution: [resolution]
   Color Palette: [hex codes]
   
   Requirements:
   - Professional, web-ready quality
   - Modern and visually appealing design
   - Optimized for digital use
   - Clean and polished appearance
   ```

3. Make the API call (see API Call Format section below)

4. Extract generated images from response.choices[0].message.images array

5. Present the images to the user

**Example prompt (using Six-Element Framework):**
```
Generate a high-quality hero banner with the following specifications:

Subject: Abstract geometric shapes (floating hexagons, connecting lines, particles) creating a tech-forward atmosphere
Composition: Wide shot with visual weight on right side, negative space on left for text overlay, balanced with rule of thirds
Action: Subtle sense of movement with particles drifting upward, energy flowing through connecting lines
Location: Digital space with infinite depth, contemporary tech environment
Style: Modern minimalist with vibrant gradients, clean professional aesthetic suitable for SaaS landing page
Lighting: Soft ambient glow from gradient background, subtle rim lighting on geometric elements to create depth

Camera Details: Slight elevated perspective, as if viewing a 3D space, medium depth of field
Materiality: Gradient elements have smooth glass-like quality, geometric shapes with subtle metallic sheen

Technical Specifications:
Aspect Ratio: 16:9
Resolution: 1920x1080
Color Palette: #667EEA (primary blue), #764BA2 (deep purple), #F093FB (accent pink)

Requirements:
- Professional, web-ready quality
- Eye-catching yet not overwhelming
- Clear space on left third for headline text
- Optimized for digital use
```

### 2. Generate Asset Pack

Use this when the user needs multiple related assets maintaining brand consistency.

**When to use:**
- User asks for "social media kit"
- User wants "complete branding package"
- User needs "set of icons" or "icon set"
- User requests multiple related assets

**Steps:**
1. Collect requirements:
   - Overall purpose/description
   - List of asset types needed (e.g., "instagram-post", "facebook-cover", "icon-set")
   - Brand guidelines (style, tone, values)
   - Color palette
   - Logo file (if any)
   - Default aspect ratio and resolution

2. Build the prompt using the **Six-Element Framework**:
   ```
   Generate a complete, brand-consistent asset pack for web development:
   
   Project Description: [description]
   
   Asset Types to Generate:
   1. [asset type 1] - Subject: [...], Composition: [...], Style: [...]
   2. [asset type 2] - Subject: [...], Composition: [...], Style: [...]
   3. [asset type 3] - Subject: [...], Composition: [...], Style: [...]
   ...
   
   Brand Guidelines:
   Subject Matter: [What visual elements represent the brand]
   Composition Approach: [How elements should be arranged - balanced, dynamic, minimal, etc.]
   Visual Actions: [Static vs dynamic, energy level, mood]
   Contextual Environment: [Where these assets exist - digital, physical, abstract]
   Overall Style: [Aesthetic direction - minimalist, bold, elegant, playful, etc.]
   Lighting Treatment: [Consistent lighting approach across all assets]
   
   Camera & Materiality:
   [Any specific perspective or texture requirements]
   
   Brand Color Palette: [colors]
   Default Aspect Ratio: [ratio]
   Default Resolution: [resolution]
   
   Requirements:
   - All assets must maintain visual consistency
   - Follow the brand guidelines strictly
   - Use the provided color palette throughout
   - Professional, production-ready quality
   - Each asset should be optimized for its specific use case
   - Cohesive design language across all assets
   ```

3. Make the API call with reference images if provided

4. Extract all generated images from the response

5. Present each asset with its type/purpose labeled

**Example prompt (with Six-Element Framework):**
```
Generate a complete, brand-consistent asset pack for web development:

Project Description: Social media kit for an eco-friendly coffee brand targeting young professionals

Asset Types to Generate:
1. Instagram post (square, 1:1) - Subject: Coffee cup with natural elements, Composition: Centered product shot, Style: Warm and inviting
2. Instagram story (vertical, 9:16) - Subject: Brewing process with eco messaging, Composition: Vertical flow top to bottom, Style: Dynamic and engaging
3. Facebook cover (wide banner) - Subject: Coffee beans and sustainable packaging, Composition: Wide panoramic layout, Style: Professional and earthy
4. Twitter header (wide banner) - Subject: Brand story visual elements, Composition: Horizontal narrative, Style: Clean and modern
5. App icon (square, simple) - Subject: Stylized coffee cup or bean, Composition: Centered symbol, Style: Minimalist and recognizable

Brand Guidelines:
Subject Matter: Natural coffee elements (beans, cups, plants), sustainable packaging, organic textures, eco-friendly themes
Composition Approach: Clean, balanced layouts with breathing room, focus on product and nature harmony
Visual Actions: Static, serene presentations with subtle organic movement suggestions
Contextual Environment: Natural light settings, wooden surfaces, green plants, sustainable materials backdrop
Overall Style: Minimalist, nature-inspired, earthy aesthetics. Modern organic fusion with professional polish.
Lighting Treatment: Warm, soft natural light (golden hour quality), gentle shadows, inviting and cozy atmosphere

Camera & Materiality:
Slight top-down or 3/4 angles for product shots, natural wood grain textures, matte ceramic finishes, organic paper textures

Brand Color Palette: #2ECC71 (eco green), #27AE60 (forest), #8B4513 (coffee brown), #F5F5DC (cream)
Default Aspect Ratio: 1:1
Default Resolution: 1080x1080

Requirements:
- All assets must maintain visual consistency
- Follow the brand guidelines strictly
- Use the provided color palette throughout
- Professional, production-ready quality
- Each asset should be optimized for its specific use case
- Cohesive design language across all assets
```

### 3. Edit Existing Asset

Use this when the user wants to modify an existing image.

**When to use:**
- User says "edit this image"
- User wants "adjust the lighting"
- User needs "change the colors"
- User requests any modification to an existing asset

**Steps:**
1. Get the source image (URL or base64 data)

2. Collect edit requirements:
   - Specific edit instructions (be precise)
   - Elements to preserve (logo, text, specific objects)
   - Target aspect ratio (if changing)
   - Target resolution (if changing)

3. Build the prompt with detailed editing instructions:
   ```
   Edit the provided image with the following instructions:
   
   Edit Instructions: [Specific edits using the Six-Element Framework]
   - Subject modifications: [What elements to add, remove, or change]
   - Composition adjustments: [Layout, framing, perspective changes]
   - Action changes: [Modify movement, energy, or static elements]
   - Location alterations: [Background, environment, context changes]
   - Style refinements: [Aesthetic adjustments, visual treatment]
   - Lighting adjustments: [Specific lighting changes - "warmer tones", "increase contrast", "soften shadows"]
   
   Camera & Detail Changes:
   - [Optional: focal point, depth of field, perspective adjustments]
   - [Optional: texture, materiality, surface quality changes]
   
   Preserve These Elements: [elements to keep]
   Target Aspect Ratio: [ratio]
   Target Resolution: [resolution]
   
   Editing Requirements:
   - Apply edits precisely as instructed
   - Maintain image quality and professional appearance
   - Preserve specified elements without alteration
   - Ensure smooth transitions and natural-looking results
   - Output should be web-ready and optimized
   ```

4. Make the API call with the source image included in the content array

5. Extract edited image from the response

6. Present the edited image to the user

**Example prompt with image (using Six-Element Framework):**
```
Edit the provided image with the following instructions:

Edit Instructions:
- Subject modifications: Enhance the main product to appear more premium, add subtle glow effect around edges
- Composition adjustments: Maintain current centered composition but add slight depth with background blur
- Action changes: Keep static presentation but add subtle energy with light particles
- Location alterations: Keep current setting but add warmer, more inviting environmental tones
- Style refinements: Shift toward more premium, upscale aesthetic while maintaining brand identity
- Lighting adjustments: Adjust to golden hour lighting quality - warm amber tones from top-left, increase contrast by 20%, soften hard shadows to create more inviting mood, add subtle vignette effect around edges for focus

Camera & Detail Changes:
- Simulate shallow depth of field effect (85mm equivalent)
- Enhance material quality: make surfaces appear more premium with subtle highlights
- Add subtle warm color grading throughout

Preserve These Elements: logo in top-left corner, main product in center, text overlay at bottom, brand colors in text elements

Editing Requirements:
- Apply edits precisely as instructed
- Maintain image quality and professional appearance
- Preserve specified elements without alteration
- Ensure smooth transitions and natural-looking results
- Output should be web-ready and optimized
```

### 4. Ensure Brand Consistency

Use this when the user wants to check if multiple assets follow brand guidelines.

**When to use:**
- User says "check these assets for consistency"
- User wants "review brand compliance"
- User needs "validate branding"
- User asks if assets "match the guidelines"

**Steps:**
1. Collect all assets to analyze (URLs or base64 data)

2. Get brand guidelines:
   - Detailed style requirements
   - Color palette (official brand colors)
   - Reference images showing desired style
   - Logo file
   - Typography preferences
   - Tone and values

3. Build the prompt:
   ```
   Analyze the following assets for brand consistency and provide recommendations:
   
   Brand Guidelines:
   [detailed guidelines]
   
   Brand Colors: [hex codes]
   
   Analysis Requirements:
   - Check adherence to brand guidelines
   - Verify consistent use of colors, typography, and style
   - Identify inconsistencies across assets
   - Provide specific recommendations for improvements
   - Suggest refinements to maintain brand identity
   - Ensure logo usage is consistent and appropriate
   - Verify visual cohesion across all assets
   
   I have [N] assets to analyze. Please review them for consistency.
   ```

4. Make the API call with all assets and reference images

5. Extract analysis text and any corrected images

6. Present the analysis with specific recommendations

**Example prompt:**
```
Analyze the following assets for brand consistency and provide recommendations:

Brand Guidelines:
- Style: Modern, minimalist, professional
- Tone: Trustworthy, innovative, forward-thinking
- Colors must be limited to the brand palette
- Logo must always be visible and properly sized
- Typography: Clean, sans-serif, high readability
- Imagery: High-tech, futuristic, abstract geometric patterns preferred

Brand Colors: #667EEA, #764BA2, #FFFFFF, #2D3748

Analysis Requirements:
- Check adherence to brand guidelines
- Verify consistent use of colors, typography, and style
- Identify inconsistencies across assets
- Provide specific recommendations for improvements
- Suggest refinements to maintain brand identity
- Ensure logo usage is consistent and appropriate
- Verify visual cohesion across all assets

I have 4 assets to analyze. Please review them for consistency.
```

### 5. Generate Consistent Series (More than 5 Images)

Use this when the user needs to generate **a large series of images** (10+, 20+, 50+) that must maintain consistency across the entire series.

**Background**: Nano Banana Pro can process up to **14 reference images** per request and maintain identity for up to **5 distinct subjects/characters**. For generating extensive series (many more images than can be used as references), use a **sliding window approach** where you use the most recent 5-14 generated images as references for each new image.

**When to use:**
- User asks for "20+ icons in the same style"
- User wants "a storyboard with 15+ frames"
- User needs "30-day social media calendar with consistent branding"
- User requests any extensive image series (icon libraries, product catalogs, etc.)

**Steps:**

1. **Initial Setup**:
   - Collect series requirements:
     - Overall series description
     - Individual descriptions for each image
     - Brand guidelines and style requirements
     - Color palette
     - Aspect ratio and resolution
     - Any initial reference images or logo (up to 14 images)

2. **Generate First Image**:
   - Use any initial reference images provided
   - Include brand guidelines and color palette
   - This establishes the baseline style

3. **Generate Subsequent Images (Sliding Window)**:
   - For images 2-14: Use ALL previously generated images as references (accumulating)
   - For image 15 onwards: Use only the LAST 10-14 generated images as references (sliding window)
   - This maintains consistency while respecting the model's 14-image reference limit
   - Recommended: Use 10-12 recent images to leave room for logo/initial references

4. **Workflow Pattern**:

   **For each image in the series:**
   
   a. Build the prompt:
   ```
   Generate image [N] of [TOTAL] for this series:
   
   Series Context: [overall description]
   
   This Image: [specific description for this image]
   
   Brand Guidelines:
   [guidelines]
   
   Color Palette: [colors]
   Aspect Ratio: [ratio]
   Resolution: [resolution]
   
   Consistency Requirements:
   - Maintain the same visual style as the reference images
   - Use consistent design language, color treatment, and composition
   - Ensure this image feels like part of the same cohesive series
   - Professional, web-ready quality
   - Modern and polished appearance
   
   IMPORTANT: The reference images show the previously generated images in this series. Match their style, tone, and visual identity exactly while creating this new variation.
   ```
   
   b. Prepare reference images (up to 14 total):
   ```
   reference_images = []
   
   # Add logo if provided (takes 1 slot)
   if logo_file:
       reference_images.append(logo_file)
   
   # Add initial style references only for first image (up to 3-5 slots)
   if current_image == 1 and initial_references:
       reference_images.extend(initial_references[:5])  # Limit to first 5
   
   # Add previously generated images (sliding window approach)
   if generated_images:
       # Calculate how many slots remain (max 14 total)
       remaining_slots = 14 - len(reference_images)
       
       # For images 2-14: Use all previous images (if they fit)
       if current_image <= 14:
           reference_images.extend(generated_images[:remaining_slots])
       else:
           # For image 15+: Use last 10-12 images (sliding window)
           # Keep 2-4 slots for logo and initial references
           window_size = min(remaining_slots, 12)
           start_index = max(0, len(generated_images) - window_size)
           reference_images.extend(generated_images[start_index:])
   ```
   
   c. Make API call with reference images (max 14)
   
   d. Store the generated image for use in next iteration
   
   e. Repeat for next image

5. **Present results with clear tracking**:
   - Show each image with its number and description
   - Indicate which images were used as references
   - Confirm consistency across the series

**Example workflow for 20-icon series:**

```
User Request: "Create 20 minimalist weather icons with consistent style"

Your Workflow:

Step 1: Generate Icon 1 (Sunny)
---
Prompt: "Generate icon 1 of 20 for this series:

Series Context: Weather icon set with minimalist design. Clean lines, modern style, consistent 2px stroke weight, rounded line caps, monochrome design (#2D3748) on solid bright green (#00FF00) chroma key background for easy removal.

This Image: Sunny weather - sun with rays

Aspect Ratio: 1:1
Resolution: 512x512

Consistency Requirements:
- Professional, web-ready quality
- Modern and polished appearance
- Clean, simple design with consistent visual language"

References: [initial style guide images if any, logo if any]
[Make API call]
[Store generated icon 1]

Step 2: Generate Icon 2 (Cloudy)
---
Prompt: "Generate icon 2 of 20 for this series:

Series Context: Weather icon set with minimalist design, matching the previous icon's stroke weight and design language.

This Image: Cloudy weather - cloud shape

Consistency Requirements:
- Maintain the same visual style as the reference images
- Use consistent design language, stroke weight, line caps
- Ensure this icon feels like part of the same icon family

IMPORTANT: The reference images show the previously generated icons. Match their style exactly."

References: [logo if any, icon 1]
[Make API call]
[Store generated icon 2]

Steps 3-14: Generate Icons 3-14
---
Same process, accumulating all previous icons as references
- Icon 3 references: [logo, icons 1-2]
- Icon 4 references: [logo, icons 1-3]
- Icon 5 references: [logo, icons 1-4]
...
- Icon 14 references: [logo, icons 1-13] (at or near 14-image limit)

Step 15: Generate Icon 15 (Heavy Rain) - SLIDING WINDOW STARTS
---
Prompt: [same structure emphasizing consistency]

References: [logo, icons 4-14] ← Last 11 icons (11 + 1 logo = 12 references)
[Make API call]
[Store generated icon 15]

Steps 16-20: Generate Icons 16-20
---
Continue with sliding window:
- Icon 16 references: [logo, icons 5-15]
- Icon 17 references: [logo, icons 6-16]
- Icon 18 references: [logo, icons 7-17]
- Icon 19 references: [logo, icons 8-18]
- Icon 20 references: [logo, icons 9-19] ← Last 11 + logo
[Store generated icon 8]

Final Response:
Final Response:
"✅ Generated 20 consistent weather icons!

Icons created with sliding window consistency:
- Icons 1-14: Each new icon referenced all previous icons (accumulating references)
- Icons 15-20: Each used the last 11 icons + logo (sliding window of 12 references)

Consistency maintained throughout:
- Same stroke weight (2px)
- Same line caps (rounded)
- Same color (#2D3748)
- Same minimalist style
- Cohesive visual family

All 20 icons maintain perfect consistency across the entire series!"

[Present all 20 icons]
```

**Key Points:**

- **14-image reference limit**: Model can process up to 14 reference images per request
- **Sliding window**: Use last 10-14 images as references for extensive series
- **5 subject identities**: Model maintains consistency for up to 5 different characters/subjects
- **Explicit instructions**: Tell the model the reference images are from the same series
- **Consistency emphasis**: Emphasize matching style, tone, and identity in every prompt
- **Series context**: Always include the overall series description
- **Track progress**: Keep track of which images are used as references
- **Quality control**: After generation, visually verify consistency

**Common Use Cases:**
- Large icon sets (20+, 50+, 100+ icons)
- Storyboards with many frames (15-30+ frames)
- Social media calendar (30-90 days of posts)
- Product catalog (extensive product variations)
- UI component libraries (complete design systems)
- Brand asset collections (comprehensive asset libraries)
- Character variations (same character in different poses/scenes)

## API Call Format

### Basic Request Structure

```json
{
  "model": "google/gemini-3-pro-image-preview",
  "messages": [
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "YOUR PROMPT HERE"
        }
      ]
    }
  ],
  "modalities": ["image", "text"],
  "temperature": 0.7,
  "max_tokens": 4096
}
```

### With Image Input (for editing or reference)

```json
{
  "model": "google/gemini-3-pro-image-preview",
  "messages": [
    {
      "role": "user",
      "content": [
        {
          "type": "image_url",
          "image_url": {
            "url": "https://example.com/image.png"
          }
        },
        {
          "type": "text",
          "text": "YOUR PROMPT HERE"
        }
      ]
    }
  ],
  "modalities": ["image", "text"],
  "temperature": 0.7,
  "max_tokens": 4096
}
```

### With Aspect Ratio Control

```json
{
  "model": "google/gemini-3-pro-image-preview",
  "messages": [
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "YOUR PROMPT HERE"
        }
      ]
    }
  ],
  "modalities": ["image", "text"],
  "image_config": {
    "aspect_ratio": "16:9"
  },
  "temperature": 0.7,
  "max_tokens": 4096
}
```

### Required Headers

```
Authorization: Bearer YOUR_OPENROUTER_API_KEY
Content-Type: application/json
HTTP-Referer: https://github.com/shelbeely/Openrouter-Nano-banana-assets-generator-MCP
X-Title: Nano Banana Assets Generator
```

### Response Format

```json
{
  "choices": [
    {
      "message": {
        "content": "Description of generated assets...",
        "images": [
          {
            "image_url": {
              "url": "data:image/png;base64,iVBORw0KGgoAAAANS..."
            }
          }
        ]
      }
    }
  ]
}
```

## Supported Aspect Ratios

The following aspect ratios are supported by Gemini/Nano Banana Pro (per official Google documentation):

**Landscape formats:**
- `21:9` - Ultra-wide cinematic (ideal for hero banners, cinematic compositions)
- `16:9` - Widescreen (YouTube thumbnails, web banners, hero sections, presentations)
- `4:3` - Traditional landscape (presentations, older displays)
- `3:2` - Standard photo landscape (traditional photography)
- `5:4` - Landscape with slight squareness

**Square format:**
- `1:1` - Square (Instagram posts, icons, profile pictures, avatars)

**Portrait formats:**
- `9:16` - Vertical widescreen (Instagram/Facebook stories, mobile screens, TikTok)
- `3:4` - Traditional portrait (traditional photography)
- `2:3` - Portrait photo standard (magazine covers, portraits)
- `4:5` - Portrait with slight width
- `9:21` - Ultra-tall portrait (rare, specialized mobile UI)

## Supported Resolutions

- `1080x1080` - Standard square (1:1)
- `1920x1080` - Full HD (16:9)
- `1080x1920` - Full HD vertical (9:16)
- `2K` (2560x1440) - High quality
- `4K` (3840x2160) - Ultra high quality
- `3840x2160` - 4K explicit
- `2560x1440` - 2K explicit
- `1280x720` - HD ready

## Best Practices

### Writing Effective Prompts (Google's Six-Element Framework)

Google's research shows that prompts structured around six core elements produce the best results with Gemini models:

1. **Subject: Define Who/What**
   - Be specific about the main elements, characters, or objects
   - Include physical attributes, characteristics, and details
   - ❌ "A banner"
   - ✅ "A modern SaaS hero banner featuring abstract geometric shapes (floating hexagons, connecting nodes, light particles)"

2. **Composition: Describe Framing & Layout**
   - Specify camera angles, framing, and perspective
   - Use standard photography/design terms
   - ❌ "Nice layout"
   - ✅ "Wide shot with rule of thirds composition, negative space on left third for text overlay, visual weight balanced on right"

3. **Action: Explain What's Happening**
   - Describe movement, interactions, or static positioning
   - Define energy level and dynamics
   - ❌ "Some movement"
   - ✅ "Subtle upward particle drift creating sense of innovation and progress, energy flowing through connecting lines"

4. **Location: Set the Environment**
   - Describe setting, context, and surroundings
   - Include environmental details that enhance the scene
   - ❌ "Tech background"
   - ✅ "Contemporary digital workspace with infinite depth, clean minimal environment suggesting cloud/SaaS platform"

5. **Style: Define the Aesthetic**
   - Be specific about visual treatment and design approach
   - Reference design movements, art styles, or specific aesthetics
   - ❌ "Modern look"
   - ✅ "Modern minimalist with vibrant gradients, flat design principles, clean professional aesthetic suitable for enterprise SaaS"

6. **Lighting: Specify Illumination Details**
   - Describe light sources, quality, direction, and mood
   - Include shadows, highlights, and atmospheric effects
   - ❌ "Good lighting"
   - ✅ "Soft ambient glow from gradient background, subtle rim lighting on geometric elements from top-right creating depth, gentle shadows"

### Advanced Prompt Enhancements

1. **Camera Details** (Optional but Powerful)
   - Lens specifications: "85mm portrait lens", "24mm wide angle"
   - Focal properties: "shallow depth of field", "everything in focus"
   - Perspective: "low angle looking up", "bird's eye view", "eye level"
   - Example: "Shot with 85mm equivalent focal length, f/2.8 aperture for subtle background blur"

2. **Materiality & Texture** (For Product/Design Assets)
   - Surface qualities: "matte finish", "glossy", "brushed metal", "frosted glass"
   - Texture details: "smooth gradient", "paper texture", "fabric weave", "metallic sheen"
   - Example: "Gradient elements have smooth glass-like quality, geometric shapes with subtle metallic sheen, soft velvety background"

3. **Full Sentence Narratives**
   - Use natural language, not just keywords
   - Brief the AI like a creative director
   - ❌ "blue purple gradient tech shapes modern"
   - ✅ "Create a hero shot featuring an abstract technology landscape with flowing gradients from deep blue to vibrant purple, populated with geometric shapes that suggest connectivity and innovation"

### Iterative Conversational Editing

Nano Banana Pro excels at multi-turn refinement. Instead of regenerating, use conversational edits:

**Initial Prompt:**
```
Generate a product banner for smart home device...
```

**Follow-up Edit 1:**
```
Make the lighting warmer and more inviting, shift from cool tones to golden hour quality
```

**Follow-up Edit 2:**
```
Add the brand logo in top-left corner, subtle drop shadow, 15% opacity
```

**Follow-up Edit 3:**
```
Increase the contrast of the main product by 20%, make it pop more against the background
```

This preserves composition and layout while refining specific aspects.

### Writing Effective Prompts (Legacy Guidelines - Still Valid)

1. **Be Specific and Detailed**
   - ❌ "Make a banner"
   - ✅ "Create a modern tech startup hero banner with gradient background from blue to purple, abstract geometric elements, and space for overlaying text"

2. **Include Context**
   - Mention where the asset will be used (website, social media, email, app)
   - Specify the target audience
   - Describe the desired mood/emotion

3. **Define Style Clearly**
   - Use descriptive terms: minimalist, vibrant, elegant, playful, professional
   - Reference art styles: flat design, material design, glassmorphism, etc.
   - Mention specific elements: gradients, shadows, textures, patterns

4. **Specify Technical Requirements**
   - Always include aspect ratio for the intended use case
   - Mention resolution if quality is critical
   - List any technical constraints

### Color Guidance

1. **Provide Hex Codes**
   - ✅ Use: "#667EEA", "#764BA2"
   - ❌ Avoid: "blue", "purple"

2. **Include 3-5 Brand Colors**
   - Primary color
   - Secondary color
   - Accent color(s)
   - Background color (if applicable)

3. **Consider Color Harmony**
   - Complementary colors for contrast
   - Analogous colors for harmony
   - Triadic colors for vibrancy

### Reference Images

1. **Use Up to 14 Reference Images (Not Just 5)**
   - Nano Banana Pro supports up to **14 reference images** per request
   - Use for style guidance, composition examples, and identity preservation
   - Categories of references:
     - **Style references**: Overall aesthetic and visual treatment (1-3 images)
     - **Composition references**: Layout and arrangement examples (1-2 images)
     - **Color treatment references**: Mood and color grading (1-2 images)
     - **Subject/identity references**: For maintaining character or product consistency (up to 5 distinct subjects)
     - **Technical references**: Quality level and detail expectations (1-2 images)
     - **Brand assets**: Logos and brand elements (1-2 images)

2. **Provide Context for References**
   - Explain what aspect to emulate from each reference
   - Clarify what to avoid from the reference
   - Specify if it's for style, composition, color, or subject identity
   - Example: "Reference image 1 shows the composition layout to follow. Reference image 2 demonstrates the lighting quality desired."

3. **Identity Preservation Across References**
   - Model can maintain consistency for up to **5 distinct subjects/characters** across the 14 references
   - Use 

…(truncated)