baoyu-infographic

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Infographic Generator

Infographic 生成器

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

两个维度：layout（信息结构）× style（视觉美学）。可自由组合任意layout与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

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`	20种选项（详见Layout Gallery），默认值：bento-grid
`--style`	17种选项（详见Style Gallery），默认值：craft-handmade
`--aspect`	landscape (16:9), portrait (9:16), square (1:1)
`--lang`	en, zh, ja, etc.

Layout Gallery

Layout 画廊

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

Layout	适用场景
`linear-progression`	时间线、流程、教程
`binary-comparison`	A/B对比、前后对比、优缺点对比
`comparison-matrix`	多因素对比
`hierarchical-layers`	金字塔、优先级层级
`tree-branching`	分类、分类体系
`hub-spoke`	核心概念及相关条目
`structural-breakdown`	分解视图、横截面
`bento-grid`	多主题、概览（默认）
`iceberg`	表面与隐藏层面
`bridge`	问题-解决方案
`funnel`	转化、筛选
`isometric-map`	空间关系
`dashboard`	指标、KPI
`periodic-table`	分类集合
`comic-strip`	叙事、序列
`story-mountain`	情节结构、张力弧线
`jigsaw`	相互关联的部分
`venn-diagram`	重叠概念
`winding-roadmap`	历程、里程碑
`circular-flow`	循环、重复流程

完整定义：

references/layouts/<layout>.md

Style Gallery

Style 画廊

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

Style	描述
`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`	乐高积木风格

完整定义：

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`

内容类型	布局+风格
时间线/历史	`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`

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

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

Slug：从主题中提取2-4个单词的短横线分隔格式（kebab-case）。若存在冲突，追加

-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.1 Load Preferences (EXTEND.md)

Use Bash to check EXTEND.md existence (priority order):

bash

undefined

1.1 加载偏好设置（EXTEND.md）

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

bash

undefined

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`)
   - **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.

test -f "$HOME/.baoyu-skills/baoyu-infographic/EXTEND.md" && echo "user"


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

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

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

Schema：`references/config/preferences-schema.md`

**1.2 内容分析 → `analysis.md`**

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

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

Step 2: Generate Structured Content →

structured-content.md

步骤2：生成结构化内容 →

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. All data verbatim.

See

references/structured-content-template.md

for detailed format.

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

标题与学习目标
章节包含：核心概念、内容（原文）、视觉元素、文本标签
数据点（所有统计数据/引用完全复制）
用户提出的设计要求

规则：仅使用Markdown格式。不添加新信息。所有数据保留原文。

详细格式见

references/structured-content-template.md

。

Step 3: Recommend Combinations

步骤3：推荐组合

Recommend 3-5 layout×style combinations based on:

Data structure → matching layout
Content tone → matching style
Audience expectations
User design instructions

基于以下因素推荐3-5种布局×风格组合：

数据结构 → 匹配布局
内容语气 → 匹配风格
受众预期
用户设计要求

Step 4: Confirm Options

步骤4：确认选项

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.

使用单次AskUserQuestion调用，将所有相关问题合并在一起确认：

问题	触发条件	选项
组合选择	始终触发	3种以上布局×风格组合及理由
宽高比	始终触发	landscape (16:9), portrait (9:16), square (1:1)
语言	仅当源语言≠用户语言时	文本内容使用的语言

重要提示：请勿拆分为多次AskUserQuestion调用。将所有适用问题合并为一次调用。

Step 5: Generate Prompt →

prompts/infographic.md

步骤5：生成提示词 →

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

备份规则：若

prompts/infographic.md

已存在，重命名为

prompts/infographic-backup-YYYYMMDD-HHMMSS.md

合并以下内容：

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

Step 6: Generate Image

步骤6：生成图片

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

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

Step 7: Output Summary

步骤7：输出摘要

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

```
references/analysis-framework.md
```
- 分析方法论

references/structured-content-template.md

- 内容格式

```
references/base-prompt.md
```
- 提示词模板
```
references/layouts/<layout>.md
```
- 20种布局定义
```
references/styles/<style>.md
```
- 17种风格定义

Extension Support

扩展支持

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

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