{"slug":"infographic-generator","title":"infographic-generator","tags":["site-building","frontend","images","content"],"agent_summary":"Analyze a URL and generate 3-4 informative, placement-recommended infographic images for that page. Types: process steps, statistics, comparisons, checklists, benefit overviews, timelines.","trigger_phrases":["infographic-generator","infographic","infographic for page","create infographic","visual data for URL","page infographic","generate infographic"],"runnable":true,"markdown":"**Trigger:** Use when \"infographic\", \"infographic for page\", \"create infographic\", \"visual data for URL\". Analyzes a page and generates 3-4 informative infographics with placement recommendations.\n\n### Inputs\n\n- **url** (required): The webpage URL to create infographics for\n\n### Workflow\n\n**Step 1: Analyze the Page**\n- Primary keyword and topic\n- Key data points, statistics, or metrics\n- Processes, steps, or workflows described\n- Comparisons or contrasts\n- Lists of benefits, features, or services\n- Brand colors and visual identity\n\n**Step 2: Plan 3-4 Infographic Concepts**\n\nTypes to choose from:\n- **Process/Step-by-Step**: Visualize a workflow or how-to sequence\n- **Statistics/Data**: Present key numbers, percentages, or metrics\n- **Comparison**: Side-by-side or before/after visualization\n- **Checklist**: Visual checklist of requirements or best practices\n- **Benefits Overview**: Icon-driven layout of key advantages\n- **Timeline**: Chronological progression of events or milestones\n\n**Step 3: Generate Each Infographic**\n\nDesign requirements:\n- Use the page's brand colors and visual style\n- Clean, professional layout with clear hierarchy\n- Mobile-friendly — readable on small screens\n- High contrast for readability\n- Format: JPEG or WebP, target under 150KB\n- Dimensions: 800-1200px wide\n- Filename: Use the main keyword (e.g., `emergency-plumbing-process.webp`)\n\n**Step 4: Placement Recommendations**\n\nFor each infographic, specify:\n- Where in the page it should go (e.g., \"After the H2 'Our Process'\")\n- Why this placement works\n- Suggested intro sentence to place above it\n\n### Output Format Per Infographic\n\n```\n## Infographic [N]: [Title]\n\nType: [type]\nFilename: [keyword-descriptor.webp]\nAlt Text: [under 125 chars, keyword-optimized]\nCaption: [brand + keyword, 50-100 chars]\n\nContent: [description of data points, labels, sections]\nPrompt: [image generation prompt]\nPlacement: [where and why]\n```\n\n### Image Generation\n\nRoute to the media-routing table. For infographics with data/text: use HTML/React component + Playwright screenshot (preferred for clean layouts). Use GPT Image 2 as quick fallback.\n\n---\n","html":"<p><strong>Trigger:</strong> Use when \"infographic\", \"infographic for page\", \"create infographic\", \"visual data for URL\". Analyzes a page and generates 3-4 informative infographics with placement recommendations.</p>\n<h3>Inputs</h3>\n<ul>\n<li><strong>url</strong> (required): The webpage URL to create infographics for</li>\n</ul>\n<h3>Workflow</h3>\n<p><strong>Step 1: Analyze the Page</strong></p>\n<ul>\n<li>Primary keyword and topic</li>\n<li>Key data points, statistics, or metrics</li>\n<li>Processes, steps, or workflows described</li>\n<li>Comparisons or contrasts</li>\n<li>Lists of benefits, features, or services</li>\n<li>Brand colors and visual identity</li>\n</ul>\n<p><strong>Step 2: Plan 3-4 Infographic Concepts</strong></p>\n<p>Types to choose from:</p>\n<ul>\n<li><strong>Process/Step-by-Step</strong>: Visualize a workflow or how-to sequence</li>\n<li><strong>Statistics/Data</strong>: Present key numbers, percentages, or metrics</li>\n<li><strong>Comparison</strong>: Side-by-side or before/after visualization</li>\n<li><strong>Checklist</strong>: Visual checklist of requirements or best practices</li>\n<li><strong>Benefits Overview</strong>: Icon-driven layout of key advantages</li>\n<li><strong>Timeline</strong>: Chronological progression of events or milestones</li>\n</ul>\n<p><strong>Step 3: Generate Each Infographic</strong></p>\n<p>Design requirements:</p>\n<ul>\n<li>Use the page's brand colors and visual style</li>\n<li>Clean, professional layout with clear hierarchy</li>\n<li>Mobile-friendly — readable on small screens</li>\n<li>High contrast for readability</li>\n<li>Format: JPEG or WebP, target under 150KB</li>\n<li>Dimensions: 800-1200px wide</li>\n<li>Filename: Use the main keyword (e.g., <code>emergency-plumbing-process.webp</code>)</li>\n</ul>\n<p><strong>Step 4: Placement Recommendations</strong></p>\n<p>For each infographic, specify:</p>\n<ul>\n<li>Where in the page it should go (e.g., \"After the H2 'Our Process'\")</li>\n<li>Why this placement works</li>\n<li>Suggested intro sentence to place above it</li>\n</ul>\n<h3>Output Format Per Infographic</h3>\n<pre><code>## Infographic [N]: [Title]\n\nType: [type]\nFilename: [keyword-descriptor.webp]\nAlt Text: [under 125 chars, keyword-optimized]\nCaption: [brand + keyword, 50-100 chars]\n\nContent: [description of data points, labels, sections]\nPrompt: [image generation prompt]\nPlacement: [where and why]\n</code></pre>\n<h3>Image Generation</h3>\n<p>Route to the media-routing table. For infographics with data/text: use HTML/React component + Playwright screenshot (preferred for clean layouts). Use GPT Image 2 as quick fallback.</p>\n<hr>\n"}