PaperclipOrg
Claude Agent Skill · by Jimliu

Baoyu Infographic

The baoyu-infographic skill generates publication-ready infographics by combining 21 layout types with 20 visual styles to match various content structures and

Install
Terminal · npx
$npx skills add https://github.com/jimliu/baoyu-skills --skill baoyu-infographic
Works with Paperclip

How Baoyu Infographic fits into a Paperclip company.

Baoyu Infographic drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md269 lines
Expand
---name: baoyu-infographicdescription: 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.1metadata:  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 Bashtest -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, audience3. Detect source language and user language4. Extract design instructions from user input5. 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 objectives2. Sections with: key concept, content (verbatim), visual element, text labels3. 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 25. 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 path4. 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.