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".
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".
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
content:string# (required) Content to visualize — post text, data, or articleinfographic_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 iconsplatform:string# (optional, default: "linkedin")
# "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:
stats:-number:"30%"# The big numberlabel:"commission"# What it measurescontext:"recurring"# Additional context-number:"60"label:"cookie days"context:"industry avg: 30"
For comparison:
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:
steps:-number:1title:"Research"description:"Find winning programs"icon:"🔍"-number:2title:"Create"description:"Write content that converts"icon:"✍️"
For checklist:
items:-text:"Recurring commission"checked:true-text:"60+ day cookie"checked:true-text:"Free trial available"checked:true-text:"Dedicated affiliate manager"checked:false
If no brand colors: Generate a professional palette:
# Default professional palette optionspalettes:dark_modern:# Dark background, light textbg:"#1A1A2E"text:"#FFFFFF"accent:"#0066FF"secondary:"#16213E"light_clean:# Light background, dark textbg:"#FFFFFF"text:"#1A1A2E"accent:"#0066FF"secondary:"#F0F4F8"warm_bold:# Warm tonesbg:"#FFF8F0"text:"#2D2D2D"accent:"#FF6B35"secondary:"#FFE8D6"dark_gradient:# Gradient darkbg:"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:
copy:headline:string# Main title — bold, short (max 8 words)subheadline:string# Optional supporting linebody_items:string[]# Data labels, descriptions, etc.cta:string# Call-to-action text — "Link in bio" | "See comments for link"footer:string# Brand name or @handlesource:string# "Data: openaffiliate.dev" 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:
infographic_spec:type:stringplatform:stringdimensions:width:numberheight:numbercolors:background:stringtext:stringaccent:stringsecondary:stringlayout:header:objectbody:objectfooter:objectdata:object# Type-specific data (stats, comparison items, steps, etc.)copy:headline:stringsubheadline:stringbody_items:string[]cta:stringfooter:stringsource: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
<!-- Self-contained, no external dependencies --><divstyle="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
## 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 · openaffiliate.dev │
└─────────────────────────────────┘
### 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.
