Trigger: Use when "hero image", "hero image for site", "website hero", "header image from URL", "generate hero from page".
Workflow
Step 1: Analyze the Website — Visit and analyze the URL to extract: industry and theme, brand colors (primary, secondary, and accent), visual style (photography-based, illustration-based, minimal, bold, luxurious, technical), existing imagery, key messaging, target audience.
Step 2: Define the Image Concept
Design a hero image that satisfies:
- Aesthetic and Composition: Clean, modern, and captivating with a clear focal point. Professional quality that sets the tone for the entire site. Appropriate for the industry.
- Brand Alignment: Colors complement or match the site's existing palette. Visual style consistent with the site's overall design language. Mood matches the brand personality.
- Color and Contrast: Balanced palette that works with the site's navigation and text colors. Sufficient contrast for accessibility when text is overlaid. Dynamic lighting and depth for a premium, polished feel.
- Text-Friendly Layout: Incorporate negative space (typically left or center) for overlaying headlines or CTAs. Avoid placing complex visual elements where text will sit. Ensure the focal point does not compete with overlay text.
- Responsiveness: Composition works at all aspect ratios (desktop wide, tablet, mobile crop). Key visual elements stay visible when the image is center-cropped for mobile. No critical content at the extreme edges.
Step 3: Generate the Image — Produce the hero image with these specifications: Full-width landscape orientation (suggested 1920x1080 or 1600x900), high quality, web-optimized, clean composition with intentional negative space for text overlay, brand-aligned colors and mood.
Step 4: Provide Implementation Notes — Alt text (descriptive, keyword-aware, under 125 characters), suggested overlay text position, color overlay recommendation (e.g., "dark gradient from left, 60% opacity"), responsive notes (how the image should be cropped or positioned at different breakpoints).
Important Rules
- The image must serve as a BACKGROUND for text. Never create a hero image so busy it makes overlaid text unreadable.
- Match the site's existing visual language. Do not impose a completely different aesthetic.
- The composition must work when cropped to different aspect ratios for responsive display.
- Prioritize the site's actual industry and audience over generic "professional" imagery.