Back to Details

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：数据处理

  1. Parse and validate data: Ensure data is structured and complete
  2. Identify relationships: Determine how data points connect
  3. Calculate proportions: For visual sizing and positioning
  4. Extract key metrics: Highlight significant numbers or trends
  1. 解析并验证数据：确保数据结构化且完整
  2. 识别关联关系：确定数据点之间的连接方式
  3. 计算比例：用于视觉尺寸调整与定位
  4. 提取关键指标：突出重要数值或趋势

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

相关技能

  • content-multiplier — Turn your infographic into social media posts
  • long-form-writer — Write companion text for the infographic
  • pitch-deck-creator — Include infographics in pitch decks
  • unique-club-founder-kit — Complete content toolkit from UniqueClub
  • content-multiplier — 将infographic转化为社交媒体帖子
  • long-form-writer — 为infographic撰写配套文本
  • pitch-deck-creator — 在演示文稿中加入infographic
  • unique-club-founder-kit — UniqueClub完整内容工具包

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