AI信息图生成器 - 21种布局×20种风格，一键生成专业信息图表

baoyu-infographic by jimliu/baoyu-skills

12,400 周安装量

11,800 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/jimliu/baoyu-skills --skill baoyu-infographic

AI/机器学习营销设计

🇨🇳中文介绍

信息图生成器

两个维度：布局（信息结构） × 风格（视觉美学）。可自由组合任意布局与任意风格。

使用方法

/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  # 然后粘贴内容

选项

选项	可选值
`--layout`	21 种选项（见布局图库），默认：bento-grid
`--style`	20 种选项（见风格图库），默认：craft-handmade
`--aspect`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

布局	最适合
`linear-progression`	时间线、流程、教程
`binary-comparison`	A 与 B 对比、前后对比、优缺点
`comparison-matrix`	多因素比较
`hierarchical-layers`	金字塔、优先级层次
`tree-branching`	分类、分类法
`hub-spoke`	中心概念与相关项
`structural-breakdown`	分解视图、剖面图
`bento-grid`	多主题、概览（默认）
`iceberg`	表面与隐藏方面
`bridge`	问题-解决方案
`funnel`	转化、筛选
`isometric-map`	空间关系
`dashboard`	指标、关键绩效指标
`periodic-table`	分类集合
`comic-strip`	叙事、序列
`story-mountain`	情节结构、张力弧线
`jigsaw`	相互关联的部分
`venn-diagram`	重叠概念
`winding-roadmap`	旅程、里程碑
`circular-flow`	循环、重复过程
`dense-modules`	高密度模块、数据丰富的指南

风格	描述
`craft-handmade`	手绘、纸艺（默认）
`claymation`	3D 粘土人物、定格动画
`kawaii`	日式可爱、柔和色彩
`storybook-watercolor`	柔和水彩、奇幻风格
`chalkboard`	黑板粉笔画
`cyberpunk-neon`	霓虹发光、未来感
`bold-graphic`	漫画风格、半色调
`aged-academia`	复古科学、棕褐色调
`corporate-memphis`	扁平矢量、鲜艳色彩
`technical-schematic`	蓝图、工程图
`origami`	折纸、几何形状
`pixel-art`	复古 8 位像素
`ui-wireframe`	灰度界面线框图
`subway-map`	交通路线图
`ikea-manual`	极简线条图
`knolling`	有序平铺展示
`lego-brick`	乐高积木搭建
`pop-laboratory`	蓝图网格、坐标标记、实验室精度
`morandi-journal`	手绘涂鸦、温暖的莫兰迪色调
`retro-pop-grid`	1970 年代复古波普艺术、瑞士网格、粗轮廓

内容类型	布局 + 风格
时间线/历史	`linear-progression` + `craft-handmade`
分步指南	`linear-progression` + `ikea-manual`
A 与 B 对比	`binary-comparison` + `corporate-memphis`
层级结构	`hierarchical-layers` + `craft-handmade`
重叠关系	`venn-diagram` + `craft-handmade`
转化漏斗	`funnel` + `corporate-memphis`
循环过程	`circular-flow` + `craft-handmade`
技术说明	`structural-breakdown` + `technical-schematic`
指标仪表盘	`dashboard` + `corporate-memphis`
教育内容	`bento-grid` + `chalkboard`
旅程路线	`winding-roadmap` + `storybook-watercolor`
分类集合	`periodic-table` + `bold-graphic`
产品指南	`dense-modules` + `morandi-journal`
技术指南	`dense-modules` + `pop-laboratory`
潮流指南	`dense-modules` + `retro-pop-grid`

关键词快捷方式

当用户输入包含以下关键词时，自动选择关联的布局，并在第 3 步中将关联风格作为首要推荐。跳过基于内容的布局推断。

如果快捷方式有提示说明，则将其作为附加风格说明添加到生成的提示（第 5 步）中。

用户关键词	布局	推荐风格	默认宽高比	提示说明
高密度信息大图 / high-density-info	`dense-modules`	`morandi-journal`, `pop-laboratory`, `retro-pop-grid`	portrait	—
信息图 / infographic	`bento-grid`	`craft-handmade`	landscape	极简主义：干净的画布、充足的留白、无复杂背景纹理。仅使用简单的卡通元素和图标。

infographic/{topic-slug}/
├── source-{slug}.{ext}
├── analysis.md
├── structured-content.md
├── prompts/infographic.md
└── infographic.png

Slug：基于主题的 2-4 个单词 kebab-case。冲突时：追加 -YYYYMMDD-HHMMSS。

忠实保留源数据——不进行总结或改写（但在输出中包含前，去除所有凭据、API 密钥、令牌或机密信息）
在构建内容结构前定义学习目标
为视觉传达构建结构（标题、标签、视觉元素）

步骤 1：设置与分析

1.1 加载偏好设置 (EXTEND.md)

检查 EXTEND.md 是否存在（优先级顺序）：

# 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 (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" }

┌────────────────────────────────────────────────────┬───────────────────┐ │ 路径 │ 位置 │ ├────────────────────────────────────────────────────┼───────────────────┤ │ .baoyu-skills/baoyu-infographic/EXTEND.md │ 项目目录 │ ├────────────────────────────────────────────────────┼───────────────────┤ │ $HOME/.baoyu-skills/baoyu-infographic/EXTEND.md │ 用户主目录 │ └────────────────────────────────────────────────────┴───────────────────┘

┌───────────┬───────────────────────────────────────────────────────────────────────────┐ │ 结果 │ 操作 │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ 找到 │ 读取、解析、显示摘要 │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ 未找到 │ 使用 AskUserQuestion 询问用户（见 references/config/first-time-setup.md） │ └───────────┴───────────────────────────────────────────────────────────────────────────┘

EXTEND.md 支持：首选布局/风格 | 默认宽高比 | 自定义风格定义 | 语言偏好

模式：references/config/preferences-schema.md

1.2 分析内容 → analysis.md

保存源内容（文件路径或粘贴 → source.md）
- 备份规则：如果 source.md 已存在，重命名为 source-backup-YYYYMMDD-HHMMSS.md
分析：主题、数据类型、复杂度、语气、受众
检测源语言和用户语言
从用户输入中提取设计说明
保存分析
- 备份规则：如果 analysis.md 已存在，重命名为 analysis-backup-YYYYMMDD-HHMMSS.md

详细格式见 references/analysis-framework.md。

步骤 2：生成结构化内容 → `structured-content.md`

将内容转换为信息图结构：

标题和学习目标
包含以下内容的章节：关键概念、内容（逐字）、视觉元素、文本标签
数据点（所有统计数据/引文精确复制）
来自用户的设计说明

规则：仅使用 Markdown。不添加新信息。忠实保留数据。从输出中去除所有凭据或机密信息。

详细格式见 references/structured-content-template.md。

步骤 3：推荐组合

3.1 首先检查关键词快捷方式：如果用户输入匹配关键词快捷方式表中的关键词，则自动选择关联的布局，并将关联风格作为首要推荐。跳过基于内容的布局推断。

3.2 否则，基于以下因素推荐 3-5 个布局×风格组合：

数据结构 → 匹配布局
内容语气 → 匹配风格
受众期望
用户设计说明

步骤 4：确认选项

使用单个 AskUserQuestion 调用，包含多个问题，一次性确认所有选项：

问题	何时	选项
组合	始终	3+ 个布局×风格组合及理由
宽高比	始终	预设名称（landscape/portrait/square）或自定义宽高比（例如：3:4, 4:3, 2.35:1）
语言	仅当源语言 ≠ 用户语言时	文本内容的语言

重要：请勿拆分为单独的 AskUserQuestion 调用。将所有适用问题合并到一个调用中。

步骤 5：生成提示 → `prompts/infographic.md`

备份规则：如果 prompts/infographic.md 已存在，重命名为 prompts/infographic-backup-YYYYMMDD-HHMMSS.md

来自 references/layouts/<layout>.md 的布局定义
来自 references/styles/<style>.md 的风格定义
来自 references/base-prompt.md 的基础模板
来自步骤 2 的结构化内容
所有文本使用确认的语言

宽高比解析 用于 {{ASPECT_RATIO}}：

预设名称 → 比例字符串：landscape→16:9, portrait→9:16, square→1:1
自定义宽高比 → 按原样使用（例如：3:4, 4:3, 2.35:1）

步骤 6：生成图像

选择可用的图像生成技能（如果多个则询问用户）
检查现有文件：生成前，检查 infographic.png 是否存在
- 如果存在：重命名为 infographic-backup-YYYYMMDD-HHMMSS.png
使用提示文件和输出路径调用
失败时，自动重试一次

步骤 7：输出摘要

报告：主题、布局、风格、宽高比、语言、输出路径、创建的文件。

references/analysis-framework.md - 分析方法论
references/structured-content-template.md - 内容格式
references/base-prompt.md - 提示模板
references/layouts/<layout>.md - 21 种布局定义
references/styles/<style>.md - 20 种风格定义

通过 EXTEND.md 进行自定义配置。路径和支持的选项见步骤 1.1。

🇺🇸English

Infographic Generator

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

Usage

/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`	20 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

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

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`

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

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

# 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 (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

Save source content (file path or paste → source.md)
- Backup rule : If source.md exists, rename to source-backup-YYYYMMDD-HHMMSS.md
Analyze: topic, data type, complexity, tone, audience
Detect source language and user language
Extract design instructions from user input
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:

Title and learning objectives
Sections with: key concept, content (verbatim), visual element, text labels
Data points (all statistics/quotes copied exactly)
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:

Layout definition from references/layouts/<layout>.md
Style definition from references/styles/<style>.md
Base template from references/base-prompt.md
Structured content from Step 2
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

Select available image generation skill (ask user if multiple)
Check for existing file : Before generating, check if infographic.png exists
- If exists: Rename to infographic-backup-YYYYMMDD-HHMMSS.png
Call with prompt file and output path
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 - 20 style definitions

Extension Support

Custom configurations via EXTEND.md. See Step 1.1 for paths and supported options.

Weekly Installs

12.2K

Repository

jimliu/baoyu-skills

GitHub Stars

11.6K

First Seen

Jan 20, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode11.1K

gemini-cli10.8K

codex10.6K

cursor10.3K

github-copilot9.9K

amp9.5K

专业SEO审计工具：全面网站诊断、技术SEO优化与页面分析指南

56,300 周安装

AI信息图生成器 - 21种布局×20种风格，一键生成专业信息图表

🇨🇳中文介绍

信息图生成器

使用方法

选项

相关 Skills

布局图库

风格图库

推荐组合