Agent skills
infographic-generator

Agent skill

infographic-generator

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".

View SKILL.md on GitHub Repository

Stars 308

Forks 130

Install this agent skill to your Project

npx add-skill https://github.com/Affitor/affiliate-skills/tree/main/skills/content/infographic-generator

Metadata

Additional technical details for this skill

stage: S2-Content
author: affitor
version: 1.0

SKILL.md

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 (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'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, comparison items, steps, etc.)
  copy:
    headline: string
    subheadline: string
    body_items: string[]
    cta: string
    footer: string
    source: string

HTML output (if output_format is "html" or "both"):

Generate a self-contained HTML file with inline CSS that renders the infographic at exact dimensions. This can be:

Opened in a browser and screenshotted
Rendered server-side with Satori or Puppeteer
Used as a starting point for design iteration

html

<!-- Self-contained, no external dependencies -->
<div style="width: 1080px; height: 1350px; ...">
  <!-- Header -->
  <!-- Body (type-specific) -->
  <!-- Footer -->
</div>

Step 7: Self-Validation

Before presenting output, verify:

Total word count on infographic ≤ 50 words
All text readable at 50% zoom (minimum effective font size)
Color contrast meets accessibility (WCAG AA: 4.5:1 ratio)
Data points are accurate and attributed
Layout doesn't feel cramped — whitespace is intentional
Platform dimensions are correct

If any check fails, fix before delivering.

Output Format

markdown

## Infographic: [Headline]

### Spec
- **Type:** [stat_highlight]
- **Platform:** [LinkedIn] — 1080×1350
- **Colors:** [dark_modern] — bg: #1A1A2E, accent: #0066FF

### Preview (text representation)

┌─────────────────────────────────┐
│                                 │
│     HeyGen vs Synthesia         │
│     The Real Comparison         │
│                                 │
│  ┌──────────┐  ┌──────────┐    │
│  │  HeyGen  │  │Synthesia │    │
│  │          │  │          │    │
│  │ 30% rec. │  │ 25% once │    │
│  │ 60 days  │  │ 30 days  │    │
│  │ ★ 127    │  │ ★ 84     │    │
│  └──────────┘  └──────────┘    │
│                                 │
│     🏆 Winner: HeyGen           │
│                                 │
│  ───────────────────────────    │
│  @yourhandle · list.affitor.com │
└─────────────────────────────────┘

### Data

[Structured spec as YAML or JSON]

### HTML (if requested)

[Self-contained HTML/CSS code block]

### Next Steps
- Post to [platform] with your viral post from `viral-post-writer`
- Create variations for other platforms: `--platform instagram`
- Generate more infographics from different data in your `content-research-brief`

Error Handling

Content has no extractable data: Generate a quote_card or checklist type instead. Note: "No numerical data found. Created a [type] infographic instead."
Too much data for one infographic: Select top 3-5 most impactful data points. Note: "Content has [X] data points. Selected the [Y] most impactful for visual clarity. Consider creating multiple infographics."
No brand colors: Use default palette. Note: "No brand colors specified. Using [palette name]. Add brand colors for consistent branding."
HTML output too complex: Simplify layout. Infographics should be simple — complexity kills visual impact.

Examples

Example 1: User: "Make an infographic comparing HeyGen vs Synthesia for LinkedIn" → type: comparison, platform: linkedin (1080×1350) → Extract: commission, cookie, rating, price for each → Output: side-by-side comparison card with winner highlighted → Dark modern palette, bold numbers

Example 2: User: "Create a stat card from my research brief showing HeyGen's key numbers" → type: stat_highlight, platform: linkedin → Extract: "$60M raised", "40K businesses", "30% commission" → Output: 3 large numbers with labels and context

Example 3: User: "Visualize the affiliate funnel steps as an infographic" → type: process_flow, platform: blog (1200×800) → Steps: Research → Content → Landing → Deploy → Track → Optimize → Output: horizontal flow with icons and brief descriptions

Feedback & Issue Reporting

When this skill produces unexpected, incomplete, or incorrect output, generate a skill_feedback block (see shared/references/feedback-protocol.md for full schema).

Skill-specific failure modes:

No extractable data from content: Content is purely narrative, no stats/numbers. Report as data_quality.
HTML output doesn't render correctly: CSS issues, wrong dimensions, text overflow. Report as wrong_output with the HTML.
Too many words on infographic: >50 words makes it unreadable. Report as wrong_output.

Auto-detect triggers:

infographic_spec.data has <2 data points
Total word count in all copy fields > 60
Dimensions don't match declared platform

Report issues: GitHub Issues | Discussions

References

shared/references/social-data-providers.md — data sources for infographic content
shared/references/platform-rules.md — platform-specific image requirements
shared/references/flywheel-connections.md — master flywheel connection map
shared/references/feedback-protocol.md — issue detection and reporting standard

Flywheel Connections

Feeds Into

social-media-scheduler (S5) — infographic ready to schedule with post
landing-page-creator (S4) — infographic as hero image or section visual
email-drip-sequence (S5) — infographic as email visual content
bio-link-deployer (S5) — infographic in link hub

Fed By

content-research-brief (S2) — key stats and data for visualization
viral-post-writer (S2) — post content to create accompanying visual
affiliate-blog-builder (S3) — blog data for featured image infographic
trending-content-scout (S1) — engagement data for benchmark visuals
traffic-analyzer (S1) — traffic data for comparison infographics
comparison-post-writer (S3) — comparison data for visual format
commission-calculator (S1) — commission data for stat highlights

Feedback Loop

S6 posts with infographics vs without → performance-report shows engagement lift → prioritize infographic creation for high-value content

Quality Gate

Before delivering output, verify:

Would I stop scrolling for this image?
Can I understand the main point in under 3 seconds?
Is the data accurate and attributed?
Does it look professional, not like clip art?
Is it readable on a phone screen?

Any NO → redesign before delivering.

yaml

chain_metadata:
  skill_slug: "infographic-generator"
  stage: "content"
  timestamp: string
  suggested_next:
    - "social-media-scheduler"
    - "viral-post-writer"
    - "landing-page-creator"

Maintainer

Affitor Core maintainer

Source details

Full Name: Affitor/affiliate-skills
Branch: main
Path in repo: skills/content/infographic-generator
License: MIT License
Topics: ai claude-code claude agent-skills ai-agents cursor llm saas chatgpt gemini open-source skill-md seo marketing social-media youtube tiktok affiliate-marketing content-marketing influencer

Featured Tools

Join Our Newsletter

Write "X vs Y" comparison blog posts that help readers choose between two competing products. Triggers on: "write a comparison post", "X vs Y blog post", "compare [product A] and [product B]", "which is better [A] or [B]", "head to head comparison", "[product] vs [product] article", "comparison review", "write a versus article", "side by side comparison blog", "which should I choose [A] or [B]", "compare these two products for my blog".

308 130

Explore

Didn't find tool you were looking for?

Search AI Tools

Install this agent skill to your Project

Metadata

SKILL.md

Infographic Generator

Stage

When to Use

Input Schema

Workflow

Step 1: Analyze Content and Select Type

Step 2: Extract Visual Data

Step 3: Design Layout

Step 4: Generate Color Scheme

Step 5: Generate All Copy

Step 6: Output

Step 7: Self-Validation

Output Format

Error Handling

Examples

Feedback & Issue Reporting

References

Flywheel Connections

Feeds Into

Fed By

Feedback Loop

Quality Gate

Recommended Agent Skills

your-skill-name

keyword-cluster-architect

listicle-generator

affiliate-blog-builder

how-to-tutorial-writer

comparison-post-writer