
Nano Banana Pro
- 195 installs
- 22 repo stars
- Updated January 13, 2026
- buildatscale-tv/gemini-skills
nano-banana-pro is a Claude skill that generates custom images with Google's Gemini model for use in frontend designs.
About
This skill generates custom images using Google's Gemini model through a bundled Python script run with uv. A developer invokes it to create hero images, icons, backgrounds, illustrations, or standalone artwork and reference them in frontend code. It supports aspect-ratio selection and a reference image for style, and is designed to pair with the frontend-design skill.
- Generates images via Google Gemini through a bundled Python script
- Supports aspect ratios and a reference image for style guidance
- Requires a GEMINI_API_KEY and integrates output into HTML/CSS/React
Nano Banana Pro by the numbers
- 195 all-time installs (skills.sh)
- Ranked #626 of 1,335 Generative Media skills by installs in the Skillselion catalog
- Data as of Jul 28, 2026 (Skillselion catalog sync)
nano-banana-pro capabilities & compatibility
Requires a user-supplied Google Gemini API key
- Capabilities
- image generation · frontend
- Works with
- gcp
- Use cases
- image generation · frontend
- Pricing
- Bring your own API key
What nano-banana-pro says it does
Nano Banana Pro (nano-banana-pro) image generation skill.
Generate custom images using Google's Gemini 2.5 Flash model for integration into frontend designs.
Set the `GEMINI_API_KEY` environment variable with your Google AI API key.
npx skills add https://github.com/buildatscale-tv/gemini-skills --skill nano-banana-proAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 195 |
|---|---|
| repo stars | ★ 22 |
| Last updated | January 13, 2026 |
| Repository | buildatscale-tv/gemini-skills ↗ |
What it does
Generate a custom hero image or asset for a frontend and reference it in HTML, CSS, or React.
Who is it for?
Creating hero images, icons, and backgrounds to embed in frontend code.
Skip if: Video generation or editing existing production assets in place.
When should I use this skill?
The user asks to generate, create, or make an image, or references nano banana.
What you get
A generated image saved as PNG and ready to reference in frontend code.
- generated PNG image
- code reference to the image
By the numbers
- 3 aspect-ratio options (square, landscape, portrait)
Files
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
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
#!/usr/bin/env python3
# /// script
# requires-python = ">=3.10"
# dependencies = [
# "google-genai",
# "pillow",
# ]
# ///
"""
Generate images using Google's Gemini 2.5 Flash (Nano Banana Pro).
Usage:
uv run generate_image.py --prompt "A colorful abstract pattern" --output "./hero.png"
uv run generate_image.py --prompt "Minimalist icon" --output "./icon.png" --aspect landscape
uv run generate_image.py --prompt "Similar style image" --output "./new.png" --reference "./existing.png"
"""
import argparse
import os
import sys
from google import genai
from PIL import Image
def get_aspect_instruction(aspect: str) -> str:
"""Return aspect ratio instruction for the prompt."""
aspects = {
"square": "Generate a square image (1:1 aspect ratio).",
"landscape": "Generate a landscape/wide image (16:9 aspect ratio).",
"portrait": "Generate a portrait/tall image (9:16 aspect ratio).",
}
return aspects.get(aspect, aspects["square"])
def generate_image(
prompt: str, output_path: str, aspect: str = "square", reference: str | None = None
) -> None:
"""Generate an image using Gemini 2.5 Flash and save to output_path."""
api_key = os.environ.get("GEMINI_API_KEY")
if not api_key:
print("Error: GEMINI_API_KEY environment variable not set", file=sys.stderr)
sys.exit(1)
client = genai.Client(api_key=api_key)
aspect_instruction = get_aspect_instruction(aspect)
full_prompt = f"{aspect_instruction} {prompt}"
# Build contents with optional reference image
contents: list = []
if reference:
if not os.path.exists(reference):
print(f"Error: Reference image not found: {reference}", file=sys.stderr)
sys.exit(1)
ref_image = Image.open(reference)
contents.append(ref_image)
full_prompt = f"{full_prompt} Use the provided image as a reference for style, composition, or content."
contents.append(full_prompt)
response = client.models.generate_content(
model="gemini-2.5-flash-image",
contents=contents,
)
# Ensure output directory exists
output_dir = os.path.dirname(output_path)
if output_dir:
os.makedirs(output_dir, exist_ok=True)
# Extract image from response
for part in response.parts:
if part.text is not None:
print(f"Model response: {part.text}")
elif part.inline_data is not None:
image = part.as_image()
image.save(output_path)
print(f"Image saved to: {output_path}")
return
print("Error: No image data in response", file=sys.stderr)
sys.exit(1)
def main():
parser = argparse.ArgumentParser(
description="Generate images using Gemini 2.5 Flash (Nano Banana Pro)"
)
parser.add_argument(
"--prompt",
required=True,
help="Description of the image to generate",
)
parser.add_argument(
"--output",
required=True,
help="Output file path (PNG format)",
)
parser.add_argument(
"--aspect",
choices=["square", "landscape", "portrait"],
default="square",
help="Aspect ratio (default: square)",
)
parser.add_argument(
"--reference",
help="Path to a reference image for style/composition guidance (optional)",
)
args = parser.parse_args()
generate_image(args.prompt, args.output, args.aspect, args.reference)
if __name__ == "__main__":
main()
Related skills
FAQ
What API key does it need?
It requires the GEMINI_API_KEY environment variable with a Google AI API key.
Does it pair with other skills?
Yes, it is designed to work alongside the frontend-design skill to match the chosen aesthetic.