Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
buildatscale-tv avatar

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)
At a glance

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
From the docs

What nano-banana-pro says it does

Nano Banana Pro (nano-banana-pro) image generation skill.
SKILL.md
Generate custom images using Google's Gemini 2.5 Flash model for integration into frontend designs.
SKILL.md
Set the `GEMINI_API_KEY` environment variable with your Google AI API key.
SKILL.md
npx skills add https://github.com/buildatscale-tv/gemini-skills --skill nano-banana-pro

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs195
repo stars22
Last updatedJanuary 13, 2026
Repositorybuildatscale-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

SKILL.mdMarkdownGitHub ↗

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

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.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.