概述

写技术博客最痛苦的环节不是写代码、不是组织逻辑，而是配图。手绘信息图太花时间，用设计工具门槛高，搜素材图又千篇一律。

Baoyu Article Illustrator 解决了这个问题。它是一个 Claude Code Skill，能分析文章结构、识别需要配图的位置、通过 Type x Style x Palette 三维体系生成插图，最后自动插入 Markdown 引用。25K+ 安装量、21K+ GitHub Star，是目前最成熟的 AI 文章配图方案。

npx skills add https://github.com/jimliu/baoyu-skills --skill baoyu-article-illustrator

核心设计：三维配图体系

传统 AI 配图的问题是生成的图片风格不一致——第一张是水彩风，第二张变成赛博朋克，整篇文章看起来像拼贴画。Baoyu 用三个维度约束一致性：

维度	控制什么	选项
Type（类型）	信息结构	infographic、scene、flowchart、comparison、framework、timeline
Style（风格）	渲染方式	sketch-notes、vector-illustration、notion、blueprint、watercolor、screen-print 等 22 种
Palette（配色）	色彩方案	macaron（马卡龙）、warm（暖色）、neon（霓虹）、mono-ink（黑白墨线）

三维自由组合：--type infographic --style vector-illustration --palette macaron。同一篇文章的所有插图锁定相同的 Style + Palette，只有 Type 按内容变化——这样保证了全文视觉统一。

6 种Type（类型）详解

类型	适用场景	信息结构
infographic	数据、指标、技术概念	分区布局，图标 + 标签 + 数据
scene	叙事、情感、氛围	焦点主体 + 环境氛围
flowchart	流程、工作流、步骤	步骤节点 + 箭头连接
comparison	对比、选择、前后	左右分栏 + 视觉分隔
framework	架构、模型、概念框架	节点 + 关系连线
timeline	历史、演变、里程碑	时间轴 + 事件标记

22 种Style（风格）一览

风格决定了插图的视觉语言。为了降低选择成本，Baoyu 提供 7 个"核心风格"作为快速入口：

核心风格	映射到	适用场景
hand-drawn	sketch-notes	默认推荐。 暖色奶油纸底 + 黑色手绘线条 + 柔和色块——教育、概念解释、通用知识文章
vector	vector-illustration	知识文章、教程、技术内容
minimal-flat	notion	通用、知识分享、SaaS 产品
sci-fi	blueprint	AI、前沿技术、系统设计
editorial	editorial	流程、数据、新闻
scene	warm/watercolor	叙事、情感、生活方式
poster	screen-print	评论、社论、文化、电影

当内容没有明显倾向时，默认使用 hand-drawn（sketch-notes）。

完整风格列表还包括：elegant、minimal、chalkboard、fantasy-animation、flat、flat-doodle、nature、pixel-art、playful、retro、sketch、ink-notes、vintage、scientific 等。每种风格都有详细的视觉规范文档。

Type x Style 兼容性矩阵

不是所有类型和风格都适合搭配。Baoyu 内置了兼容性矩阵：

	sketch-notes	vector	notion	blueprint	watercolor	screen-print
infographic	++	++	++	++	+	+
scene	x	+	+	x	++	++
flowchart	++	++	++	++	x	x
comparison	++	++	++	+	+	+
framework	++	++	++	++	x	+
timeline	+	+	++	+	++	+

++ 强烈推荐，+ 兼容，x 不推荐。例如 watercolor（水彩）做 flowchart（流程图）就不合适——水彩的模糊边缘会让流程箭头不清晰。

4 种Palette（配色）方案

配色	描述	适用
macaron	马卡龙色：柔和蓝 #A8D8EA、薄荷绿 #B5E5CF、薰衣草 #D5C6E0、蜜桃 #FFD5C2，奶油底	教育、知识、教程
warm	暖色系：暖橙 #ED8936、陶土 #C05621、金黄 #F6AD55，蜜桃底，无冷色	品牌、产品、生活方式
neon	霓虹色：粉 + 青 + 黄，暗紫底	游戏、复古、流行文化
mono-ink	黑色墨线为主，珊瑚红 #E8655A 和淡青 #5FA8A8 做语义点缀，纯白底	专业视觉笔记、前后对比

配色会覆盖风格的默认颜色，但保留风格的纹理和渲染规则。

预设快捷方式

对于不想逐个选 Type/Style/Palette 的用户，Baoyu 提供了 20+ 个预设：

预设	组合	适用
hand-drawn-edu	infographic + sketch-notes + macaron	默认预设。 通用知识文章
hand-drawn-edu-flow	flowchart + sketch-notes + macaron	手绘流程图
hand-drawn-edu-compare	comparison + sketch-notes + macaron	手绘对比图
tech-explainer	infographic + blueprint	API 文档、系统指标
system-design	framework + blueprint	架构图、系统设计
ink-notes-compare	comparison + ink-notes + mono-ink	前后对比、思维转变
ink-notes-framework	framework + ink-notes + mono-ink	系统类比、架构隐喻
versus	comparison + vector-illustration	技术对比、框架评测
storytelling	scene + warm	个人散文、成长故事
opinion-piece	scene + screen-print	评论文章、文化评论
data-report	infographic + editorial	数据报告、指标仪表盘

使用方式：--preset tech-explainer，一个参数搞定三个维度。

6 步工作流

Baoyu 的工作流是严格顺序执行的，每一步都有明确的输入输出：

Step 1: 预检查（加载配置、检测参考图）
   ↓
Step 2: 分析内容（识别文章类型、核心论点、配图位置）
   ↓
Step 3: 确认设置（向用户确认类型/密度/风格/配色）  ← 强制门控
   ↓
Step 4: 生成大纲（outline.md，每张图的位置/目的/文件名）
   ↓
Step 5: 生成图片（先写 prompt 文件，再批量调用后端）
   ↓
Step 6: 最终化（插入 Markdown 图片引用）

Step 3 的确认门控

这是一个硬性门控——除非用户明确说"直接生成"或"跳过确认"，否则必须在这里停下来确认。用一次 AskUserQuestion 最多问 4 个问题：

问题	是否必须
Q1: 选预设还是手动选类型	必须
Q2: 配图密度（minimal/balanced/per-section/rich）	必须
Q3: 风格选择	如果选了预设可跳过
Q4: 配色选择	如果预设包含配色可跳过

Step 5 的 Prompt 文件机制

这是整个 skill 最精巧的设计。生成图片之前，必须先把每张图的完整 prompt 写入独立文件：

{output-dir}/
├── outline.md              ← 配图大纲
├── prompts/
│   ├── 01-infographic-concept-name.md    ← 第 1 张图的 prompt
│   ├── 02-flowchart-workflow.md          ← 第 2 张图的 prompt
│   └── 03-comparison-before-after.md     ← 第 3 张图的 prompt
├── 01-infographic-concept-name.png       ← 生成的图片
├── 02-flowchart-workflow.png
└── 03-comparison-before-after.png

Prompt 文件有 YAML frontmatter + 结构化正文：

---
illustration_id: 01
type: infographic
style: sketch-notes
palette: macaron
---

Single-page hand-drawn educational infographic in a clean presentation style.
Warm cream paper background, black hand-drawn lines with slight wobble...

LAYOUT (top → bottom):
- TOP: Bold hand-lettered title...
- MIDDLE: 2-6 rounded-rectangle info boxes...
- BOTTOM: One short hand-lettered takeaway sentence...

LABELS: [文章中的实际数据、术语、指标]
COLORS: Warm Cream background (#F5F0E8); Black (#1A1A1A)...
STYLE: Minimal, well-organized, airy...
ASPECT: 16:9

为什么要保存 prompt 文件？

1. 可复现性 —— 换个图片生成后端（比如从 DALL-E 换成通义万相），prompt 还在，不用重新构思
2. 可迭代 —— 某张图不满意，改 prompt 重新生成就行，不影响其他图
3. 可审计 —— 回头看每张图是怎么生成的

Prompt 构造规则

Prompt 不是随便写的，每种类型都有结构化模板。以 infographic（信息图）为例：

[标题] - Data Visualization

Layout: [grid/radial/hierarchical]

ZONES:
- Zone 1: [具体数据点和数值]
- Zone 2: [对比和指标]
- Zone 3: [总结/结论]

LABELS: [文章中的实际数字、百分比、术语]
COLORS: [语义化颜色映射]
STYLE: [风格特征]
ASPECT: 16:9

几条硬规则：

• LABELS 必须包含文章中的实际数据——不是"一些数据"，而是"延迟从 320ms 降到 64ms"
• 隐喻要可视化底层概念，不是字面意思——文章说"电锯切西瓜"，不要画一把电锯和一个西瓜，要画底层想表达的"大材小用"概念
• 颜色用 hex 值做渲染指导，但不要让模型把 hex 值画成可见文字
• 人物用简化卡通/剪影，不要写实人脸
• 文字要大、醒目、手写风格，只放关键词不放长段落

图片生成后端

Baoyu 本身不生成图片，它是"导演"，需要一个"摄影师"后端。支持的后端按优先级：

1. Codex imagegen —— 如果在 Codex 环境中运行，优先用内置的 imagegen
2. baoyu-image-gen —— 配套 skill，支持 10+ 服务商（OpenAI DALL-E、Google Imagen、DashScope 通义万相、即梦、MiniMax 等）
3. 其他运行时原生工具 —— 如 Hermes 的 image_generate
4. 以上都没有 —— 告诉用户，让用户决定

一条铁律：绝不用 SVG、HTML、Canvas 等代码渲染替代光栅图片生成。 即使看起来像"画个流程图用 SVG 就行了"，也不行——消费端需要的是位图资产。

批量生成策略

一篇文章通常需要 3-8 张配图，逐张生成太慢。Baoyu 的批量策略：

1. 后端原生批量接口（如果支持）—— 最快
2. 运行时并行工具调用 —— 默认 4 张一批（generation_batch_size: 4）
3. 顺序生成 —— 兜底

规则：所有 prompt 文件必须先全部写完，才能开始第一批生成。失败的单独重试一次，成功的不重新生成。

输出目录结构

配置值	图片路径	Markdown 引用路径
imgs-subdir（默认）	{文章目录}/imgs/	imgs/01-infographic-xxx.png
same-dir	{文章目录}/	01-infographic-xxx.png
illustrations-subdir	{文章目录}/illustrations/	illustrations/01-infographic-xxx.png
independent	illustrations/{主题slug}/	illustrations/{主题slug}/01-infographic-xxx.png

最终 Step 6 会在文章的 Markdown 中自动插入图片引用：

![24个检测模式×4维度分类](illustrations/02-infographic-24-patterns.png)

实战示例

示例 1：为技术博客文章配图

假设有一篇介绍 “Snapshot-Ref 模型” 的技术文章，调用 baoyu-article-illustrator：

Step 1: 预检查：

skill内部处理的，加载配置、检测参考图等。

Step 2 分析结果：

• 内容类型：Technical
• 核心论点：两层架构、token 效率对比、能力矩阵、Electron 流程
• 配图位置：架构图后、对比段后、能力表后、流程描述后

Step 3 确认：

• Q1: 预设 → hand-drawn-edu（infographic + sketch-notes + macaron）
• Q2: 密度 → per-section（每个章节至少一张）
• Q3: 跳过（预设已包含风格）

Step 4 大纲（outline.md）：

## Illustration 1
**Position**: 两层架构段落后
**Purpose**: 可视化 SKILL.md 发现层 + CLI 执行层的分离
**Visual Content**: 上下两层方框，上层标注"SKILL.md 静态"，下层标注"Rust CLI 动态"
**Filename**: 01-framework-two-layer-arch.png

## Illustration 2
**Position**: Token 效率对比后
**Purpose**: 直观展示 200-400 token vs 3000-5000 token 的差距
**Visual Content**: 左右对比，左侧密密麻麻的 HTML，右侧简洁的 @eN 列表
**Filename**: 02-comparison-token-efficiency.png

## Illustration 3
**Position**: 能力矩阵表格后
**Purpose**: 将 11 类命令可视化为环形或网格布局
**Visual Content**: 11 个图标卡片，每个代表一类能力
**Filename**: 03-infographic-capability-matrix.png

Step 5 生成 Prompt 文件并调用后端渲染。

Step 6 在 Markdown 中插入引用：

![两层架构：SKILL.md 发现层 + CLI 执行层](illustrations/agent-browser/01-framework-two-layer-arch.png)

示例 2：使用不同预设的效果

同一篇关于"微服务 vs 单体架构"的文章，选择不同预设的视觉差异：

hand-drawn-edu（默认）：
奶油色纸底，黑色手绘线条略带抖动，左右两个马卡龙色圆角方框，手写标签，底部一行手绘总结句。温暖亲切，适合教程。

tech-explainer（技术风）：
蓝图底色 + 白色网格线，精确的几何方框，等宽字体标签，蓝/白配色。冷静专业，适合架构文档。

ink-notes-compare（墨线对比风）：
纯白底，黑色墨线为主，左侧珊瑚红标注痛点（单体的问题），右侧淡青标注优势（微服务的好处），中间手绘弧线箭头标注"思维转变"。适合观点类文章。

opinion-piece（丝印海报风）：
暗底 + 2-3 种平面色块 + 半色调网点纹理，大胆剪影，负空间讲故事。适合评论性文章。

示例 3：参考图驱动配图

如果你已有一张喜欢的风格参考图：

用户：为这篇文章配图，参考这个风格 → [提供一张图片路径]

Baoyu 会：

1. 将参考图复制到 references/01-ref-style.png
2. 分析参考图的颜色、风格、构图
3. 根据分析结果，在 prompt 中注入提取的风格特征
4. 所有生成的插图都会继承参考图的视觉风格

参考图有三种用法：

用法	说明
direct	作为主要视觉参考，传给 --ref 参数
style	只提取风格特征，融入 prompt 文本
palette	只提取配色方案，替换默认色彩

示例 4：补图和修图

文章写完后又加了一个章节：

用户：在"安全设计"章节后补一张配图

Baoyu 会读取现有的 outline.md，在合适位置追加新条目，生成新的 prompt 文件和图片，更新 Markdown 引用。已有的图片不会被影响。

某张图的文字渲染不对：

用户：第 2 张图的标签文字错了

Baoyu 不会用 ImageMagick 之类的工具在位图上涂改文字（这是硬性禁止的），而是修改 prompt 文件，用新文件名重新生成，保留旧图供对比。

配置系统（EXTEND.md）

首次使用时会运行 first-time-setup 引导配置，生成 EXTEND.md 保存偏好：

preferred_image_backend: auto      # 图片生成后端
preferred_type: infographic        # 默认类型
preferred_style: sketch-notes      # 默认风格
preferred_palette: macaron         # 默认配色
language: zh                       # 标签语言
default_output_dir: imgs-subdir    # 输出目录
generation_batch_size: 4           # 并行生成数

配置文件按优先级查找三个位置：项目级 .baoyu-skills/ → XDG 配置目录 → 用户 HOME 目录。项目级配置可以让不同项目用不同风格。

设计哲学总结

Baoyu Article Illustrator 的设计有几个值得学习的地方：

1. 三维正交分解

Type（信息结构）x Style（渲染方式）x Palette（色彩方案）三个维度正交，自由组合但保证一致性。这比"给我一个好看的图"有效得多。

2. Prompt 文件作为中间产物

把 prompt 持久化到文件，与图片生成后端解耦。换后端不用重新构思，修图只改 prompt 重新渲染。这是软件工程中"关注点分离"在 AI 工作流中的应用。

3. 确认门控

默认不自动生成，必须经过用户确认。这在 AI Agent 越来越自主的趋势下是一个务实的选择——配图涉及审美判断，AI 不应该替用户做这个决定。

4. 禁止后处理修补

生成的位图有文字错误时，禁止用代码工具涂改，只能重新生成。这保证了图片的完整性和可追溯性。

5. 内容驱动选择

不是让用户从 22 种风格里盲选，而是分析文章内容后自动推荐。技术文章推荐 blueprint，教程推荐 sketch-notes，叙事推荐 warm——让 AI 做内容分析，让用户做最终确认。