メニュー
Use when user needs to generate infographic PNG images. Triggers: '生成信息图', '创建信息图', '生成图表', '信息图', 'infographic', '数据可视化', '科研绘图', or when user describes content that should be visualized as infographic.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/konglong87/infographic-generator-skills --skill infographic-generatorコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
| 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. |
一站式信息图生成工具：根据用户需求描述，自动生成PNG格式的信息图和科研绘图。
🆕 无需API key - 智能本地生成！
核心能力：
使用场景：
输入 → 输出：
用户需求描述 → PNG信息图 + JSON配置文件（可选）
一键生成示例：
# 一句话生成PNG，无需任何配置
node skill-render.js "生成Python编程语言的信息图，包含语法简洁、应用广泛、生态丰富、跨平台4个特点，使用极简风格"
# 输出：python-infographic.png
适用场景：
不适用场景：
需要分析方法时：
"请用swot-analysis分析XX产品，然后将结果生成信息图"digraph infographic_workflow {
rankdir=TB;
node [shape=box, style=filled, fontname="Arial"];
"1. 描述需求" [fillcolor="#c8e6c9"];
"2. 智能分析与渲染" [fillcolor="#bbdefb"];
"3. 获取结果" [fillcolor="#e1bee7"];
"1. 描述需求" -> "2. 智能分析与渲染";
"2. 智能分析与渲染" -> "3. 获取结果";
}
Step 1: 描述需求
用户用自然语言描述要生成什么信息图：
"生成Python编程语言的信息图，包含4个核心特点：语法简洁、应用广泛、生态丰富、跨平台"
"创建一份关于AI趋势的小红书爆款图，马卡龙风格，包含5个关键趋势"
"制作论文用的数据对比图表，科研风格，对比3种算法的性能"
Step 2: 智能分析与渲染（自动化，无需用户参与）
Skill自动完成：
支持的输入格式：
包含N个要点：要点1、要点2、要点3包含要点1、要点2、要点3等N个特点渲染引擎优先级：
Step 3: 获取结果
输出给用户：
示例输出：
✅ 信息图已生成！
📁 文件位置：
- PNG图片：infographic/python-infographic.png
- 配置文件：infographic/python-infographic.json（可选）
💡 使用建议：
- 适合用于技术博客、知识分享
- 推荐尺寸：1920x1080（横版）
- 如需调整，可修改JSON配置后重新渲染
| 模板 | 适用场景 | 特点 | 默认风格 |
|---|---|---|---|
| 知识科普 | 概念解释、知识分享、技术介绍 | 标题+核心观点+详细说明+总结 | 极简风 |
| 对比分析 | 产品对比、方案评估、优劣分析 | 左右/上下对比，要点清晰 | 商务风 |
| 流程说明 | 步骤指南、操作流程、工作流 | 流程图+关键点+注意事项 | 扁平化 |
| 数据展示 | 数据报告、统计结果、调研分析 | 图表+数据解读+结论 | 商务风 |
| 小红书爆款 | 社交媒体分享、内容营销 | 吸睛标题+核心观点+互动元素 | 马卡龙风 |
| 科研图表 | 学术论文、研究报告、实验数据 | 学术规范+数据准确+引用完整 | 极简风 |
| 风格 | 配色 | 适用内容 | 视觉特点 |
|---|---|---|---|
| 极简风 | 黑白灰+单色强调 | 知识科普、概念解释、技术内容 | 线条简洁、留白充足、专业感强 |
| 马卡龙风 | 粉色系、浅蓝、薄荷绿 | 生活技巧、美妆美食、小红书内容 | 柔和色调、可爱元素、亲切感 |
| 赛博朋克 | 霓虹粉、电光蓝、紫色 | 科技产品、AI工具、未来趋势 | 霓虹色彩、未来感、视觉冲击 |
| 莫兰迪风 | 灰蓝、灰粉、米色 | 职场技能、学习方法、高端内容 | 低饱和度、高级感、优雅 |
| 国潮风 | 中国红、金、墨黑 | 文化内容、历史知识、传统元素 | 传统元素、现代设计、大气 |
| 商务风 | 深蓝、灰色、白色 | 行业分析、市场报告、商业内容 | 专业严谨、数据导向、信任感 |
| 手绘风 | 暖色系、手绘图标 | 生活分享、经验总结、故事叙述 | 亲切自然、温度感、个性化 |
| 扁平化 | 鲜艳对比色、几何图形 | 流程说明、步骤指南、操作教程 | 简洁现代、信息清晰、易读 |
风格选择优先级：
系统按照以下优先级选择风格：
用户明确指定（最高优先级）
"生成Python信息图，使用手绘风格"LLM智能选择
"生成AI工具推荐信息图" → 自动选择科技风"生成美食教程信息图" → 自动选择可爱风或教学风可爱风格兜底（默认）
"生成一个信息图"（内容模糊）→ 使用可爱风示例用法：
# 用户指定风格
node skill-render.js "生成Python信息图，使用手绘风格"
# LLM智能选择
node skill-render.js "生成AI工具推荐信息图"
# 兜底机制
node skill-render.js "生成一个信息图"
自动推荐规则：
Skill会根据内容类型自动推荐：
用户也可明确指定风格偏好。
输入：
生成Python编程语言的信息图，包含4个核心特点：
1. 语法简洁 - 易学易用
2. 应用广泛 - Web、AI、数据分析
3. 生态丰富 - 海量库和框架
4. 跨平台 - Windows、Mac、Linux
输出：
结构：
标题：Python编程语言
├─ 核心特点1：语法简洁
│ └─ 说明：易学易用，代码可读性强
├─ 核心特点2：应用广泛
│ └─ 说明：Web开发、AI、数据分析等领域
├─ 核心特点3：生态丰富
│ └─ 说明：海量第三方库和框架
└─ 核心特点4：跨平台
└─ 说明：支持Windows、Mac、Linux
输入：
生成小红书爆款信息图，主题是"5个AI工具提升工作效率10倍"，
马卡龙风格，每个工具要包含：名称、用途、效果
输出：
结构：
标题：5个AI工具提升工作效率10倍 🔥
├─ 工具1：ChatGPT - 文案创作 - 效率↑300%
├─ 工具2：Midjourney - 图片生成 - 效率↑500%
├─ 工具3：Notion AI - 文档整理 - 效率↑200%
├─ 工具4：GitHub Copilot - 代码编写 - 效率↑400%
└─ 工具5：Runway - 视频制作 - 效率↑600%
底部互动：👍 点赞收藏，分享更多干货！
输入：
制作论文用的算法性能对比图表，科研风格，
对比3种排序算法（快速排序、归并排序、堆排序）的时间复杂度
输出：
结构：
标题：三种排序算法时间复杂度对比
├─ 快速排序：平均O(n log n)，最坏O(n²)
├─ 归并排序：O(n log n)
└─ 堆排序：O(n log n)
包含：柱状图、性能曲线、引用标注
用户可以指定：
"生成XX信息图，使用对比分析模板，赛博朋克风格"
"制作数据图表，科研风格，使用数据展示模板"
用户可以在描述中明确指定风格：
"生成XX信息图，使用科技风"
"制作教程信息图，手绘风格"
"创建数据分析图表，简约风"
支持的风格：
科技风 / tech - 适合AI、编程、技术内容可爱风 / cute - 适合生活、美食、宠物内容手绘风 / notebook - 适合学习、笔记、教程内容简约风 / minimal - 适合商务、职场内容教学风 / tutorial - 适合教程、指南内容泥塑风 / clay - 适合创意、艺术内容漫画风 / comics - 适合动漫、游戏内容Bento风 / bento - 适合模块化、架构内容如果不指定风格，系统会根据内容自动选择最合适的风格。如果无法识别内容类型，将使用可爱风格作为默认风格。
一次生成多个信息图：
"批量生成5个编程语言的信息图：Python、Java、JavaScript、Go、Rust"
用户可以指定输出尺寸：
"生成信息图，尺寸1080x1920（竖版）"
"制作横版信息图，16:9比例"
"生成方形信息图，1:1比例"
用户可以获取JSON配置文件进行二次修改：
"生成信息图，同时输出JSON配置文件"
JSON配置可用于：
对于需要深度分析的内容：
第一步："请用swot-analysis分析XX产品"
第二步：获得分析结果
第三步："根据上面的SWOT分析结果，生成信息图"
❌ 错误用法：
期望skill做深度分析
错误："生成XX产品的SWOT分析信息图"
正确：先用swot-analysis skill分析，再生成信息图
信息过于简单，不需要可视化
错误："生成一个包含1个要点的信息图"
正确：简单内容用文本列表即可
要求不明确
错误："生成一个信息图"
正确："生成关于XX的信息图，包含A、B、C三个要点"
✅ 正确用法：
提供清晰的需求描述
"生成Python编程语言的信息图，包含语法简洁、应用广泛、生态丰富、跨平台4个特点，极简风格"
指定目标受众和场景
"生成适合小红书分享的AI工具推荐信息图，马卡龙风格，面向初学者"
提供结构化内容
"生成XX信息图，包含以下内容：
1. 标题：XXX
2. 核心观点：A、B、C
3. 数据：XXX
4. 结论：XXX"
内部实现（对用户透明）：
infographic/{topic-slug}/ 目录SVG生成器优势（v2.0新增）：
文件结构：
infographic/{topic-slug}/
├── {topic-slug}.png # 最终PNG图片
├── {topic-slug}.svg # SVG矢量文件（可选）
├── {topic-slug}.json # JSON配置文件（可选）
└── {topic-slug}-backup.png # 备份文件（如重新生成）
性能优化：
渲染优先级：
用户请求 → SVG生成器 → Remotion → HTML+Puppeteer
(首选) (备选) (降级)