@@ -1,74 +1,47 @@
---
name: baoyu-infographic
description: Generate professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout× or "visual summary".
description: Generates professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout× , or "可视化" .
---
# Infographic Generator
Generate professional infographics with t wo dimensions: layout (information structure) and style (visual aesthetics).
T wo dimensions: ** layout** × **style ** Freely combine any layout with any style.
## Usage
``` bash
# Auto-recommend combinations based on content
/baoyu-infographic path/to/content.md
# Specify layout
/baoyu-infographic path/to/content.md --layout hierarchical-layers
# Specify style (default: craft-handmade)
/baoyu-infographic path/to/content.md --style technical-schematic
# Specify both
/baoyu-infographic path/to/content.md --layout funnel --style corporate-memphis
# With aspect ratio
/baoyu-infographic path/to/content.md --aspect portrait
# Direct content input
/baoyu-infographic
[ paste content]
# Direct input with options
/baoyu-infographic --layout linear-progression --style aged-academia
[ paste content]
/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 | Description |
|--------|------------- |
| `--layout <name>` | Information layout ( 20 options, see Layout Gallery) |
| `--style <name>` | Visual style (17 options , default: craft-handmade) |
| `--aspect <ratio> ` | landscape (16:9), portrait (9:16), square (1:1) |
| `--lang <code>` | Output language ( en, zh, ja, etc.) |
## Two Dimensions
| Dimension | Controls | Count |
|-----------|----------|-------|
| **Layout ** | Information structure: hierarchy, flow, relationships | 20 types |
| **Style ** | Visual aesthetics: colors, textures, artistic treatment | 17 types |
Layout × `--layout hierarchical-layers --style craft-handmade` creates a hierarchy with playful hand-drawn aesthetics.
| Option | Values |
|--------|--------|
| `--layout` | 20 options ( see Layout Gallery), default: bento-grid |
| `--style` | 17 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, step-by-step processes, tutorials |
| `linear-progression` | Timelines, processes, tutorials |
| `binary-comparison` | A vs B, before-after, pros-cons |
| `comparison-matrix` | Multi-factor comparisons |
| `hierarchical-layers` | Pyramids, concentric circles, priority levels |
| `hierarchical-layers` | Pyramids, priority levels |
| `tree-branching` | Categories, taxonomies |
| `hub-spoke` | Central concept with related items |
| `structural-breakdown` | Exploded views, cross-sections, part labeling |
| `structural-breakdown` | Exploded views, cross-sections |
| `bento-grid` | Multiple topics, overview (default) |
| `iceberg` | Surface vs hidden aspects |
| `bridge` | Problem-solution, gap-crossing |
| `funnel` | Conversion processes , filtering |
| `isometric-map` | Spatial relationships, locations |
| `dashboard` | Metrics, KPIs, data display |
| `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 |
@@ -77,415 +50,170 @@ Layout ×
| `winding-roadmap` | Journey, milestones |
| `circular-flow` | Cycles, recurring processes |
Detailed layout definitions: `references/layouts/<layout>.md`
Full definitions: `references/layouts/<layout>.md`
## Style Gallery
| Style | Description |
|-------|-------------|
| `craft-handmade` (Default) | Hand-drawn illustration , paper craft aesthetic |
| `claymation` | 3D clay figures, playful stop-motion |
| `kawaii` | Japanese cute, big eyes, pastel color s |
| `storybook-watercolor` | Soft painted illustrations , whimsical |
| `chalkboard` | Colorful c halk on black board |
| `cyberpunk-neon` | Neon glow on dark , futuristic |
| `bold-graphic` | Comic style, halftone dots, high contrast |
| `aged-academia` | Vintage science, sepia sketches |
| `corporate-memphis` | Flat vector people , vibrant fills |
| `technical-schematic` | Blueprint, isometric 3D, engineering |
| `origami` | Folded paper forms , geometric |
| `pixel-art` | Retro 8-bit, nostalgic gaming |
| `ui-wireframe` | Grayscale boxes, interface mockup |
| `subway-map` | Transit diagram, colored lines |
| `ikea-manual` | Minimal line art, assembly style |
| `knolling` | Organized flat-lay, top-down |
| `lego-brick` | Toy brick construction, playful |
| `craft-handmade` | Hand-drawn, paper craft (default) |
| `claymation` | 3D clay figures, stop-motion |
| `kawaii` | Japanese cute, pastel s |
| `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 |
Detailed style definitions: `references/styles/<style>.md`
Full definitions: `references/styles/<style>.md`
## Recommended Combinations
Based on content analysis, the system recommends 3-5 l ayout× combinations:
| Content Type | Recommended Combination |
|--------------|------------------------|
| Content Type | L ayout + S tyle |
|--------------|----------------|
| Timeline/History | `linear-progression` + `craft-handmade` |
| Step-by-step Process | `linear-progression` + `ikea-manual` |
| Comparison ( A vs B) | `binary-comparison` + `corporate-memphis` |
| Hierarchy/Levels | `hierarchical-layers` + `craft-handmade` |
| Relationships/ Overlap | `venn-diagram` + `craft-handmade` |
| Conversion/Sales | `funnel` + `corporate-memphis` |
| Recurring Proces s | `circular-flow` + `craft-handmade` |
| Technical/System | `structural-breakdown` + `technical-schematic` |
| Data/ Metrics | `dashboard` + `corporate-memphis` |
| Educational/Overview | `bento-grid` + `chalkboard` |
| Journey/Roadmap | `winding-roadmap` + `storybook-watercolor` |
| Categories/Types | `periodic-table` + `bold-graphic` |
| 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` |
| Cycle s | `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` |
** Default combination ** `bento-grid` + `craft-handmade`
Default: `bento-grid` + `craft-handmade`
## File Structure
Each session creates an independent directory:
## Output Structure
```
infographic/{topic-slug}/
├── source-{slug}.{ext} # Source files
├── analysis.md # Deep content analysis
├── structured-content.md # Instructional content structure
├── prompts/
│ └── infographic.md # Generated prompt
└── infographic.png # Output image
├── source-{slug}.{ext}
├── analysis.md
├── structured-content.md
├── prompts/infographic.md
└── infographic.png
```
** Slug Generation ** :
1. Extract main topic from content (2-4 words, kebab-case)
2. Example: "Machine Learning Basics" → `ml-basics`
Slug: 2-4 words kebab-case from topic. Conflict: append `-YYYYMMDD-HHMMSS` .
**Conflict Resolution ** :
If `infographic/{topic-slug}/` already exists:
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
- Example: `ml-basics` exists → `ml-basics-20260120-103052`
## Core Principles
## Instructional Design Approach
This skill app lies a **world-class instructional designer ** mindset to infographic creation:
1. **Deep Understanding ** : Read and comprehend the source material thoroughly
2. **Learning Objectives ** : Identify what the viewer should understand after seeing the infographic
3. **Information Architecture ** : Structure content for maximum clarity and retention
4. **Visual Storytelling ** : Use visuals to communicate complex ideas accessibly
5. **Verbatim Data ** : Preserve all source data exactly as written—no summarization or rephrasing of facts
- Preserve all source data **verbatim ** —no summarization or rephrasing
- Define learning objectives before structuring content
- Structure for visual communication (headn es, labels, visual elements)
## Workflow
### Step 1: Analyze Content → `analysis.md`
### Step 1: Setup & Analyze
Read source content and perform deep instructional analysis.
**1.1 Load Preferences (EXTEND.md) **
**Actions **
1. **Save source content ** (if not already a file):
- If user provides a file path: use as-is
- If user pastes content: save to `source.md` in target directory
Use Bash to check EXTEND.md existence (priority order) :
2. **Deep reading ** :
- Read the entire document thoroughly
- Develop deep understanding before proceeding
- Identify the core message and purpose
``` bash
# Check project-level first
test -f .baoyu-skills/baoyu-infographic/EXTEND.md && echo "project"
3. **Content analysis ** :
| Aspect | Questions to Answer |
|--------|---------------------|
| **Main Topic ** | What is this content fundamentally about? |
| **Data Type ** | Timeline? Hierarchy? Comparison? Process? Relationships? |
| **Complexity ** | Simple (3-5 points) or complex (6-10+ points)? |
| **Tone ** | Technical, educational, playful, serious, persuasive? |
| **Audience ** | Who is the intended viewer? What do they already know? |
4. **Language detection ** :
- Detect **source language ** from content
- Detect **user language ** from conversation
- Note if source_language ≠ user_language (will ask in Step 4)
5. **Extract design instructions ** from user input:
- Style preferences (colors, mood, aesthetic)
- Layout preferences (structure, organization)
- Any specific visual requirements
- Separate these from content—they go in the Design Instructions section
6. **Save to `analysis.md` **
**Analysis Output Format ** :
``` yaml
---
title : "[Main topic title]"
topic : "[Category: educational/technical/business/etc.]"
data_type : "[timeline/hierarchy/comparison/process/etc.]"
complexity : "[simple/moderate/complex]"
source_language : "[detected language]"
user_language : "[user's language]"
---
## Main Topic
[ 1 -2 sentence summary of what this content is about]
## Learning Objectives
After viewing this infographic, the viewer should understand :
1 . [Primary objective]
2 . [Secondary objective]
3 . [Tertiary objective if applicable]
## Target Audience
- **Knowledge Level** : [ Beginner/Intermediate/Expert]
- **Context**: [ Why they're viewing this]
- **Expectations**: [ What they hope to learn]
## Content Type Analysis
- **Data Structure** : [ How information relates to itself]
- **Key Relationships** : [ What connects to what]
- **Visual Opportunities** : [ What can be shown rather than told]
## Design Instructions (from user input)
[ Any style, color, layout, or visual preferences extracted from user's steering prompt]
# 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` )
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
See `references/analysis-framework.md` for detailed format.
### Step 2: Generate Structured Content → `structured-content.md`
Transform analyzed content into a structured format for the infographic designer.
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
**Instructional Design Process ** :
**Rules ** : Markdown only. No new information. All data verbatim.
1. **Create high-level outline ** :
- Title that captures the essence
- List all main learning objectives
- Identify the logical flow
See `references/structured-content-template.md` for detailed format.
2. **Flesh out each section ** :
- For each learning objective, create a section
- Mix conceptual explanations with practical elements
- Preserve all source data **verbatim ** —do not summarize or rephrase
### Step 3: Recommend Combinations
3. **Structure for visual communication **
- Identify what becomes a headline
- Identify what becomes supporting text
- Identify what becomes a visual element
- Identify data points, statistics, or quote s
**Critical Rules ** :
| Rule | Requirement |
|------|-------------|
| **Output format ** | Markdown only |
| **Tone ** | Expert trainer: knowledgeable, clear, encouraging |
| **No new information ** | Do not add anything not in the source |
| **Verbatim data ** | All statistics, quotes, and facts copied exactly |
**Structured Content Format ** :
``` markdown
# [Infographic Title]
## Overview
[Brief description of what this infographic conveys]
## Learning Objectives
The viewer will understand:
1. [Objective 1]
2. [Objective 2]
3. [Objective 3]
---
## Section 1: [Section Title]
**Key Concept ** : [One-sentence summary]
**Content ** :
- [Point 1 - verbatim from source]
- [Point 2 - verbatim from source]
- [Point 3 - verbatim from source]
**Visual Element ** : [What to show visually]
**Text Labels ** :
- Headline: "[Exact text for headline]"
- Subhead: "[Exact text for subhead]"
- Labels: "[Label 1]", "[Label 2]", ...
---
## Section 2: [Section Title]
[Continue pattern...]
---
## Data Points (Verbatim)
[All statistics, numbers, quotes exactly as they appear in source]
- "[Exact quote or statistic 1]"
- "[Exact quote or statistic 2]"
---
## Design Instructions
[Extracted from user's steering prompt]
- Style: [preferences]
- Colors: [preferences]
- Layout: [preferences]
- Other: [any other visual requirements]
```
### Step 3: Generate Layout×
Based on analysis and structured content, recommend 3-5 combinations.
**Selection Criteria ** :
| Factor | How to Match |
|--------|--------------|
| **Data structure ** | Timeline→linear-progression, Hierarchy→hierarchical-layers, etc. |
| **Content tone ** | Technical→technical-schematic, Playful→kawaii, etc. |
| **Audience ** | Business→corporate-memphis, Educational→chalkboard, etc. |
| **Complexity ** | Simple→sparse layouts, Complex→dense layouts |
| **User preferences ** | Honor any design instructions from Step 1 |
**Format each recommendation ** :
```
[Layout] + [Style]: [Brief rationale based on content analysis]
```
Recommend 3-5 layout× :
- Data structure → matching layout
- Content tone → matching style
- Audience expectations
- User design instruction
### Step 4: Confirm Options
**IMPORTANT ** : Present ALL options in a single confirmation step using AskUserQuestion.
**Questions to ask ** :
| Question | When to Ask |
|----------|-------------|
| Combination | Always (required) |
| Aspect ratio | Always |
| Language | Only if `source_language ≠ user_language` |
**AskUserQuestion format ** :
**Question 1 (Combination) ** - always:
- Option A (Recommended): [layout] + [style] - [brief rationale]
- Option B: [layout] + [style] - [brief rationale]
- Option C: [layout] + [style] - [brief rationale]
- Custom: Specify your own layout and/or style
**Question 2 (Aspect) ** - always:
- landscape (16:9, Recommended) - standard presentation
- portrait (9:16) - mobile/social media
- square (1:1) - social media posts
**Question 3 (Language) ** - only if source ≠ user language:
- [Source language] (matches content)
- [User language] (your preference)
**Language handling ** :
- If source language = user language: Just inform user
- If different: Ask which language to use for all text
Present all options in single confirmation:
1. **Combination ** (always): 3+ options with rationale
2. **Aspect ** (always): landscape/portrait/square
3. **Language ** (only if source ≠ user language): which language for text
### Step 5: Generate Prompt → `prompts/infographic.md`
Create the image generation prompt.
**Process ** :
1. Read layout definition`references/layouts/<layout> .md`
2. Read style definition from `references/styles/<style>.md`
3. Read base prompt template from `references/base-prompt.md`
4. Combine with structured content from Step 2
5. **All text in prompt uses confirmed language **
**Prompt Structure ** :
``` markdown
Topic: [main topic from analysis]
Layout: [selected layout]
Style: [selected style]
Aspect: [confirmed ratio]
Language: [confirmed language]
## Layout Guidelines
[From layout definition file]
## Style Guidelines
[From style definition file]
## Content to Visualize
### Learning Objectives
[From structured-content.md]
### Sections
[From structured-content.md - each section with its visual elements]
### Data Points (Verbatim)
[All exact statistics, quotes, and facts from source]
## Text Labels (in [language])
[All text that appears in the infographic, organized by section]
## Design Instructions
[Any specific visual requirements from user's steering prompt]
```
Combine:
1. Layout definition from `references/layouts/<layout>.md`
2. Style definition from `references/styles/<style>.md`
3. Base template`references/base-prompt .md`
4. Structured content from Step 2
5. All text in confirmed language
### Step 6: Generate Image
**I mage G eneration S kill Selection ** :
1. heck available image generation skills
2. If multiple skills available, ask user to choos
**Generation ** :
Call selected image generation skill with:
- Prompt file path: `prompts/infographic.md`
- Output path: `infographic.png`
- Aspect ratio parameter if supported
**Error handling ** :
- On failure, auto-retry once before reporting error
- If retry fails, inform user with error details
1. Select available ig eneration s kill (ask user if multiple)
2. all with prompt file and output path
3. On failure, auto-retry onc
### Step 7: Output Summary
```
Infographic Generated!
Topic: [topic from analysis]
Layout: [layout name]
Style: [style name]
Aspect: [aspect ratio]
Language: [confirmed language]
Location: [output directory path]
Learning Objectives Covered:
1. [Objective 1] ✓
2. [Objective 2] ✓
3. [Objective 3] ✓
Files:
✓ analysis.md
✓ structured-content.md
✓ prompts/infographic.md
✓ infographic.png
Preview the image to verify it matches your expectations.
```
## Quality Checklist
Before generating the final image, verify:
- [ ] All source data preserved verbatim (no summarization)
- [ ] Learning objectives clearly represented
- [ ] Layout matches information structure
- [ ] Style matches content tone and audience
- [ ] All text labels in correct language
- [ ] Design instructions from user honored
- [ ] Visual hierarchy supports comprehension
Report: topic, layout, style, aspect, language, output path, files created.
## References
Detailed templates and guidelines in `references/` directory:
- `analysis-framework.md` - Instructional design analysis methodology
- `structured-content-template.md` - Structured content format and examples
- `base-prompt.md` - Base prompt template for image genera tion
- `layouts/<layout>.md` - Detailed layout definitions (20 files)
- `styles/<style>.md` - Detailed style definitions (17 files)
## Notes
- Layout determines information architecture; style determines visual treatment
- Default style `craft-handmade` works well with most layouts
- Technical content benefits from `technical-schematic` or `ui-wireframe`
- Educational content works well with `chalkboard` , `storybook-watercolor`
- Business content pairs with `corporate-memphis` , `dashboard`
- All text in the infographic uses the confirmed language
- **Never add information not present in the source document**
- **Statistics and quotes must be copied exactly—no paraphrasing**
- `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 defini tions
- `references/styles/<style>.md` - 17 style definitions
## Extension Support
Custom styles and configurations via EXTEND.md.
**Check paths ** (priority order):
1. `.baoyu-skills/baoyu-infographic/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-infographic/EXTEND.md` (user)
If found, load before Step 1. Extension content overrides defaults.
Custom configurations via EXTEND.md. See **Step 1.1 ** for paths and supported options.
Jim Liu 宝玉