Infographic Generator

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

Usage

CODEBLOCK0

Options

Option	Values
INLINECODE0	21 options (see Layout Gallery), default: bento-grid
INLINECODE1

21 options (see Style Gallery), default: craft-handmade | | --aspect | Named: landscape (16:9), portrait (9:16), square (1:1). Custom: any W:H ratio (e.g., 3:4, 4:3, 2.35:1) | | --lang | en, zh, ja, etc. |

Layout Gallery

Layout	Best For
INLINECODE4	Timelines, processes, tutorials
INLINECODE5

A vs B, before-after, pros-cons | | comparison-matrix | Multi-factor comparisons | | hierarchical-layers | Pyramids, priority levels | | tree-branching | Categories, taxonomies | | hub-spoke | Central concept with related items | | structural-breakdown | Exploded views, cross-sections | | bento-grid | Multiple topics, overview (default) | | iceberg | Surface vs hidden aspects | | bridge | Problem-solution | | funnel | Conversion, filtering | | isometric-map | Spatial relationships | | dashboard | Metrics, KPIs | | periodic-table | Categorized collections | | comic-strip | Narratives, sequences | | story-mountain | Plot structure, tension arcs | | jigsaw | Interconnected parts | | venn-diagram | Overlapping concepts | | winding-roadmap | Journey, milestones | | circular-flow | Cycles, recurring processes | | dense-modules | High-density modules, data-rich guides |

Full definitions: INLINECODE25

Style Gallery

Style	Description
INLINECODE26	Hand-drawn, paper craft (default)
INLINECODE27

3D clay figures, stop-motion | | kawaii | Japanese cute, pastels | | storybook-watercolor | Soft painted, whimsical | | chalkboard | Chalk on black board | | cyberpunk-neon | Neon glow, futuristic | | bold-graphic | Comic style, halftone | | aged-academia | Vintage science, sepia | | corporate-memphis | Flat vector, vibrant | | technical-schematic | Blueprint, engineering | | origami | Folded paper, geometric | | pixel-art | Retro 8-bit | | ui-wireframe | Grayscale interface mockup | | subway-map | Transit diagram | | ikea-manual | Minimal line art | | knolling | Organized flat-lay | | lego-brick | Toy brick construction | | pop-laboratory | Blueprint grid, coordinate markers, lab precision | | morandi-journal | Hand-drawn doodle, warm Morandi tones | | retro-pop-grid | 1970s retro pop art, Swiss grid, thick outlines | | hand-drawn-edu | Macaron pastels, hand-drawn wobble, stick figures |

Full definitions: INLINECODE47

Recommended Combinations

Content Type	Layout + Style
Timeline/History	INLINECODE48 + INLINECODE49
Step-by-step

linear-progression + ikea-manual | | A vs B | binary-comparison + corporate-memphis | | Hierarchy | hierarchical-layers + craft-handmade | | Overlap | venn-diagram + craft-handmade | | Conversion | funnel + corporate-memphis | | Cycles | circular-flow + craft-handmade | | Technical | structural-breakdown + technical-schematic | | Metrics | dashboard + corporate-memphis | | Educational | bento-grid + chalkboard | | Journey | winding-roadmap + storybook-watercolor | | Categories | periodic-table + bold-graphic | | Product Guide | dense-modules + morandi-journal | | Technical Guide | dense-modules + pop-laboratory | | Trendy Guide | dense-modules + retro-pop-grid | | Educational Diagram | hub-spoke + hand-drawn-edu | | Process Tutorial | linear-progression + hand-drawn-edu |

Default: bento-grid + INLINECODE83

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.

User Keyword	Layout	Recommended Styles	Default Aspect	Prompt Notes
高密度信息大图 / high-density-info	INLINECODE84	INLINECODE85, pop-laboratory, INLINECODE87	portrait	—
信息图 / infographic

bento-grid | craft-handmade | landscape | Minimalist: clean canvas, ample whitespace, no complex background textures. Simple cartoon elements and icons only. |

Output Structure

CODEBLOCK1

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

Core Principles

• - Preserve source data faithfully—no summarization or rephrasing (but strip any credentials, API keys, tokens, or secrets before including in outputs)
• 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)

Check EXTEND.md existence (priority order):

CODEBLOCK2

CODEBLOCK3

┌────────────────────────────────────────────────────┬───────────────────┐
│ 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: INLINECODE91

1.2 Analyze Content → analysis.md

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

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

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

- Backup rule: If analysis.md exists, rename to INLINECODE97

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

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

Transform content into infographic structure:

1. 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. Preserve data faithfully. Strip any credentials or secrets from output.

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:

Question	When	Options
Combination	Always	3+ layout×style combos with rationale
Aspect

Always | Named presets (landscape/portrait/square) or custom W:H ratio (e.g., 3:4, 4:3, 2.35:1) |
| Language | Only if source ≠ user language | Language for text content |

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 INLINECODE103

Combine:

1. 1. Layout definition from INLINECODE104
2. Style definition from INLINECODE105
3. Base template from INLINECODE106
4. Structured content from Step 2
5. All text in confirmed language

Aspect ratio resolution for {{ASPECT_RATIO}}:

• - Named presets → ratio string: landscape→16:9, portrait→9:16, square→INLINECODE110
• Custom W:H ratios → use as-is (e.g., 3:4, 4:3, 2.35:1)

Step 6: Generate Image

1. 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

1. 3. Call with prompt file and output path
2. 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
• INLINECODE117 - Content format
• INLINECODE118 - Prompt template
• INLINECODE119 - 21 layout definitions
• INLINECODE120 - 21 style definitions

Extension Support

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