aiz-infographic
Installation
SKILL.md
Create Infographics
Produces self-contained HTML infographics following a 5-layer reference system: canvases × snippets × styles × elements × templates. Output is HTML and PNG only — HTML for embedding/iteration, PNG for sharing. Works inside any AI-agent host that loads skills (Claude Code, Codex, Hermes, OpenClaw, Cursor, etc.).
Reference hierarchy
| Layer | Lives in | Role |
|---|---|---|
| Canvas | references/canvases/<name>.md |
The page architecture: how the whole infographic is composed. Defines slots that snippets plug into. (bento-box, editorial, dashboard, poster) |
| Snippet | references/snippets/<name>.md |
An embeddable section pattern: timeline spine, fishbone, kpi-strip, comparison table — the content essence with no page chrome. |
| Style | references/styles/<name>.md |
Visual identity: colors, fonts, spacing tokens. (aizfographics-style default) |
| Element | references/elements/<name>.md |
Atomic UI primitives: text, charts, icons, connectors. |
| Template | references/templates/<name>.md |
High-level preset = canvas + style + snippet picks for a content type. (allocation-breakdown, cheatsheet, etc.) |
A canvas owns the page chrome (header, hero, footer, grid). A snippet is a thing on the page (a timeline, a fishbone, a kpi-strip) that plugs into a canvas slot. The user picks the canvas; the data picks the snippets.
The default visual identity is aizfographics-style — dark background, Bebas Neue + Montserrat, one accent color pair per infographic, gradient borders, glow effects, no emoji ever.