infographic

OverviewHistoryStatsSecurity

npx skills add claude-office-skills/skills --skill infographic

Documentation

SKILL.md

npx skills add ...

Documentation

SKILL.md

Design infographic layouts and content structure. Plan visual storytelling with data, icons, and text hierarchy for impactful information design.

npx skills add claude-office-skills/skills --skill infographic

Documentation

SKILL.mdView source

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 design

Size Recommendations

Platform	Size (px)	Orientation
Instagram Post	1080 x 1080	Square
Instagram Story	1080 x 1920	Portrait
Pinterest	1000 x 1500	Portrait
Twitter	1200 x 675	Landscape
LinkedIn	1200 x 627	Landscape
Facebook	1200 x 630	Landscape

Print

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
Email	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!

npx skills add claude-office-skills/skills --skill infographic

Documentation

SKILL.md

Design infographic layouts and content structure. Plan visual storytelling with data, icons, and text hierarchy for impactful information design.

npx skills add claude-office-skills/skills --skill infographic

Documentation

SKILL.mdView source

Infographic Skill

Overview

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 design

Size Recommendations

Platform	Size (px)	Orientation
Instagram Post	1080 x 1080	Square
Instagram Story	1080 x 1920	Portrait
Pinterest	1000 x 1500	Portrait
Twitter	1200 x 675	Landscape
LinkedIn	1200 x 627	Landscape
Facebook	1200 x 630	Landscape

Print

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
Email	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!

infographic

Documentation

Documentation

infographic

Documentation

Infographic Skill

Overview

How to Use Me

Step 1: Define Your Goals

Step 2: Choose Infographic Type

Step 3: Receive Design Spec

Infographic Types

1. Statistical Infographic

2. Timeline Infographic

3. Process Infographic

4. Comparison Infographic

5. List Infographic

Output Format

Size Recommendations

Social Media

Print

Web

Design Principles

Visual Hierarchy

White Space

Flow

Consistency

Tips for Better Infographics

Limitations

Documentation

Documentation

Infographic Skill

Overview

How to Use Me

Step 1: Define Your Goals

Step 2: Choose Infographic Type

Step 3: Receive Design Spec

Infographic Types

1. Statistical Infographic

2. Timeline Infographic

3. Process Infographic

4. Comparison Infographic

5. List Infographic

Output Format

Size Recommendations

Social Media

Print

Web

Design Principles

Visual Hierarchy

White Space

Flow

Consistency

Tips for Better Infographics

Limitations