Infographic Skill

Generate publication-ready infographics from codebases, data, or text. Renderers: in-session Claude HTML ($0), Claude Opus HTML, Gemini 3 Pro Image, Jinja template, Matplotlib.

Quick Reference — What Command to Run

Step 1 — Determine the Infographic Type

Ask the user or infer from context:

Step 2 — Determine the Art Direction

The goal is a graphic that does not look like every other AI infographic. Pick ONE archetype (full descriptions in scripts/prompts/archetypes.md):

Canvas: --format portrait (1080×1350, default, best on LinkedIn), square (1080×1080) or landscape (1280×640, GitHub social preview).

The brief makes the model write a thesis/hero/archetype/cut comment before drawing, keep ~12 elements, and avoid a banned list (gradients, glow, glassmorphism, card grids, emoji, purple, Inter as display face, generic subtitles). Reference pages in style/ (the author's own graphics) are added to the prompt; point --style-dir (or INFG_STYLE_DIR) at a folder of the user's own .html graphics to make the output match their style. --finish prints a warning for every banned pattern it finds and, after rendering, for every piece of text that overlaps another block or leaves the canvas. If there are warnings, fix the HTML and run --finish again.

Old names still work: modern-light → editorial, modern-dark → blueprint, illustrated → swiss.

Step 3 — Generate

From a codebase (most common)

python3 scripts/generate_pretty.py \
  --codebase /path/to/project \
  --title "My App" \
  --infographic-type architecture \
  --style editorial \
  --output infographic.png

The pipeline:

1. project_digest.py builds an architecture-first digest (tree, manifests, README) — ~1.5–5k tokens
2. content_structurer.py sends it to an LLM → structured JSON (Haiku 5.5 ~$0.001 / Gemini 3.8 Flash ~$0.012)
3. The renderer chosen by --renderer produces the PNG (see Rendering Modes)
4. Falls back to the HTML template if the image API fails

From inline data

# Quick architecture from text
python3 scripts/generate_pretty.py \
  --layers "Frontend:React,Next.js|Backend:FastAPI|Database:PostgreSQL,Redis" \
  --title "My App" --output infographic.png

# KPI dashboard
python3 scripts/generate_pretty.py \
  --text "Revenue $2.4M (+18%), NPS 72, Churn 2.1%" \
  --type dashboard --title "Q3 KPIs" --output kpis.png

LinkedIn posts from codebase

python3 scripts/generate_posts.py /path/to/project --language en

Generates two posts (technical + business angle) → stdout + linkedin_posts.md.

Rendering Modes

Choose with --renderer (default auto). Scores: blind benchmark, 3 real codebases × 2 judges, mean of 6 criteria out of 10 (benchmark/RESULTS.md, Oct 2026).

auto = Gemini image if INFG_API_KEY is set, else Claude HTML if ANTHROPIC_API_KEY is set, else template. Avoid gemini-3.1-flash-image at 1K (scored last: garbled text, missing items) and gemini-3.1-flash-lite-image except for throwaway drafts.

🧠 In-session mode (recommended inside Claude Code — no API cost)

You (the agent) are the designer; only structuring needs a cheap API call.

# 1. Structure the codebase and save the spec (Haiku 5.5, ~$0.001) — template render is free
python3 scripts/generate_pretty.py --codebase /path/to/project --renderer template \
  --save-spec spec.json --output draft.png
# 2. Print the design brief
python3 scripts/claude_html_renderer.py --spec spec.json --style editorial --print-brief

3. Write page.html that follows the brief exactly. Use <span class="logo" data-icon="Tech Name"></span> for every technology (real brand SVGs or monograms are injected). Keep every name exactly as in the spec.
4. Finish and screenshot:

python3 scripts/claude_html_renderer.py --finish page.html --output infographic.png   # 2160×2160 PNG

If you can view images, look at the PNG and fix overlaps or text under ~16px before delivering.

🎨 API modes

python3 scripts/generate_pretty.py --codebase . --renderer claude-html --output infographic.png
python3 scripts/generate_pretty.py --codebase . --renderer image --output infographic.png

📊 Matplotlib (fully offline — free)

python3 scripts/parse_context.py --root . --output arch.json
python3 scripts/generate_linkedin_arch.py --config arch.json --output arch.png

Choosing a backend and model

Check which subscription CLIs and credentials are available on your machine:

python3 scripts/doctor.py

• Rule: auto never picks a paid API. Resolution order is --backend / --model > INFG_BACKEND / INFG_MODEL > auto (session when CLAUDECODE is set, otherwise the first installed CLI in claude, agy, codex, copilot, opencode). To use paid API keys (ANTHROPIC_API_KEY or INFG_API_KEY), pass --backend api explicitly (or --renderer image).
• Inspect the exact prompt (brief + backend contract + model-family note) without running a model:

  python3 scripts/claude_html_renderer.py --backend agy --model gemini-4-argon-high --spec spec.json --print-prompt

CLI Reference

python3 scripts/generate_pretty.py \
  --codebase <dir>                    # Read and analyze a codebase
  --title "Title"                     # Override title
  --infographic-type <type>           # architecture|comparison|feature|process|cheatsheet
  --style <archetype>                 # editorial|blueprint|terminal|swiss|brutalist
  --format <canvas>                   # portrait|square|landscape (HTML renderer)
  --style-dir <dir>                   # your own .html graphics as reference
  --renderer <r>                      # auto|image|claude-html|template (default: auto)
  --save-spec spec.json               # Save structured JSON (for in-session mode)
  --model <gemini-model>              # Image model (default: gemini-3-pro-image, 2K)
  --llm-model <model>                 # claude-* | gemini-* | vendor/model (OpenRouter); default: auto
  --output <path>                     # Output file
  --legacy-html                       # Force HTML template rendering
  --template <name>                   # Jinja2 template name
  --learnings "topic"                 # Focus infographic on specific technologies
  --author "Name"                     # Author attribution
  --cta "Follow text"                 # Footer call-to-action

Environment Variables (.env)

ANTHROPIC_API_KEY=                    # Claude: structuring (Haiku 5.5) + claude-html renderer (Opus 5.5)
INFG_API_KEY=                         # Google AI Studio: gemini-3-pro-image + gemini structuring
INFG_LLM_MODEL=                       # Empty = auto (claude-haiku-5-5, else gemini-3.8-flash)
INFG_IMAGE_SIZE=2K                    # 1K | 2K | 4K for Gemini image models
INFG_OPENROUTER_API_KEY=              # Only for vendor/model ids

# Optional
INFG_VERTEX_PROJECT=                  # Vertex AI project ID (alternative to AI Studio)
INFG_IMAGE_MODEL=                     # Override default image model
INFG_LLM_PROVIDER=                    # Force provider: gemini or openrouter

Versioned Output

When the user says "next version" / "nueva versión" in any language:

OUTPUT=$(python3 scripts/version_output.py --root .)
python3 scripts/generate_pretty.py --codebase . --output "$OUTPUT/infographic.png"

Project Scripts

Design References

Read before customizing templates:

• references/design-principles.md — Visual hierarchy, color, typography rules
• references/chart-selection.md — Chart type decision matrix
• references/competitive-research.md — Gap analysis vs Napkin AI, Canva, etc.
• references/visual-quality-patterns.md — Premium CSS/SVG techniques
• references/linkedin-visual-analysis.md — Real LinkedIn post analysis