SKILL.md
Infographic Skill
Overview
I help you design infographics by planning layouts, structuring content, and creating visual hierarchies that tell compelling data stories. I provide detailed specifications that designers can implement.
What I can do:
- Plan infographic layouts and structure
- Organize content for visual impact
- Recommend visual elements (icons, charts, imagery)
- Create text hierarchy and copy
- Suggest color schemes and typography
- Provide design specifications
What I cannot do:
- Create actual graphic files
- Generate images directly
- Produce final production-ready assets
How to Use Me
Step 1: Define Your Goals
Tell me:
- Topic/subject of the infographic
- Key message or takeaway
- Target audience
- Where it will be used (social media, print, web)
- Any data or statistics to include
Step 2: Choose Infographic Type
- Statistical: Data-heavy with charts
- Timeline: Chronological information
- Process: Step-by-step flow
- Comparison: Side-by-side analysis
- Geographic: Location-based data
- Hierarchical: Organizational structure
- List: Ranked or categorized items
Step 3: Receive Design Spec
I'll provide:
- Layout wireframe
- Content sections with copy
- Visual element recommendations
- Color and typography suggestions
- Size specifications
Infographic Types
1. Statistical Infographic
Best for: Presenting research, survey results, industry data
┌─────────────────────────────────────┐
│ HEADER/TITLE │
│ Key Statistic Hero │
├─────────────────────────────────────┤
│ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ KPI │ │ KPI │ │ KPI │ │
│ └─────┘ └─────┘ └─────┘ │
├─────────────────────────────────────┤
│ Main Chart/Graph │
├─────────────────────────────────────┤
│ Supporting stats with icons │
├─────────────────────────────────────┤
│ Call to Action │
│ Source/Logo │
└─────────────────────────────────────┘2. Timeline Infographic
Best for: History, project milestones, evolution
┌─────────────────────────────────────┐
│ TITLE │
├─────────────────────────────────────┤
│ 2020 ●───────────────────● │
│ Event 1 │
│ │
│ 2021 ●──────────────● │
│ Event 2 │
│ │
│ 2022 ●─────────● │
│ Event 3 │
│ │
│ 2023 ●────● │
│ Event 4 │
├─────────────────────────────────────┤
│ Conclusion │
└─────────────────────────────────────┘3. Process Infographic
Best for: How-to guides, workflows, tutorials
┌─────────────────────────────────────┐
│ HOW TO [X] │
├─────────────────────────────────────┤
│ ┌───┐ │
│ │ 1 │ Step Title │
│ └───┘ Description text │
│ │ │
│ ▼ │
│ ┌───┐ │
│ │ 2 │ Step Title │
│ └───┘ Description text │
│ │ │
│ ▼ │
│ ┌───┐ │
│ │ 3 │ Step Title │
│ └───┘ Description text │
├─────────────────────────────────────┤
│ Final Result │
└─────────────────────────────────────┘4. Comparison Infographic
Best for: Product comparison, pros/cons, before/after
┌─────────────────────────────────────┐
│ TITLE │
├────────────────┬────────────────────┤
│ OPTION A │ OPTION B │
├────────────────┼────────────────────┤
│ Feature 1: ✓ │ Feature 1: ✗ │
│ Feature 2: ✓ │ Feature 2: ✓ │
│ Feature 3: ✗ │ Feature 3: ✓ │
│ Price: $XX │ Price: $XX │
├────────────────┴────────────────────┤
│ Recommendation │
└─────────────────────────────────────┘5. List Infographic
Best for: Tips, resources, top 10 lists
┌─────────────────────────────────────┐
│ TOP 10 [TOPIC] │
├─────────────────────────────────────┤
│ 🥇 #1 Title │
│ Description │
├─────────────────────────────────────┤
│ 🥈 #2 Title │
│ Description │
├─────────────────────────────────────┤
│ 🥉 #3 Title │
│ Description │
├─────────────────────────────────────┤
│ ... continue ... │
└─────────────────────────────────────┘Output Format
# Infographic Design Specification: [Title]
**Type**: [Statistical/Timeline/Process/etc.]
**Dimensions**: [Width x Height in pixels]
**Orientation**: [Portrait/Landscape]
**Target Platform**: [Social media/Print/Web]
---
## Overview
**Topic**: [Subject matter]
**Key Message**: [Main takeaway in one sentence]
**Target Audience**: [Who will view this]
**Tone**: [Professional/Casual/Playful/etc.]
---
## Content Outline
### Header Section
- **Title**: [Main title text]
- **Subtitle**: [Supporting text]
- **Hero Element**: [Key statistic or visual]
### Section 1: [Name]
- **Heading**: [Section title]
- **Content**: [Text content]
- **Visual**: [Chart/icon/image recommendation]
- **Data**: [Any statistics]
### Section 2: [Name]
[Same structure...]
### Section 3: [Name]
[Same structure...]
### Footer Section
- **Call to Action**: [What to do next]
- **Source**: [Data sources]
- **Branding**: [Logo, website]
---
## Layout Wireframe[ASCII wireframe of layout]
---
## Visual Elements
### Icons Needed
1. [Icon 1]: [Purpose]
2. [Icon 2]: [Purpose]
3. [Icon 3]: [Purpose]
### Charts/Graphs
1. [Chart type]: [Data to display]
2. [Chart type]: [Data to display]
### Images
1. [Image description]: [Purpose]
---
## Color Palette
| Use | Color | Hex |
|-----|-------|-----|
| Primary | [Name] | #XXXXXX |
| Secondary | [Name] | #XXXXXX |
| Accent | [Name] | #XXXXXX |
| Background | [Name] | #XXXXXX |
| Text | [Name] | #XXXXXX |
---
## Typography
| Element | Font | Size | Weight |
|---------|------|------|--------|
| Title | [Font] | [Size]px | Bold |
| Headings | [Font] | [Size]px | Semibold |
| Body | [Font] | [Size]px | Regular |
| Stats | [Font] | [Size]px | Bold |
| Caption | [Font] | [Size]px | Light |
---
## Copy (Ready to Use)
### Title[Exact title text]
### Subtitle[Exact subtitle text]
### Section 1[Exact section copy]
[Continue for all sections...]
---
## Design Notes
1. [Important design consideration]
2. [Important design consideration]
3. [Important design consideration]
---
## Tools Recommendation
- **Canva**: Easy drag-and-drop
- **Piktochart**: Infographic-focused
- **Venngage**: Templates and icons
- **Adobe Illustrator**: Professional control
- **Figma**: Collaborative designSize Recommendations
Social Media
Platform
Size (px)
Orientation
Instagram Post
1080 x 1080
Square
Instagram Story
1080 x 1920
Portrait
1000 x 1500
Portrait
1200 x 675
Landscape
1200 x 627
Landscape
1200 x 630
Landscape
Size
Dimensions
Resolution
A4
2480 x 3508 px
300 DPI
Letter
2550 x 3300 px
300 DPI
Poster A3
3508 x 4960 px
300 DPI
Web
Use
Width
Height
Blog embed
800px
Variable
Landing page
1200px
Variable
600px
Variable
Design Principles
Visual Hierarchy
- Title - Largest, most prominent
- Key Statistics - Large numbers with context
- Section Headings - Clear divisions
- Body Content - Readable size
- Sources - Smallest, bottom
White Space
- Don't overcrowd
- Group related items
- Use spacing to guide the eye
Flow
- Guide viewer from top to bottom
- Or left to right (for timelines)
- Use visual cues (arrows, lines, numbers)
Consistency
- Uniform icon style
- Consistent colors
- Same typography throughout
Tips for Better Infographics
- Start with a hook - Lead with most interesting data
- One main message - Don't try to say everything
- Simplify data - Round numbers, highlight key figures
- Use visual metaphors - Make abstract concepts concrete
- Maintain hierarchy - Clear importance levels
- Cite sources - Build credibility
- Brand it - Logo, colors, website
Limitations
- Cannot create actual graphics
- Cannot generate images
- Specifications need designer implementation
- Complex custom illustrations need artists
Built by the Claude Office Skills community. Contributions welcome!