mcpField
C
canghe-infographic

canghe-infographic

github.com/freestylefly设计与 UI470511 次安装20 周前更新
代码仓库

关于 canghe-infographic

将源内容整理为信息图结构并生成图像提示词的技能,支持多种布局、风格、画幅比例和输出语言,同时逐字保留源数据。

主要功能

  1. 01将内容整理为信息图结构
  2. 02从 20 种布局中选择
  3. 03从 17 种视觉风格中选择
  4. 04设置画幅比例和语言
  5. 05逐字保留源数据

适用场景

  1. 01可视化流程或时间线
  2. 02对比选项或类别
  3. 03将粘贴内容制作成信息图
  4. 04准备本地化的信息图提示词

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/freestylefly/canghe-skills --skill canghe-infographic

安装后在 Claude Code 中输入/canghe-infographic确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

references/
analysis-framework.md
base-prompt.md
structured-content-template.md
references/layouts/
bento-grid.md
binary-comparison.md
bridge.md
circular-flow.md
comic-strip.md
comparison-matrix.md
dashboard.md
funnel.md
hierarchical-layers.md
hub-spoke.md
iceberg.md
isometric-map.md
jigsaw.md
linear-progression.md
periodic-table.md
story-mountain.md
structural-breakdown.md
tree-branching.md
venn-diagram.md
winding-roadmap.md
references/styles/
aged-academia.md
bold-graphic.md
chalkboard.md
claymation.md
corporate-memphis.md
craft-handmade.md
cyberpunk-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

选项

选项值
--layout20 个选项(参见布局图库),默认值:bento-grid
--style17 个选项(参见风格图库),默认值:craft-handmade
--aspectlandscape(16:9)、portrait(9:16)、square(1:1)
--langen、zh、ja 等

布局图库

布局最适合
linear-progression时间线、流程、教程
binary-comparisonA 与 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手绘、纸艺(默认)
claymation3D 黏土造型、定格动画
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 与 Bbinary-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

  1. 保存源内容(文件路径或粘贴内容 → source.md)
    • 备份规则:如果 source.md 已存在,将其重命名为 source-backup-YYYYMMDD-HHMMSS.md
  2. 分析:主题、数据类型、复杂度、语气、受众
  3. 检测源语言和用户语言
  4. 提取用户输入中的设计说明
  5. 保存分析结果
    • 备份规则:如果 analysis.md 已存在,将其重命名为 analysis-backup-YYYYMMDD-HHMMSS.md

详细格式参见 references/analysis-framework.md。

第 2 步:生成结构化内容 → structured-content.md

将内容转换为信息图结构:

  1. 标题和学习目标
  2. 各部分包含:核心概念、内容(原文照录)、视觉元素、文本标签
  3. 数据点(所有统计数据/引文均须准确照录)
  4. 用户提供的设计说明

规则:仅使用 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

合并以下内容:

  1. references/layouts/<layout>.md 中的布局定义
  2. references/styles/<style>.md 中的样式定义
  3. references/base-prompt.md 中的基础模板
  4. 第 2 步生成的结构化内容
  5. 所有文本均使用已确认的语言
第 6 步:生成图像
  1. 选择可用的图像生成技能(如有多个,询问用户)
  2. 检查现有文件:生成前检查 infographic.png 是否存在
    • 如果存在:将其重命名为 infographic-backup-YYYYMMDD-HHMMSS.png
  3. 使用提示词文件和输出路径进行调用
  4. 如果失败,自动重试一次
第 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。

评论

支持 Markdown