infographic-generator
installsforks
How to install infographic-generator?
affitor/affiliate-skills/infographic-generator
$npx -y skills add Affitor/affiliate-skills --skill infographic-generatorGenerate 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 med
SKILL.md
| 1 | # Infographic Generator |
| 2 | |
| 3 | Generate complete infographic specifications from any content, data, or topic. |
| 4 | Outputs structured layout + all copy + data points + color scheme — ready to render |
| 5 | as HTML/CSS, with [Satori](https://github.com/vercel/satori) (server-side), in Canva, |
| 6 | Figma, or any design tool. |
| 7 | |
| 8 | **LinkedIn posts with images get 2-3x more engagement.** This skill turns your content |
| 9 | into visual assets without design skills. |
| 10 | |
| 11 | Inspired by [content-pipeline](https://github.com/Affitor/content-pipeline)'s Satori |
| 12 | rendering: AI writes the content → structured spec → rendered as a branded image. |
| 13 | |
| 14 | ## Stage |
| 15 | |
| 16 | This skill belongs to Stage S2: Content |
| 17 | |
| 18 | ## When to Use |
| 19 | |
| 20 | - After `viral-post-writer` creates a LinkedIn post — add a visual |
| 21 | - After `content-research-brief` collects stats — visualize them |
| 22 | - When creating comparison content — feature/pricing comparison chart |
| 23 | - When sharing data or stats — stat highlight cards |
| 24 | - When creating a listicle — visual checklist or numbered list |
| 25 | - For any social media post that would benefit from a branded image |
| 26 | |
| 27 | ## Input Schema |
| 28 | |
| 29 | ```yaml |
| 30 | content: string # (required) Content to visualize — post text, data, or article |
| 31 | infographic_type: string # (optional, default: auto-detected) |
| 32 | # "stat_highlight" — 1-3 key numbers, large and bold |
| 33 | # "comparison" — side-by-side product/feature comparison |
| 34 | # "process_flow" — step-by-step workflow or how-to |
| 35 | # "checklist" — list of items with checkmarks |
| 36 | # "timeline" — chronological events |
| 37 | # "data_chart" — bar/pie chart representation |
| 38 | # "quote_card" — featured quote with attribution |
| 39 | # "feature_grid" — grid of features/benefits with icons |
| 40 | platform: string # (optional, default: "linkedin") |
| 41 | # "linkedin" — 1080×1350 (portrait, optimal engagement) |
| 42 | # "instagram" — 1080×1080 (square) |
| 43 | # "twitter" — 1200×675 (landscape) |
| 44 | # "facebook" — 1200×630 |
| 45 | # "blog" — 1200×800 (featured image) |
| 46 | brand: object # (optional) Brand customization |
| 47 | name: string # Company/personal brand name |
| 48 | primary_color: string # Hex — "#0066FF" |
| 49 | secondary_color: string # Hex — "#1A1A2E" |
| 50 | accent_color: string # Hex — "#FF6B35" |
| 51 | font_style: string # "modern" | "classic" | "bold" | "minimal" |
| 52 | logo_text: string # Text-based logo — "Affitor" | "@yourhandle" |
| 53 | output_format: string # (optional, default: "spec") |
| 54 | # "spec" — structured JSON spec (for any renderer) |
| 55 | # "html" — renderable HTML/CSS (self-contained) |
| 56 | # "both" — spec + HTML |
| 57 | ``` |
| 58 | |
| 59 | ## Workflow |
| 60 | |
| 61 | ### Step 1: Analyze Content and Select Type |
| 62 | |
| 63 | Read the input content and detect the best infographic type: |
| 64 | |
| 65 | | Content Pattern | Auto-detected Type | |
| 66 | |----------------|-------------------| |
| 67 | | Contains 1-3 prominent numbers/stats | `stat_highlight` | |
| 68 | | Contains "vs", comparison data | `comparison` | |
| 69 | | Contains numbered steps or a process | `process_flow` | |
| 70 | | Contains a list of items (3-10) | `checklist` or `feature_grid` | |
| 71 | | Contains dates or chronological events | `timeline` | |
| 72 | | Contains a notable quote | `quote_card` | |
| 73 | | Contains percentages or proportions | `data_chart` | |
| 74 | |
| 75 | If `infographic_type` is provided, use that. Otherwise auto-detect. |
| 76 | |
| 77 | ### Step 2: Extract Visual Data |
| 78 | |
| 79 | From the content, extract exactly what needs to appear in the infographic: |
| 80 | |
| 81 | **For `stat_highlight`:** |
| 82 | ```yaml |
| 83 | stats: |
| 84 | - number: "30%" # The big number |
| 85 | label: "commission" # What it measures |
| 86 | context: "recurring" # Additional context |
| 87 | - numb |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
