baoyu-infographic 适合将一组有明确关系的信息做成独立图片，例如流程、对比、分类和层级。它把布局与视觉风格分开，让信息结构先决定画面；如果原材料仍混乱或未经核对，应先整理内容再出图。
安装与调用
在项目目录的终端运行下面的命令，只安装这个 Skill 到 Claude Code：
npx skills add jimliu/baoyu-skills --skill baoyu-infographic -a claude-code
需要 Node.js 和可用的 npx。若使用 Codex，把 -a claude-code 换成 -a codex；在对话里明确要求使用 baoyu-infographic 并附上材料，不把终端安装命令当成任务提示。其他客户端应使用自身的技能选择入口。
先把每一个标签当成待校对内容
给出可靠的原始材料和读者需要理解的关系。流程应说明顺序和分支，对比应有同样的维度，分类要确认每项归属；不要让图像模型在排版时顺便发明数据。可以这样输入：
使用 baoyu-infographic 把 process.md 做成横向信息图。
目标是解释设计交接的五步，每步文字与责任人以文件为准。
先保存 structured-content.md，让我检查全部标签和顺序。
建议 linear-progression 布局与 ikea-manual 风格，确认比例、语言和后端后再生成。
默认推荐可以修改：比较两种选择可用 binary-comparison，多个维度可用 comparison-matrix，循环关系可用 circular-flow。布局决定读法，风格决定线条和材质，两者不要混成一句模糊的“科技感”。
第一次练习：先准备能逐项核对的材料
新建 process.md，粘贴下面的练习内容。它是示例流程，不是某团队的真实交接记录：
设计交接五步
1. 设计师：确认页面状态和交互说明。
2. 产品负责人：确认文案和验收条件。
3. 工程师：确认组件与接口依赖。
4. 测试人员：确认正常、空白和错误状态。
5. 项目负责人：确认交付范围与待办事项。
按上面的提示词提交文件，先检查 structured-content.md：应有五步、五个责任角色，顺序与原文一致，没有多出时间、人数或完成率。若内容不对，先修正这份文字，不要进入出图。
确认布局、比例、文字语言和可用后端后再生成。检查结果时逐项对照：五步是否都在，责任人是否错位，箭头顺序是否清楚，中文是否正确。流程图不能因为“好看”而删掉错误状态。没有真实生成图片时，不把这份验收清单写成成功案例。
先配置出图，再控制信息密度
先让 Agent 列出当前可用的图像工具，不要先假定必须购买 API 或申请 Google 密钥。当前 Skill 的后端选择先看这次任务是否明确指定，再看 EXTEND.md 的保存偏好；自动选择时优先当前客户端的原生图像能力。
| 当前条件 | 应怎么做 |
|---|---|
| Codex 环境列有原生 imagegen | 自动选择路径优先使用它，读取该工具自己的参数；不因此要求 GOOGLE_API_KEY。 |
| Cursor 提供 GenerateImage | 使用它自己的文件与参数约定，把比例写进描述，不假设和 Codex 的参数相同。 |
| 没有原生工具，但有一个可用的非原生后端 | 使用已安装后端，例如 baoyu-image-gen，并核对供应商、模型和凭据。 |
| 有多个后端且未明确选择，或偏好设为 ask | 先向用户确认。没有可用后端时停止，先解决渲染工具问题。 |
EXTEND.md 的查找顺序是项目的 .baoyu-skills/baoyu-infographic/、XDG 配置目录、用户主目录下 .baoyu-skills/baoyu-infographic/，第一个找到的设置生效。若总选到意料之外的工具，先查项目偏好和本次明确指定，不要反复重装 Skill。偏好只影响推荐，不自动免除生成前确认。
只有选择 Google API 路径时才需要为那条路径配置自己的 GOOGLE_API_KEY；密钥不要放进 process.md、提示词或 Git。原生工具可能也受账号功能与额度限制，不能把“不需要单独的 Google key”理解为免费无限出图。图中文字较多时，先整理文字再生成。
生成前应保存完整的 prompts/infographic.md，其中的文字和选择才是后续复用与排错的依据。如果只得到布局建议而没有 PNG，要检查实际后端是否调用以及产物保存位置；不要悄悄把 SVG 或 HTML 截图当作此 Skill 要求的栅格结果。图片中的文字有误时修改提示词后重新生成，不用程序覆盖字形来掩盖错误。
工作目录通常在 infographic/主题/，保留来源、analysis.md、structured-content.md、提示文件与 infographic.png。在结构化内容阶段检查所有数值、引语和单位；需要删减文字时先修改输入或明确要求摘要，不要让“更好看”成为偷偷改变原始信息的理由。
成图后按预定阅读顺序逐块查看，在手机尺寸下确认小字、图例、箭头与颜色区分仍清楚。高密度布局只是可选形式，不代表内容越多越专业。如果一张图放不下，应减少范围或分成多张，而不是继续缩小字号。
图中文字错误应更新提示后重生成，保留错误候选帮助比较。精确坐标、统计图或出版级科学数据需要可复核的绘图流程，不应把生成模型画出的比例当成测量结果。最后连同文字版说明保留信息来源，方便后续更新与无图阅读。
让数据对比先通过文字版
例如要比较三种部署方式的成本、适用规模与维护责任，先列一个结构化表：每列使用同样的度量，未知值明确写“未核实”，不要把不同来源的数字直接放在一张图里。对三个对象和三个维度，可以先试 comparison-matrix；若是说明用户从注册到完成任务的步骤，linear-progression 更合适。布局是为信息关系服务的，不能因为默认 bento-grid 好看就拿它装所有内容。
生成前阅读 structured-content.md，逐项核对单位、比较对象、条件和来源。若这个文件已经漏掉例外情况，先修它，再生成。出图后在手机尺寸从头读到尾；若标签太小或顺序不清，减少一张图中的范围，拆成两张主题图。视觉结果无法作为精确数值图表的唯一证明，仍要保留可复制的文字版本；这也方便图片无法加载的读者了解相同信息。
沿箭头检查每一项信息
先验文字结构，再验视觉效果。302.AI 的五场景演示中，咖啡因时间线虽然选对了流程图形式，成图却重复了一个步骤，还放入与主线不相干的内容。做科普或产品说明时，先让 Agent 输出“节点—顺序—每节点一句话”的纯文本清单，删掉重复与无关节点，再确定 layout、style 与比例。生图后沿箭头逐项读一遍，核对数字、术语和顺序；一张看起来专业的图，若让读者按错顺序理解，仍不能发布。