Generating Infographics

Generating Infographics

Generate branded infographics with custom themes and backgrounds using @antv/infographic.

Prerequisites

1. Run /brand-init to create project structure
2. Run /brand-extract to generate brand-philosophy.md
3. Run /template-infographic to create an infographic template

No-Brand Safeguard

If brand-philosophy.md is not found OR contains no ## Color Palette section:

• STOP generation — inform user: "No brand colors found. Run /brand-extract first to analyze your brand."
• If user insists on proceeding: use deliberately bland neutrals (#1a1a1a, #666, #f5f5f5, system fonts)
• Never fall back to any recognizable brand colors

When to Use

• "Create an infographic"
• "Make a process diagram"
• "Visualize this data"
• "Create a timeline"
• "Show comparison infographic"
• NOT for: Charts/graphs (use charting library), presentations (use visual-content skill)

Commands

Template Categories (114 Total)

Template Asset Types

Recommendation: Start with text-only templates. Illustrated templates require custom image files.

Illustrated Template Workflow

When using -illus templates:

1. Content includes illus field referencing image filename
2. Supported formats: SVG (recommended), PNG, JPG
3. Options: provide your own images, find icons, or use placeholders
4. Images stored with infographic output: infographics/{date}-{name}/illustrations/
5. See references/illustrations.md for detailed workflow

Text Guidelines (Avoiding Overlap)

If overlap occurs: shorten text, use wider canvas (1200px+), or use column/grid templates.

Quick Reference

Background Presets

Layered presets (gradient + pattern) include spotlight-dots (recommended), spotlight-grid, diagonal-crosshatch, tech-matrix. Simple presets include spotlight, diagonal-fade, top-down, subtle-dots, tech-grid, crosshatch, solid. Full effect descriptions and custom background configuration: references/backgrounds.md.

Workflow

1. Create Template (once)

/template-infographic

Select: category → design → palette → background → style

2. Generate Infographic (repeat)

/infographic-quick

Select template → paste content → name → get PNG

Accessibility & Readability (MANDATORY)

These checks are NON-NEGOTIABLE before generating any infographic.

Contrast Validation (WCAG AA)

Key principle: Palette colors are for SHAPES and FILLS, not text. Text needs explicit high-contrast colors.

Text Color Rules by Background

Never use palette colors for text - they're for decorative shapes only.

Spacing & Balance Rules

Pre-Generation Checklist

□ All text has 4.5:1 contrast against background
□ Labels are 1-2 words (no overlap risk)
□ Descriptions are 2-4 words
□ Content fits template capacity (check item limits)
□ Dark bg → white text, Light bg → dark text
□ No text touching edges
□ colorBg derived from brand-philosophy.md, not from skill defaults
□ colorPrimary derived from brand-philosophy.md, not from skill defaults
□ Colors traced to brand-philosophy.md (not copied from reference docs or runtime fallbacks)
□ font-family from brand-philosophy.md, not a generic default
□ Text colors WCAG-validated against actual background

If ANY check fails, DO NOT generate. Fix the content or config first.

Config by Background Type

Set title/desc/item text fills by background brightness — dark backgrounds need white/near-white text, light backgrounds need near-black. Never use palette colors for text — they are for decorative shapes only. Ready-to-adapt dark-bg and light-bg config JSON is in references/theming.md § Text Fill by Background Type. The /template-infographic command generates correct configs from your brand-philosophy.md.

Data Structure by Type

Content JSON shape depends on the template category — Sequence/List use a flat items array of label+desc; Compare and Hierarchy nest children. Full JSON examples per category: references/templates.md § Data Structure by Type.

Common Mistakes

References

• references/templates.md - Complete 114 template catalog with asset requirements
• references/theming.md - Theme configuration details
• references/backgrounds.md - Background customization guide
• references/icons.md - Available icons for icon-based templates
• references/illustrations.md - Illustrated template workflow and SVG requirements

Module Structure

lib/
├── renderer.js       # Main entry point
├── dom-setup.js      # JSDOM environment
├── infographic.js    # Infographic creation
├── exporter.js       # SVG/PNG export
├── backgrounds.js    # Gradient/pattern backgrounds
└── icons.js          # Icon utilities