Didactic Infographic Builder

Build information-rich, teach-something infographics that look like a polished engineering diagram: a dark navy canvas, rounded "panel" cards laid out in a grid, each card carrying a number, an icon, a colored heading, a white subheading, a short paragraph, and (where useful) a syntax-highlighted code block. A bold one-line tagline closes the piece.

This is the opposite of minimal-text poster art. The whole point is density and clarity: someone should be able to read the image and actually learn the thing.

How it works (the technique)

Everything is built as a single self-contained HTML file and rendered to PNG with headless Chrome. HTML gives precise control over dense layouts, code formatting, and crisp typography that hand-drawn SVG or image generators can't match.

The loop is always:

1. Copy assets/template.html to your working file.
2. Replace the content (title, panels, code, tagline) with the user's topic.
3. Render with scripts/render.sh your.html your.png.
4. Read the PNG back and inspect it. Check for clipped code, overflow, empty panels, or overlaps. Re-edit and re-render until it's clean. This visual self-check is not optional — small layout issues are invisible in the HTML but obvious in the render.
5. Save the final PNG to the user's folder and present it.

When to use the standard layout

The template is a proven landscape layout (1840×1060, ~16:9) that fits about five panels:

• A full-width hero panel at the top (panel 1): explanatory text on the left, a code block on the right. Use it for the setup / the big picture.
• Two columns below, each holding two stacked panels (panels 2–5). Use these for steps, components, trade-offs, or a benefits checklist.
• A bold tagline spanning the bottom.

This count is a guide, not a rule. If the topic needs four panels, drop one and let the rows breathe. If it needs six, the right column can take a third panel — just keep every panel full of real content so there are no empty gaps. Empty space reads as unfinished; dense, well-aligned panels read as expert.

The visual system

Read references/style.md for the full design spec — exact color tokens, fonts, spacing, the icon library, and the code-highlighting classes. The template already encodes all of it, so for most jobs you only edit content. Open references/style.md when you want to change colors, add a new icon, or build a layout that deviates from the template (e.g. a different aspect ratio or panel count).

The non-negotiables that make it look professional:

• Dark navy background with a soft radial glow, not flat black.
• Panels are cards: subtle gradient fill, thin blue border, rounded corners, faint inner glow. They sit on the background with clear gutters between them.
• Heading hierarchy per panel: a small colored eyebrow ("1. The Scenario"), then a larger white subheading, then body prose. This rhythm is what makes it scannable.
• Code blocks are real code, monospaced, with syntax coloring (comments, keywords, strings, functions, numbers). Keep lines short enough that nothing clips — wrap long lines manually and indent the continuation.
• Icons are simple line-SVG, one per panel, sitting in a glowing rounded square. Pull them from the icon library in references/style.md or draw a new one in the same stroke style.
• One tagline, bold, to land the message.

Writing the content (this matters more than the styling)

The styling is handled by the template. What makes the infographic good is the writing. Aim for the voice of an experienced engineer explaining something to a peer:

• Each panel should make one point. The subheading states it; the paragraph justifies or expands it; the code shows it.
• Prose is tight — two or three lines per panel. Bold the two or three words that carry the meaning so the eye catches them when skimming.
• Code should be the minimal real snippet that proves the point, not a full program. Trim imports and boilerplate. Add a one-line # comment to orient the reader.
• The tagline is the thesis of the whole piece in one sentence. Make it land.

Match the user's language and tone. If they write casual Portuguese, the infographic should too. If they have a brand voice, mirror it.

Customizing format

• Aspect ratio: the template is landscape. To change it, edit html,body{width:…;height:…} and pass matching dimensions to render.sh. For a portrait 4:5 (1080×1350), shrink the type a notch and keep the panel grid — see references/style.md for the adjusted sizes. Landscape is the default and usually the best for code-heavy content; only go portrait if the user specifically wants maximum mobile feed real estate.
• Color accent: the template is blue/teal. A single accent swap (e.g. an orange section for a "danger / what breaks" panel) adds emphasis. Don't rainbow it — one or two accents max.

Render script

scripts/render.sh <input.html> <output.png> [width] [height] renders at 2× device scale for a crisp result. It auto-detects the available Chrome/Chromium binary. Defaults to 1840×1060. Always render, then read the output image and verify before delivering.

Quick start

cp assets/template.html /path/to/work/topic.html
# edit topic.html: title, 5 panels, code, tagline
bash scripts/render.sh /path/to/work/topic.html /path/to/work/topic.png
# read topic.png, fix any clipping/overflow, re-render
# copy the final PNG to the user's folder and present it