canghe-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 "可视化".
By freestylefly · 504 installs
npx skills add freestylefly/canghe-skills --skill canghe-infographic
Source repository · Upstream listing
Infographic Generator
Two dimensions: layout (information structure) × style (visual aesthetics). Freely combine any layout with any style.
Usage
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
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):
┌────────────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├────────────────────────────────────────────────────┼───────────────────┤
│ .canghe skills/canghe infographic/EXTEND.md │ Project directory │
├────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.canghe skills/canghe 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. 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
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 landscape (16:9), portrait (9:16), square (1: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
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 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.