Back to Details

tuzi-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.
两大维度：布局（信息结构）× 风格（视觉美学），支持任意布局与风格自由组合。

Usage

使用方法

bash
/tuzi-infographic path/to/content.md
/tuzi-infographic path/to/content.md --layout hierarchical-layers --style technical-schematic
/tuzi-infographic path/to/content.md --aspect portrait --lang zh
/tuzi-infographic  # then paste content
bash
/tuzi-infographic path/to/content.md
/tuzi-infographic path/to/content.md --layout hierarchical-layers --style technical-schematic
/tuzi-infographic path/to/content.md --aspect portrait --lang zh
/tuzi-infographic  # 随后粘贴内容

Options

可选参数

OptionValues
--layout
21 options (see Layout Gallery), default: bento-grid
--style
20 options (see Style Gallery), default: craft-handmade
--aspect
landscape (16:9), portrait (9:16), square (1:1)
--lang
en, zh, ja, etc.
参数可选值
--layout
21种可选（见布局一览），默认：bento-grid
--style
20种可选（见风格一览），默认：craft-handmade
--aspect
landscape（16:9）、portrait（9:16）、square（1:1）
--lang
en、zh、ja等

Layout Gallery

布局一览

LayoutBest 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
布局标识适用场景
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
循环、重复流程
dense-modules
高密度模块、数据丰富的指南
完整定义见：
references/layouts/<layout>.md

Style Gallery

风格一览

StyleDescription
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
Full definitions: 
references/styles/<style>.md
风格标识描述
craft-handmade
手绘、纸艺风格（默认）
claymation
3D黏土形象、定格动画风格
kawaii
日式可爱风、马卡龙配色
storybook-watercolor
软水彩、奇趣风格
chalkboard
黑板粉笔风格
cyberpunk-neon
霓虹发光、赛博朋克 futuristic 风格
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
70年代复古波普艺术、瑞士网格、粗描边
完整定义见：
references/styles/<style>.md

Recommended Combinations

推荐组合

Content TypeLayout + 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
Default: 
bento-grid
+ 
craft-handmade
内容类型布局+风格组合
时间线/历史内容
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
默认组合：
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 KeywordLayoutRecommended StylesDefault AspectPrompt Notes
高密度信息大图 / high-density-info
dense-modules
morandi-journal
, 
pop-laboratory
, 
retro-pop-grid
portrait—
信息图 / infographic
bento-grid
craft-handmade
landscapeMinimalist: clean canvas, ample whitespace, no complex background textures. Simple cartoon elements and icons only.
当用户输入包含以下关键词时，自动选中对应的布局，并在第三步优先推荐关联风格，匹配到关键词时跳过基于内容的布局推断。
如果快捷规则配有提示说明，请将其追加到生成的prompt中（第五步）作为额外的风格指令。
用户关键词布局推荐风格默认比例提示说明
高密度信息大图 / high-density-info
dense-modules
morandi-journal
、
pop-laboratory
、
retro-pop-grid
竖版—
信息图 / infographic
bento-grid
craft-handmade
横版极简要求：画布干净、留白充足、无复杂背景纹理，仅使用简单卡通元素和图标。

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

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

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

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

┌────────────────────────────────────────────────────┬───────────────────┐
│                        Path                        │     Location      │
├────────────────────────────────────────────────────┼───────────────────┤
│ .tuzi-skills/tuzi-infographic/EXTEND.md          │ Project directory │
├────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.tuzi-skills/tuzi-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/.tuzi-skills/tuzi-infographic/EXTEND.md" && echo "user"

┌────────────────────────────────────────────────────┬───────────────────┐
│                        路径                        │     存储位置      │
├────────────────────────────────────────────────────┼───────────────────┤
│ .tuzi-skills/tuzi-infographic/EXTEND.md          │ 项目目录          │
├────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.tuzi-skills/tuzi-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:
  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.
将内容转换为信息图适配的结构：
  1. 标题与学习目标
  2. 章节内容：核心概念、原文内容、视觉元素、文本标签
  3. 数据点（所有统计数据/引用完全原样复制）
  4. 用户提供的设计指令
规则：仅使用Markdown格式，不得新增信息，所有数据完全原样保留。
详细格式见
references/structured-content-template.md

Step 3: Recommend Combinations

步骤3：推荐组合方案

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
3.1 优先检查关键词快捷规则：如果用户输入匹配关键词快捷规则表中的关键词，自动选中对应布局，优先推荐关联风格，跳过基于内容的布局推断。
3.2 无匹配关键词时，基于以下维度推荐3-5种布局×风格组合：
  • 数据结构 → 匹配对应布局
  • 内容调性 → 匹配对应风格
  • 受众预期
  • 用户设计指令

Step 4: Confirm Options

步骤4：确认配置选项

Use single AskUserQuestion call with multiple questions to confirm all options together:
QuestionWhenOptions
CombinationAlways3+ layout×style combos with rationale
AspectAlwayslandscape (16:9), portrait (9:16), square (1:1)
LanguageOnly if source ≠ user languageLanguage 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：生成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
备份规则：如果
prompts/infographic.md
已存在，重命名为
prompts/infographic-backup-YYYYMMDD-HHMMSS.md
整合以下内容生成Prompt：
  1. references/layouts/<layout>.md
    中的布局定义
  2. references/styles/<style>.md
    中的风格定义
  3. references/base-prompt.md
    中的基础模板
  4. 步骤2生成的结构化内容
  5. 所有文本使用确认后的语言

Step 6: Generate Image

步骤6：生成图片

  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
  1. 选择可用的图片生成工具（多个可用时询问用户）
  2. 检查文件是否存在：生成前先检查
    infographic.png
    是否存在
    • 已存在：重命名为
      infographic-backup-YYYYMMDD-HHMMSS.png
  3. 传入Prompt文件和输出路径调用生成工具
  4. 生成失败时自动重试一次

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
    - 21 layout definitions
  • references/styles/<style>.md
    - 20 style definitions
  • references/analysis-framework.md
    - 分析方法论
  • references/structured-content-template.md
    - 内容格式规范
  • references/base-prompt.md
    - Prompt模板
  • references/layouts/<layout>.md
    - 21种布局的完整定义
  • references/styles/<style>.md
    - 20种风格的完整定义

Extension Support

扩展支持

Custom configurations via EXTEND.md. See Step 1.1 for paths and supported options.
可通过EXTEND.md自定义配置，路径和支持的配置项见步骤1.1。