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

Option Values

--layout

21 options (see Layout Gallery), default: bento-grid

--style

20 options (see Style Gallery), default: craft-handmade

--aspect

landscape (16:9), portrait (9:16), square (1:1)

--lang

en, zh, ja, etc.

Layout Gallery

Layout Best For

linear-progression

Timelines, processes, tutorials

binary-comparison

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: references/layouts/<layout>.md

Style Gallery

Style Description

craft-handmade

Hand-drawn, paper craft (default)

claymation

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

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

Recommended Combinations

Content Type Layout + Style

Timeline/History linear-progression

• craft-handmade

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

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 Keyword Layout Recommended Styles Default Aspect Prompt Notes

高密度信息大图 / high-density-info dense-modules

morandi-journal , pop-laboratory , retro-pop-grid

portrait —

信息图 / infographic bento-grid

craft-handmade

landscape Minimalist: clean canvas, ample whitespace, no complex background textures. Simple cartoon elements and icons only.

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

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

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

• Analyze: topic, data type, complexity, tone, audience

• Detect source language and user language

• Extract design instructions from user input

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

• Title and learning objectives

• Sections with: key concept, content (verbatim), visual element, text labels

• Data points (all statistics/quotes copied exactly)

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

Question When Options

Combination Always 3+ layout×style combos with rationale

Aspect Always landscape (16:9), portrait (9:16), square (1: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 prompts/infographic-backup-YYYYMMDD-HHMMSS.md

Combine:

• Layout definition from references/layouts/<layout>.md

• Style definition from references/styles/<style>.md

• Base template from references/base-prompt.md

• Structured content from Step 2

• All text in confirmed language

Step 6: Generate Image

• Select available image generation skill (ask user if multiple)

• Check for existing file: Before generating, check if infographic.png exists

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

• Call with prompt file and output path

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