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