一、写作者的集体困境：文章配图为什么比封面难十倍？

做过公众号、知识星球、内部周报或教学课件的人都有体会：找一张合适的题图容易，做一张能把事说清楚的文中配图极难。

封面图可以用模板——铺一张 Unsplash 高清图，叠上大号标题，基本过关。但文章正文中那些用来解释「系统架构怎么流转」「杠杆原理受力方向如何」「某 AI 工作流的分支判断逻辑」的配图，是真正意义上的信息图形（Information Graphics / Explanatory Illustrations），它们承载的功能不是装饰，而是压缩认知成本。

目前主流做法有三种，各有硬伤：

• 直接贴软件截图：密密麻麻的坐标轴、未清理的 UI 噪点、中英混排的字号失调，读者要在脑内自行"去噪"才能提取信息，体验极差。
• 让通用 AI 生图：Midjourney / FLUX 能出极美的插画，但往往画的是"概念的氛围感"——比如你说"API 调用流程"，它给你画一台发光的服务器加光纤，谁调谁、先鉴权还是先解析响应完全没体现。漂亮，但看了依然不懂。
• 手搓 PPT 或 draw.io：能讲清楚，但耗时。调字体、对齐、配色、导出，一张图半小时起步，内容创作者很难持续投入。

歸藏（op7418，《歸藏的 AI 工具箱》作者）在实战中碰到了同样的问题——给 Claude 文章配 3:4 社交媒体图时，顺手用 Codex 调 GPT-Image 2.0 生成了几张白底、克制 3D 材质、带中文标签的解释图，效果远超预期：远看像杂志内页，近看标注清晰可读。于是他把这套能力从"能跑的提示词"工程化为一个开源 Claude Code / Codex / Agent 可用的 Skill——guizang-material-illustration（歸藏材质插图 Skill），专为解决"文章核心解释图"这个细分但高频的痛点。

GitHub：GitHub - op7418/guizang-material-illustration: 归藏的材质插画 skill：生成带字解释图、图表美化和参考辅助配图。 · GitHub

---

二、这个 Skill 到底解决什么——以及不解决什么

先划清边界很重要。guizang-material-illustration 只负责一件事：把你提供的文字、笔记、数据或产品说明，变成一张带中文标签的解释性插图。 图内有箭头、空间关系、标注，读者扫一眼能抓住你要表达的概念或流程。

它不做小红书卡片的完整排版（那是 guizang-social-card-skill 的职责），不做 PPT 页面结构设计（那是 guizang-ppt-skill 的事），不修人像写真，不生成长文海报。

 适合用它生成的图

场景类型	举例
知识解释 / 概念拆解图	AI Agent 的 Memory-Tool-Planning 三角关系、Zettelkasten 卡片系统
工作汇报配图	项目进度状态图、风险决策树、产品路线图
产品机制 / 系统架构图	OAuth2 授权流、RAG 检索链路、微服务调用关系
数据图表美化	柱状图、折线图、甘特图、桑基图、热力图、漏斗图（从数据重绘）
教学材料配图	小学杠杆原理（标支点/用力点/阻力点）、中学电磁感应（标磁感线方向）
人文观点配图	丝绸之路商路示意图、哲学概念抽象关系图
社交卡片中心图 / PPT 主视觉	先出中心插图，再交给排版 Skill 或 PPT Skill 组合

 不适合的场景

完整小红书 3:4 多图排版、PPT 幻灯片结构排版、真实摄影修图、人像艺术写真、严谨科研出版级数据图（需统计学软件校验）。

---

三、视觉语言：为什么它看起来"专业且不廉价"

Skill 输出的图统一遵循一套经设计的视觉体系，而非随机生图：

• 底色：纯净白底（或微暖白），模拟摄影棚均匀漫反射光，避免干扰信息。
• 主体材质：克制的哑光 3D 几何体或抽象物件（圆角方块、圆柱、管道、薄片），带轻微投影和景深，模拟"摆在白色桌面上拍的产品静物"。
• 点缀色：默认 International Klein Blue（IKB 蓝），也可指定柠檬黄、安全橙等，保持整套文档/文章中配图色调一致。
• 中文标签：2~5 个汉字短标签，直接渲染在图内洁净区域或标注板上——不是图外 HTML 标签，不是水印，是图的一部分。
• 无冗余装饰：杜绝飘散粒子、霓虹光晕、无意义渐变，一切视觉元素服务于"标注此物是什么 / 此箭头表示什么"。

这套语言让生成的图天然适配公众号正文、Notion 文档、飞书知识库和 PPT——插入后不像"AI 生成的图"，更像专业信息设计师手工制作。

---

四、从"能跑的 Prompt"到工业级 Skill——六大工程化细节

原作者反复强调：一段偶然出好图的提示词 ≠ 别人拿过去也能稳定出好图的 Skill。后者需要在多个环节针对性处理，这也是 guizang-material-illustration 的核心价值所在。

4.1 多场景模板拆分与统一视觉约束

最初版本只能处理简单流程图。实际上配图需求涵盖：工作汇报（层级/进度/风险）、数据图表（需材质化表达）、教育解释图（必须标注准确方位）、人文意象图（氛围与表意平衡）。

Skill 对每类场景单独设计了：

• 视觉结构模板（节点排布逻辑、箭头样式、标注位预留）
• 提示词片段（描述材质、光影、视角）
• 统一约束（白底+3D 材质+点缀色+图内标签规范）

确保不管生成概念图还是数据图，读者能认出"出自同一套视觉系统"。

4.2 冷门概念与 Logo 的参考检索前置

当你让 AI 画"PKCE 授权流程图"或"Zettelkasten 卡片系统示意图"，通用多模态模型往往不知道这些术语对应的典型视觉范式。Skill 内置一道判断逻辑：Agent 生成前先评估概念常见度。若判定为冷门（小众管理框架、特定实验装置、新产品 Logo、历史文化器物），则先调用检索获取参考信息和参考图片，提取视觉线索——轮廓、配色惯例、标志性形状——再将这些线索注入生成提示词。

关键点：参考图只用来理解"事物长什么样"，绝不照搬其画风或水印。最终输出仍回归歸藏材质插图风格。

4.3 强制图内中文标签——纠正 Agent 的"偷懒本能"

GPT-Image 2.0 中文生成能力已不错，但 Agent 协调图像模型时常犯一个错：它知道图像模型写文字可能偶有错字，索性不让图像模型写文字，改为在图片外以 HTML 叠加标签。结果你拿到一张漂亮但无标注的装饰图，读者须来回对照图文——解释力归零。

Skill 在提示词层多次强化约束：

• 标签必须渲染在图像像素内（非外挂 HTML）
• 单标签限 2~5 个汉字
• 指定空间锚点（左上标注板 / 元件右侧 / 箭头起止旁）
• 要求放在高对比度洁净区域

经过多轮调参，目前标签准确率已稳定在可用水平。

4.4 图表"语义抽取→重绘"，而非截图换皮

最直觉的做法：把丑图表截图给模型说"美化一下"。但模型会继承原图的糟糕特征（拥挤坐标轴、低对比色、畸形数据点分布），只是换了配色——这是"换皮"不是"重设计"。

Skill 走语义抽取路径：

1. Agent 从原图截图或原始数据表中提取：图表类型、标题、横纵坐标含义与单位、各类别顺序、数据值、需强调的极值/异常点、核心结论。
2. 将上述纯语义信息交给 GPT-Image 2.0，从零绘制全新材质化图表——更大标题区、清晰数据柱/线、旁侧可加小场景图标辅助理解。

最终图表信息密度降、可读性升，且风格与其他解释图统一。

4.5 反模式（Anti-Pattern）纠正与交付前 QA

AI 配图有五类高频错误，不防必踩：

• 画成纯氛围插画，图内无任何文字标注
• 图内塞整段说明文字（＞10 字），字号过小根本读不了
• 中文标签错别字、乱码、指标签指错对象
• 提示词内容泄露——把生成用 prompt 原文当装饰文字渲染在图上
• 参考图照搬——把检索到的参考图水印、低质背景、原有 UI 控件一块复制进来

Skill 在交付节点前插入 QA 审核步骤：Agent 逐项核验标签准确性、数据与原文一致、画面未被裁切、无水印乱码、无 prompt 泄露。任一项不通过则触发重生成，不靠人工打补丁。

4.6 Agent Skill 的运行机制简述

对使用者而言，guizang-material-illustration 是一个符合 Claude Code / Codex Skill 规范的目录（含 SKILL.md、assets/、references/）。Agent 读取 SKILL.md 理解：何时触发此 Skill、如何判断图文类型、调用什么提示词模板、图像生成后如何做 QA。你只需用自然语言描述需求，Agent 自动完成类型判别→参考检索（如需）→提示词拼装→调图→审核→交付。

---

五、安装与典型使用示例

安装（推荐方式）

对 Claude Code / Codex / WorkBuddy 等支持 Skill 的 Agent 说：

帮我安装 guizang-material-illustration Skill：
npx skills add https://github.com/op7418/guizang-material-illustration --skill guizang-material-illustration

或手动克隆至 ~/.claude/skills/guizang-material-illustration 并检查 SKILL.md 存在。

 注：Skill 默认调用 GPT-Image 2.0 / 兼容的图像生成后端，需在 Agent 环境中配置对应 API Key。

自然语言调用示例

用歸藏的材质插画 Skill，帮我把这段产品说明做成一张带中文标签的机制图：
[粘贴产品 OAuth2 三方登录流程说明]

把下面这篇文章挑 3 个核心概念，各生成一张带字配图：
[粘贴全文或核心段落]

帮我把这张 Excel 数据的柱状图截图，重新画成歸藏材质风格图表（保留数据值，强调最大值）。

这段 PKCE 授权码流程说明较抽象，先用参考检索再生成流程图。

给初中物理"杠杆原理"做配图，标出支点、动力臂、阻力臂、动力方向、阻力方向。

生成结果可直接喂给 guizang-social-card-skill（做小红书/公众号卡片）或 guizang-ppt-skill（置入 PPT 页面）。

---

六、进阶思路：Skill 组合构建内容生产流水线

单个 Skill 解决单点问题，真正的效率来自组合：

博客/公众号发布流水线示例

1. 用写作 Skill 或人工完成 Markdown 草稿
2. guizang-material-illustration 抽取核心概念/数据 → 生成文中解释图
3. guizang-social-card-skill 用生成好的图做小红书 3:4 轮播卡片 + 公众号头图
4. guizang-ppt-skill（如需）将全文转成带配图的演示文稿
5. 排版 Skill 将 Markdown → 微信兼容 HTML，发布

这就是 Agent Skill 生态的价值——每个工具只做一件的事做到极致，通过 Agent 编排串成端到端管线。

---

七、小结

guizang-material-illustration 本质上是对 "AI 生图→信息图" 这道工序的工程化封装。它不追求让图更艺术，而是让图更诚实、更可读、更统一——白底材质风、中文标签内嵌、冷门概念先检索再画、图表语义重绘而非换皮、交付前自动 QA。

对于频繁产出知识型内容（公众号、Wiki、教学材料、产品文档、周报）的个人或团队，这个 Skill 能把配图质量从"勉强能用"拉升到"专业加分项"，且几乎不增加你的时间成本。