Infographic Builder

---
name: infographic-builder
description: Turn a structured document (an /ingest reflection, role report, weekly-learnings digest, deck outline, research note) into a beautiful, self-contained HTML infographic — a visual one-pager — with brand-aware theme selection. Use when the user asks to "make an infographic," "visualize this note/report," "turn this into a one-pager/poster," or accepts the post-ingest "generate a visual infographic?" offer.
---

# Infographic Builder

Take a finished document and distill it into a single, share-ready HTML infographic. Not a slide deck, not a dashboard — a *one-page visual argument*: hero thesis, a few hero stats, the narrative arc, the key contrast visualized, the takeaways as cards.

The output is **one self-contained `.html` file** (Tailwind via CDN + Google Fonts, no build step) that opens anywhere and can be rasterized to PNG/PDF for sharing.

## When to use

- A document already exists and is worth a visual summary (ingests, role reports, weekly learnings, research notes, strategy memos).
- The user says "infographic," "visualize this," "one-pager," "poster," or takes the `/ingest` post-step offer.

Do **not** use this to build dashboards (always-on metric views → `aios/data-presentation`) or multi-page decks.

## Process

### 1. Read the source, extract the spine
Read the full document. Pull: the **one-line thesis**, the **2–4 hardest stats/facts**, any **narrative sequence** (steps/timeline), any **tension or dichotomy** (X vs Y), the **takeaways/lessons**, the **best pull-quote**, and the **sources**.

> **Fact discipline (non-negotiable).** Use ONLY facts present in the source. Never invent metrics, dates, impression counts, percentages, or compositional details to make a panel look fuller. If the source doesn't say it, it doesn't go on the infographic. (A blank-but-true panel beats a full-but-fabricated one. Common LLM failure: inserting plausible-sounding metrics like *"~12M impressions in 72 hours"* or invented chemical/material names — *plausible*, *narratively useful*, *not in the source*. Skip the stat or replace with a true qualitative descriptor. See `feedback_no_fabricated_specifics`.) When a number is striking, attribute it the way the source does.

### 2. Map to the Infographic IA

Distill into the seven-section taxonomy. Not every section is mandatory — include only what the content earns. Order is suggestive; what matters is the *hierarchy of attention*.

| # | Section | Purpose | Shape |
|---|---|---|---|
| 1 | **Hero** | Argument in 3 seconds. | 5–9-word title (noun phrase, the thesis) + a one-line subtitle that states what the page proves. |
| 2 | **Stat callouts** (1–3) | The hardest, most arresting facts. | One "before/positive" stat ↔ one "after/negative" stat, paired and source-attributed. If the source has only one hero number, use one card, not two. |
| 3 | **Narrative arc → timeline** | The sequence, in order. | 3–6 steps; each = short label + one-line mechanism + one-line outcome. Step grid or tabbed cascade. Skip if no sequence. |
| 4 | **Contrasting forces → paired cards** | The tension visualized. | Two parallel 3-card stacks (X-layer vs Y-layer, promise vs reality, what-worked vs what-failed). Items must be *semantically paired*, not just thematically. Skip if no real dichotomy. |
| 5 | **Lessons** | What generalizes. | Exactly 3 cards. One-phrase title + 2–3 lines of explanation. The *structural* lessons — not a recap. |
| 6 | **Key Contrast** (the "wow") | The one panel people screenshot. | ONE viz of the single quantitative or structural asymmetry the whole piece pivots on. If the source has no single pivot, *cut this section* — do not fabricate one. |
| 7 | **Quote + sources** | Voice + traceability. | One pull-quote with attribution + source list (URL/path). Every striking number elsewhere on the page traces back here. |

### 3. Select the theme (matching hierarchy)

In priority order — and **always tell the user which theme you picked and why, and offer a one-line override**:

1. **Explicit reference** — the user named a brand, dropped a `design.md`, or pointed at one → use it verbatim.
2. **Brand-first** — if the content maps to a venture (frontmatter `venture:`, wiki-links to a venture, tags), use that venture's design system: `vault/00 - notes/context/ventures/{venture}/design.md`. (Per the AIOS rule: read the design system, never hand-pick fonts/colors.)
3. **Fallback library** — otherwise pick (or combine) the best-matching `DESIGN.md` from **[VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md)** by mood/domain. This is the **default when there is no input or design reference.** Fetch at runtime:
   ```
   https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/<slug>/DESIGN.md
   ```
   (`<slug>` is the lowercase brand name; confirm it exists first — slugs vary, e.g. `wired` resolves, some don't). **Combining two is allowed** when it sharpens — pick one as the *typography spine* and the other as the *surface/palette*.
4. **Local alternative**: `anthropic/theme-factory` themes are also available if no web fetch is desired.

**Mood → brand starting points** (suggestive, not authoritative — read the actual DESIGN.md to confirm):

| Content tone / domain | Try first | Why |
|---|---|---|
| Investigative, editorial, journalism | `wired` | Print-magazine gravitas. Note: light, not dark. |
| Dark, precise, technical / SaaS | `vercel`, `supabase` (dark variant), `linear` | Modern dark editorial. |
| Warm, trustworthy, AI / research | `claude`, `cohere`, `mistral` | Approachable; Anthropic-adjacent. |
| Fintech, money, identity | `stripe`, `coinbase`, `wise` | Restrained, institutional. |
| Consumer playful | `spotify`, `airbnb`, `notion` | Color-forward, friendly. |
| Automotive / luxury / kinetic | `tesla`, `ferrari`, `bmw` | Bold, sculptural. |

### 4. Render

One self-contained HTML file. Tailwind (CDN) + Google Fonts. Apply the chosen design system's **actual tokens** — color palette + roles, typography hierarchy, component stylings, depth/elevation. Write the markup **directly** (do not fill a JS template-string — that leaks `${placeholders}` under pressure). Responsive (mobile → desktop). Light, purposeful interactivity only (a tabbed cascade for a timeline is good; gratuitous motion is not). For visual craft follow `anthropic/frontend-design` + `anthropic/canvas-design`; for which-viz-for-which-data follow `aios/data-presentation`.

**Render checklist:**

- [ ] Self-contained single `.html` (no build step). Tailwind via CDN + Google Fonts.
- [ ] Design tokens applied **from the chosen DESIGN.md, verbatim** — exact hex values, exact font families, exact weights, exact spacing scale. No drift.
- [ ] Markup generated **directly** — no JS template-string fill.
- [ ] **Dark/light toggle, unless explicitly out of scope.** Architecture: CSS custom properties for surface/text tokens (`:root` = one mode, `[data-theme="..."]` = the other). Brand colors (primary, accent) stay constant — they're identity. Tailwind colors point at the vars (`rgb(var(--c-surface) / <alpha-value>)`) so existing classes adapt without markup churn. Include a header toggle button + a tiny inline FOUC-prevention script in `<head>` that reads `localStorage` + `prefers-color-scheme` *before* render. Default to whichever mode the chosen DESIGN.md leans toward; let the user flip. ~30 lines of CSS + 15 of JS — not overweight.
- [ ] Responsive: mobile (single column) → tablet → desktop (max-w-7xl). Verify breakpoints.
- [ ] Selection color, scrollbar styling, focus rings — small details that make it feel finished.
- [ ] Light interactivity only when it earns its place.
- [ ] All facts traceable to the source. Sources section at the bottom with URLs/paths.
- [ ] No `${placeholders}` in output. Grep for `$` before declaring it done.
- [ ] **External scripts: Subresource Integrity (SRI).** For shareable / embedded / hosted use, every `<script src="https://...">` and CDN `<link href="https://...">` MUST carry `integrity="sha384-…"` + `crossorigin="anonymous"` against a *pinned* version (jsdelivr/unpkg with an exact version + hash). For **Tailwind Play CDN** (`cdn.tailwindcss.com`): no stable hash exists by design (JIT-compiled), and Tailwind itself states it is **not for production** — acceptable only for local preview artifacts the user opens from disk. For anything hosted/embedded/attached, swap Tailwind Play CDN for either (a) a pinned `tailwindcss@X.Y.Z` build from jsdelivr with SRI, or (b) inline the compiled CSS. Default the local-preview build to Play CDN with a comment noting the production swap; flip the moment the artifact leaves `file://`.

### 5. Output + optional export

Two destinations, split by weight. **The HTML is the canonical artifact — lightweight, self-contained, version-controlled — and goes in the vault. Raster exports are ephemeral *views* and go to `~/Downloads`, never the vault.**

**HTML → vault. Default path + naming:**
```
03 - export/infographics/{YYYY-MM-DD}-{slug}.html
```
- `{YYYY-MM-DD}` = the *render* date (not the source-doc date), so a re-render lands as a new file rather than silently overwriting.
- `{slug}` = lowercase-kebab-case derived from the source filename or the one-line thesis (strip dates, articles, punctuation; max ~6 words).
- Mirrors the vault's date-prefixed convention used in `reflections/ingests/` and other dated artifacts.

**Raster exports → `~/Downloads` (offer these; don't auto-run). Never the vault:**
- **PNG** — `~/Downloads/{YYYY-MM-DD}-{slug}.png` — Chrome headless `--screenshot` per the rasterize recipe (native viewport + `--force-device-scale-factor=2`).
- **PDF** — `~/Downloads/{YYYY-MM-DD}-{slug}.pdf` — `mcp__pdf-generator__html_to_pdf`.

> **Why the split:** the HTML regenerates any raster on demand, so a committed PNG/PDF is pure bloat — a 1 MB+ binary that re-downloads on every clone and re-syncs on every push, for a view you can rebuild in one command. HTML in the vault; rasters in `~/Downloads`. (If the caller explicitly names a different output dir, honor it — but default rasters outside the git-synced vault.)

Then surface the file to the user (e.g. `SendUserFile` for the raster, or the HTML path).

## Composition

This skill orchestrates existing ones — it doesn't reinvent them:
- `anthropic/frontend-design` + `anthropic/canvas-design` — visual execution quality.
- `aios/data-presentation` — choosing the right viz for the key contrast.
- `anthropic/theme-factory` — local theme option (alternative to the awesome-design-md fetch).

## Anti-patterns

- ❌ Fabricating data to fill panels. ← the cardinal sin.
- ❌ A wall of text. An infographic is a *visual hierarchy*; if a panel needs a paragraph, cut it to a stat + a clause.
- ❌ Generic AI-gradient soup. Commit to one design system's real tokens.
- ❌ Hand-picking fonts/colors when a brand `design.md` exists. Read it first.
- ❌ Template-string fills that leak `${...}`. Generate markup directly.
- ❌ Forcing a Key Contrast viz when the source has no single pivot. Cut the section.
- ❌ Committing raster exports (PNG/PDF) to the git-synced vault. HTML is the canonical artifact; rasters default to `~/Downloads`.