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
environment variable with your Google AI API key.
Image Generation Workflow
Step 1: Generate the Image
Use
with uv. The script is located in the skill directory at
skills/nano-banana-pro/scripts/image.py
:
bash
uv run "${SKILL_DIR}/scripts/image.py" \
--prompt "Your image description" \
--output "/path/to/output.png"
Where
is the directory containing this SKILL.md file.
Options:
- (required): Detailed description of the image to generate
- (required): Output file path (PNG format)
- (optional): Aspect ratio - "square", "landscape", "portrait" (default: square)
- (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:
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:
- for simple HTML projects
- or for React/Vue projects
- Use descriptive filenames:
hero-abstract-gradient.png