infographic-generator

What this skill does

# Infographic Generator

Generate complete infographic specifications from any content, data, or topic.
Outputs structured layout + all copy + data points + color scheme — ready to render
as HTML/CSS, with [Satori](https://github.com/vercel/satori) (server-side), in Canva,
Figma, or any design tool.

**LinkedIn posts with images get 2-3x more engagement.** This skill turns your content
into visual assets without design skills.

Inspired by [content-pipeline](https://github.com/Affitor/content-pipeline)'s Satori
rendering: AI writes the content → structured spec → rendered as a branded image.

## Stage

This skill belongs to Stage S2: Content

## When to Use

- After `viral-post-writer` creates a LinkedIn post — add a visual
- After `content-research-brief` collects stats — visualize them
- When creating comparison content — feature/pricing comparison chart
- When sharing data or stats — stat highlight cards
- When creating a listicle — visual checklist or numbered list
- For any social media post that would benefit from a branded image

## Input Schema

```yaml
content: string                # (required) Content to visualize — post text, data, or article
infographic_type: string       # (optional, default: auto-detected)
                               # "stat_highlight" — 1-3 key numbers, large and bold
                               # "comparison" — side-by-side product/feature comparison
                               # "process_flow" — step-by-step workflow or how-to
                               # "checklist" — list of items with checkmarks
                               # "timeline" — chronological events
                               # "data_chart" — bar/pie chart representation
                               # "quote_card" — featured quote with attribution
                               # "feature_grid" — grid of features/benefits with icons
platform: string               # (optional, default: "linkedin")
                               # "linkedin" — 1080×1350 (portrait, optimal engagement)
                               # "instagram" — 1080×1080 (square)
                               # "twitter" — 1200×675 (landscape)
                               # "facebook" — 1200×630
                               # "blog" — 1200×800 (featured image)
brand: object                  # (optional) Brand customization
  name: string                 # Company/personal brand name
  primary_color: string        # Hex — "#0066FF"
  secondary_color: string      # Hex — "#1A1A2E"
  accent_color: string         # Hex — "#FF6B35"
  font_style: string           # "modern" | "classic" | "bold" | "minimal"
  logo_text: string            # Text-based logo — "Affitor" | "@yourhandle"
output_format: string          # (optional, default: "spec")
                               # "spec" — structured JSON spec (for any renderer)
                               # "html" — renderable HTML/CSS (self-contained)
                               # "both" — spec + HTML
```

## Workflow

### Step 1: Analyze Content and Select Type

Read the input content and detect the best infographic type:

| Content Pattern | Auto-detected Type |
|----------------|-------------------|
| Contains 1-3 prominent numbers/stats | `stat_highlight` |
| Contains "vs", comparison data | `comparison` |
| Contains numbered steps or a process | `process_flow` |
| Contains a list of items (3-10) | `checklist` or `feature_grid` |
| Contains dates or chronological events | `timeline` |
| Contains a notable quote | `quote_card` |
| Contains percentages or proportions | `data_chart` |

If `infographic_type` is provided, use that. Otherwise auto-detect.

### Step 2: Extract Visual Data

From the content, extract exactly what needs to appear in the infographic:

**For `stat_highlight`:**
```yaml
stats:
  - number: "30%"        # The big number
    label: "commission"   # What it measures
    context: "recurring"  # Additional context
  - number: "60"
    label: "cookie days"
    context: "industry avg: 30"
```

**For `comparison`:**
```yaml
items:
  - name: "HeyGen"
    features:
      - label: "Commission"
        value: "30% recurring"
        highlight: true         # winner for this row
      - label: "Cookie"
        value: "60 days"
        highlight: true
  - name: "Synthesia"
    features:
      - label: "Commission"
        value: "25% one-time"
        highlight: false
      - label: "Cookie"
        value: "30 days"
        highlight: false
```

**For `process_flow`:**
```yaml
steps:
  - number: 1
    title: "Research"
    description: "Find winning programs"
    icon: "🔍"
  - number: 2
    title: "Create"
    description: "Write content that converts"
    icon: "✍️"
```

**For `checklist`:**
```yaml
items:
  - text: "Recurring commission"
    checked: true
  - text: "60+ day cookie"
    checked: true
  - text: "Free trial available"
    checked: true
  - text: "Dedicated affiliate manager"
    checked: false
```

### Step 3: Design Layout

Based on type + platform, define the layout:

**Platform dimensions:**
| Platform | Width | Height | Aspect |
|----------|-------|--------|--------|
| LinkedIn | 1080 | 1350 | 4:5 (portrait) |
| Instagram | 1080 | 1080 | 1:1 (square) |
| Twitter | 1200 | 675 | 16:9 (landscape) |
| Facebook | 1200 | 630 | ~2:1 |
| Blog | 1200 | 800 | 3:2 |

**Layout structure (all types):**
```
┌─────────────────────────────┐
│         HEADER              │  10-15% height
│    Headline / Title         │
├─────────────────────────────┤
│                             │
│         BODY                │  70-80% height
│    Data / Content           │
│    (type-specific layout)   │
│                             │
├─────────────────────────────┤
│         FOOTER              │  10% height
│    Brand / CTA / Source     │
└─────────────────────────────┘
```

### Step 4: Generate Color Scheme

**If brand colors provided:** Use them directly.

**If no brand colors:** Generate a professional palette:

```yaml
# Default professional palette options
palettes:
  dark_modern:       # Dark background, light text
    bg: "#1A1A2E"
    text: "#FFFFFF"
    accent: "#0066FF"
    secondary: "#16213E"
    
  light_clean:       # Light background, dark text
    bg: "#FFFFFF"
    text: "#1A1A2E"
    accent: "#0066FF"
    secondary: "#F0F4F8"
    
  warm_bold:         # Warm tones
    bg: "#FFF8F0"
    text: "#2D2D2D"
    accent: "#FF6B35"
    secondary: "#FFE8D6"
    
  dark_gradient:     # Gradient dark
    bg: "linear-gradient(135deg, #1A1A2E, #16213E)"
    text: "#FFFFFF"
    accent: "#00D4AA"
    secondary: "#2A2A4A"
```

Auto-select based on platform:
- LinkedIn → `dark_modern` or `light_clean` (professional)
- Twitter → `dark_gradient` or `warm_bold` (attention-grabbing)
- Instagram → Any (most visual flexibility)

### Step 5: Generate All Copy

Write every piece of text that appears in the infographic:

```yaml
copy:
  headline: string          # Main title — bold, short (max 8 words)
  subheadline: string       # Optional supporting line
  body_items: string[]      # Data labels, descriptions, etc.
  cta: string               # Call-to-action text — "Link in bio" | "See comments for link"
  footer: string            # Brand name or @handle
  source: string            # "Data: list.affitor.com" or source attribution
```

**Copy rules:**
- Headlines: 3-8 words, bold claim or specific number
- All text must be readable at mobile scale (not too small)
- No more than 50 total words on the infographic (less = better)
- Data > adjectives (show numbers, not "amazing" or "incredible")

### Step 6: Output

**Spec output (default):**

Complete structured spec that any renderer can consume:

```yaml
infographic_spec:
  type: string
  platform: string
  dimensions:
    width: number
    height: number
  colors:
    background: string
    text: string
    accent: string
    secondary: string
  layout:
    header: object
    body: object
    footer: object
  data: object              # Type-specific data (stats, com