Infographic Generator

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 2515ce9634da · 15 Oct 2026Report an issue or request a re-scan

• PublisherAffitor GitHub organizationOwner of the repository this skill is read from
• Source folderAffitor/affiliate-skills/skills/content/infographic-generatorThe exact folder we audited
• LicenceMITAs the repository states it
• Commit pinned for this verdict2515ce9634daA new audit runs when the source changes
• Repository statusNot archivedLast push 2 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: Generate branded infographic specifications from any content or data. Outputs structured layout, copy, data visualization, and color scheme — ready to render as HTML/CSS, Satori, Canva, or any design tool. Use this…

---
name: infographic-generator
description: >
  Generate branded infographic specifications from any content or data. Outputs structured
  layout, copy, data visualization, and color scheme — ready to render as HTML/CSS,
  Satori, Canva, or any design tool. Use this skill when the user wants an infographic,
  data visual, social media image, comparison chart, stat card, or says "create an
  infographic for [content]", "make a visual for my LinkedIn post", "design an image
  for [topic]", "stat graphic for [data]", "comparison infographic", "branded image",
  "social media graphic", "infographic for [blog post]", "data visualization",
  "visual content", "image for my post", "LinkedIn carousel image", "feature comparison
  chart", "pricing table image".
license: MIT
version: "1.0.0"
tags: ["affiliate-marketing", "content-creation", "infographic", "visual", "design", "branded"]
compatibility: "Claude Code, ChatGPT, Gemini CLI, Cursor, Windsurf, OpenClaw, any AI agent"
metadata:
  author: affitor
  version: "1.0"
  stage: S2-Content
---

# 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
``

Excerpt, first 6,001 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

1. 2026-10-15
   ✓SAFE B 89 / 100

   first audit · source 2515ce9634da

Questions about Infographic Generator

• github.com/Affitor/affiliate-skills/tree/main/skills/content/inf — the audited source at commit 2515ce9634da and every finding aboveObserved · 15 Oct 2026

Spotted something wrong? Report a correction · Methodology