generate

Original：🇺🇸 English

Translated

1 scriptsChecked / no sensitive code detected

Nano Banana Pro (nano-banana-pro) image generation skill. Use this skill when the user asks to "generate an image", "generate images", "create an image", "make an image", uses "nano banana", or requests multiple images like "generate 5 images". Generates images using Google's Gemini 2.5 Flash for any purpose - frontend designs, web projects, illustrations, graphics, hero images, icons, backgrounds, or standalone artwork. Invoke this skill for ANY image generation request.

1installs

Sourcebuildatscale-tv/claude-code-plugins

Added on2026-02-08

NPX Install

npx skill4agent add buildatscale-tv/claude-code-plugins generate

SKILL.md Content

View Translation Comparison →

Nano Banana Pro - Gemini Image Generation

Generate custom images using Google's Gemini models for integration into frontend designs.

Prerequisites

Set the

GEMINI_API_KEY

environment variable with your Google AI API key.

Available Models

Model	ID	Best For	Max Resolution
Flash	`gemini-2.5-flash-image`	Speed, high-volume tasks	1024px
Pro	`gemini-3-pro-image-preview`	Professional quality, complex scenes	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

:

bash

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
```
--model
```
(optional): Model to use - "flash" (fast) or "pro" (high-quality) (default: flash)
```
--size
```
(optional): Image resolution for pro model - "1K", "2K", "4K" (default: 1K, ignored for flash)

Using Different Models

Flash model (default) - Fast generation, good for iterations:

bash

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:

bash

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

Using a Reference Image

To generate an image based on an existing reference:

bash

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:

html

<img src="./generated-hero.png" alt="Description" class="hero-image" />

React:

jsx

import heroImage from './assets/generated-hero.png';
<img src={heroImage} alt="Description" className="hero-image" />

CSS Background:

css

.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

Subject: What the image depicts
Style: Artistic style (minimalist, abstract, photorealistic, illustrated)
Colors: Specific color palette matching the design system
Mood: Atmosphere (professional, playful, elegant, bold)
Context: How it will be used (hero image, icon, texture, illustration)
Technical: Aspect ratio needs, transparency requirements

Integration with Frontend-Design Skill

When used alongside the frontend-design skill:

Plan the visual hierarchy - Identify where generated images add value
Match the aesthetic - Ensure prompts align with the chosen design direction (brutalist, minimalist, maximalist, etc.)
Generate images first - Create visual assets before coding the frontend
Reference in code - Use relative paths to generated images in your HTML/CSS/React

Example Workflow

User requests a landing page with custom hero imagery
Invoke nano-banana-pro to generate the hero image with a prompt matching the design aesthetic
Invoke frontend-design to build the page, referencing the generated image
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

generate

NPX Install

Tags

SKILL.md Content

Nano Banana Pro - Gemini Image Generation

Prerequisites

Available Models

Image Generation Workflow

Step 1: Generate the Image

Using Different Models

Using a Reference Image

Step 2: Integrate with Frontend Design

Crafting Effective Prompts

Prompt Elements to Include

Integration with Frontend-Design Skill

Example Workflow

Output Location