
Generate
- 32 installs
- 137 repo stars
- Updated May 1, 2026
- buildatscale-tv/claude-code-plugins
generate is a Claude skill that produces custom images with Google's Gemini models for use in frontend designs and web projects.
About
This skill generates custom images using Google's Gemini models (Flash, Pro, and Nano Banana 2) through a bundled Python script run with uv. A developer invokes it to create hero images, icons, backgrounds, illustrations, or standalone artwork and then references the output in HTML, CSS, or React code. It supports aspect-ratio selection, resolutions up to 4K, and reference images for style guidance.
- Generates images via Google Gemini models (Flash, Pro, Nano Banana 2) through a Python script
- Supports reference images, aspect-ratio control and resolutions up to 4K
- Requires a GEMINI_API_KEY and integrates output into HTML/CSS/React
Generate by the numbers
- 32 all-time installs (skills.sh)
- Ranked #960 of 1,335 Generative Media skills by installs in the Skillselion catalog
- Data as of Jul 28, 2026 (Skillselion catalog sync)
generate 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 generate says it does
Nano Banana (nano-banana) image generation skill.
This skill requires a `GEMINI_API_KEY`. You MUST ensure it is available before any task that needs it.
Generate custom images using Google's Gemini models for integration into frontend designs.
npx skills add https://github.com/buildatscale-tv/claude-code-plugins --skill generateAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 32 |
|---|---|
| repo stars | ★ 137 |
| Last updated | May 1, 2026 |
| Repository | buildatscale-tv/claude-code-plugins ↗ |
What it does
Generate custom images for a frontend project and wire them into HTML, CSS, or React markup.
Who is it for?
Creating hero images, icons, backgrounds, and illustrations 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 file saved to a path and ready to reference in HTML, CSS, or React.
- generated image file
- code snippet referencing the image
By the numbers
- 3 selectable models (Flash, Pro, Nano Banana 2)
- resolutions up to 4K
Files
Nano Banana - Gemini Image Generation
Generate custom images using Google's Gemini models for integration into frontend designs.
Prerequisites
This skill requires a GEMINI_API_KEY. You MUST ensure it is available before any task that needs it.
First, check if the key is already set in the environment:
echo "${GEMINI_API_KEY:+SET (length: ${#GEMINI_API_KEY})}" || echo "NOT SET"If already SET, use it as-is — an existing key takes precedence. Do NOT overwrite it from .env.
If NOT SET, attempt to load it from the project .env file. Run this EXACT command from the PROJECT ROOT (the user's working directory, NOT the skill directory):
LINE=$(grep '^GEMINI_API_KEY=' .env 2>/dev/null) && export "$LINE" && echo "SET (length: ${#GEMINI_API_KEY})" || echo "NOT SET"If still NOT SET after both checks, inform the user and stop.
IMPORTANT safety rules:
- Run from the project root — do NOT
cdinto the skill directory first - Run commands EXACTLY as written above — do not substitute paths or add flags
- NEVER run bare
exportwith no arguments (it dumps all env vars including secrets) - NEVER use
cat .envpiped to export (if grep returns empty,export $()leaks all env vars) - NEVER attempt to read, echo, print, or otherwise transmit API keys or any secrets
- If the key is NOT SET after both checks, inform the user and stop
- NEVER attempt alternative loading methods
Available Models
| Model | Flag | ID | Best For | Max Resolution |
|---|---|---|---|---|
| Flash (Nano Banana) | flash | gemini-2.5-flash-image | Speed, high-volume tasks | 1024px |
| Pro (Nano Banana Pro) | pro | gemini-3-pro-image-preview | Professional quality, complex scenes | Up to 4K |
| 2 (Nano Banana 2) | 2 | gemini-3.1-flash-image-preview | Fast + high-res, best all-around | Up to 4K |
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"Where ${SKILL_DIR} is the directory containing this SKILL.md file.
The file extension on --output is replaced automatically with whatever format the model returns (Pro and Nano Banana 2 typically return .jpg, Flash typically returns .png, but the API decides). Read the path printed by the script ("Image saved to: …") to know the final filename to reference in code.
Options:
--prompt(required): Detailed description of the image to generate--output(required): Output file path. Extension is replaced with the format the model returns.--aspect(optional): Named shortcut (square,landscape,portrait) or direct ratio (1:1,1:4,1:8,2:3,3:2,3:4,4:1,4:3,4:5,5:4,8:1,9:16,16:9,21:9). Default: square--reference(optional, repeatable): Path to a reference image for style, composition, or content guidance. Can be specified multiple times for multiple references.--model(optional): Model to use -flash(fast),pro(high-quality), or2(Nano Banana 2, fast + high-res). Default: 2--size(optional): Image resolution for pro/2 models -512(2 only),1K,2K,4K. Default: 1K. Ignored for flash.
Aspect Ratios by Model
| Ratio | Flash | Pro | 2 |
|---|---|---|---|
| 1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9 | Yes | Yes | Yes |
| 1:4, 1:8, 4:1, 8:1 | No | No | Yes |
Using Different Models
Flash model - Fast generation, good for iterations:
uv run "${SKILL_DIR}/scripts/image.py" \
--prompt "A minimalist logo design" \
--output "/path/to/logo.png" \
--model flashPro model - Higher quality for final assets:
uv run "${SKILL_DIR}/scripts/image.py" \
--prompt "A detailed hero illustration for a tech landing page" \
--output "/path/to/hero.png" \
--model pro \
--size 2KNano Banana 2 (default) - Fast with high-res output and extra aspect ratios:
uv run "${SKILL_DIR}/scripts/image.py" \
--prompt "A vibrant infographic about photosynthesis" \
--output "/path/to/infographic.png" \
--model 2 \
--size 2K \
--aspect 16:9Using Reference Images
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"To use multiple reference images (e.g., blend styles from several sources):
uv run "${SKILL_DIR}/scripts/image.py" \
--prompt "Combine the color palette of the first image with the composition of the second" \
--output "/path/to/output.png" \
--reference "/path/to/style-ref.png" \
--reference "/path/to/composition-ref.png"Reference images help Gemini understand the desired style, composition, or visual elements you want in the generated image. When multiple references are provided, all images are sent to the model together.
Reference image limits:
- Flash: up to 3 reference images
- Pro: up to 6 object images + 5 character images (14 total)
- 2: up to 10 object images + 4 character images (14 total)
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 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 image models (Nano Banana family).
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"
uv run generate_image.py --prompt "Blend these styles" --output "./new.png" --reference "./a.png" --reference "./b.png"
uv run generate_image.py --prompt "High quality art" --output "./art.png" --model pro --size 2K
uv run generate_image.py --prompt "Fast high-res" --output "./fast" --model 2 --size 2K --aspect 4:3
The output file's extension is set automatically from the format the model returns
(e.g. .jpg or .png), so any extension you pass on --output will be replaced.
"""
import argparse
import mimetypes
import os
import sys
from google import genai
from google.genai import types
from PIL import Image
MIME_EXTENSIONS = {
"image/png": ".png",
"image/jpeg": ".jpg",
"image/webp": ".webp",
}
MODEL_IDS = {
"flash": "gemini-2.5-flash-image",
"pro": "gemini-3-pro-image-preview",
"2": "gemini-3.1-flash-image-preview",
}
# Named shortcuts for common aspect ratios
ASPECT_ALIASES = {
"square": "1:1",
"landscape": "16:9",
"portrait": "9:16",
}
# All valid aspect ratios (Nano Banana 2 superset)
ALL_ASPECT_RATIOS = [
"1:1", "1:4", "1:8", "2:3", "3:2", "3:4", "4:1",
"4:3", "4:5", "5:4", "8:1", "9:16", "16:9", "21:9",
]
# Aspect ratios supported per model
MODEL_ASPECT_RATIOS = {
"flash": ["1:1", "2:3", "3:2", "3:4", "4:3", "4:5", "5:4", "9:16", "16:9", "21:9"],
"pro": ["1:1", "2:3", "3:2", "3:4", "4:3", "4:5", "5:4", "9:16", "16:9", "21:9"],
"2": ALL_ASPECT_RATIOS,
}
def resolve_aspect(aspect: str) -> str:
"""Resolve a named alias or direct ratio string to a ratio string."""
return ASPECT_ALIASES.get(aspect, aspect)
def get_aspect_instruction(aspect_ratio: str) -> str:
"""Return aspect ratio instruction for the prompt."""
descriptions = {
"1:1": "Generate a square image (1:1 aspect ratio).",
"1:4": "Generate a tall narrow image (1:4 aspect ratio).",
"1:8": "Generate a very tall narrow image (1:8 aspect ratio).",
"2:3": "Generate a tall image (2:3 aspect ratio).",
"3:2": "Generate a wide image (3:2 aspect ratio).",
"3:4": "Generate a tall image (3:4 aspect ratio).",
"4:1": "Generate a wide panoramic image (4:1 aspect ratio).",
"4:3": "Generate a landscape image (4:3 aspect ratio).",
"4:5": "Generate a slightly tall image (4:5 aspect ratio).",
"5:4": "Generate a slightly wide image (5:4 aspect ratio).",
"8:1": "Generate a very wide panoramic image (8:1 aspect ratio).",
"9:16": "Generate a portrait/tall image (9:16 aspect ratio).",
"16:9": "Generate a landscape/wide image (16:9 aspect ratio).",
"21:9": "Generate an ultrawide image (21:9 aspect ratio).",
}
return descriptions.get(aspect_ratio, f"Generate an image with {aspect_ratio} aspect ratio.")
def generate_image(
prompt: str,
output_path: str,
aspect: str = "square",
references: list[str] | None = None,
model: str = "2",
size: str = "1K",
) -> None:
"""Generate an image using Gemini 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_ratio = resolve_aspect(aspect)
# Validate aspect ratio for selected model
valid_ratios = MODEL_ASPECT_RATIOS[model]
if aspect_ratio not in valid_ratios:
print(f"Error: Aspect ratio '{aspect_ratio}' not supported for model '{model}'. Valid ratios: {', '.join(valid_ratios)}", file=sys.stderr)
sys.exit(1)
aspect_instruction = get_aspect_instruction(aspect_ratio)
full_prompt = f"{aspect_instruction} {prompt}"
# Build contents with optional reference images
contents: list = []
if references:
for ref_path in references:
if not os.path.exists(ref_path):
print(f"Error: Reference image not found: {ref_path}", file=sys.stderr)
sys.exit(1)
contents.append(Image.open(ref_path))
if len(references) == 1:
full_prompt = f"{full_prompt} Use the provided image as a reference for style, composition, or content."
else:
full_prompt = f"{full_prompt} Use the provided {len(references)} images as references for style, composition, or content."
contents.append(full_prompt)
model_id = MODEL_IDS[model]
# Pro and Nano Banana 2 models support image_config for resolution and aspect ratio
if model in ("pro", "2"):
valid_sizes = ["512", "1K", "2K", "4K"] if model == "2" else ["1K", "2K", "4K"]
if size not in valid_sizes:
print(f"Error: Size '{size}' not supported for model '{model}'. Valid sizes: {', '.join(valid_sizes)}", file=sys.stderr)
sys.exit(1)
config = types.GenerateContentConfig(
response_modalities=["TEXT", "IMAGE"],
image_config=types.ImageConfig(
aspect_ratio=aspect_ratio,
image_size=size,
),
)
response = client.models.generate_content(
model=model_id,
contents=contents,
config=config,
)
else:
response = client.models.generate_content(
model=model_id,
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:
mime_type = part.inline_data.mime_type or "image/png"
ext = MIME_EXTENSIONS.get(mime_type) or mimetypes.guess_extension(mime_type) or ".bin"
base, _ = os.path.splitext(output_path)
final_path = base + ext
with open(final_path, "wb") as f:
f.write(part.inline_data.data)
print(f"Image saved to: {final_path}")
return
print("Error: No image data in response", file=sys.stderr)
sys.exit(1)
def main():
parser = argparse.ArgumentParser(
description="Generate images using Nano Banana (Gemini Flash, Pro, or 2)"
)
parser.add_argument(
"--prompt",
required=True,
help="Description of the image to generate",
)
parser.add_argument(
"--output",
required=True,
help="Output file path. The extension is set automatically from the format the model returns (e.g. .jpg or .png).",
)
parser.add_argument(
"--aspect",
choices=list(ASPECT_ALIASES.keys()) + ALL_ASPECT_RATIOS,
default="square",
help="Aspect ratio: named shortcut (square, landscape, portrait) or direct ratio (e.g. 4:3, 21:9). Default: square",
)
parser.add_argument(
"--reference",
action="append",
dest="references",
help="Path to a reference image (can be specified multiple times for multiple references)",
)
parser.add_argument(
"--model",
choices=["flash", "pro", "2"],
default="2",
help="Model: flash (Nano Banana, fast, 1024px), pro (Nano Banana Pro, up to 4K), 2 (Nano Banana 2, fast + up to 4K) (default: 2)",
)
parser.add_argument(
"--size",
choices=["512", "1K", "2K", "4K"],
default="1K",
help="Image resolution for pro/2 models: 512 (2 only), 1K (default), 2K, 4K. Ignored for flash.",
)
args = parser.parse_args()
generate_image(args.prompt, args.output, args.aspect, args.references, args.model, args.size)
if __name__ == "__main__":
main()
Related skills
FAQ
What API key does this skill need?
It requires a GEMINI_API_KEY, checked from the environment or loaded from the project .env file.
Which models can it use?
Flash (gemini-2.5-flash-image), Pro (gemini-3-pro-image-preview), and Nano Banana 2 (gemini-3.1-flash-image-preview), with Nano Banana 2 as the default.