Explainer Graphic
Create stunning infographics that explain complex topics using real-world analogies anyone can understand. The secret sauce: find the killer analogy FIRST, then build the visual around it.
How It Works
When you say "explain this visually" or "make an infographic about [topic]", this skill finds the perfect analogy, maps every piece, then writes a detailed visual brief you can build or hand to a designer.
Step 1: Find the Killer Analogy
The analogy makes or breaks the graphic. Search these categories for the best fit:
| Category |
Example Analogies |
Best For |
| Everyday Life |
Kitchen, closet, mailbox, filing cabinet, remote control |
Organization, storage, interfaces |
| Jobs and Roles |
Receptionist, translator, librarian, bouncer, air traffic controller |
Routing, filtering, managing |
| Construction |
Blueprint, foundation, scaffolding, plumbing, wiring |
Architecture, infrastructure |
| Cooking |
Recipe, ingredients, oven, blender, mise en place |
Processes, combining inputs |
| Sports |
Playbook, coach, referee, training camp, relay race |
Strategy, teamwork, handoffs |
| Gaming |
Skill tree, inventory, quest log, respawn, power-ups |
Progression, upgrades, systems |
| Nature |
Root system, beehive, food chain, ecosystem, seasons |
Networks, hierarchies, cycles |
| Pop Culture |
Swiss army knife, Netflix queue, GPS navigation |
Multi-tool, curated content, routing |
Analogy Selection Criteria
- Does it click in under 3 seconds?
- Would a 10-year-old get it?
- Does it map to at least 3 parts of the concept?
- Is it fresh? (Avoid "it's like a brain" for AI topics)
Step 2: Map the Analogy
Fill out this framework for your chosen analogy:
| Real Concept |
Analogy Equivalent |
Visual Element |
Connection |
| [Part 1 of concept] |
[Analogy part] |
[What to draw] |
[Why this mapping works] |
| [Part 2 of concept] |
[Analogy part] |
[What to draw] |
[Why this mapping works] |
| [Part 3 of concept] |
[Analogy part] |
[What to draw] |
[Why this mapping works] |
| [Part 4 of concept] |
[Analogy part] |
[What to draw] |
[Why this mapping works] |
Every part of the concept MUST map to something in the analogy. If a piece does not map cleanly, the analogy is wrong. Go back and pick a better one.
Step 3: Choose a Layout
Pick the layout that best matches your concept type:
| Layout |
Structure |
Best For |
| Split Panel |
Two halves side by side |
Comparisons, before/after, real vs analogy |
| Circular Flow |
Elements in a circle with arrows |
Cycles, feedback loops, recurring processes |
| Stacked Steps |
Vertical stack, top to bottom |
Sequential processes, hierarchies, funnels |
| Comparison Grid |
2x2 or 3x3 grid of cards |
Feature comparisons, category breakdowns |
| Before/After |
Left side old way, right side new way |
Transformations, upgrades, improvements |
| Pyramid |
Layers building up from base |
Foundation concepts, priority levels |
| Hub and Spoke |
Central element with branches |
One-to-many relationships, ecosystems |
| Timeline |
Left to right progression |
Evolution, history, step-by-step |
Step 4: Write the Visual Brief
Produce a complete brief with ALL of the following:
Graphic Title
One punchy line (8 words max). Example: "API Keys Are Just VIP Wristbands"
Dimensions
Specify target size: social post (1080x1080), infographic (1080x1920), slide (1920x1080), or blog (800x1200).
Color Palette
Background, primary, accent, text, and secondary text -- all with hex codes.
Layout Description
Exact placement of each element and size relative to canvas.
Sections
For each section of the graphic:
- Label: What the section is called
- Analogy visual: What to draw (be specific -- "a kitchen counter with three bowls" not "cooking stuff")
- Real meaning: What it represents in the actual concept
- Text overlay: 1-2 lines max explaining the connection
- Icon or emoji: A supporting visual element
Connection Lines
Describe how sections connect:
- Arrow style (solid, dashed, curved, dotted)
- Arrow color
- Label on arrow (if any)
- Direction of flow
Key Insight Callout
One highlighted box or banner with the main takeaway. This is the single most important sentence on the entire graphic. Style it differently from everything else (bigger, bolder, different color, bordered).
Rules
- Every analogy must be universal -- no niche references only some people know
- Max 50 words of text on the entire graphic (less is better)
- Every section needs a visual element, not just text
- The graphic should make sense even without reading the text (visuals carry the story)
- One concept per graphic. If the topic is too big, split into multiple graphics
Example Usage
- "Explain how APIs work visually"
- "Create a graphic explaining how AI skills work"
- "Explain this visually: how a neural network learns"
Tips for Best Results
- If the first analogy feels forced, try a different category
- Simpler analogies always beat clever ones
1---2name: explainer-graphic3description: Create visual infographics using real-world analogies4---56# Explainer Graphic78Create stunning infographics that explain complex topics using real-world analogies anyone can understand. The secret sauce: find the killer analogy FIRST, then build the visual around it.910## How It Works1112When you say "explain this visually" or "make an infographic about [topic]", this skill finds the perfect analogy, maps every piece, then writes a detailed visual brief you can build or hand to a designer.1314## Step 1: Find the Killer Analogy1516The analogy makes or breaks the graphic. Search these categories for the best fit:1718| Category | Example Analogies | Best For |19|----------|-------------------|----------|20| **Everyday Life** | Kitchen, closet, mailbox, filing cabinet, remote control | Organization, storage, interfaces |21| **Jobs and Roles** | Receptionist, translator, librarian, bouncer, air traffic controller | Routing, filtering, managing |22| **Construction** | Blueprint, foundation, scaffolding, plumbing, wiring | Architecture, infrastructure |23| **Cooking** | Recipe, ingredients, oven, blender, mise en place | Processes, combining inputs |24| **Sports** | Playbook, coach, referee, training camp, relay race | Strategy, teamwork, handoffs |25| **Gaming** | Skill tree, inventory, quest log, respawn, power-ups | Progression, upgrades, systems |26| **Nature** | Root system, beehive, food chain, ecosystem, seasons | Networks, hierarchies, cycles |27| **Pop Culture** | Swiss army knife, Netflix queue, GPS navigation | Multi-tool, curated content, routing |2829### Analogy Selection Criteria3031- Does it click in under 3 seconds?32- Would a 10-year-old get it?33- Does it map to at least 3 parts of the concept?34- Is it fresh? (Avoid "it's like a brain" for AI topics)3536## Step 2: Map the Analogy3738Fill out this framework for your chosen analogy:3940| Real Concept | Analogy Equivalent | Visual Element | Connection |41|-------------|-------------------|----------------|------------|42| [Part 1 of concept] | [Analogy part] | [What to draw] | [Why this mapping works] |43| [Part 2 of concept] | [Analogy part] | [What to draw] | [Why this mapping works] |44| [Part 3 of concept] | [Analogy part] | [What to draw] | [Why this mapping works] |45| [Part 4 of concept] | [Analogy part] | [What to draw] | [Why this mapping works] |4647Every part of the concept MUST map to something in the analogy. If a piece does not map cleanly, the analogy is wrong. Go back and pick a better one.4849## Step 3: Choose a Layout5051Pick the layout that best matches your concept type:5253| Layout | Structure | Best For |54|--------|-----------|----------|55| **Split Panel** | Two halves side by side | Comparisons, before/after, real vs analogy |56| **Circular Flow** | Elements in a circle with arrows | Cycles, feedback loops, recurring processes |57| **Stacked Steps** | Vertical stack, top to bottom | Sequential processes, hierarchies, funnels |58| **Comparison Grid** | 2x2 or 3x3 grid of cards | Feature comparisons, category breakdowns |59| **Before/After** | Left side old way, right side new way | Transformations, upgrades, improvements |60| **Pyramid** | Layers building up from base | Foundation concepts, priority levels |61| **Hub and Spoke** | Central element with branches | One-to-many relationships, ecosystems |62| **Timeline** | Left to right progression | Evolution, history, step-by-step |6364## Step 4: Write the Visual Brief6566Produce a complete brief with ALL of the following:6768### Graphic Title69One punchy line (8 words max). Example: "API Keys Are Just VIP Wristbands"7071### Dimensions72Specify target size: social post (1080x1080), infographic (1080x1920), slide (1920x1080), or blog (800x1200).7374### Color Palette75Background, primary, accent, text, and secondary text -- all with hex codes.7677### Layout Description78Exact placement of each element and size relative to canvas.7980### Sections81For each section of the graphic:82- **Label:** What the section is called83- **Analogy visual:** What to draw (be specific -- "a kitchen counter with three bowls" not "cooking stuff")84- **Real meaning:** What it represents in the actual concept85- **Text overlay:** 1-2 lines max explaining the connection86- **Icon or emoji:** A supporting visual element8788### Connection Lines89Describe how sections connect:90- Arrow style (solid, dashed, curved, dotted)91- Arrow color92- Label on arrow (if any)93- Direction of flow9495### Key Insight Callout96One highlighted box or banner with the main takeaway. This is the single most important sentence on the entire graphic. Style it differently from everything else (bigger, bolder, different color, bordered).9798## Rules99100- Every analogy must be universal -- no niche references only some people know101- Max 50 words of text on the entire graphic (less is better)102- Every section needs a visual element, not just text103- The graphic should make sense even without reading the text (visuals carry the story)104- One concept per graphic. If the topic is too big, split into multiple graphics105106## Example Usage107108- "Explain how APIs work visually"109- "Create a graphic explaining how AI skills work"110- "Explain this visually: how a neural network learns"111112## Tips for Best Results113114- If the first analogy feels forced, try a different category115- Simpler analogies always beat clever ones
yigityildiz0