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.
Inputs
- url (required): The webpage URL to create infographics for
Workflow
Step 1: Analyze the Page
- Primary keyword and topic
- Key data points, statistics, or metrics
- Processes, steps, or workflows described
- Comparisons or contrasts
- Lists of benefits, features, or services
- Brand colors and visual identity
Step 2: Plan 3-4 Infographic Concepts
Types to choose from:
- Process/Step-by-Step: Visualize a workflow or how-to sequence
- Statistics/Data: Present key numbers, percentages, or metrics
- Comparison: Side-by-side or before/after visualization
- Checklist: Visual checklist of requirements or best practices
- Benefits Overview: Icon-driven layout of key advantages
- Timeline: Chronological progression of events or milestones
Step 3: Generate Each Infographic
Design requirements:
- Use the page's brand colors and visual style
- Clean, professional layout with clear hierarchy
- Mobile-friendly — readable on small screens
- High contrast for readability
- Format: JPEG or WebP, target under 150KB
- Dimensions: 800-1200px wide
- Filename: Use the main keyword (e.g.,
emergency-plumbing-process.webp)
Step 4: Placement Recommendations
For each infographic, specify:
- Where in the page it should go (e.g., "After the H2 'Our Process'")
- Why this placement works
- Suggested intro sentence to place above it
Output Format Per Infographic
## Infographic [N]: [Title]
Type: [type]
Filename: [keyword-descriptor.webp]
Alt Text: [under 125 chars, keyword-optimized]
Caption: [brand + keyword, 50-100 chars]
Content: [description of data points, labels, sections]
Prompt: [image generation prompt]
Placement: [where and why]
Image Generation
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.