Image Generation Skill

Generate AI-powered images using Google's Gemini image generation model. This skill is fully portable - just copy the entire folder to any project's .claude/skills/ directory.

Setup (One-time per project)

Before first use, install the skill's dependencies:

cd .claude/skills/image-generation && npm install && cd -

Quick Reference

Available Commands

# Generate a single preset
node .claude/skills/image-generation/scripts/generate.mjs --preset hero

# Generate with specific theme combination
node .claude/skills/image-generation/scripts/generate.mjs --preset hero --theme blue --style tech

# Generate with custom prompt
node .claude/skills/image-generation/scripts/generate.mjs --prompt "Abstract flowing waves" --ratio 16:9 --output custom.png

# Generate all presets for a theme
node .claude/skills/image-generation/scripts/generate.mjs --theme teal --style fintech

# List available options
node .claude/skills/image-generation/scripts/generate.mjs --list-themes
node .claude/skills/image-generation/scripts/generate.mjs --list-styles
node .claude/skills/image-generation/scripts/generate.mjs --list-backgrounds
node .claude/skills/image-generation/scripts/generate.mjs --list-models
node .claude/skills/image-generation/scripts/generate.mjs --list

# Use higher quality model (costs more)
node .claude/skills/image-generation/scripts/generate.mjs --prompt "Detailed artwork" --model pro

# With reference images (for style consistency)
node .claude/skills/image-generation/scripts/generate.mjs --prompt "Character waving" --ref ./samples/character.png
node .claude/skills/image-generation/scripts/generate.mjs --prompt "Same style" --ref ./samples/  # scans directory

# With background modes
node .claude/skills/image-generation/scripts/generate.mjs --prompt "Otter at desk" --bg fade
node .claude/skills/image-generation/scripts/generate.mjs --prompt "Otter with props" --bg transparent -o mascot.png

Aspect Ratios

Background Modes

Note: The transparent mode uses @huggingface/transformers with the RMBG-1.4 model to automatically remove the background while preserving the character and environmental props.

Models

Color Themes

Style Themes

Presets

Usage Patterns

Generate Images for Website Sections

When asked to generate website graphics:

1. Install dependencies if not already done: cd .claude/skills/image-generation && npm install && cd -
2. Determine the use case (hero, cards, accents, etc.)
3. Choose appropriate color theme based on brand
4. Choose style theme based on industry
5. Run the generation command using scripts/generate.mjs

Custom Image Generation

For custom prompts, include:

• Color palette description
• Visual elements to include
• Style/aesthetic guidance
• What to avoid (text, logos, faces)

Example:

node .claude/skills/image-generation/scripts/generate.mjs \
  --prompt "Abstract geometric pattern with flowing teal gradients. Minimalist aesthetic. No text or logos." \
  --ratio 16:9 \
  --output my-image.png

Batch Generation

Generate all presets for a specific theme combination:

node .claude/skills/image-generation/scripts/generate.mjs --theme purple --style tech

Custom Output Directory

Override the default output location:

node .claude/skills/image-generation/scripts/generate.mjs --preset hero --output-dir ./assets/backgrounds

Output Location

The script automatically detects common image directories in this order:

1. public/images/
2. public/
3. assets/images/
4. assets/
5. images/
6. static/images/
7. static/

Falls back to creating public/images/ if none exist.

Requirements

• Node.js 18+
• AIAPIKEY environment variable in project root .env file
• Uses Google Gemini models: flash (default, ~$0.039/image) or pro (~$0.134/image)

Portability

This skill is designed to be copy-pasted across projects:

1. Copy the entire .claude/skills/image-generation/ folder to new project
2. Ensure AIAPIKEY is set in the project's root .env file
3. Run cd .claude/skills/image-generation && npm install && cd -
4. Start generating images!

The script automatically:

• Finds the project root by looking for .env or package.json
• Detects the appropriate output directory
• Works with any package manager (npm, pnpm, pnpm, bun)

Best Practices

1. Match theme to brand: Use color themes that align with project brand colors
2. Match style to industry: Use fintech for financial, biotech for scientific, tech for SaaS
3. Use presets first: Presets are optimized for common website sections
4. Custom prompts for special needs: Only use custom prompts when presets don't fit

Troubleshooting

If generation fails:

1. Check that AIAPIKEY is set in project root .env
2. Verify the API key is valid for Google AI
3. Ensure dependencies are installed: cd .claude/skills/image-generation && npm install
4. Check internet connectivity
5. Review the error message for specific issues

For detailed reference, see [reference.md](./reference.md).