Nano Banana 2 Image Asset Skill (WaveSpeed.ai)
When to Use This Skill
Use this skill when the user wants to:
- Generate AI images for landing pages, marketing sites, or product pages
- Create hero background images, product photography, or lifestyle imagery
- Produce commercial-grade images for ecommerce, fashion, or brand marketing
- Build an image asset gallery with reproducible prompts
- Scan an HTML file to detect where images are needed and auto-generate them
- Enrich image prompts with current visual trends from web search
Quick Start
export WAVESPEED_API_KEY=your_key
node cli/index.js list-presets --model nano-banana-2
node cli/index.js generate-images --model nano-banana-2 --dry-run --output ./public/demos
node cli/index.js generate-images --model nano-banana-2 --presets hero_gradient_mesh,product_floating --output ./public/demos
node landing/server.js # -> http://localhost:3000 -> Images tab
Full Automation Workflow
When a user asks you to generate image assets, follow this 7-step workflow:
Step 1: Parse Intent
Extract from the user's request:
- Asset type: hero background, product shot, lifestyle photo, abstract texture, icon/UI element
- Brand identity: colors, typography style, mood (minimal, bold, luxurious, playful)
- Target platform: landing page, social media, email campaign, ecommerce listing
- Specific needs: particular dimensions, file format, transparency requirements
Step 2: Select Categories
Map user intent to preset categories:
| User Intent |
Recommended Category |
Presets |
| Landing page hero section |
hero_backgrounds |
hero_gradient_mesh, hero_abstract_waves, hero_dark_geometric |
| Product listing / ecommerce |
product_shots |
product_floating, product_lifestyle_flat_lay, product_clean_studio |
| Social media / blog imagery |
lifestyle |
lifestyle_urban_outdoor, lifestyle_cozy_indoor, lifestyle_workspace |
| Background textures / patterns |
abstract_texture |
abstract_fluid_art, abstract_geometric_pattern, abstract_organic_texture |
| UI elements / app icons |
icons_ui |
icon_3d_glossy, icon_flat_minimal, icon_gradient_app |
| Full asset library |
all categories |
all 12 presets |
Step 3: Customize Prompts
Create a custom presets file that adapts prompts to the user's brand:
- Copy the structure from
skills/nano-banana-2/image-presets.json
- Rewrite prompts to reference the user's brand colors, product, and aesthetic
- Adjust settings (aspect ratio, resolution, format) based on intended use
- Save to
public/demos/custom-image-presets.json
Example customization for a fintech startup "PayFlow":
{
"version": "1.0.0",
"provider": "wavespeed",
"model": "wavespeed-ai/nano-banana-2",
"default_settings": {
"aspect_ratio": "16:9",
"resolution": "2k",
"output_format": "png"
},
"presets": {
"payflow_hero": {
"label": "PayFlow Hero Background",
"category": "hero_backgrounds",
"description": "Dark gradient hero with abstract financial data visualization",
"prompt": "Abstract dark navy gradient background with flowing streams of luminous teal and gold data points, subtle grid lines suggesting financial charts, bokeh light particles, ultra-clean digital aesthetic, 4K, no text, no UI elements",
"settings": { "aspect_ratio": "16:9", "resolution": "2k", "output_format": "png" },
"tags": ["fintech", "hero", "dark-mode"]
}
}
}
Step 4: Analyze HTML Assets
Scan the user's HTML files to detect where image assets are needed:
node cli/index.js analyze-assets --input ./public/index.html
This identifies:
- Hero sections needing background images
- Product cards with placeholder images
- Gallery containers waiting for content
- Icon slots and UI element placeholders
Step 5: Enrich with Trends via Web Search
Before generating, the agent performs web searches to incorporate current visual trends:
- Search for "[industry] website design trends 2026" to identify popular visual styles
- Search for "[product type] commercial photography trends" for product shots
- Search for "landing page hero image trends" for hero backgrounds
- Incorporate trending color palettes, composition styles, and visual effects into prompts
Example enrichment flow:
- Agent searches: "fintech landing page design trends 2026"
- Discovers: "glassmorphism, dark mode with neon accents, 3D abstract shapes"
- Enriches prompt: adds "glassmorphism frosted card elements, subtle neon teal glow" to the hero preset
Step 6: Generate Images
# With custom presets
node cli/index.js generate-images --model nano-banana-2 --custom-presets ./public/demos/custom-image-presets.json --output ./public/demos
# Or with built-in presets for specific categories
node cli/index.js generate-images --model nano-banana-2 --presets hero_gradient_mesh,product_floating --output ./public/demos
# All presets
node cli/index.js generate-images --model nano-banana-2 --output ./public/demos
Step 7: Verify Output
node landing/server.js
# Open http://localhost:3000 -> click "Images (Nano Banana 2)" tab
# Verify images render, prompts are shown, categories filter correctly
Model Capabilities (Nano Banana 2 via WaveSpeed)
- T2I (text-to-image): high-quality commercial image generation
- Resolution: up to 2K output
- Aspect ratios: 1:1, 16:9, 9:16, 4:3, 3:4, 3:2, 2:3
- Output formats: PNG (default), JPEG, WebP
- Style control: photorealistic, illustration, 3D render, flat design
- Speed: fast inference (~3-8 seconds per image)
- Pricing: ~$0.01-0.03 per image (cost-effective for batch generation)
Image Presets (12 Presets, 5 Categories)
Hero Backgrounds (3 presets)
| Key |
Label |
Aspect Ratio |
Description |
hero_gradient_mesh |
Gradient Mesh Hero |
16:9 |
Vibrant gradient mesh background with flowing color transitions. For SaaS, tech, and startup landing pages. |
hero_abstract_waves |
Abstract Wave Hero |
16:9 |
Dynamic abstract wave forms with depth and motion blur. For creative agencies, portfolios, and modern brands. |
hero_dark_geometric |
Dark Geometric Hero |
16:9 |
Dark background with subtle geometric patterns and accent lighting. For fintech, enterprise, and developer tools. |
Product Shots (3 presets)
| Key |
Label |
Aspect Ratio |
Description |
product_floating |
Floating Product Shot |
1:1 |
Product floating in clean studio space with soft shadows. For ecommerce listings and product pages. |
product_lifestyle_flat_lay |
Lifestyle Flat Lay |
4:3 |
Styled flat lay arrangement with props and natural lighting. For social media, blog posts, and brand marketing. |
product_clean_studio |
Clean Studio Shot |
1:1 |
Minimal white studio product photography with rim lighting. For Amazon, Shopify, and catalog listings. |
Lifestyle (3 presets)
| Key |
Label |
Aspect Ratio |
Description |
lifestyle_urban_outdoor |
Urban Outdoor Lifestyle |
16:9 |
Outdoor urban setting with natural light and candid framing. For fashion, fitness, and lifestyle brands. |
lifestyle_cozy_indoor |
Cozy Indoor Lifestyle |
4:3 |
Warm indoor setting with soft lighting and comfortable aesthetic. For home goods, food, and wellness brands. |
lifestyle_workspace |
Modern Workspace |
16:9 |
Clean modern desk setup with tech and design elements. For SaaS, productivity tools, and remote work brands. |
Abstract / Texture (3 presets)
| Key |
Label |
Aspect Ratio |
Description |
abstract_fluid_art |
Fluid Art Texture |
1:1 |
Flowing fluid art with rich color mixing and organic movement. For backgrounds, overlays, and creative assets. |
abstract_geometric_pattern |
Geometric Pattern |
16:9 |
Precise geometric pattern with modern color palette. For tech branding, presentations, and UI backgrounds. |
abstract_organic_texture |
Organic Texture |
1:1 |
Natural organic texture with depth and tactile quality. For luxury brands, packaging, and premium assets. |
Icons / UI (3 presets)
| Key |
Label |
Aspect Ratio |
Description |
icon_3d_glossy |
3D Glossy Icon |
1:1 |
Glossy 3D rendered icon with soft lighting and reflections. For app stores, feature sections, and marketing. |
icon_flat_minimal |
Flat Minimal Icon |
1:1 |
Clean flat design icon with bold colors and simple shapes. For dashboards, feature lists, and documentation. |
icon_gradient_app |
Gradient App Icon |
1:1 |
Modern gradient app icon with rounded corners and depth. For app store listings and mobile marketing. |
Prompt Engineering Rules (Images)
- Subject + Setting + Lighting: "Wireless headphones floating above a white marble surface, soft directional studio light, gentle shadow"
- Style keywords: "photorealistic", "product photography", "commercial quality", "4K", "high detail"
- Composition: "centered composition", "rule of thirds", "negative space on left for text overlay"
- Color direction: specify palette — "cool blue and teal tones", "warm earth tones", "monochromatic with gold accent"
- Negative specification: describe what to exclude — "no text, no watermark, no people, no branding"
- Format awareness: for hero images, leave space for text overlay; for product shots, use clean backgrounds
- Trend integration: incorporate current visual trends discovered via web search
API Payload (WaveSpeed.ai)
POST https://api.wavespeed.ai/api/v3/wavespeed-ai/nano-banana-2/text-to-image
Authorization: Bearer ${WAVESPEED_API_KEY}
{
"prompt": "Minimalist wireless earbuds floating above a clean white surface, soft studio lighting from upper left, gentle drop shadow, photorealistic product photography, 4K detail, no text, no branding",
"size": "1024x1024",
"output_format": "png"
}
Response:
{
"id": "task-abc123",
"status": "completed",
"result": {
"image_url": "https://cdn.wavespeed.ai/outputs/..."
}
}
Trend-Driven Prompt Enrichment
The agent enriches prompts at runtime by performing web searches before generation:
- Industry trends: Search for visual design trends specific to the user's industry
- Color trends: Look up trending color palettes (e.g., Pantone Color of the Year, trending gradients)
- Composition trends: Research popular layout and composition styles for the asset type
- Platform-specific: Check platform-specific best practices (e.g., Shopify product photo guidelines, hero image dimensions)
Example enrichment:
Original prompt: "Hero background for a SaaS landing page"
Agent searches:
- "SaaS landing page hero design trends 2026"
- "modern gradient background trends"
Enriched prompt: "Abstract dark gradient background transitioning from deep indigo #1a0a2e to electric violet #7c3aed, with floating glassmorphism card elements, subtle grid lines, soft bokeh light particles in teal and white, ultra-clean digital aesthetic, wide composition with negative space center-right for headline text, 4K, no text, no UI mockups"
Adding Custom Presets
Edit skills/nano-banana-2/image-presets.json or create a custom presets file:
"my_custom_preset": {
"label": "My Custom Image",
"category": "product_shots",
"description": "What this image is for",
"prompt": "Detailed prompt describing the desired image...",
"settings": {
"aspect_ratio": "1:1",
"resolution": "2k",
"output_format": "png"
},
"tags": ["product", "ecommerce", "minimal"]
}
Combining with Kling 3.0 Video Skill
For full multi-modal asset generation:
# Generate all video demos
node cli/index.js generate-demo --model kling3 --scenes all
# Smart cover: select best highlight moment as video thumbnail
node cli/index.js smart-cover --manifest ./public/demos/kling3-demos.json
# Generate all image assets
node cli/index.js generate-images --model nano-banana-2 --output ./public/demos
# Serve the unified gallery
node landing/server.js
# -> Videos tab: Kling 3.0 video demos (with smart covers)
# -> Images tab: Nano Banana 2 image assets
Always run smart-cover after video generation — it selects the most visually compelling frame as the video thumbnail using multi-factor AI scoring (color variance, detail, brightness balance).
1---2name: nano-banana-2-image-assets3description: Generate commercial AI images with Nano Banana 2 via WaveSpeed.ai for landing pages, marketing, and product assets. Use when building hero backgrounds, product shots, lifestyle imagery, abstract visuals, or icon sets. Includes 12 image presets across 5 categories (hero backgrounds, product shots, lifestyle, abstract/texture, icons/UI), an HTML asset scanner for detecting image slots, trend-driven prompt enrichment via web search, and CLI generation commands with a gallery UI.4---56# Nano Banana 2 Image Asset Skill (WaveSpeed.ai)78## When to Use This Skill9Use this skill when the user wants to:10- Generate AI images for landing pages, marketing sites, or product pages11- Create hero background images, product photography, or lifestyle imagery12- Produce commercial-grade images for ecommerce, fashion, or brand marketing13- Build an image asset gallery with reproducible prompts14- Scan an HTML file to detect where images are needed and auto-generate them15- Enrich image prompts with current visual trends from web search1617## Quick Start18```bash19export WAVESPEED_API_KEY=your_key20node cli/index.js list-presets --model nano-banana-221node cli/index.js generate-images --model nano-banana-2 --dry-run --output ./public/demos22node cli/index.js generate-images --model nano-banana-2 --presets hero_gradient_mesh,product_floating --output ./public/demos23node landing/server.js # -> http://localhost:3000 -> Images tab24```2526## Full Automation Workflow2728When a user asks you to generate image assets, follow this 7-step workflow:2930### Step 1: Parse Intent31Extract from the user's request:32- **Asset type**: hero background, product shot, lifestyle photo, abstract texture, icon/UI element33- **Brand identity**: colors, typography style, mood (minimal, bold, luxurious, playful)34- **Target platform**: landing page, social media, email campaign, ecommerce listing35- **Specific needs**: particular dimensions, file format, transparency requirements3637### Step 2: Select Categories38Map user intent to preset categories:3940| User Intent | Recommended Category | Presets |41|---|---|---|42| Landing page hero section | hero_backgrounds | `hero_gradient_mesh`, `hero_abstract_waves`, `hero_dark_geometric` |43| Product listing / ecommerce | product_shots | `product_floating`, `product_lifestyle_flat_lay`, `product_clean_studio` |44| Social media / blog imagery | lifestyle | `lifestyle_urban_outdoor`, `lifestyle_cozy_indoor`, `lifestyle_workspace` |45| Background textures / patterns | abstract_texture | `abstract_fluid_art`, `abstract_geometric_pattern`, `abstract_organic_texture` |46| UI elements / app icons | icons_ui | `icon_3d_glossy`, `icon_flat_minimal`, `icon_gradient_app` |47| Full asset library | all categories | all 12 presets |4849### Step 3: Customize Prompts50Create a custom presets file that adapts prompts to the user's brand:51521. Copy the structure from `skills/nano-banana-2/image-presets.json`532. Rewrite prompts to reference the user's brand colors, product, and aesthetic543. Adjust settings (aspect ratio, resolution, format) based on intended use554. Save to `public/demos/custom-image-presets.json`5657Example customization for a fintech startup "PayFlow":58```json59{60 "version": "1.0.0",61 "provider": "wavespeed",62 "model": "wavespeed-ai/nano-banana-2",63 "default_settings": {64 "aspect_ratio": "16:9",65 "resolution": "2k",66 "output_format": "png"67 },68 "presets": {69 "payflow_hero": {70 "label": "PayFlow Hero Background",71 "category": "hero_backgrounds",72 "description": "Dark gradient hero with abstract financial data visualization",73 "prompt": "Abstract dark navy gradient background with flowing streams of luminous teal and gold data points, subtle grid lines suggesting financial charts, bokeh light particles, ultra-clean digital aesthetic, 4K, no text, no UI elements",74 "settings": { "aspect_ratio": "16:9", "resolution": "2k", "output_format": "png" },75 "tags": ["fintech", "hero", "dark-mode"]76 }77 }78}79```8081### Step 4: Analyze HTML Assets82Scan the user's HTML files to detect where image assets are needed:83```bash84node cli/index.js analyze-assets --input ./public/index.html85```86This identifies:87- Hero sections needing background images88- Product cards with placeholder images89- Gallery containers waiting for content90- Icon slots and UI element placeholders9192### Step 5: Enrich with Trends via Web Search93Before generating, the agent performs web searches to incorporate current visual trends:94- Search for "[industry] website design trends 2026" to identify popular visual styles95- Search for "[product type] commercial photography trends" for product shots96- Search for "landing page hero image trends" for hero backgrounds97- Incorporate trending color palettes, composition styles, and visual effects into prompts9899Example enrichment flow:1001. Agent searches: "fintech landing page design trends 2026"1012. Discovers: "glassmorphism, dark mode with neon accents, 3D abstract shapes"1023. Enriches prompt: adds "glassmorphism frosted card elements, subtle neon teal glow" to the hero preset103104### Step 6: Generate Images105```bash106# With custom presets107node cli/index.js generate-images --model nano-banana-2 --custom-presets ./public/demos/custom-image-presets.json --output ./public/demos108109# Or with built-in presets for specific categories110node cli/index.js generate-images --model nano-banana-2 --presets hero_gradient_mesh,product_floating --output ./public/demos111112# All presets113node cli/index.js generate-images --model nano-banana-2 --output ./public/demos114```115116### Step 7: Verify Output117```bash118node landing/server.js119# Open http://localhost:3000 -> click "Images (Nano Banana 2)" tab120# Verify images render, prompts are shown, categories filter correctly121```122123## Model Capabilities (Nano Banana 2 via WaveSpeed)124125- **T2I** (text-to-image): high-quality commercial image generation126- **Resolution**: up to 2K output127- **Aspect ratios**: 1:1, 16:9, 9:16, 4:3, 3:4, 3:2, 2:3128- **Output formats**: PNG (default), JPEG, WebP129- **Style control**: photorealistic, illustration, 3D render, flat design130- **Speed**: fast inference (~3-8 seconds per image)131- **Pricing**: ~$0.01-0.03 per image (cost-effective for batch generation)132133## Image Presets (12 Presets, 5 Categories)134135### Hero Backgrounds (3 presets)136137| Key | Label | Aspect Ratio | Description |138|---|---|---|---|139| `hero_gradient_mesh` | Gradient Mesh Hero | 16:9 | Vibrant gradient mesh background with flowing color transitions. For SaaS, tech, and startup landing pages. |140| `hero_abstract_waves` | Abstract Wave Hero | 16:9 | Dynamic abstract wave forms with depth and motion blur. For creative agencies, portfolios, and modern brands. |141| `hero_dark_geometric` | Dark Geometric Hero | 16:9 | Dark background with subtle geometric patterns and accent lighting. For fintech, enterprise, and developer tools. |142143### Product Shots (3 presets)144145| Key | Label | Aspect Ratio | Description |146|---|---|---|---|147| `product_floating` | Floating Product Shot | 1:1 | Product floating in clean studio space with soft shadows. For ecommerce listings and product pages. |148| `product_lifestyle_flat_lay` | Lifestyle Flat Lay | 4:3 | Styled flat lay arrangement with props and natural lighting. For social media, blog posts, and brand marketing. |149| `product_clean_studio` | Clean Studio Shot | 1:1 | Minimal white studio product photography with rim lighting. For Amazon, Shopify, and catalog listings. |150151### Lifestyle (3 presets)152153| Key | Label | Aspect Ratio | Description |154|---|---|---|---|155| `lifestyle_urban_outdoor` | Urban Outdoor Lifestyle | 16:9 | Outdoor urban setting with natural light and candid framing. For fashion, fitness, and lifestyle brands. |156| `lifestyle_cozy_indoor` | Cozy Indoor Lifestyle | 4:3 | Warm indoor setting with soft lighting and comfortable aesthetic. For home goods, food, and wellness brands. |157| `lifestyle_workspace` | Modern Workspace | 16:9 | Clean modern desk setup with tech and design elements. For SaaS, productivity tools, and remote work brands. |158159### Abstract / Texture (3 presets)160161| Key | Label | Aspect Ratio | Description |162|---|---|---|---|163| `abstract_fluid_art` | Fluid Art Texture | 1:1 | Flowing fluid art with rich color mixing and organic movement. For backgrounds, overlays, and creative assets. |164| `abstract_geometric_pattern` | Geometric Pattern | 16:9 | Precise geometric pattern with modern color palette. For tech branding, presentations, and UI backgrounds. |165| `abstract_organic_texture` | Organic Texture | 1:1 | Natural organic texture with depth and tactile quality. For luxury brands, packaging, and premium assets. |166167### Icons / UI (3 presets)168169| Key | Label | Aspect Ratio | Description |170|---|---|---|---|171| `icon_3d_glossy` | 3D Glossy Icon | 1:1 | Glossy 3D rendered icon with soft lighting and reflections. For app stores, feature sections, and marketing. |172| `icon_flat_minimal` | Flat Minimal Icon | 1:1 | Clean flat design icon with bold colors and simple shapes. For dashboards, feature lists, and documentation. |173| `icon_gradient_app` | Gradient App Icon | 1:1 | Modern gradient app icon with rounded corners and depth. For app store listings and mobile marketing. |174175## Prompt Engineering Rules (Images)1761771. **Subject + Setting + Lighting**: "Wireless headphones floating above a white marble surface, soft directional studio light, gentle shadow"1782. **Style keywords**: "photorealistic", "product photography", "commercial quality", "4K", "high detail"1793. **Composition**: "centered composition", "rule of thirds", "negative space on left for text overlay"1804. **Color direction**: specify palette — "cool blue and teal tones", "warm earth tones", "monochromatic with gold accent"1815. **Negative specification**: describe what to exclude — "no text, no watermark, no people, no branding"1826. **Format awareness**: for hero images, leave space for text overlay; for product shots, use clean backgrounds1837. **Trend integration**: incorporate current visual trends discovered via web search184185## API Payload (WaveSpeed.ai)186187```json188POST https://api.wavespeed.ai/api/v3/wavespeed-ai/nano-banana-2/text-to-image189Authorization: Bearer ${WAVESPEED_API_KEY}190191{192 "prompt": "Minimalist wireless earbuds floating above a clean white surface, soft studio lighting from upper left, gentle drop shadow, photorealistic product photography, 4K detail, no text, no branding",193 "size": "1024x1024",194 "output_format": "png"195}196```197198Response:199```json200{201 "id": "task-abc123",202 "status": "completed",203 "result": {204 "image_url": "https://cdn.wavespeed.ai/outputs/..."205 }206}207```208209## Trend-Driven Prompt Enrichment210211The agent enriches prompts at runtime by performing web searches before generation:2122131. **Industry trends**: Search for visual design trends specific to the user's industry2142. **Color trends**: Look up trending color palettes (e.g., Pantone Color of the Year, trending gradients)2153. **Composition trends**: Research popular layout and composition styles for the asset type2164. **Platform-specific**: Check platform-specific best practices (e.g., Shopify product photo guidelines, hero image dimensions)217218Example enrichment:219```220Original prompt: "Hero background for a SaaS landing page"221222Agent searches:223 - "SaaS landing page hero design trends 2026"224 - "modern gradient background trends"225226Enriched prompt: "Abstract dark gradient background transitioning from deep indigo #1a0a2e to electric violet #7c3aed, with floating glassmorphism card elements, subtle grid lines, soft bokeh light particles in teal and white, ultra-clean digital aesthetic, wide composition with negative space center-right for headline text, 4K, no text, no UI mockups"227```228229## Adding Custom Presets230231Edit `skills/nano-banana-2/image-presets.json` or create a custom presets file:232```json233"my_custom_preset": {234 "label": "My Custom Image",235 "category": "product_shots",236 "description": "What this image is for",237 "prompt": "Detailed prompt describing the desired image...",238 "settings": {239 "aspect_ratio": "1:1",240 "resolution": "2k",241 "output_format": "png"242 },243 "tags": ["product", "ecommerce", "minimal"]244}245```246247## Combining with Kling 3.0 Video Skill248249For full multi-modal asset generation:250```bash251# Generate all video demos252node cli/index.js generate-demo --model kling3 --scenes all253254# Smart cover: select best highlight moment as video thumbnail255node cli/index.js smart-cover --manifest ./public/demos/kling3-demos.json256257# Generate all image assets258node cli/index.js generate-images --model nano-banana-2 --output ./public/demos259260# Serve the unified gallery261node landing/server.js262# -> Videos tab: Kling 3.0 video demos (with smart covers)263# -> Images tab: Nano Banana 2 image assets264```265266Always run `smart-cover` after video generation — it selects the most visually compelling frame as the video thumbnail using multi-factor AI scoring (color variance, detail, brightness balance).
amo-tech-ai