Infographic Generator

Infographic Generator

End-to-end workflow: research → layout → HTML → PNG. Bring your own brand book and inspiration images, or use the built-in default design system.

Inputs

Collect before starting:

Canvas Dimensions

Step 0 — Research (when content isn't provided)

If given a topic but not the specific points, research before building.

• tavily_extract — if a URL is provided
• tavily_search "[topic] 2024" — for general topics
• tavily_research — for technical deep dives

Synthesize into 4 section angles before writing any HTML.

Step 1 — Style Resolution

Determine the design approach before writing any code:

Priority order:

1. Brand book provided → Extract from whatever context was given (pasted text, dropped file, or description): primary/accent colors, font family, logo/monogram, tone. Apply these instead of the built-in defaults. Keep the layout structure from Step 2.
2. Inspiration image provided → Analyze the image first: identify layout structure, column arrangement, visual hierarchy, section count, card patterns, header/footer treatment. Build HTML to match that structure. Keep brand colors from the brand book (or defaults if none provided).
3. Both provided → Brand book sets colors + fonts. Inspiration image sets layout.
4. Neither provided → Use the built-in default design system (described in Step 2).

When analyzing an inspiration image, extract:

• Number of sections and how they're divided
• Column layout per section (1-col, 2-col, 3-col, grid)
• Header and footer treatment
• Card/box shapes (rounded, sharp, with icons, with tags)
• Typography hierarchy (large title, section headers, body text)
• Visual accents (circles, arrows, flow diagrams, comparison tables)

Step 2 — Build HTML (Built-in Default Design System)

This is the default style. Skip or override based on Step 1 output.

Canvas CSS

/* Portrait */
width: 1080px; height: 1350px; background: #EFF4F0;

/* Square */
width: 1200px; height: 1200px; background: #EFF4F0;

display: flex; flex-direction: column; overflow: hidden;

Structure (top to bottom)

Brand Colors

Typography

Load from Google Fonts: Inter (400/500/600/700/800) + Playfair Display (700 italic)

Section Numbered Circles

.s1 { background: #6BA3D6; }  /* blue */
.s2 { background: #1A2744; }  /* navy */
.s3 { background: #4A7FB5; }  /* mid blue */
.s4 { background: #6BA3D6; }  /* blue */

Size: 28×28px, border-radius 50%, Inter 800 12px white.

Section Content Patterns

Card anatomy:

• card-icon — 20×20px white square with box-shadow, emoji or symbol
• card-title — Inter 700 12.5px, with optional .card-tag pill (right-aligned)
• card-body — descriptive text
• card-example (optional) — dashed border box, label "PROMPT" or "EXAMPLE" in 9px uppercase blue, italic gray text

Flow steps: white boxes, centered, flow-step-num (22px blue circle), flow-step-title, flow-step-body. Connect with → arrows.

Comparison table: 2-col grid. bad header (rgba(200,100,80,0.12)) vs good header (rgba(107,163,214,0.2)). Row items: colored dots dot-bad rgba(200,100,80,0.5) · dot-good #6BA3D6.

Footer

Customize the footer with your own name/logo. Default placeholder:

<div class="footer">
  <div class="logo-mark"><span>A</span></div>
  <div class="footer-name">Your Name</div>
</div>

Logo mark CSS: background #6BA3D6, 5px border-radius, Playfair Display italic white letter.

To customize: replace "A" with your initial and "Your Name" with your name. If the user has provided a brand book with a name/logo, use that.

Step 3 — Copy Rules

• No filler words: avoid "leveraging," "seamlessly," "powerful," "game-changing," "robust," "revolutionizing"
• Titles: sharp and specific — "4 Habits That Actually Move the Needle" not "Your Complete Guide to High Performance"
• Prompt/example boxes: write real, usable content — not [your task here] placeholders
• Tags (DAILY / WEEKLY / ALWAYS etc.): only use when accurate and specific
• Section count: default is 4. Use 3 if content is sparse; never go above 4 in portrait.

Step 4 — Export to PNG

Save HTML to: ./output/infographic-[topic].html (relative to project root)

Screenshot with Playwright — use shell variables so the script works from any project:

# Install Playwright if not already present (one-time)
cd /tmp && npm install playwright

# Set paths (run from your project root)
HTML_FILE="$(pwd)/output/infographic-[topic].html"
PNG_FILE="$(pwd)/output/infographic-[topic].png"

# Create output dir if needed
mkdir -p "$(pwd)/output"

# Export the canvas element to PNG
# Paths are passed as arguments (not interpolated into the script string) to avoid shell injection
cd /tmp && node -e "
const { chromium } = require('playwright');
const htmlFile = process.argv[1];
const pngFile = process.argv[2];
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.setViewportSize({ width: 1200, height: 1500 });
  await page.goto('file://' + htmlFile);
  await page.waitForTimeout(1000);
  const canvas = await page.\$('.canvas');
  await canvas.screenshot({ path: pngFile, type: 'png' });
  await browser.close();
  console.log('Done: ' + pngFile);
})();
" -- "$HTML_FILE" "$PNG_FILE"

Verify: ls -lh ./output/infographic-[topic].png — expect 150K–300K.

Image pipeline: HTML → Playwright → PNG only. Do not use image generation APIs for infographics.

Customization Reference