关于 canghe-infographic
将源内容整理为信息图结构并生成图像提示词的技能,支持多种布局、风格、画幅比例和输出语言,同时逐字保留源数据。
主要功能
- 01将内容整理为信息图结构
- 02从 20 种布局中选择
- 03从 17 种视觉风格中选择
- 04设置画幅比例和语言
- 05逐字保留源数据
适用场景
- 01可视化流程或时间线
- 02对比选项或类别
- 03将粘贴内容制作成信息图
- 04准备本地化的信息图提示词
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ freestylefly/ canghe-skills --skill canghe-infographic安装后在 Claude Code 中输入/canghe-infographic确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/analysis-framework.mdbase-prompt.mdstructured-content-template.mdreferences/layouts/bento-grid.mdbinary-comparison.mdbridge.mdcircular-flow.mdcomic-strip.mdcomparison-matrix.mddashboard.mdfunnel.mdhierarchical-layers.mdhub-spoke.mdiceberg.mdisometric-map.mdjigsaw.mdlinear-progression.mdperiodic-table.mdstory-mountain.mdstructural-breakdown.mdtree-branching.mdvenn-diagram.mdwinding-roadmap.mdreferences/styles/aged-academia.mdbold-graphic.mdchalkboard.mdclaymation.mdcorporate-memphis.mdcraft-handmade.mdcyberpunk-neon.md详细介绍
信息图生成器
两个维度:布局(信息结构)× 风格(视觉美学)。可自由组合任意布局与任意风格。
用法
/canghe-infographic path/to/content.md
/canghe-infographic path/to/content.md --layout hierarchical-layers --style technical-schematic
/canghe-infographic path/to/content.md --aspect portrait --lang zh
/canghe-infographic # then paste content
选项
| 选项 | 值 |
|---|---|
--layout | 20 个选项(参见布局图库),默认值:bento-grid |
--style | 17 个选项(参见风格图库),默认值:craft-handmade |
--aspect | landscape(16:9)、portrait(9:16)、square(1:1) |
--lang | en、zh、ja 等 |
布局图库
| 布局 | 最适合 |
|---|---|
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 | 循环、重复流程 |
完整定义:references/layouts/<layout>.md
风格图库
| 风格 | 描述 |
|---|---|
craft-handmade | 手绘、纸艺(默认) |
claymation | 3D 黏土造型、定格动画 |
kawaii | 日式可爱风、柔和色彩 |
storybook-watercolor | 柔和绘画、奇幻风格 |
chalkboard | 黑板粉笔画 |
cyberpunk-neon | 霓虹光效、未来感 |
bold-graphic | 漫画风、半色调 |
aged-academia | 复古科学风、棕褐色调 |
corporate-memphis | 扁平矢量、鲜艳色彩 |
technical-schematic | 蓝图、工程风 |
origami | 折纸、几何风 |
pixel-art | 复古 8 位风格 |
ui-wireframe | 灰度界面模型 |
subway-map | 交通线路图 |
ikea-manual | 极简线稿 |
knolling | 整齐排列的平铺构图 |
lego-brick | 玩具积木拼搭 |
完整定义:references/styles/<style>.md
推荐组合
| 内容类型 | 布局 + 风格 |
|---|---|
| 时间线/历史 | 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 |
默认值:bento-grid + craft-handmade
输出结构
infographic/{topic-slug}/
├── source-{slug}.{ext}
├── analysis.md
├── structured-content.md
├── prompts/infographic.md
└── infographic.png
Slug:根据主题生成 2-4 个词的 kebab-case。冲突时:追加 -YYYYMMDD-HHMMSS。
核心原则
- 逐字保留所有源数据——不得总结或改写
- 在组织内容前定义学习目标
- 按视觉传达方式组织内容(标题、标签、视觉元素)
工作流
第 1 步:设置与分析
1.1 加载偏好设置(EXTEND.md)
使用 Bash 按优先级顺序检查 EXTEND.md 是否存在:
# Check project-level first
test -f .canghe-skills/canghe-infographic/EXTEND.md && echo "project"
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.canghe-skills/canghe-infographic/EXTEND.md" && echo "user"
┌────────────────────────────────────────────────────┬───────────────────┐ │ 路径 │ 位置 │ ├────────────────────────────────────────────────────┼───────────────────┤ │ .canghe-skills/canghe-infographic/EXTEND.md │ 项目目录 │ ├────────────────────────────────────────────────────┼───────────────────┤ │ $HOME/.canghe-skills/canghe-infographic/EXTEND.md │ 用户主目录 │ └────────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐ │ 结果 │ 操作 │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ 找到 │ 读取、解析并显示摘要 │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ 未找到 │ 使用 AskUserQuestion 询问用户(参见 references/config/first-time-setup.md) │ └───────────┴───────────────────────────────────────────────────────────────────────────┘
EXTEND.md 支持:首选布局/样式 | 默认纵横比 | 自定义样式定义 | 语言偏好
Schema:references/config/preferences-schema.md
1.2 分析内容 → analysis.md
- 保存源内容(文件路径或粘贴内容 →
source.md)- 备份规则:如果
source.md已存在,将其重命名为source-backup-YYYYMMDD-HHMMSS.md
- 备份规则:如果
- 分析:主题、数据类型、复杂度、语气、受众
- 检测源语言和用户语言
- 提取用户输入中的设计说明
- 保存分析结果
- 备份规则:如果
analysis.md已存在,将其重命名为analysis-backup-YYYYMMDD-HHMMSS.md
- 备份规则:如果
详细格式参见 references/analysis-framework.md。
第 2 步:生成结构化内容 → structured-content.md
将内容转换为信息图结构:
- 标题和学习目标
- 各部分包含:核心概念、内容(原文照录)、视觉元素、文本标签
- 数据点(所有统计数据/引文均须准确照录)
- 用户提供的设计说明
规则:仅使用 Markdown。不得添加新信息。所有数据均须照录。
详细格式参见 references/structured-content-template.md。
第 3 步:推荐组合
根据以下因素推荐 3-5 种布局×样式组合:
- 数据结构 → 匹配布局
- 内容语气 → 匹配样式
- 受众预期
- 用户提供的设计说明
第 4 步:确认选项
使用单次 AskUserQuestion 调用,通过多个问题一并确认所有选项:
| 问题 | 适用时机 | 选项 |
|---|---|---|
| 组合 | 始终 | 3 种或以上布局×样式组合,并附理由 |
| 纵横比 | 始终 | 横向(16:9)、纵向(9:16)、正方形(1:1) |
| 语言 | 仅当源语言 ≠ 用户语言时 | 文本内容使用的语言 |
重要:不要拆分成多个 AskUserQuestion 调用。将所有适用问题合并在一次调用中。
第 5 步:生成提示词 → prompts/infographic.md
备份规则:如果 prompts/infographic.md 已存在,将其重命名为 prompts/infographic-backup-YYYYMMDD-HHMMSS.md
合并以下内容:
references/layouts/<layout>.md中的布局定义references/styles/<style>.md中的样式定义references/base-prompt.md中的基础模板- 第 2 步生成的结构化内容
- 所有文本均使用已确认的语言
第 6 步:生成图像
- 选择可用的图像生成技能(如有多个,询问用户)
- 检查现有文件:生成前检查
infographic.png是否存在- 如果存在:将其重命名为
infographic-backup-YYYYMMDD-HHMMSS.png
- 如果存在:将其重命名为
- 使用提示词文件和输出路径进行调用
- 如果失败,自动重试一次
第 7 步:输出摘要
报告:主题、布局、样式、纵横比、语言、输出路径、创建的文件。
参考资料
references/analysis-framework.md- 分析方法references/structured-content-template.md- 内容格式references/base-prompt.md- 提示词模板references/layouts/<layout>.md- 20 种布局定义references/styles/<style>.md- 17 种样式定义
扩展支持
通过 EXTEND.md 自定义配置。路径和支持的选项请参阅 步骤 1.1。