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 --layout20 options (see Layout Gallery), default: bento-grid --style17 options (see Style Gallery), default: craft-handmade --aspectlandscape (16:9), portrait (9:16), square (1:1) --langen, zh, ja, etc.
Layout Gallery
Layout Best For linear-progressionTimelines, processes, tutorials binary-comparisonA vs B, before-after, pros-cons comparison-matrixMulti-factor comparisons hierarchical-layersPyramids, priority levels tree-branchingCategories, taxonomies hub-spokeCentral concept with related items
Full definitions: references/layouts/<layout>.md
Style Gallery
Style Description craft-handmadeHand-drawn, paper craft (default) claymation3D clay figures, stop-motion kawaiiJapanese cute, pastels storybook-watercolorSoft painted, whimsical chalkboardChalk on black board cyberpunk-neonNeon glow, futuristic
Full definitions: references/styles/<style>.md
Recommended Combinations
Content Type Layout + Style Timeline/History linear-progression + craft-handmadeStep-by-step linear-progression + ikea-manualA vs B binary-comparison + corporate-memphisHierarchy hierarchical-layers + craft-handmadeOverlap venn-diagram +
Default: bento-grid + craft-handmade
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
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 - 20 layout definitions
references/styles/<style>.md - 17 style definitions
Extension Support
Custom configurations via EXTEND.md. See Step 1.1 for paths and supported options.