canghe-infographic

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Infographic Generator

信息图生成器

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

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

Usage

使用方法

bash

/canghe-infographic path/to/content.md
/canghe-infographic path/to/content.md --layout hierarchical-layers --style technical-schematic
/canghe-infographic path/to/content.md --aspect portrait --lang zh
/canghe-infographic  # then paste content

bash

/canghe-infographic path/to/content.md
/canghe-infographic path/to/content.md --layout hierarchical-layers --style technical-schematic
/canghe-infographic path/to/content.md --aspect portrait --lang zh
/canghe-infographic  # 然后粘贴内容

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种选项（查看布局库），默认值：bento-grid
`--style`	17种选项（查看风格库），默认值：craft-handmade
`--aspect`	landscape（16:9）, portrait（9:16）, square（1:1）
`--lang`	en, zh, ja等

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

布局	适用场景
`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	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

风格	描述
`craft-handmade`	手绘风格，纸艺效果（默认）
`claymation`	3D黏土风格，定格动画效果
`kawaii`	日式可爱风格，马卡龙色调
`storybook-watercolor`	柔和水彩风格，奇幻效果
`chalkboard`	黑板粉笔风格
`cyberpunk-neon`	霓虹发光效果，未来主义风格
`bold-graphic`	漫画风格，半色调效果
`aged-academia`	复古学术风格，深褐色调
`corporate-memphis`	扁平化矢量风格，色彩鲜艳
`technical-schematic`	蓝图风格，工程制图效果
`origami`	折纸风格，几何效果
`pixel-art`	复古8-bit像素风格
`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`
对比内容	`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个单词的短横线分隔格式。若存在冲突，追加

-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 .canghe-skills/canghe-infographic/EXTEND.md && echo "project"

Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)

再检查用户级设置（跨平台：$HOME适用于macOS/Linux/WSL）

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


┌────────────────────────────────────────────────────┬───────────────────┐
│                        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.

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


┌────────────────────────────────────────────────────┬───────────────────┐
│                        路径                        │     位置          │
├────────────────────────────────────────────────────┼───────────────────┤
│ .canghe-skills/canghe-infographic/EXTEND.md          │ 项目目录         │
├────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.canghe-skills/canghe-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获取路径及支持的选项。