AI Image Asset Generator Skill

Overview

Automatically generate production-ready image assets for web applications using Google Gemini API. This skill analyzes page requirements, generates multiple assets in batch, processes them (background removal, SVG conversion), and integrates them into frontend code.

Core Capabilities

1. Smart Asset Analysis

Analyze user requirements to determine needed assets:

• Hero Images: Main landing page visuals
• Icon Sets: Consistent UI icons
• Backgrounds: Abstract patterns, gradients
• Product Mockups: Screenshots, device frames
• Infographic Elements: Charts, diagrams, data visualizations

2. Image Generation with Gemini

Generate images using Google Gemini 2.0 Flash:

# Single image
node scripts/generate-image.js --prompt "modern airport terminal" --output hero.png

# With style
node scripts/generate-image.js --prompt "airplane icon" --style "minimal flat" --size 512x512

# Batch generation
node scripts/batch-generate.js --config assets-config.json

3. Image Processing Pipeline

Background Removal (scripts/remove-background.js):

• Remove backgrounds from generated images
• Create transparent PNGs for overlays
• Batch processing support

PNG to SVG Conversion (scripts/png-to-svg.js):

• Convert raster images to vector SVG
• Makes assets interactable and scalable
• Preserves colors and details

Asset Optimization (scripts/optimize-assets.js):

• Compress images without quality loss
• Generate multiple sizes (responsive)
• Convert to WebP for modern browsers

4. Frontend Integration

Automatically place assets in code:

• React/Next.js components
• HTML/CSS templates
• Proper import statements
• Lazy loading configuration

Workflow Decision Tree

1. What type of project?

• Landing Page → Hero image + icons + background
• Dashboard → Icons + charts + UI elements
• E-commerce → Product images + icons + badges
• Portfolio → Hero + gallery images + decorative elements

2. What assets needed?

• Hero Image → Use prompt-templates/landing-hero.txt
• Icons → Use prompt-templates/icon-set.txt
• Backgrounds → Use prompt-templates/background-abstract.txt
• Product Images → Use prompt-templates/product-mockup.txt
• Infographics → Use prompt-templates/infographic-element.txt

3. Post-processing needed?

• Transparent background → Run remove-background.js
• Scalable/Interactive → Run png-to-svg.js
• Web optimized → Run optimize-assets.js

4. Integration method?

• React → Use placement-templates/react-image-component.jsx
• Next.js → Use placement-templates/next-image-component.tsx
• HTML/CSS → Use placement-templates/html-css-placement.html

Usage Examples

Example 1: Generate Landing Page Assets

User: "Build a landing page for an airport website"

Generated Assets (19 files total):

• 4 Hero Images (1920x1080)
• 2 Background Patterns (1920x1080)
• 5 Icons (256x256)
• 5 Transparent Icons (-nobg.png)
• 3 SVG Vectors (first 3 icons)

Commands:

# Generate all assets in one command
node scripts/batch-generate.js --landing-page "airport website" --output ./generated-assets/airport

# Output structure:
# ./generated-assets/airport/
# ├── hero-main.png
# ├── hero-secondary.png
# ├── hero-feature.png
# ├── hero-cta.png
# ├── background-main.png
# ├── background-secondary.png
# ├── icon-primary.png
# ├── icon-primary-nobg.png
# ├── icon-primary.svg
# ├── icon-secondary.png
# ├── icon-secondary-nobg.png
# ├── icon-secondary.svg
# ├── icon-tertiary.png
# ├── icon-tertiary-nobg.png
# ├── icon-tertiary.svg
# ├── icon-quaternary.png
# ├── icon-quaternary-nobg.png
# ├── icon-quinary.png
# └── icon-quinary-nobg.png

Example 2: Generate Icon Set

User: "Create icons for my dashboard"

Steps:

1. Determine icon types needed
2. Use consistent style prompt
3. Generate batch with same style parameters
4. Remove backgrounds
5. Convert to SVG for interactivity

Commands:

node scripts/generate-image.js \
  --prompt "dashboard analytics icon, minimal line art, white background" \
  --style "consistent, minimal, monoline" \
  --size 256x256 \
  --output icons/analytics.png

Example 3: Create Hero Image with Processing

User: "Generate a hero image for tech startup"

Steps:

1. Generate hero image
2. Optimize for web
3. Create responsive sizes
4. Place in Next.js Image component

Commands:

# Generate
node scripts/generate-image.js \
  --prompt "futuristic tech startup office, modern, clean, blue accent lighting" \
  --size 1920x1080 \
  --output hero-main.png

# Optimize and create sizes
node scripts/optimize-assets.js \
  --input hero-main.png \
  --sizes "1920,1280,640" \
  --format webp

Example 4: Full Website Asset Generation

User: "I want to build this website" (provides description)

Automated Flow:

1. Analyze: Parse description, identify all needed assets
2. Plan: Create asset list with prompts
3. Generate: Batch generate all images via Gemini
4. Process: Background removal, SVG conversion as needed
5. Optimize: Compress, create responsive sizes
6. Integrate: Add to project structure, update imports

Prompt Engineering Guidelines

Effective Prompts

✅ Good: "Modern minimalist airplane icon, flat design, single color,
         white background, centered, high contrast, suitable for UI"

❌ Bad: "airplane icon"

Style Keywords That Work Well

| Category | Keywords | |----------|----------| | Style | minimal, flat, 3D, isometric, hand-drawn, realistic | | Color | monochrome, vibrant, pastel, gradient, duotone | | Mood | professional, playful, elegant, bold, subtle | | Technical | high contrast, centered, white background, transparent |

Consistency Tips

For icon sets, include in every prompt:

• Same style descriptor
• Same color palette reference
• Same background specification
• "Consistent with previous icons in set"

Best Practices

Image Generation

• Use detailed, specific prompts
• Include style and technical requirements
• Specify background preference (white/transparent)
• Request appropriate resolution

Processing

• Always remove backgrounds for icons
• Convert to SVG for scalable UI elements
• Optimize all images before deployment
• Create responsive sizes for hero images

Integration

• Use Next.js Image component for optimization
• Implement lazy loading for below-fold images
• Add proper alt text for accessibility
• Use WebP format with PNG fallback

Configuration

Environment Variables

GEMINI_API_KEY=your_api_key_here
OUTPUT_DIR=./generated-assets
DEFAULT_SIZE=1024x1024
DEFAULT_STYLE=modern, professional

Default Settings (config/gemini-config.json)

{
  "model": "gemini-2.0-flash-exp",
  "generationConfig": {
    "temperature": 0.7,
    "topK": 40,
    "topP": 0.95
  },
  "safetySettings": "balanced"
}

Image Presets (config/image-presets.json)

{
  "hero": { "width": 1920, "height": 1080 },
  "icon": { "width": 256, "height": 256 },
  "thumbnail": { "width": 400, "height": 300 },
  "background": { "width": 1920, "height": 1080 }
}

Troubleshooting

API Errors

Rate Limited → Wait 60 seconds, use batch-generate with delays → Check quota in Google Cloud Console

Invalid API Key → Verify GEMINI_API_KEY environment variable → Check key permissions in Google AI Studio

Image Quality Issues

Blurry Output → Increase output size → Add "high quality, detailed" to prompt

Inconsistent Style → Use same style keywords across batch → Reference previous images in prompt

Wrong Subject → Be more specific in prompt → Add negative prompts ("not X, without Y")

Processing Errors

Background Removal Failed → Ensure image has clear subject/background separation → Try with higher contrast original

SVG Conversion Poor Quality → Use simpler source images for SVG → Icons work better than photos for SVG

Quick Reference

# Generate single image
node scripts/generate-image.js --prompt "your prompt" --output image.png

# Batch generate
node scripts/batch-generate.js --config config.json

# Remove background
node scripts/remove-background.js --input image.png --output transparent.png

# Convert to SVG
node scripts/png-to-svg.js --input image.png --output vector.svg

# Optimize assets
node scripts/optimize-assets.js --input ./images/ --output ./optimized/

# Analyze page needs
node scripts/analyze-page.js --description "landing page for X"

Resources

Scripts (scripts/)

• generate-image.js - Core Gemini API integration
• remove-background.js - Background removal with sharp
• png-to-svg.js - Vectorization with potrace
• batch-generate.js - Batch processing with rate limiting
• analyze-page.js - Smart asset requirement analysis
• optimize-assets.js - Compression and resizing

Prompt Templates (assets/prompt-templates/)

• landing-hero.txt - Hero image prompts
• icon-set.txt - UI icon prompts
• background-abstract.txt - Background pattern prompts
• product-mockup.txt - Product image prompts
• infographic-element.txt - Data visualization prompts

Placement Templates (assets/placement-templates/)

• react-image-component.jsx - React integration
• next-image-component.tsx - Next.js with Image optimization
• html-css-placement.html - Vanilla HTML/CSS

References (references/)

• gemini-api-guide.md - Complete Gemini API documentation
• prompt-engineering.md - Writing effective image prompts
• image-best-practices.md - Asset optimization guide
• placement-guidelines.md - Frontend integration patterns

Integration with CI/CD

GitHub Actions

- name: Generate Assets
  run: |
    npm install
    node scripts/batch-generate.js --config production-assets.json
  env:
    GEMINI_API_KEY: ${{ secrets.GEMINI_API_KEY }}

Pre-commit Hook

#!/bin/bash
# Optimize any new images before commit
node scripts/optimize-assets.js --input ./src/assets/ --output ./src/assets/