Agent skill

baoyu-infographic

Generates professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", "visual summary", or "可视化".

Stars 232
Forks 15

Install this agent skill to your Project

npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/jimliu/baoyu-infographic

SKILL.md

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 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, 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

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

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

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):

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)
  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 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

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

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

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. Call with prompt file and output path
  3. 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.

Expand your agent's capabilities with these related and highly-rated skills.

aiskillstore/marketplace

perigon-backend

Perigon ASP.NET Core + EF Core + Aspire conventions

232 15
Explore
aiskillstore/marketplace

perigon-agent

Pointers for Copilot/agents to apply Perigon conventions

232 15
Explore
aiskillstore/marketplace

perigon-angular

Angular 21+ standalone/Material/signal conventions for Perigon WebApp

232 15
Explore
aiskillstore/marketplace

fastapi-mastery

Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.

232 15
Explore
aiskillstore/marketplace

context7-efficient

Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.

232 15
Explore
aiskillstore/marketplace

browser-use

Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.

232 15
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results