Skip to content
Development
Skill

/baoyu-infographic

Infographics: 21 layouts x 21 styles (信息图, 可视化).

From plugin
ai-agent-skills
14169 skills

Claude Code

$ npx -y skills add kevinnft/ai-agent-skills --skill baoyu-infographic --agent claude-code

SKILL.md

baoyu-infographic.SKILL.md
name: baoyu-infographic
description: "Infographics: 21 layouts x 21 styles (信息图, 可视化)."
version: 1.56.1
author: 宝玉 (JimLiu)
license: MIT
metadata:
  hermes:
    tags: [infographic, visual-summary, creative, image-generation]
    homepage: https://github.com/JimLiu/baoyu-skills#baoyu-infographic
origin: aggregated
source_license: see upstream
source_repo: JimLiu/baoyu-skills
source_url: https://github.com/JimLiu/baoyu-skills/tree/main/skills/creative/baoyu-infographic
language: zh

Infographic Generator

Adapted from [baoyu-infographic](https://github.com/JimLiu/baoyu-skills) for Hermes Agent's tool ecosystem.

Two dimensions: **layout** (information structure) × **style** (visual aesthetics). Freely combine any layout with any style.

When to Use

Trigger this skill when the user asks to create an infographic, visual summary, information graphic, or uses terms like "信息图", "可视化", or "高密度信息大图". The user provides content (text, file path, URL, or topic) and optionally specifies layout, style, aspect ratio, or language.

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) | | Language | 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 co
Read more
@kevinnft
Ships withai-agent-skills

191 attribution-first agent skills for Hermes Agent, Claude Code, Cursor — one installer, 28 categories, searchable catalog. See NOTICE for upstream attribution.

Stars on GitHub

Momentum

stars in total
14
Star history of kevinnft/ai-agent-skills on GitHub, a chart by star-history.com

Other skills on ai-agent-skills.

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills11d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc13d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react2d252k
@facebook@facebookInstall Skill

Questions about baoyu-infographic.

Which coding agents can use baoyu-infographic?
baoyu-infographic installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.