epic-infographics

Epic Infographics

Infographics that don't look AI-made.

An open-source skill that teaches AI agents to design infographics the way a studio would.

It skips the stock templates, the rounded card grids, the Tailwind blue, and the emoji icons. Every image below came straight out of the skill, brief to PNG, with nothing touched up by hand.

Why this exists

Ask an AI for an infographic and you usually get the same thing: rounded cards in a symmetric grid, Tailwind blue, an emoji where an icon should be, and a bar chart floating on a flat background. It works, and it is instantly recognizable as machine-made.

This skill writes down what a good studio actually does, as steps an agent can follow without needing taste of its own:

• The canvas is a place, not a page. Every piece builds a scene (a drafting sheet, a dark theatre, a naturalist's folio, a miniature world) and the data lives inside that scene. Flat graphic minimalism counts as a failure here, even when it's tidy.
• The drawn object carries the data: a cup filled to two thirds because 2 in 3 adults drink coffee, a rocket whose hatched section is exactly the 90% propellant fraction, a funnel of stage light drawn at 1px per 140 users.
• Charts are computed rather than eyeballed. Bar ratios, donut arcs and areas come from arithmetic written into the file, and every palette goes through a color-blindness checker before it ships.
• The agent reviews its own render. Every graphic gets screenshotted, read back, and checked against a hard anti-slop list (the no-text squint test, the template test, the flat-ground test) before you ever see it.

The gallery

Thirteen briefs, twelve design languages, six canvas formats, and every piece animated. Click any image for its brief, its HTML source, and the MP4 and GIF versions.

It also moves

Every gallery piece is also a short animation, rendered from the same HTML file as its still. The skill asks up front whether the graphic should move, storyboards the build (the scene is already on stage, the data arrives in order, the hero lands last), and choreographs it in the design language's own motion character: the blueprint rocket is drafted line by line, the honeybee poster arrives as screen-print ink passes, the theatre runs its lighting cues, and the Mars vista pulls layer by layer off the screen. A bundled script scrubs the page's CSS animations frame by frame in headless Chromium and assembles the MP4 and GIF with ffmpeg, so every render is deterministic and the layout checks still hold on the finished frame.

The design languages

Each style file is a complete spec the agent can execute as written: exact hexes, font pairings, geometry, signature devices, do's and don'ts. Every chart palette passes a six-check color-blind-safety validation, including the dark ones.

Scene-native (the defaults)
blueprint	cyanotype drafting sheet: dimension arrows, hatch fills, stamped title block
dark-glass	luminous data on deep space: aurora fields, glass panels, disciplined glow
naturalist-plate	19th-century field-guide engraving: figure systems, watercolor tints, foxing
isometric-world	miniature floating dioramas: data as architecture, exact 2:1 projection
retro-print	mid-century poster: four inks, misregistration, film grain, arc text
editorial	magazine feature: Fraunces at huge sizes, drop caps, charticles
hand-drawn	marker sketchbook: wobble-filtered linework, washi tape, doodle arrows
park-poster	WPA screen-print vista: layered flat planes, title band, a tiny figure for scale
cutaway	DK-style cross-section: sliced machines, numbered callouts, detail lenses, tiny people

High slop-risk (explicit request only)
swiss · corporate-clean · neo-brutalist	flat by construction; the skill only uses them when asked, and forces scene-craft into them

Install

Claude Code

/plugin marketplace add OrRon/EpicInfographics
/plugin install epic-infographics@epic-infographics

Updates: /plugin → Marketplaces → epic-infographics → Enable auto-update.

Codex

codex plugin marketplace add OrRon/EpicInfographics
codex plugin add epic-infographics@epic-infographics

Factory Droid

droid plugin marketplace add https://github.com/OrRon/EpicInfographics
droid plugin install epic-infographics@epic-infographics --scope user

Pi

pi install https://github.com/OrRon/EpicInfographics

Manual install (any agent that reads skill directories)

git clone https://github.com/OrRon/EpicInfographics.git
# user-level:
cp -r EpicInfographics/skills/epic-infographics ~/.claude/skills/
# or project-level:
cp -r EpicInfographics/skills/epic-infographics your-project/.claude/skills/

One-time render setup, run inside the installed skill directory. If you skip it, the agent runs it itself on the first render:

npm install && npx playwright install chromium

The renderer needs a real browser engine because the graphics are HTML/CSS; that's what buys real text wrapping, web fonts, backdrop blur and blend modes. Playwright drives headless Chromium, waits for fonts before screenshotting, and renders at 2x for retina-crisp PNGs. This is render-side only, the HTML sources open in any browser.

Quickstart

Then just talk to your agent:

make me an infographic about our Q3 numbers, dark and dramatic, 16:9

turn this data into a poster for the office printer  [paste a table]

a fun square social graphic about how sourdough works, hand-drawn style

The agent first pins down who the graphic is for, what it needs to do, and whether it should also move, gathers the data, then pitches you two or three story angles as a multiple-choice question. Once you pick one, it selects a visual metaphor that can carry real data, chooses a canvas and a design language, composes the scene, builds it, renders it, and reviews its own PNG against the checklist before handing it over. There are usually one or two self-correction loops you never see.

How it holds quality

• Rule zero: where is the reader standing? If the answer is "looking at a well-designed page", the agent starts over.
• Geometry is truthful: bars start at zero, area scales with value, and there are no eyeballed proportions or dual axes.
• The skill does not invent data. Figures are supplied or researched, and illustrative values are labeled as such in the footer of every example.
• Color is validated: every palette, light and dark, passes lightness, chroma, contrast and colorblind-separation checks before it ships.
• Layout is verified by machine before any render. A preflight script loads the page headless, measures the real glyph geometry, and refuses to continue while text collides with other text, gets clipped, leaves the canvas, or falls below readable size.
• The render-review-fix loop is mandatory: at least one pass, with a checklist that treats "could be a dashboard template" as a hard fail.
• Motion is a layer on the approved still, never a substitute for one. The animation's final frame is the infographic itself, the same layout gates apply to it, and the agent reviews an eight-frame contact sheet of its own video before delivering.

Architecture