Trigger: Use when "hero image for website", "generate image from page", "website banner image", "featured image for site", "landing page image", "web hero design".
Inputs
- url (required): The website URL to create an image for
- type (optional): hero, featured, banner, background (default: hero)
- placement (optional): above-fold, mid-page, full-bleed (affects text overlay requirements)
Phase 1: Analyze the Website
Visit and analyze the URL to extract:
- Industry and theme: What the site is about, its market
- Brand colors: Primary, secondary, and accent colors from the site
- Visual style: Photography-based, illustration, minimal, bold, luxurious, technical
- Existing imagery: Current hero style (if any)
- Key messaging: Headline or value proposition that will overlay the hero
- Target audience: What visual language appeals to them
Phase 2: Design the Image Concept
Aesthetic requirements:
- Clean, modern, and captivating with a clear focal point
- Appropriate for the industry (law firm differs from restaurant)
- Brand colors complement or match the site palette
- Sufficient contrast for text overlay accessibility
- Negative space (typically left or center) for headline/CTA overlay
Composition rules:
- Horizontal images: focal point right-of-center, text space on the left
- Works at all aspect ratios when center-cropped for mobile
- No critical content at extreme edges
Phase 3: Generate the Image
Model routing (from media-routing table):
- Photorealistic scenes (buildings, services, work being done): GPT Image 2
- Abstract backgrounds, atmospheric: FAL FLUX Pro
- Icons or flat illustrations: Recraft V3
Specifications:
- Format: WebP or JPEG
- Hero images: 1920x1080 minimum, 16:9 aspect ratio
- Featured/blog images: 1200x630 (og:image compatible)
- Alt text: descriptive, keyword-optimized, under 125 chars
- Filename: primary keyword + descriptor (e.g.,
miami-roofing-contractor-hero.webp)
Standing Rules
- NEVER use Unsplash, Pexels, Pixabay, or any free stock service
- AI-generated only, or client-provided images
- Always include negative space for text overlay unless explicitly full-bleed background
- Test at 375px wide (mobile crop) to ensure focal point stays visible