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

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

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

What generate says it does

Nano Banana (nano-banana) image generation skill.
SKILL.md
This skill requires a `GEMINI_API_KEY`. You MUST ensure it is available before any task that needs it.
SKILL.md
Generate custom images using Google's Gemini models for integration into frontend designs.
SKILL.md
npx skills add https://github.com/buildatscale-tv/claude-code-plugins --skill generate

Add your badge

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

Listed on Skillselion
Installs32
repo stars137
Last updatedMay 1, 2026
Repositorybuildatscale-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

SKILL.mdMarkdownGitHub ↗

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 cd into the skill directory first
  • Run commands EXACTLY as written above — do not substitute paths or add flags
  • NEVER run bare export with no arguments (it dumps all env vars including secrets)
  • NEVER use cat .env piped 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

ModelFlagIDBest ForMax Resolution
Flash (Nano Banana)flashgemini-2.5-flash-imageSpeed, high-volume tasks1024px
Pro (Nano Banana Pro)progemini-3-pro-image-previewProfessional quality, complex scenesUp to 4K
2 (Nano Banana 2)2gemini-3.1-flash-image-previewFast + high-res, best all-aroundUp 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), or 2 (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

RatioFlashPro2
1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9YesYesYes
1:4, 1:8, 4:1, 8:1NoNoYes

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 flash

Pro 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 2K

Nano 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:9

Using 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

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.

This week in AI coding

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

unsubscribe anytime.