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 path/to/content.md --aspect 3:4
/baoyu-infographic
Options
| Option |
Values |
--layout |
21 options (see Layout Gallery), default: bento-grid |
--style |
20 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 |
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 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):
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"
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
- 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. 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 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
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
- 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.