Baoyu Infographic

Infographic Generator

Two dimensions: layout (information structure) × style (visual aesthetics). Freely combine any layout with any style.

Usage

/baoyu-infographic path/to/content.md
/baoyu-infographic path/to/content.md --layout hierarchical-layers --style technical-schematic
/baoyu-infographic path/to/content.md --aspect portrait --lang zh
/baoyu-infographic  # then paste content

Options

Layout Gallery

Full definitions: references/layouts/<layout>.md

Style Gallery

Full definitions: references/styles/<style>.md

Recommended Combinations

Default: bento-grid + craft-handmade

Keyword Shortcuts

When user input contains these keywords, auto-select the associated layout and offer associated styles as top recommendations in Step 3. Skip content-based layout inference for matched keywords.

If a shortcut has Prompt Notes, append them to the generated prompt (Step 5) as additional style instructions.

Output Structure

infographic/{topic-slug}/
├── source-{slug}.{ext}
├── analysis.md
├── structured-content.md
├── prompts/infographic.md
└── infographic.png

Slug: 2-4 words kebab-case from topic. Conflict: append -YYYYMMDD-HHMMSS.

Core Principles

• Preserve all source data verbatim—no summarization or rephrasing
• Define learning objectives before structuring content
• Structure for visual communication (headlines, labels, visual elements)

Workflow

Step 1: Setup & Analyze

1.1 Load Preferences (EXTEND.md)

Use Bash to check EXTEND.md existence (priority order):

# Check project-level first
test -f .baoyu-skills/baoyu-infographic/EXTEND.md && echo "project"

# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-infographic/EXTEND.md" && echo "user"

┌────────────────────────────────────────────────────┬───────────────────┐ │ Path │ Location │ ├────────────────────────────────────────────────────┼───────────────────┤ │ .baoyu-skills/baoyu-infographic/EXTEND.md │ Project directory │ ├────────────────────────────────────────────────────┼───────────────────┤ │ $HOME/.baoyu-skills/baoyu-infographic/EXTEND.md │ User home │ └────────────────────────────────────────────────────┴───────────────────┘

┌───────────┬───────────────────────────────────────────────────────────────────────────┐ │ Result │ Action │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ Found │ Read, parse, display summary │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ Not found │ Ask user with AskUserQuestion (see references/config/first-time-setup.md) │ └───────────┴───────────────────────────────────────────────────────────────────────────┘

EXTEND.md Supports: Preferred layout/style | Default aspect ratio | Custom style definitions | Language preference

Schema: references/config/preferences-schema.md

1.2 Analyze Content → `analysis.md`

1. Save source content (file path or paste → source.md)

• Backup rule: If source.md exists, rename to source-backup-YYYYMMDD-HHMMSS.md

2. Analyze: topic, data type, complexity, tone, audience 3. Detect source language and user language 4. Extract design instructions from user input 5. Save analysis

• Backup rule: If analysis.md exists, rename to analysis-backup-YYYYMMDD-HHMMSS.md

See references/analysis-framework.md for detailed format.

Step 2: Generate Structured Content → structured-content.md

Transform content into infographic structure: 1. Title and learning objectives 2. Sections with: key concept, content (verbatim), visual element, text labels 3. Data points (all statistics/quotes copied exactly) 4. Design instructions from user

Rules: Markdown only. No new information. All data verbatim.

See references/structured-content-template.md for detailed format.

Step 3: Recommend Combinations

3.1 Check Keyword Shortcuts first: If user input matches a keyword from the Keyword Shortcuts table, auto-select the associated layout and prioritize associated styles as top recommendations. Skip content-based layout inference.

3.2 Otherwise, recommend 3-5 layout×style combinations based on:

• Data structure → matching layout
• Content tone → matching style
• Audience expectations
• User design instructions

Step 4: Confirm Options

Use single AskUserQuestion call with multiple questions to confirm all options together:

Important: Do NOT split into separate AskUserQuestion calls. Combine all applicable questions into one call.

Step 5: Generate Prompt → prompts/infographic.md

Backup rule: If prompts/infographic.md exists, rename to prompts/infographic-backup-YYYYMMDD-HHMMSS.md

Combine: 1. Layout definition from references/layouts/<layout>.md 2. Style definition from references/styles/<style>.md 3. Base template from references/base-prompt.md 4. Structured content from Step 2 5. All text in confirmed language

Step 6: Generate Image

1. Select available image generation skill (ask user if multiple) 2. Check for existing file: Before generating, check if infographic.png exists

• If exists: Rename to infographic-backup-YYYYMMDD-HHMMSS.png

3. Call with prompt file and output path 4. On failure, auto-retry once

Step 7: Output Summary

Report: topic, layout, style, aspect, language, output path, files created.

References

• references/analysis-framework.md - Analysis methodology
• references/structured-content-template.md - Content format
• references/base-prompt.md - Prompt template
• references/layouts/<layout>.md - 21 layout definitions
• references/styles/<style>.md - 20 style definitions

Extension Support

Custom configurations via EXTEND.md. See Step 1.1 for paths and supported options.

Infographic Content Analysis Framework

Deep analysis framework applying instructional design principles to infographic creation.

Purpose

Before creating an infographic, thoroughly analyze the source material to:

• Understand the content at a deep level
• Identify clear learning objectives for the viewer
• Structure information for maximum clarity and retention
• Match content to optimal layout×style combinations
• Preserve all source data verbatim

Instructional Design Mindset

Approach content analysis as a world-class instructional designer:

Analysis Dimensions

1. Content Type Classification

2. Learning Objective Identification

Every infographic should have 1-3 clear learning objectives.

Good Learning Objectives:

• Specific and measurable
• Focus on what the viewer will understand, not just see
• Written from the viewer's perspective

Format: "After viewing this infographic, the viewer will understand..."

3. Audience Analysis

4. Complexity Assessment

5. Visual Opportunity Mapping

Identify what can be shown rather than told:

6. Data Verbatim Extraction

Critical: All factual information must be preserved exactly as written in the source.

Never:

• Round numbers
• Paraphrase quotes
• Substitute simpler words
• Add implied information
• Remove context that affects meaning

Output Format

Save analysis results to analysis.md:

---
title: "[Main topic title]"
topic: "[educational/technical/business/creative/etc.]"
data_type: "[timeline/hierarchy/comparison/process/etc.]"
complexity: "[simple/moderate/complex]"
point_count: [number of main points]
source_language: "[detected language]"
user_language: "[user's language]"
---

## Main Topic
[1-2 sentence summary of what this content is about]

## Learning Objectives
After viewing this infographic, the viewer should understand:
1. [Primary objective]
2. [Secondary objective]
3. [Tertiary objective if applicable]

## Target Audience
- **Knowledge Level**: [Beginner/Intermediate/Expert]
- **Context**: [Why they're viewing this]
- **Expectations**: [What they hope to learn]

## Content Type Analysis
- **Data Structure**: [How information relates to itself]
- **Key Relationships**: [What connects to what]
- **Visual Opportunities**: [What can be shown rather than told]

## Key Data Points (Verbatim)
[All statistics, quotes, and critical facts exactly as they appear in source]
- "[Exact data point 1]"
- "[Exact data point 2]"
- "[Exact quote with attribution]"

## Layout × Style Signals
- Content type: [type] → suggests [layout]
- Tone: [tone] → suggests [style]
- Audience: [audience] → suggests [style]
- Complexity: [level] → suggests [layout density]

## Design Instructions (from user input)
[Any style, color, layout, or visual preferences extracted from user's steering prompt]

## Recommended Combinations
1. **[Layout] + [Style]** (Recommended): [Brief rationale]
2. **[Layout] + [Style]**: [Brief rationale]
3. **[Layout] + [Style]**: [Brief rationale]

Analysis Checklist

Before proceeding to structured content generation:

• [ ] Have I read the entire source document?
• [ ] Can I summarize the main topic in 1-2 sentences?
• [ ] Have I identified 1-3 clear learning objectives?
• [ ] Do I understand the target audience?
• [ ] Have I classified the content type correctly?
• [ ] Have I extracted all data points verbatim?
• [ ] Have I identified visual opportunities?
• [ ] Have I extracted design instructions from user input?
• [ ] Have I recommended 3 layout×style combinations?

Create a professional infographic following these specifications:

Image Specifications

• Type: Infographic
• Layout: {{LAYOUT}}
• Style: {{STYLE}}
• Aspect Ratio: {{ASPECT_RATIO}}
• Language: {{LANGUAGE}}

Core Principles

• Follow the layout structure precisely for information architecture
• Apply style aesthetics consistently throughout
• If content involves sensitive or copyrighted figures, create stylistically similar alternatives
• Keep information concise, highlight keywords and core concepts
• Use ample whitespace for visual clarity
• Maintain clear visual hierarchy

Text Requirements

• All text must match the specified style treatment
• Main titles should be prominent and readable
• Key concepts should be visually emphasized
• Labels should be clear and appropriately sized
• Use the specified language for all text content

Layout Guidelines

{{LAYOUT_GUIDELINES}}

Style Guidelines

{{STYLE_GUIDELINES}}

---

Generate the infographic based on the content below:

{{CONTENT}}

Text labels (in {{LANGUAGE}}): {{TEXT_LABELS}}

bento-grid

Modular grid layout with varied cell sizes, like a bento box.

Structure

• Grid of rectangular cells
• Mixed cell sizes (1x1, 2x1, 1x2, 2x2)
• No strict symmetry required
• Hero cell for main point
• Supporting cells around it

Best For

• Multiple topic overview
• Feature highlights
• Dashboard summaries
• Portfolio displays
• Mixed content types

Visual Elements

• Clear cell boundaries
• Varied cell backgrounds
• Icons or illustrations per cell
• Consistent padding/margins
• Visual hierarchy through size

Text Placement

• Main title at top
• Cell titles within each cell
• Brief content per cell
• Minimal text, maximum visual
• CTA or summary in prominent cell

Recommended Pairings

• craft-handmade: Friendly overviews (default)
• corporate-memphis: Business summaries
• pixel-art: Retro feature grids

binary-comparison

Side-by-side comparison of two items, states, or concepts.

Structure

• Vertical divider splitting image in half
• Left side: Item A / Before / Pro
• Right side: Item B / After / Con
• Mirrored layout for easy comparison
• Clear visual distinction between sides

Variants

Best For

• Before/after transformations
• Product or option comparisons
• Pros and cons analysis
• Old vs new comparisons
• Two perspectives on a topic

Visual Elements

• Strong vertical dividing line or gradient
• Contrasting colors per side
• Matching element positions for comparison
• VS symbol or divider decoration
• Transformation arrow for before-after

Text Placement

• Main title centered at top
• Side labels (A/B, Before/After)
• Corresponding points aligned horizontally
• Summary at bottom if needed

Recommended Pairings

• corporate-memphis: Business comparisons
• bold-graphic: High-contrast dramatic comparisons
• craft-handmade: Friendly explainers

bridge

Gap-crossing structure connecting problem to solution or current to future state.

Structure

• Left side: current state/problem
• Right side: desired state/solution
• Bridge element spanning the gap
• Gap representing challenge/obstacle
• Bridge elements as steps/methods

Best For

• Problem to solution journeys
• Current vs future state
• Gap analysis
• Transformation bridges
• Strategic initiatives

Visual Elements

• Two distinct platforms/sides
• Visible gap or chasm
• Bridge structure with supports
• Icons representing each side
• Stepping stones or bridge planks

Text Placement

• Title at top
• Left label (From/Problem/Current)
• Right label (To/Solution/Future)
• Bridge elements labeled
• Gap description below

Recommended Pairings

• cartoon-hand-drawn: Friendly journeys
• corporate-memphis: Business transformations
• isometric-3d: Technical transitions

circular-flow

Cyclic process showing continuous or recurring steps.

Structure

• Circular arrangement
• Steps around the circle
• Arrows showing direction
• No clear start/end (continuous)
• Center can hold main concept

Best For

• Recurring processes
• Feedback loops
• Lifecycle stages
• Continuous improvement
• Natural cycles

Visual Elements

• Circle or ring shape
• Directional arrows
• Step nodes evenly spaced
• Icons per step
• Optional center element

Text Placement

• Title at top
• Step labels at each node
• Brief descriptions near nodes
• Center concept if applicable
• Cycle name

Recommended Pairings

• cartoon-hand-drawn: Friendly cycles
• corporate-memphis: Business processes
• subway-map: Transit-style cycles

comic-strip

Sequential narrative panels telling a story or explaining a concept.

Structure

• Multiple panels in sequence
• Left-to-right, top-to-bottom reading
• Characters or subjects in scenes
• Speech/thought bubbles
• Panel borders clearly defined

Best For

• Storytelling explanations
• User journey narratives
• Scenario illustrations
• Step sequences with context
• Before/during/after stories

Visual Elements

• Panel frames
• Speech and thought bubbles
• Sound effects (optional)
• Characters with expressions
• Scene backgrounds

Text Placement

• Title at top
• Dialogue in speech bubbles
• Narration in caption boxes
• Sound effects integrated
• Panel numbers if needed

Recommended Pairings

• graphic-novel: Dramatic narratives
• kawaii: Cute character stories
• cartoon-hand-drawn: Friendly explanations

comparison-matrix

Grid-based multi-factor comparison across multiple items.

Structure

• Table/grid layout
• Rows: items being compared
• Columns: comparison criteria
• Cells: scores, checks, or values
• Header row and column clearly marked

Best For

• Product feature comparisons
• Tool/software evaluations
• Multi-criteria decisions
• Specification sheets
• Rating comparisons

Visual Elements

• Clear grid lines or cell boundaries
• Checkmarks, X marks, or scores in cells
• Color coding for quick scanning
• Icons for criteria categories
• Highlight for recommended option

Text Placement

• Title at top
• Item names in first column
• Criteria in header row
• Brief values in cells
• Legend if using symbols

Recommended Pairings

• corporate-memphis: Business tool comparisons
• ui-wireframe: Technical feature matrices
• blueprint: Specification comparisons

dashboard

Multi-metric display with charts, numbers, and KPI indicators.

Structure

• Multiple data widgets
• Charts, graphs, numbers
• Grid or modular layout
• Key metrics prominent
• Status indicators

Best For

• KPI summaries
• Performance metrics
• Analytics overviews
• Status reports
• Data snapshots

Visual Elements

• Chart types (bar, line, pie, gauge)
• Big numbers for KPIs
• Trend arrows (up/down)
• Color-coded status (green/red)
• Clean data visualization

Text Placement

• Title at top
• Widget titles above each section
• Metric labels and values
• Units clearly shown
• Time period indicated

Recommended Pairings

• corporate-memphis: Business dashboards
• ui-wireframe: Technical dashboards
• cyberpunk-neon: Futuristic displays

dense-modules

High-density modular layout with 6-7 typed information modules packed with concrete data.

Structure

• 6-7 distinct modules per image, each serving a specific information function
• Every module contains concrete data: brand names, numbers, percentages, parameters
• Minimal whitespace—compact spacing prioritized over breathing room
• Smaller text acceptable to maximize information density
• Each module identified by coordinate label or section marker (e.g., MOD-1, SEC-A)

Module Archetypes

Variants

Best For

• Product selection guides and buying guides
• Multi-dimensional comparison content
• Data-rich educational materials
• "Avoid pitfalls" / "complete guide" formats
• Content targeting platforms like Xiaohongshu with high-density visual requirements

Visual Elements

• Module boundary markers (thick lines, dotted frames, or coordinate grids)
• Quality indicators per module (emoji faces, checkmarks, crosses, crowns)
• Data callout boxes with highlighted numbers
• Comparison arrows and progression indicators
• Warning/alert visual markers for pitfall modules
• Metadata in corners (page numbers, timestamps, small barcodes)

Text Placement

• Main title at top, prominent and impactful
• Subtitle with module count ("X大维度全面解析...")
• Module headers inside colored badges or labeled frames
• Body text compact, multiple columns within modules
• Numbers highlighted with accent colors, slightly larger than body text

Information Density Rules

• Every corner should contain useful information or metadata
• No decorative-only empty space
• Text size may be reduced to fit more content—information over font size
• Each module must have specific data points, not generic descriptions
• Balance between density and readability: dense but organized

Recommended Pairings

• pop-laboratory: Technical precision with coordinate markers and blueprint grid
• morandi-journal: Hand-drawn warmth with doodle illustrations and organic frames
• retro-pop-grid: 1970s pop art with strict grid cells and bold contrast
• corporate-memphis: Clean business feel for product comparisons
• technical-schematic: Engineering precision for technical product guides

funnel

Narrowing stages showing conversion, filtering, or refinement process.

Structure

• Wide top (input/start)
• Narrow bottom (output/result)
• Horizontal layers for stages
• Progressive narrowing
• 3-6 stages typically

Best For

• Sales/marketing funnels
• Conversion processes
• Filtering/selection
• Recruitment pipelines
• Decision processes

Visual Elements

• Funnel shape clearly defined
• Distinct colors per stage
• Width indicates volume/quantity
• Stage icons or symbols
• Numbers/percentages per stage

Text Placement

• Title at top
• Stage names inside or beside
• Metrics/numbers per stage
• Input label at top
• Output label at bottom

Recommended Pairings

• corporate-memphis: Marketing funnels
• isometric-3d: Technical pipelines
• cartoon-hand-drawn: Educational funnels

hierarchical-layers

Nested layers showing levels of importance, influence, or proximity.

Structure

• Multiple layers from core to periphery
• Core/top: most important/central
• Outer/bottom: decreasing importance
• 3-7 levels typically
• Clear boundaries between levels

Variants

Best For

• Maslow's hierarchy style concepts
• Priority and importance levels
• Spheres of influence
• Organizational structures
• Stakeholder analysis

Visual Elements

• Distinct color per level
• Icons or illustrations per tier
• Size indicates importance/quantity
• Labels inside or beside layers
• Decorative apex/center element

Text Placement

• Title at top or side
• Level names inside each tier
• Brief descriptions outside
• Quantities or percentages if relevant
• Legend for color meanings

Recommended Pairings

• craft-handmade: Playful layered concepts
• corporate-memphis: Business hierarchies
• technical-schematic: Technical 3D pyramids

hub-spoke

Central concept with radiating connections to related items.

Structure

• Central hub (main concept)
• Spokes radiating outward
• Nodes at spoke ends (related concepts)
• Even or weighted distribution
• Optional secondary connections

Best For

• Central theme with components
• Product features around core
• Team roles around project
• Ecosystem mapping
• Mind maps

Visual Elements

• Prominent central hub
• Clear spoke lines
• Consistent node styling
• Icons representing each spoke item
• Optional grouping colors

Text Placement

• Title at top
• Core concept in center hub
• Spoke item labels at nodes
• Brief descriptions near nodes
• Connection labels on spokes if needed

Recommended Pairings

• cartoon-hand-drawn: Friendly concept maps
• corporate-memphis: Business ecosystems
• subway-map: Network-style connections

iceberg

Surface vs hidden depths, visible vs underlying factors.

Structure

• Waterline dividing visible/hidden
• Tip above water (obvious/surface)
• Larger mass below (hidden/deep)
• Proportional to emphasize hidden depth
• Optional layers within underwater section

Best For

• Surface vs root causes
• Visible vs invisible work
• Symptoms vs underlying issues
• Public vs private aspects
• Known vs unknown factors

Visual Elements

• Clear water/surface line
• Above: smaller, brighter
• Below: larger, darker/deeper
• Wave or water texture
• Gradient showing depth

Text Placement

• Title at top
• Surface items above waterline
• Hidden items below, larger
• Waterline label optional
• Depth indicators for layers

Recommended Pairings

• cartoon-hand-drawn: Friendly metaphor
• storybook-watercolor: Artistic depth
• graphic-novel: Dramatic revelation

isometric-map

3D-style spatial layout showing locations, relationships, or journey through space.

Structure

• Isometric 3D perspective
• Locations as buildings/landmarks
• Paths connecting locations
• Spatial relationships visible
• Bird's eye view angle

Best For

• Office/campus layouts
• City/ecosystem maps
• User journey maps
• System architecture
• Process landscapes

Visual Elements

• Consistent isometric angle (30°)
• 3D buildings or objects
• Pathways and roads
• Labels floating above
• Mini scenes at locations

Text Placement

• Title at top corner
• Location labels above objects
• Path labels along routes
• Legend for symbols
• Scale indicator if relevant

Recommended Pairings

• isometric-3d: Clean technical maps
• pixel-art: Retro game-style maps
• lego-brick: Playful location maps

jigsaw

Interlocking puzzle pieces showing how parts fit together.

Structure

• Puzzle pieces that interlock
• Each piece represents a component
• Connections show relationships
• Can be assembled or exploded view
• Missing piece highlights gaps

Best For

• Component relationships
• Team/skill fit
• Strategy pieces
• Integration concepts
• Completeness assessments

Visual Elements

• Classic puzzle piece shapes
• Distinct colors per piece
• Interlocking edges visible
• Icons or labels per piece
• Optional missing piece

Text Placement

• Title at top
• Piece labels inside or beside
• Connection descriptions
• Missing piece explanation
• Assembly context

Recommended Pairings

• cartoon-hand-drawn: Friendly integration concepts
• paper-cutout: Tactile puzzle feel
• corporate-memphis: Business strategy pieces

linear-progression

Sequential progression showing steps, timeline, or chronological events.

Structure

• Linear arrangement (horizontal or vertical)
• Nodes/markers at key points
• Connecting line or path between nodes
• Clear start and end points
• Directional flow indicators

Variants

Best For

• Step-by-step tutorials and how-tos
• Historical timelines and evolution
• Project milestones and roadmaps
• Workflow documentation
• Onboarding processes

Visual Elements

• Numbered steps or date markers
• Arrows or connectors showing direction
• Icons representing each step/event
• Consistent node spacing
• Progress indicators optional

Text Placement

• Title at top
• Step/event titles at each node
• Brief descriptions below nodes
• Dates or numbers clearly visible

Recommended Pairings

• craft-handmade: Friendly tutorials and timelines
• ikea-manual: Clean assembly instructions
• corporate-memphis: Business process flows
• aged-academia: Historical discoveries

periodic-table

Grid of categorized elements with consistent cell formatting.

Structure

• Rectangular grid
• Each cell is one element
• Color-coded categories
• Consistent cell format
• Optional grouping gaps

Best For

• Categorized collections
• Tool/resource catalogs
• Skill matrices
• Element collections
• Reference guides

Visual Elements

• Uniform cell sizes
• Category colors
• Symbol/abbreviation prominent
• Small icon per cell
• Category legend

Text Placement

• Title at top
• Cell: symbol, name, brief info
• Category names in legend
• Optional row/column headers
• Footnotes for special cases

Recommended Pairings

• pop-art: Vibrant element grids
• pixel-art: Retro collection displays
• corporate-memphis: Business tool catalogs

story-mountain

Plot structure visualization showing rising action, climax, and resolution.

Structure

• Mountain/arc shape
• Rising slope (build-up)
• Peak (climax)
• Falling slope (resolution)
• Start and end at base level

Best For

• Narrative structures
• Project lifecycles
• Tension/release patterns
• Emotional journeys
• Campaign arcs

Visual Elements

• Mountain or arc curve
• Points along the path
• Climax visually emphasized
• Slope steepness meaningful
• Base camps or milestones

Text Placement

• Title at top
• Stage labels along path
• Climax prominently labeled
• Brief descriptions at points
• Start/end clearly marked

Recommended Pairings

• storybook-watercolor: Narrative journeys
• cartoon-hand-drawn: Educational plot diagrams
• graphic-novel: Dramatic story arcs

structural-breakdown

Internal structure visualization with labeled parts or layers.

Structure

• Central subject (object, system, body)
• Parts or layers clearly shown
• Labels with callout lines
• Exploded or cutaway view
• Optional zoomed detail sections

Variants

Best For

• Product part breakdowns
• Anatomy explanations
• System components
• Device teardowns
• Material composition

Visual Elements

• Main subject clearly rendered
• Callout lines with dots/arrows
• Label boxes at endpoints
• Numbered parts optionally
• Layer boundaries or separation

Text Placement

• Title at top
• Part/layer labels at callouts
• Brief descriptions in boxes
• Legend for numbered systems
• Depth/thickness if relevant

Recommended Pairings

• technical-schematic: Technical schematics
• aged-academia: Classic anatomical style
• craft-handmade: Friendly breakdowns

tree-branching

Hierarchical structure branching from root to leaves, showing categories and subcategories.

Structure

• Root/trunk at top or left
• Branches splitting into sub-branches
• Leaves as terminal nodes
• Clear parent-child relationships
• Balanced or organic branching

Best For

• Taxonomies and classifications
• Decision trees
• Organizational charts
• File/folder structures
• Family trees

Visual Elements

• Connecting lines showing relationships
• Nodes at branch points
• Icons or labels at each node
• Color coding by branch
• Visual weight decreasing toward leaves

Text Placement

• Title at top
• Root concept prominently labeled
• Branch and leaf labels
• Optional descriptions at key nodes
• Legend for categories

Recommended Pairings

• cartoon-hand-drawn: Friendly taxonomies
• da-vinci-notebook: Scientific classifications
• origami: Geometric tree structures

venn-diagram

Overlapping circles showing relationships, commonalities, and differences.

Structure

• 2-3 overlapping circles
• Each circle is a category/concept
• Overlaps show shared elements
• Center shows common to all
• Unique areas for exclusives

Best For

• Concept relationships
• Skill overlaps
• Market segments
• Comparative analysis
• Finding common ground

Visual Elements

• Translucent circle fills
• Clear overlap regions
• Distinct colors per circle
• Icons in regions
• Boundary labels

Text Placement

• Title at top
• Circle labels outside or on edge
• Items in appropriate regions
• Overlap region labels
• Legend if needed

Recommended Pairings

• cartoon-hand-drawn: Friendly concept overlaps
• corporate-memphis: Business segment analysis
• pop-art: High-contrast comparisons

winding-roadmap

Curved path showing journey with milestones and checkpoints.

Structure

• S-curve or winding path
• Milestones along the path
• Start and destination points
• Side elements (obstacles, helpers)
• Progress indicators

Best For

• Project roadmaps
• Career paths
• Customer journeys
• Learning paths
• Strategy timelines

Visual Elements

• Curving road or river
• Milestone markers/flags
• Scene elements along path
• Vehicle/character on journey
• Destination landmark

Text Placement

• Title at top
• Milestone labels at each point
• Path section names
• Destination description
• Optional timeline indicators

Recommended Pairings

• storybook-watercolor: Whimsical journeys
• cartoon-hand-drawn: Friendly roadmaps
• isometric-3d: Technical project paths

Structured Content Template

Template for generating structured infographic content that informs the visual designer.

Purpose

This document bridges content analysis and visual design:

• Transforms source material into designer-ready format
• Organizes learning objectives into visual sections
• Preserves all source data verbatim
• Separates content from design instructions

Instructional Design Process

Phase 1: High-Level Outline

1. Title: Capture the essence in a compelling headline 2. Overview: Brief description (1-2 sentences) 3. Learning Objectives: List what the viewer will understand

Phase 2: Section Development

For each learning objective:

1. Key Concept: One-sentence summary of the section 2. Content: Points extracted verbatim from source 3. Visual Element: What should be shown visually 4. Text Labels: Exact text for headlines, subheads, labels

Phase 3: Data Integrity Check

Verify all source data is:

• Copied exactly (no paraphrasing)
• Attributed correctly (for quotes)
• Formatted consistently

Critical Rules

Structured Content Format

# [Infographic Title]

## Overview
[Brief description of what this infographic conveys - 1-2 sentences]

## Learning Objectives
The viewer will understand:
1. [Primary objective]
2. [Secondary objective]
3. [Tertiary objective if applicable]

---

## Section 1: [Section Title]

**Key Concept**: [One-sentence summary of this section]

**Content**:
- [Point 1 - verbatim from source]
- [Point 2 - verbatim from source]
- [Point 3 - verbatim from source]

**Visual Element**: [Description of what to show visually]
- Type: [icon/chart/illustration/diagram/photo]
- Subject: [what it depicts]
- Treatment: [how it should be presented]

**Text Labels**:
- Headline: "[Exact text for headline]"
- Subhead: "[Exact text for subhead]"
- Labels: "[Label 1]", "[Label 2]", "[Label 3]"

---

## Section 2: [Section Title]

**Key Concept**: [One-sentence summary]

**Content**:
- [Point 1]
- [Point 2]

**Visual Element**: [Description]

**Text Labels**:
- Headline: "[text]"
- Labels: "[Label 1]", "[Label 2]"

---

[Continue for each section...]

---

## Data Points (Verbatim)

All statistics, numbers, and quotes exactly as they appear in source:

### Statistics
- "[Exact statistic 1]"
- "[Exact statistic 2]"
- "[Exact statistic 3]"

### Quotes
- "[Exact quote]" — [Attribution]

### Key Terms
- **[Term 1]**: [Definition from source]
- **[Term 2]**: [Definition from source]

---

## Design Instructions

Extracted from user's steering prompt:

### Style Preferences
- [Any color preferences]
- [Any mood/aesthetic preferences]
- [Any artistic style preferences]

### Layout Preferences
- [Any structure preferences]
- [Any organization preferences]

### Other Requirements
- [Any other visual requirements from user]
- [Target platform if specified]
- [Brand guidelines if any]

Section Types by Content

For Process/Steps

## Section N: Step N - [Step Title]

**Key Concept**: [What this step accomplishes]

**Content**:
- Action: [What to do]
- Details: [How to do it]
- Note: [Important consideration]

**Visual Element**:
- Type: numbered step icon
- Subject: [visual representing the action]
- Arrow: leads to next step

**Text Labels**:
- Headline: "Step N: [Title]"
- Action: "[Imperative verb + object]"

For Comparison

## Section N: [Item A] vs [Item B]

**Key Concept**: [What distinguishes them]

**Content**:
| Aspect | [Item A] | [Item B] |
|--------|----------|----------|
| [Factor 1] | [Value] | [Value] |
| [Factor 2] | [Value] | [Value] |

**Visual Element**:
- Type: split comparison
- Left: [Item A representation]
- Right: [Item B representation]

**Text Labels**:
- Headline: "[Item A] vs [Item B]"
- Left label: "[Item A name]"
- Right label: "[Item B name]"

For Hierarchy

## Section N: [Level Name]

**Key Concept**: [What this level represents]

**Content**:
- Position: [Top/Middle/Bottom]
- Priority: [Importance level]
- Contains: [Elements at this level]

**Visual Element**:
- Type: layer/tier
- Size: [relative to other levels]
- Position: [where in hierarchy]

**Text Labels**:
- Level title: "[Name]"
- Description: "[Brief description]"

For Data/Statistics

## Section N: [Metric Name]

**Key Concept**: [What this data shows]

**Content**:
- Value: [Exact number/percentage]
- Context: [What it means]
- Comparison: [Benchmark if any]

**Visual Element**:
- Type: [chart/number highlight/gauge]
- Emphasis: [how to draw attention]

**Text Labels**:
- Main number: "[Exact value]"
- Label: "[Metric name]"
- Context: "[Brief context]"

Quality Checklist

Before finalizing structured content:

• [ ] Title captures the main message
• [ ] Learning objectives are clear and measurable
• [ ] Each section maps to an objective
• [ ] All content is verbatim from source
• [ ] Visual elements are clearly described
• [ ] Text labels are specified exactly
• [ ] Data points are collected and verified
• [ ] Design instructions are separated
• [ ] No new information has been added

aged-academia

Historical scientific illustration with aged paper aesthetic.

Color Palette

• Primary: Sepia brown (#704214), aged ink, muted earth tones
• Background: Parchment (#F4E4BC), yellowed paper texture
• Accents: Faded red annotations, iron gall ink spots

Variants

Visual Elements

• Aged paper texture overlay
• Detailed cross-hatching and line work
• Scientific illustration precision
• Study notes and annotations
• Specimen plate or sketch aesthetic
• Numbered diagram elements

Typography

• Handwritten cursive or serif fonts
• Scientific annotations
• Small caps for labels
• Italics for scientific names

Best For

Scientific education, biology topics, historical explanations, inventions, nature documentation

bold-graphic

High-contrast comic style with bold outlines and dramatic visuals.

Color Palette

• Primary: Bold primaries - red, yellow, blue, black
• Background: White, halftone patterns, dramatic shadows
• Accents: Spot colors, neon highlights

Variants

Visual Elements

• Bold black outlines
• High contrast compositions
• Halftone dot patterns
• Comic panel borders optional
• Action lines and motion
• Speech bubbles and sound effects

Typography

• Comic book lettering
• Impact fonts for emphasis
• POW/BANG effects for pop-art
• Caption boxes for narrative

Best For

Attention-grabbing content, dramatic narratives, pop culture, marketing, high-energy presentations

chalkboard

Black chalkboard background with colorful chalk drawing style

Design Aesthetic

Classic classroom chalkboard aesthetic with hand-drawn chalk illustrations. Nostalgic educational feel with imperfect, sketchy lines that capture the warmth of traditional teaching. Colorful chalk creates visual hierarchy while maintaining the authentic chalkboard experience.

Background

• Color: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C)
• Texture: Realistic chalkboard texture with subtle scratches, dust particles, and faint eraser marks

Typography

Hand-drawn chalk lettering style with visible chalk texture. Imperfect baseline adds authenticity. White or bright colored chalk for emphasis.

Color Palette

Visual Elements

• Hand-drawn chalk illustrations with sketchy, imperfect lines
• Chalk dust effects around text and key elements
• Doodles: stars, arrows, underlines, circles, checkmarks
• Mathematical formulas and simple diagrams
• Eraser smudges and chalk residue textures
• Wooden frame border optional
• Stick figures and simple icons
• Connection lines with hand-drawn feel

Style Rules

Do

• Maintain authentic chalk texture on all elements
• Use imperfect, hand-drawn quality throughout
• Add subtle chalk dust and smudge effects
• Create visual hierarchy with color variety
• Include playful doodles and annotations

Don't

• Use perfect geometric shapes
• Create clean digital-looking lines
• Add photorealistic elements
• Use gradients or glossy effects

Best For

Educational content, tutorials, classroom themes, teaching materials, workshops, informal learning sessions, knowledge sharing

claymation

3D clay figure aesthetic with stop-motion charm

Color Palette

• Primary: Saturated clay colors - bright but slightly muted
• Background: Neutral studio backdrop, soft gradients
• Accents: Complementary clay colors, shiny highlights

Visual Elements

• Clay/plasticine texture on all objects
• Fingerprint marks and imperfections
• Rounded, sculpted forms
• Soft shadows
• Stop-motion staging
• Miniature set aesthetic

Typography

• Extruded clay letters
• Dimensional, rounded text
• Playful and chunky
• Embedded in clay scenes

Best For

Playful explanations, children's content, stop-motion narratives, friendly processes

corporate-memphis

Flat vector people with vibrant geometric fills

Color Palette

• Primary: Bright, saturated - purple, orange, teal, yellow
• Background: White or light pastels
• Accents: Gradient fills, geometric patterns

Visual Elements

• Flat vector illustration
• Disproportionate human figures
• Abstract body shapes
• Floating geometric elements
• No outlines, solid fills
• Plant and object accents

Typography

• Clean sans-serif
• Bold headings
• Professional but friendly
• Minimal decoration

Best For

Business presentations, tech products, marketing materials, corporate training

craft-handmade (DEFAULT)

Hand-drawn and paper craft aesthetic with warm, organic feel.

Color Palette

• Primary: Warm pastels, soft saturated colors, craft paper tones
• Background: Light cream (#FFF8F0), textured paper (#F5F0E6)
• Accents: Bold highlights, construction paper colors

Variants

Visual Elements

• Hand-drawn or cut-paper quality
• Organic, slightly imperfect shapes
• Layered depth with shadows (paper variant)
• Simple cartoon elements and icons
• Character illustrations (people, personalities in cartoon form)
• Ample whitespace, clean composition
• Keywords and core concepts highlighted
• Strictly hand-drawn—no realistic or photographic elements

Style Enforcement

• All imagery must maintain cartoon/illustrated aesthetic
• Replace real photos or realistic figures with hand-drawn equivalents
• Maintain consistent line weight and illustration style throughout

Typography

• Hand-drawn or casual font style
• Clear, readable labels
• Keywords emphasized with larger/bolder text
• Cut-out letter style for paper variant

Best For

Educational content, general explanations, friendly infographics, children's content, playful hierarchies

cyberpunk-neon

Neon glow on dark backgrounds, futuristic aesthetic

Color Palette

• Primary: Neon pink (#FF00FF), cyan (#00FFFF), electric blue
• Background: Deep black (#0A0A0A), dark purple gradients
• Accents: Neon glow effects, chrome reflections

Visual Elements

• Glowing neon outlines
• Dark atmospheric backgrounds
• Digital glitch effects
• Circuit patterns
• Holographic elements
• Rain and reflections

Typography

• Glowing neon text
• Digital/tech fonts
• Flickering effects
• Outlined glow letters

Best For

Tech futures, gaming content, digital culture, futuristic concepts, night aesthetics

ikea-manual

Minimal line art assembly instruction style

Color Palette

• Primary: Black lines, minimal fills
• Background: White or cream paper
• Accents: Red for warnings, blue for highlights

Visual Elements

• Simple line drawings
• Numbered step sequences
• Arrow indicators
• Exploded assembly views
• Wordless communication
• Stick figures for scale

Typography

• Minimal text
• Step numbers prominent
• Universal symbols
• Simple sans-serif when needed

Best For

Step-by-step instructions, assembly guides, how-to content, universal communication

kawaii

Japanese cute style with big eyes and pastel colors

Color Palette

• Primary: Soft pastels - pink (#FFB6C1), mint (#98D8C8), lavender (#E6E6FA)
• Background: Light pink or cream, sparkle overlays
• Accents: Bright pops, star and heart shapes

Visual Elements

• Big sparkly eyes on characters
• Rounded, soft shapes
• Blushing cheeks
• Sparkles and stars scattered
• Cute animal characters
• Chibi proportions

Typography

• Rounded, bubbly fonts
• Cute decorations on letters
• Hearts and stars in text
• Soft, friendly appearance

Best For

Cute tutorials, children's education, lifestyle content, character-driven explanations

knolling

Organized flat-lay with top-down arrangement

Color Palette

• Primary: Object's natural colors
• Background: Solid color - black, white, or colored surface
• Accents: Shadows, subtle highlights

Visual Elements

• Top-down camera angle
• Objects arranged at 90° angles
• Equal spacing between items
• Clean organization
• Symmetry and order
• No overlapping items

Typography

• Clean labels
• Positioned outside objects
• Connecting lines to items
• Minimal, catalog-style

Best For

Product collections, tool inventories, gear layouts, organized overviews

lego-brick

Toy brick construction with playful aesthetic

Color Palette

• Primary: Classic LEGO colors - red, blue, yellow, green, white
• Background: Light gray baseplate or white
• Accents: Bright primary pops, shiny studs

Visual Elements

• Visible brick studs
• Modular construction
• Minifigure characters
• Building instruction style
• Stackable elements
• Plastic sheen

Typography

• Blocky, bold fonts
• LEGO instruction style
• Step numbers
• Playful appearance

Best For

Building concepts, modular systems, playful education, children's content

morandi-journal

Hand-drawn doodle illustration with warm Morandi color tones and cozy bullet journal aesthetic.

Color Palette

• Background: Warm cream/beige with subtle paper texture (#F5F0E6)
• Primary: Muted teal/sage green (#7BA3A8) for headers and frames
• Secondary: Warm terracotta/orange (#D4956A) for highlights and numbers
• Line art: Dark charcoal brown (#4A4540)
• Soft highlights: Pale yellow (#F5E6C8)

Visual Elements

• Hand-drawn doodle illustrations with organic, slightly imperfect ink lines
• Washi tape strip decorations (diagonal stripes pattern, beige and brown)
• Rounded card containers for brand/option items
• Hand-drawn rulers, scales, and progress bars with emoji quality indicators
• Smiley/frowny faces as quality markers (😊✓ 😐 ☹️✗)
• Dotted line frames around sections
• Connecting arrows and dotted lines between modules
• Corner decorations: tiny houses, stars, sparkles, clouds
• Wavy line dividers between sections
• Callout bubbles for tips
• Magnifying glass icons for identification tips
• Thumbs up/down icons (hand-drawn style)

Variants

Typography

• Main title: Bold hand-lettered calligraphy style with decorative flourishes
• Module headers: Clean handwritten text in white on dark teal rounded badge (#6B9080)
• Body text: Neat handwritten print style, easy to read
• Numbers: Highlighted in terracotta (#D4956A), slightly larger than body

Style Enforcement

• All imagery must maintain hand-drawn/doodle aesthetic—no digital precision
• Organic, slightly imperfect shapes throughout
• Sketch-like quality with visible line weight variations
• Warm and cozy journal feel, not clinical or corporate

Avoid

• Flat vector icons or emoji
• Clean geometric shapes
• Stock illustration style
• Strict grid layout
• Pure white background
• Digital/corporate look

Best For

Product selection guides, lifestyle content, educational overviews, consumer-facing comparison content, Xiaohongshu-style posts

origami

Folded paper forms with geometric precision

Color Palette

• Primary: Solid origami paper colors - red, blue, green, gold
• Background: White or soft gray, subtle shadows
• Accents: Paper fold highlights, crisp shadows

Visual Elements

• Geometric folded shapes
• Visible fold lines
• Cast shadows showing depth
• Paper texture
• Angular, faceted forms
• Low-poly aesthetic

Typography

• Clean geometric fonts
• Angular letterforms
• Folded paper text effect
• Minimal, precise labels

Best For

Geometric concepts, transformation topics, Japanese themes, abstract representations

pixel-art

Retro 8-bit gaming aesthetic

Color Palette

• Primary: Limited palette - NES/SNES colors
• Background: Black or dark blue, scanlines optional
• Accents: Bright pixel highlights, CRT glow

Visual Elements

• Visible pixel grid
• Limited color count per sprite
• 8-bit or 16-bit style
• Retro game UI elements
• Pixel-perfect edges
• Dithering for gradients

Typography

• Pixel fonts
• Blocky letterforms
• Game UI style text
• Score/stat display style

Best For

Gaming topics, nostalgia content, developer audiences, retro tech themes

pop-laboratory

Lab manual precision meets pop art color impact—coordinate systems, technical diagrams, and fluorescent accents on blueprint grid.

Color Palette

• Background: Professional grayish-white with faint blueprint grid texture (#F2F2F2)
• Primary: Muted teal/sage green (#B8D8BE) for major functional blocks and data zones
• High-alert accent: Vibrant fluorescent pink (#E91E63) strictly for warnings, critical data, or "winner" highlights
• Marker highlights: Vivid lemon yellow (#FFF200) as translucent highlighter effect for keywords
• Line art: Ultra-fine charcoal brown (#2D2926) for technical grids, coordinates, and hairlines

Visual Elements

• Coordinate-style labels on every module (e.g., R-20, G-02, SEC-08)
• Technical diagrams: exploded views, cross-sections with anchor points, architectural skeletal lines
• Vertical/horizontal rulers with precise markers (0.5mm, 1.8mm, 45°)
• "Marker-over-print" effect: color blocks slightly offset from text, postmodern print feel
• Cross-hair targets, mathematical symbols (Σ, Δ, ∞), directional arrows (X/Y axis)
• Microscopic detail annotations alongside macroscopic bold headers
• Corner metadata: tiny barcodes, timestamps, technical parameters
• High contrast between massive bold headers and tiny 8pt-style annotations

Typography

• Headers: Bold brutalist characters, high visual impact
• Body: Professional sans-serif or crisp technical print
• Numbers: Large, highlighted with yellow or blue to stand out
• Annotations: Ultra-crisp, small technical labels

Style Enforcement

• Strictly systematic color usage: only teal, pink, yellow, charcoal—no rainbow palette
• Sufficient fine grid lines and coordinate annotations throughout
• Maintain tension between large impactful headers and small precise parameters
• Lab manual aesthetic: mix of microscopic details and macroscopic data

Avoid

• Cute or cartoonish doodles
• Soft pastels or generic textures
• Empty white space
• Flat vector stock icons
• Organic or hand-drawn imperfections

Best For

Technical product guides, specification comparisons, precision-focused data visualization, engineering-adjacent content

retro-pop-grid

1970s retro pop art with strict Swiss international grid, thick black outlines, and flat color blocks.

Color Palette

• Background: Warm vintage cream/beige (#F5F0E6)
• Flat accents: Salmon pink, sky blue, mustard yellow, mint green—all muted retro tones
• Contrast blocks: Solid pure black (#000000) and solid pure white (#FFFFFF) used strategically for extreme contrast
• Line art and outlines: Solid thick black

Visual Elements

• Uniform thick black outlines on all illustrations, text boxes, and grid dividers
• Pure 2D flat vector aesthetic with subtle screen print texture
• Strict Swiss international grid: poster divided into square and rectangular cells by thick black lines
• Black-background cells with white text for warnings or key categories (inverted contrast)
• Geometric fill patterns in empty cells: checkerboards, diagonal lines, dots
• Flat abstract symbols, warning signs, keyholes, stars, arrows
• Vintage comic-style smiley/frowny faces for quality indicators
• Colored cells used for breathing room—some with minimal/no content

Typography

• Headers: Bold brutalist or retro thick display fonts, high legibility
• Body: Clean sans-serif, structured typographic alignment
• Decorative English text acceptable for stylistic labels ("WARNING", "INFO", "BEST")
• All content text in specified language

Style Enforcement

• Absolutely no gradients, shading, drop shadows, or 3D effects
• Everything anchored in grid cells—no floating or unorganized elements
• Maintain 1970s retro pop art and underground comic illustration feel
• Visual density balanced with rhythmic grid—some cells intentionally sparse for contrast

Avoid

• 3D rendering, realistic details, gradients, soft shadows
• Soft, thin, or sketch-like pencil lines
• Free-flowing, unorganized, or floating layouts (everything must be grid-anchored)
• Pure white background canvas
• Organic or hand-drawn imperfections

Best For

Trendy product guides, design-conscious content, visually striking comparisons, content targeting design-savvy audiences, bold social media posts

storybook-watercolor

Soft hand-painted illustration with whimsical charm

Color Palette

• Primary: Soft watercolor washes - muted blues, greens, warm earth
• Background: Watercolor paper texture, white or cream
• Accents: Deeper pigment pools, splatter effects

Visual Elements

• Visible brushstrokes
• Soft color bleeds and gradients
• White space as design element
• Delicate line work over washes
• Natural, organic shapes
• Dreamy, atmospheric quality

Typography

• Elegant hand-lettering
• Watercolor-style text
• Flowing, organic letterforms
• Integrated with illustrations

Best For

Storytelling, emotional journeys, nature topics, children's education, artistic presentations

subway-map

Transit diagram style with colored lines and stations

Color Palette

• Primary: Transit line colors - red, blue, green, yellow, orange
• Background: White or light gray
• Accents: Station dots, interchange markers

Visual Elements

• Colored route lines
• 45° and 90° angles only
• Station circle markers
• Interchange symbols
• Simplified geography
• Line thickness hierarchy

Typography

• Clean sans-serif
• Station name labels
• Line number/name badges
• Horizontal or angled text

Best For

Journey maps, process flows, network diagrams, route explanations

technical-schematic

Technical diagrams with engineering precision and clean geometry.

Color Palette

• Primary: Blues (#2563EB), teals, grays, white lines
• Background: Deep blue (#1E3A5F), white, or light gray with grid
• Accents: Amber highlights (#F59E0B), cyan callouts

Variants

Visual Elements

• Geometric precision throughout
• Grid pattern or isometric angle
• Dimension lines and measurements
• Technical symbols and annotations
• Clean vector shapes
• Consistent stroke weights

Typography

• Technical stencil or clean sans-serif
• All-caps labels
• Measurement annotations
• Floating labels for isometric

Best For

Technical architecture, system diagrams, engineering specs, product breakdowns, data visualization

ui-wireframe

Grayscale interface mockup style

Color Palette

• Primary: Grays - light (#E5E5E5), medium (#9CA3AF), dark (#374151)
• Background: White (#FFFFFF), light gray
• Accents: Blue for interactive (#3B82F6), red for emphasis

Visual Elements

• Wireframe boxes and placeholders
• X marks for image placeholders
• Simple line icons
• Grid-based layout
• Annotation callouts
• Redline specifications

Typography

• System fonts
• Placeholder "Lorem ipsum"
• UI label style
• Sans-serif throughout

Best For

Product designs, UI explanations, app concepts, user flow diagrams