Infographic Generator#

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

Usage#

bash

/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 path/to/content.md --aspect 3:4
/baoyu-infographic  # then paste content

Options#

OptionValues--layout21 options (see Layout Gallery), default: bento-grid--style20 options (see Style Gallery), default: craft-handmade--aspectNamed: landscape (16:9), portrait (9:16), square (1:1). Custom: any W:H ratio (e.g., 3:4, 4:3, 2.35:1)--langen, zh, ja, etc.

Layout Gallery#

LayoutBest Forlinear-progressionTimelines, processes, tutorialsbinary-comparisonA vs B, before-after, pros-conscomparison-matrixMulti-factor comparisonshierarchical-layersPyramids, priority levelstree-branchingCategories, taxonomieshub-spokeCentral concept with related itemsstructural-breakdownExploded views, cross-sectionsbento-gridMultiple topics, overview (default)icebergSurface vs hidden aspectsbridgeProblem-solutionfunnelConversion, filteringisometric-mapSpatial relationshipsdashboardMetrics, KPIsperiodic-tableCategorized collectionscomic-stripNarratives, sequencesstory-mountainPlot structure, tension arcsjigsawInterconnected partsvenn-diagramOverlapping conceptswinding-roadmapJourney, milestonescircular-flowCycles, recurring processesdense-modulesHigh-density modules, data-rich guides

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

Style Gallery#

StyleDescriptioncraft-handmadeHand-drawn, paper craft (default)claymation3D clay figures, stop-motionkawaiiJapanese cute, pastelsstorybook-watercolorSoft painted, whimsicalchalkboardChalk on black boardcyberpunk-neonNeon glow, futuristicbold-graphicComic style, halftoneaged-academiaVintage science, sepiacorporate-memphisFlat vector, vibranttechnical-schematicBlueprint, engineeringorigamiFolded paper, geometricpixel-artRetro 8-bitui-wireframeGrayscale interface mockupsubway-mapTransit diagramikea-manualMinimal line artknollingOrganized flat-laylego-brickToy brick constructionpop-laboratoryBlueprint grid, coordinate markers, lab precisionmorandi-journalHand-drawn doodle, warm Morandi tonesretro-pop-grid1970s retro pop art, Swiss grid, thick outlines

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

Recommended Combinations#

Content TypeLayout + StyleTimeline/Historylinear-progression + craft-handmadeStep-by-steplinear-progression + ikea-manualA vs Bbinary-comparison + corporate-memphisHierarchyhierarchical-layers + craft-handmadeOverlapvenn-diagram + craft-handmadeConversionfunnel + corporate-memphisCyclescircular-flow + craft-handmadeTechnicalstructural-breakdown + technical-schematicMetricsdashboard + corporate-memphisEducationalbento-grid + chalkboardJourneywinding-roadmap + storybook-watercolorCategoriesperiodic-table + bold-graphicProduct Guidedense-modules + morandi-journalTechnical Guidedense-modules + pop-laboratoryTrendy Guidedense-modules + retro-pop-grid

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.

User KeywordLayoutRecommended StylesDefault AspectPrompt Notes高密度信息大图 / high-density-infodense-modules``morandi-journal, pop-laboratory, retro-pop-gridportrait—信息图 / infographicbento-grid``craft-handmadelandscapeMinimalist: clean canvas, ample whitespace, no complex background textures. Simple cartoon elements and icons only.

Output Structure#

text

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 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):

bash

# macOS, Linux, WSL, Git Bash
test -f .baoyu-skills/baoyu-infographic/EXTEND.md && echo "project"
test -f "${XDG_CONFIG_HOME:-$HOME/.config}/baoyu-skills/baoyu-infographic/EXTEND.md" && echo "xdg"
test -f "$HOME/.baoyu-skills/baoyu-infographic/EXTEND.md" && echo "user"

powershell

# PowerShell (Windows)
if (Test-Path .baoyu-skills/baoyu-infographic/EXTEND.md) { "project" }
$xdg = if ($env:XDG_CONFIG_HOME) { $env:XDG_CONFIG_HOME } else { "$HOME/.config" }
if (Test-Path "$xdg/baoyu-skills/baoyu-infographic/EXTEND.md") { "xdg" }
if (Test-Path "$HOME/.baoyu-skills/baoyu-infographic/EXTEND.md") { "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. 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:

QuestionWhenOptionsCombinationAlways3+ layout×style combos with rationaleAspectAlwaysNamed presets (landscape/portrait/square) or custom W:H ratio (e.g., 3:4, 4:3, 2.35:1)LanguageOnly if source ≠ user languageLanguage 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 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

Aspect ratio resolution for {{ASPECT_RATIO}}:

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

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.