baoyu-infographic

# 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 # 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): ```bash # 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`** 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. 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: 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 ### 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.