270 lines
13 KiB
Markdown
270 lines
13 KiB
Markdown
---
|
||
name: baoyu-infographic
|
||
description: Generates professional infographics with 21 layout types and 21 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", "visual summary", "可视化", or "高密度信息大图".
|
||
version: 1.56.1
|
||
metadata:
|
||
openclaw:
|
||
homepage: https://github.com/JimLiu/baoyu-skills#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 path/to/content.md --aspect 3:4
|
||
/baoyu-infographic # then paste content
|
||
```
|
||
|
||
## Options
|
||
|
||
| Option | Values |
|
||
|--------|--------|
|
||
| `--layout` | 21 options (see Layout Gallery), default: bento-grid |
|
||
| `--style` | 21 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 |
|
||
| `hand-drawn-edu` | Macaron pastels, hand-drawn wobble, stick figures |
|
||
|
||
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` |
|
||
| Educational Diagram | `hub-spoke` + `hand-drawn-edu` |
|
||
| Process Tutorial | `linear-progression` + `hand-drawn-edu` |
|
||
|
||
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):
|
||
|
||
```bash
|
||
# macOS, Linux, WSL, Git Bash
|
||
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"
|
||
```
|
||
|
||
```powershell
|
||
# PowerShell (Windows)
|
||
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`**
|
||
|
||
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. 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:
|
||
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
|
||
|
||
**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
|
||
|
||
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` - 21 style definitions
|
||
|
||
## Extension Support
|
||
|
||
Custom configurations via EXTEND.md. See **Step 1.1** for paths and supported options.
|