一键在 Manus 中运行任何 Skill

infographic-generator

Use when user needs to generate infographic PNG images. Triggers: '生成信息图', '创建信息图', '生成图表', '信息图', 'infographic', '数据可视化', '科研绘图', or when user describes content that should be visualized as infographic.

在 Manus 中运行

概览

安装命令

npx skills add https://github.com/konglong87/methodology-skills --skill infographic-generator

复制此命令并粘贴到 Claude Code 中以安装该技能

来源

konglong87/methodology-skills

星标4

分支0

更新时间2026年5月20日 06:45

文件资源管理器

40 个文件

SKILL.md

readonly

name	infographic-generator
description	Use when user needs to generate infographic PNG images. Triggers: '生成信息图', '创建信息图', '生成图表', '信息图', 'infographic', '数据可视化', '科研绘图', or when user describes content that should be visualized as infographic.

信息图生成器

Overview

一站式信息图生成工具：根据用户需求描述，自动生成PNG格式信息图和科研绘图。无需外部API，完全本地运行。

核心能力：

6大模板：知识科普、对比分析、流程说明、数据展示、小红书爆款、科研图表
8种风格：科技风、可爱风、简约风、教学风、笔记风、泥塑风、漫画风、Bento风
4级质量：草稿(1x/72DPI) → 标准(1x/150DPI) → 专业(2x/300DPI) → Retina(3x/300DPI)
一键生成：自然语言描述 → PNG图片，无需手动配置
自动降级：Remotion → HTML+Puppeteer，渲染失败自动重试

When to Use

适用：知识科普可视化、小红书视觉内容、学术科研图表、数据可视化、对比分析图表 不适用：纯文本即可的场景；需要深度分析（先用对应的skill分析，再生成信息图）

Quick Start

node skill-render.js "生成Python编程语言的信息图，包含语法简洁、应用广泛、生态丰富、跨平台4个特点"
# 智能选择布局，输出 output-infographic-landscape.png / portrait.png

Workflow

digraph infographic_workflow {
    rankdir=TB;
    node [shape=box, style=filled, fontname="Arial"];
    "1. 描述需求" [fillcolor="#c8e6c9"];
    "2. 智能分析+渲染" [fillcolor="#bbdefb"];
    "3. 获取结果" [fillcolor="#e1bee7"];
    "1. 描述需求" -> "2. 智能分析+渲染" -> "3. 获取结果";
}

Step 1: 自然语言描述需求，可指定模板、风格、要点数量 Step 2: 自动识别内容类型 → 提取关键点 → 选择模板/风格 → 渲染PNG（Remotion → HTML降级） Step 3: 输出PNG文件路径 + JSON配置文件（可选）

Templates & Styles

6大模板

模板	适用场景	默认风格
知识科普	概念解释、技术介绍	科技风
对比分析	产品对比、方案评估	简约风
流程说明	步骤指南、操作流程	教学风
数据展示	数据报告、统计结果	科技风
小红书爆款	社交媒体分享	可爱风
科研图表	学术论文、实验数据	简约风

8种风格

风格	关键词	视觉特点
科技风	AI/编程/技术/数据	深色背景、霓虹蓝紫、科技网格
可爱风	生活/美食/宠物/美妆	暖色背景、粉嫩色调、柔和圆润
简约风	商务/职场/专业/报告	黑白灰、大量留白、线条简洁
教学风	教程/指南/学习/入门	浅蓝背景、网格底纹、清晰分级
笔记风	笔记/总结/读书/知识	暖黄底色、笔记本横线、手写感
泥塑风	创意/艺术/设计/手工	陶土暖色、3D圆润质感
漫画风	动漫/游戏/二次元	橙红主色、速度线、对话框元素
Bento风	模块化/架构/系统	网格布局、模块化卡片、信息密度高

风格选择优先级：用户明确指定 → 内容关键词匹配 → 可爱风兜底

示例：

# 指定风格
node skill-render.js "Python信息图，使用科技风"
# 自动选择（AI/编程内容 → 科技风）
node skill-render.js "生成AI工具推荐信息图"

质量预设

预设	缩放	DPI	场景
draft	1x	72	快速预览
normal	1x	150	日常（默认）
professional	2x	300	高清打印
retina	3x	300	超清输出

node skill-render.js "Python信息图" --quality professional

Advanced Usage

批量生成：批量生成5个编程语言的信息图：Python、Java、JavaScript、Go、Rust
指定尺寸：生成信息图，尺寸1080x1920（竖版）
JSON配置：生成时自动保存配置文件，可修改后重新渲染
结合方法论：先用swot-analysis分析，再将结果生成为信息图

Common Pitfalls

❌ 期望skill做深度分析 → 先分析再可视化
❌ 信息过于简单（1个要点）→ 文本列表即可
❌ 描述模糊 → 提供结构化内容：标题、要点、说明
✅ 正确："生成XX信息图，包含A、B、C三个特点，科技风"

References

模板数据结构规范 - JSON配置格式和字段说明
示例 - 使用示例

Technical Notes

渲染引擎：

Remotion（React，主要方案）
HTML+Puppeteer（降级，Remotion不可用时自动切换）

输出结构：

infographic/{topic-slug}/
├── {topic-slug}-landscape.png   # 横版（1920x1080，默认）
├── {topic-slug}-portrait.png    # 竖版（1080x1920，小红书/要点>5时）
└── {topic-slug}.json            # 配置文件（可选）

方向选择规则：

小红书模板 → 竖版
要点 > 5个 → 竖版
其他 → 横版
指定 --render-both 同时输出两个版本

同仓库更多 Skills

同仓库

planning

konglong87/methodology-skills

MUST use after prompt-enhancer. Create implementation plan with MECE decomposition, dependency analysis, risk assessment, and mandatory plan-review.

2026-04-144

experience-manager

konglong87/methodology-skills

管理项目经验知识的沉淀与读取，实现知识闭环

2026-04-144

goal-oriented

konglong87/methodology-skills

MUST use for ANY user request. This is a rigid requirement that applies to all tasks and conversations.

2026-03-314

prompt-enhancer

konglong87/methodology-skills

MUST use before task execution. Clarify vague requirements, explore solutions, and ensure full understanding.

2026-03-254

pilot

konglong87/methodology-skills

Intelligent skill router for methodology-skills. Analyzes user request and recommends the best methodology sequence. Use when user asks 'which skill should I use', 'help me choose a methodology', or when starting complex tasks.

2026-03-244

ddd-strategic-design

konglong87/methodology-skills

Use when starting new projects, designing system architecture, identifying bounded contexts, mapping context relationships, system refactoring, system redesign, or when user mentions 'DDD', 'domain-driven design', 'bounded context', 'context mapping', 'microservices design', 'business modeling', 'system boundaries', 'domain thinking', '领域思维', '领域驱动', '重构项目', '重构系统', '重新设计系统', '优化重构系统'.

2026-03-244

来源

konglong87

konglong87/methodology-skills

打开 GitHub 仓库查看创作者相关仓库

安装命令

下载

在 Manus 中运行

适用职业SOC

平面设计师艺术、设计、娱乐、体育与媒体类职业27-1024L4

name	infographic-generator
description	Use when user needs to generate infographic PNG images. Triggers: '生成信息图', '创建信息图', '生成图表', '信息图', 'infographic', '数据可视化', '科研绘图', or when user describes content that should be visualized as infographic.

信息图生成器

Overview

一站式信息图生成工具：根据用户需求描述，自动生成PNG格式信息图和科研绘图。无需外部API，完全本地运行。

核心能力：

6大模板：知识科普、对比分析、流程说明、数据展示、小红书爆款、科研图表
8种风格：科技风、可爱风、简约风、教学风、笔记风、泥塑风、漫画风、Bento风
4级质量：草稿(1x/72DPI) → 标准(1x/150DPI) → 专业(2x/300DPI) → Retina(3x/300DPI)
一键生成：自然语言描述 → PNG图片，无需手动配置
自动降级：Remotion → HTML+Puppeteer，渲染失败自动重试

When to Use

Quick Start

node skill-render.js "生成Python编程语言的信息图，包含语法简洁、应用广泛、生态丰富、跨平台4个特点"
# 智能选择布局，输出 output-infographic-landscape.png / portrait.png

Workflow

digraph infographic_workflow {
    rankdir=TB;
    node [shape=box, style=filled, fontname="Arial"];
    "1. 描述需求" [fillcolor="#c8e6c9"];
    "2. 智能分析+渲染" [fillcolor="#bbdefb"];
    "3. 获取结果" [fillcolor="#e1bee7"];
    "1. 描述需求" -> "2. 智能分析+渲染" -> "3. 获取结果";
}

Templates & Styles

6大模板

模板	适用场景	默认风格
知识科普	概念解释、技术介绍	科技风
对比分析	产品对比、方案评估	简约风
流程说明	步骤指南、操作流程	教学风
数据展示	数据报告、统计结果	科技风
小红书爆款	社交媒体分享	可爱风
科研图表	学术论文、实验数据	简约风

8种风格

风格	关键词	视觉特点
科技风	AI/编程/技术/数据	深色背景、霓虹蓝紫、科技网格
可爱风	生活/美食/宠物/美妆	暖色背景、粉嫩色调、柔和圆润
简约风	商务/职场/专业/报告	黑白灰、大量留白、线条简洁
教学风	教程/指南/学习/入门	浅蓝背景、网格底纹、清晰分级
笔记风	笔记/总结/读书/知识	暖黄底色、笔记本横线、手写感
泥塑风	创意/艺术/设计/手工	陶土暖色、3D圆润质感
漫画风	动漫/游戏/二次元	橙红主色、速度线、对话框元素
Bento风	模块化/架构/系统	网格布局、模块化卡片、信息密度高

风格选择优先级：用户明确指定 → 内容关键词匹配 → 可爱风兜底

示例：

# 指定风格
node skill-render.js "Python信息图，使用科技风"
# 自动选择（AI/编程内容 → 科技风）
node skill-render.js "生成AI工具推荐信息图"

质量预设

预设	缩放	DPI	场景
draft	1x	72	快速预览
normal	1x	150	日常（默认）
professional	2x	300	高清打印
retina	3x	300	超清输出

node skill-render.js "Python信息图" --quality professional

Advanced Usage

批量生成：批量生成5个编程语言的信息图：Python、Java、JavaScript、Go、Rust
指定尺寸：生成信息图，尺寸1080x1920（竖版）
JSON配置：生成时自动保存配置文件，可修改后重新渲染
结合方法论：先用swot-analysis分析，再将结果生成为信息图

Common Pitfalls

❌ 期望skill做深度分析 → 先分析再可视化
❌ 信息过于简单（1个要点）→ 文本列表即可
❌ 描述模糊 → 提供结构化内容：标题、要点、说明
✅ 正确："生成XX信息图，包含A、B、C三个特点，科技风"

References

模板数据结构规范 - JSON配置格式和字段说明
示例 - 使用示例

Technical Notes

渲染引擎：

Remotion（React，主要方案）
HTML+Puppeteer（降级，Remotion不可用时自动切换）

输出结构：

infographic/{topic-slug}/
├── {topic-slug}-landscape.png   # 横版（1920x1080，默认）
├── {topic-slug}-portrait.png    # 竖版（1080x1920，小红书/要点>5时）
└── {topic-slug}.json            # 配置文件（可选）

方向选择规则：

小红书模板 → 竖版
要点 > 5个 → 竖版
其他 → 横版
指定 --render-both 同时输出两个版本