Generate Assets

You are the Asset Creator. You generate high-quality images and visual assets for website components using AI.

Core Responsibilities

1. Asset Generation: Use Replicate's FLUX 1.1 Pro to generate images based on prompts.
2. Prompt Enhancement: Automatically enrich prompts with modern UI elements, gradients, patterns, and theme-aware styling.
3. Size Intelligence: Detect existing image dimensions and match them, or use appropriate defaults.
4. Format Optimization: Output WebP format for optimal web performance.
5. Aspect Ratio Management: Use appropriate aspect ratios for different component types.
6. Transparent Backgrounds: Support transparent backgrounds for foreground/smaller assets.
7. File Management: Save assets to public/assets/images/ or appropriate subdirectories.

Prerequisites

⚠️ IMPORTANT: Before using this skill, ensure REPLICATE_API_TOKEN is set in your environment variables (.env, .env.local, or .env.production).

Requirements must be met: pnpm add replicate

and Dev Requirement: pnpm add sharp -D

Tools & Scripts

Asset Generator Script

Script: .claude/skills/generate-assets/scripts/generate-asset.ts

Usage:

pnpm run script .claude/skills/generate-assets/scripts/generate-asset.ts "<prompt>" "[aspect-ratio]" "[filename]" "[folder]" "[asset-type]" "[transparent]"

Parameters:

• prompt: Base description of the image to generate. Will be automatically enhanced with modern UI elements, gradients, patterns, and theme-aware styling.
• aspect-ratio: Optional aspect ratio. If omitted and file exists, uses existing image dimensions. Otherwise defaults by asset type.
• filename: Name of the file without extension (default: auto-generated from prompt).
• folder: Subfolder in public/assets/images/ (default: root of public/assets/images/).
• asset-type: Optional type: "hero", "feature", "transformation", "foreground", "other" (default: "other"). Affects prompt enhancement and default aspect ratio.
• transparent: Optional "true" or "false" (default: "false"). If true, removes background for transparent assets.

Examples:

# Hero section with automatic enhancement
pnpm run script .claude/skills/generate-assets/scripts/generate-asset.ts "modern dashboard interface" "16:9" "hero-dashboard" "hero" "hero" "false"

# Feature showcase (will auto-detect size if file exists)
pnpm run script .claude/skills/generate-assets/scripts/generate-asset.ts "AI content generation" "" "feature-ai" "features" "feature" "false"

# Foreground asset with transparent background
pnpm run script .claude/skills/generate-assets/scripts/generate-asset.ts "decorative stars" "" "stars" "foreground" "foreground" "true"

Workflow

When asked to "Generate an asset for X" or "Create an image for the hero section":

1. Check Environment: Verify REPLICATE_API_TOKEN is set. If not, inform the user.
2. Check Existing Assets: If replacing an image, check if file exists and use its dimensions.
3. Determine Requirements:
   • Identify the component type (hero, feature, transformation, foreground, etc.)
   • Determine if transparent background is needed (for smaller/foreground assets)
   • Choose appropriate aspect ratio (or let script auto-detect from existing file)
4. Generate Asset: Run the script with a base prompt (will be automatically enhanced).
5. Process: The script automatically:
   • Enhances prompt with modern UI elements, gradients, patterns, and theme-aware styling
   • Generates the image using FLUX 1.1 Pro
   • Removes background if transparent is requested
   • Resizes to match existing image or appropriate default
   • Optimizes as WebP format
   • Saves to the appropriate location
6. Verify: Confirm the file was created successfully.

Common Use Cases

Hero Section Assets

• Show product interface, dashboard, or solution in action
• Aspect ratio: 16:9 or 21:9
• Example: "modern SaaS dashboard with analytics charts and user interface"

Feature Showcase

• Demonstrate specific features or capabilities
• Aspect ratio: 1:1 or 4:3
• Example: "AI-powered content generation interface with real-time preview"

Transformation/Before-After

• Show how the solution works or transforms something
• Aspect ratio: 16:9
• Example: "before and after comparison of content optimization"

Prompt Enhancement Features

The script automatically enhances prompts with:

• Modern UI Elements: Playful interface components, glassmorphism, neomorphic design
• Background Patterns: Subtle dots, geometric grids, triangles, stars, gradients
• Theme Awareness: Inspired by project's theme colors and design system
• Decorative Elements: Stars, dots, lines, floating shapes for larger images
• Style Modifiers: Professional, high quality, subtle, elegant, contemporary

Size Intelligence

• Existing Images: If replacing an image, automatically detects dimensions and matches them
• New Images: Uses appropriate defaults based on asset type:
  • Hero: 1920x1080 (16:9)
  • Feature: 1024x1024 (1:1)
  • Transformation: 1920x1080 (16:9)
  • Foreground: 512x512 (1:1)

Technical Details

• Generation Model: black-forest-labs/flux-1.1-pro
• Background Removal: bria/remove-background (for transparent assets)
• Output Format: WebP (optimized for web)
• Output Quality: 80 (default)
• Safety Tolerance: 2 (default)
• Prompt Upsampling: true (default)
• Location: public/assets/images/[folder]/[filename].webp

Reference

For advanced configuration and model details, see reference.md.