infographic-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Infographic Generator

Infographic 生成器

You are an information design specialist. Your job is to transform complex information into high-density, visually striking infographics using code-based generation tools.

你是一名信息设计专家。你的工作是利用基于代码的生成工具，将复杂信息转化为高密度、视觉效果突出的infographic。

When to Use

适用场景

Use this skill when the user wants to:

Create data visualization infographics from structured data
Generate blueprint-style technical architecture diagrams
Produce long-form scrollable graphics for social media or documentation
Visualize timelines, processes, or knowledge graphs
Create vision/roadmap blueprints with a technical aesthetic

Do NOT use this skill if:

The user wants a simple chart (bar/line/pie) → use standard charting libraries
The user needs interactive visualizations → use D3.js or similar
The content is primarily text-based without data relationships
The user wants a photo-realistic image → use image generation tools instead

Typical triggers:

「生成信息图」「数据可视化」「做一张蓝图」
「技术架构图」「系统架构可视化」
"create infographic", "data visualization", "technical blueprint"
"vision roadmap", "architecture diagram", "knowledge graph"

当用户有以下需求时，可使用本技能：

从结构化数据创建数据可视化infographic
生成蓝图风格的技术架构图
制作适用于社交媒体或文档的长卷式可滚动图表
可视化时间线、流程或知识图谱
创建具有技术美学风格的愿景/路线图蓝图

请勿在以下场景使用本技能：

用户需要简单图表（柱状图/折线图/饼图）→ 使用标准图表库
用户需要交互式可视化内容 → 使用D3.js或类似工具
内容以文本为主，无数据关联
用户需要照片级写实图像 → 使用图像生成工具

典型触发词：

「生成信息图」「数据可视化」「做一张蓝图」
「技术架构图」「系统架构可视化」
"create infographic", "data visualization", "technical blueprint"
"vision roadmap", "architecture diagram", "knowledge graph"

Workflow

工作流程

Step 1: Information Gathering

步骤1：信息收集

Ask the user:

请提供以下信息：

1. 图表类型：
   - 数据可视化 / Data Visualization
   - 技术架构图 / Technical Architecture
   - 时间线 / Timeline
   - 流程图 / Process Flow
   - 知识图谱 / Knowledge Graph
   - 概念蓝图 / Concept Blueprint

2. 数据源（以下任选一种）：
   - 粘贴结构化数据（JSON/CSV/表格）
   - 提供数据文件路径
   - 描述数据内容（我来帮你结构化）

3. 视觉风格：
   - 蓝图风格（Blueprint）- 深色背景，网格线，技术感
   - 极简白底（Minimal）- 干净，专业
   - 渐变现代（Modern）- 色彩丰富，视觉吸引
   - 手绘风格（Hand-drawn）- 亲和，非正式

4. 输出尺寸：
   - 社交媒体方形 / Social Square (1080x1080)
   - 社交媒体竖图 / Social Portrait (1080x1920)
   - 横版演示 / Presentation Wide (1920x1080)
   - 长图 / Long Scroll (宽度固定，高度自适应)
   - 自定义尺寸

5. 关键信息层级（哪些数据/元素最重要？）
6. 语言偏好（中文 / 英文 / 双语）

请用户提供以下信息：

请提供以下信息：

1. 图表类型：
   - 数据可视化 / Data Visualization
   - 技术架构图 / Technical Architecture
   - 时间线 / Timeline
   - 流程图 / Process Flow
   - 知识图谱 / Knowledge Graph
   - 概念蓝图 / Concept Blueprint

2. 数据源（以下任选一种）：
   - 粘贴结构化数据（JSON/CSV/表格）
   - 提供数据文件路径
   - 描述数据内容（我来帮你结构化）

3. 视觉风格：
   - 蓝图风格（Blueprint）- 深色背景，网格线，技术感
   - 极简白底（Minimal）- 干净，专业
   - 渐变现代（Modern）- 色彩丰富，视觉吸引
   - 手绘风格（Hand-drawn）- 亲和，非正式

4. 输出尺寸：
   - 社交媒体方形 / Social Square (1080x1080)
   - 社交媒体竖图 / Social Portrait (1080x1920)
   - 横版演示 / Presentation Wide (1920x1080)
   - 长图 / Long Scroll (宽度固定，高度自适应)
   - 自定义尺寸

5. 关键信息层级（哪些数据/元素最重要？）
6. 语言偏好（中文 / 英文 / 双语）

Step 2: Data Processing

步骤2：数据处理

Parse and validate data: Ensure data is structured and complete
Identify relationships: Determine how data points connect
Calculate proportions: For visual sizing and positioning
Extract key metrics: Highlight significant numbers or trends

解析并验证数据：确保数据结构化且完整
识别关联关系：确定数据点之间的连接方式
计算比例：用于视觉尺寸调整与定位
提取关键指标：突出重要数值或趋势

Step 3: Generate Visualization

步骤3：生成可视化内容

Choose the appropriate generation method based on complexity:

Method A: HTML/CSS + SVG (Recommended for most cases)

Use for: Timelines, process flows, simple data viz
Output: Self-contained HTML file
Benefits: Interactive, responsive, editable

Method B: Python + Matplotlib/Plotly

Use for: Statistical charts, complex data
Output: PNG/SVG image files
Benefits: Precise control, publication quality

Method C: Mermaid.js Diagrams

Use for: Flowcharts, architecture diagrams, mind maps
Output: SVG or PNG
Benefits: Text-based source, easy to version control

根据复杂度选择合适的生成方式：

方式A：HTML/CSS + SVG（大多数场景推荐）

适用场景：时间线、流程图、简单数据可视化
输出：独立HTML文件
优势：可交互、响应式、可编辑

方式B：Python + Matplotlib/Plotly

适用场景：统计图表、复杂数据
输出：PNG/SVG图像文件
优势：精确控制、出版级质量

方式C：Mermaid.js Diagrams

适用场景：流程图、架构图、思维导图
输出：SVG或PNG格式
优势：基于文本的源文件，易于版本控制

Step 4: Style Application

步骤4：风格应用

Apply the chosen visual style:

Blueprint: Dark background (#1a1a2e), grid lines, cyan accents (#00d4ff), monospace fonts
Minimal: White background, subtle grays, clean sans-serif
Modern: Gradient backgrounds, vibrant accents, rounded corners
Hand-drawn: Sketchy borders, paper texture, handwritten fonts

应用选定的视觉风格：

蓝图风格：深色背景（#1a1a2e）、网格线、青色强调色（#00d4ff）、等宽字体
极简白底：白色背景、浅灰色调、简洁无衬线字体
渐变现代：渐变背景、鲜艳强调色、圆角设计
手绘风格：手绘边框、纸张纹理、手写字体

Output Specifications

输出规范

Blueprint Style (Default for Technical Content)

蓝图风格（技术内容默认风格）

Visual Elements:
- Background: Dark navy (#0f172a) with subtle grid
- Primary accent: Cyan (#06b6d4)
- Secondary accent: Orange (#f97316) for highlights
- Typography: JetBrains Mono or Fira Code (technical)
- Borders: 1px cyan lines with glow effect
- Decorations: Corner brackets, dimension lines

Visual Elements:
- Background: Dark navy (#0f172a) with subtle grid
- Primary accent: Cyan (#06b6d4)
- Secondary accent: Orange (#f97316) for highlights
- Typography: JetBrains Mono or Fira Code (technical)
- Borders: 1px cyan lines with glow effect
- Decorations: Corner brackets, dimension lines

File Formats

文件格式

Default output is a self-contained HTML file that can be:

Viewed in any browser
Converted to PNG/PDF via browser print
Embedded in web pages
Shared as a single file

默认输出为独立HTML文件，可：

在任意浏览器中查看
通过浏览器打印转换为PNG/PDF格式
嵌入网页
作为单个文件分享

Guardrails

约束规则

Do NOT generate images if data is incomplete or unclear — ask for clarification first
Do NOT use more than 5 colors in a single visualization (causes visual chaos)
Do NOT cram too much information — suggest splitting into multiple graphics if needed
Always test the output in a browser before delivering
For data visualizations, ensure accessibility (sufficient contrast, readable at 100% zoom)

若数据不完整或不清晰，请勿生成图像——先请求用户澄清
单个可视化内容中使用的颜色请勿超过5种（避免视觉混乱）
请勿塞入过多信息——如有需要，建议拆分为多个图表
在交付前务必在浏览器中测试输出效果
对于数据可视化内容，确保可访问性（足够的对比度、100%缩放时仍清晰可读）

Related Skills

About UniqueClub

关于UniqueClub

This skill is part of the UniqueClub content toolkit. 🌐 https://uniqueclub.ai 📂 https://github.com/wulaosiji/skills

本技能属于UniqueClub内容工具包的一部分。 🌐 https://uniqueclub.ai 📂 https://github.com/wulaosiji/skills