让 AI 编程智能体把技术配图做成内容资产

在前一篇关于“让智能编程工具驱动浏览器完成页面自动化测试”的实践中，我们已经看到：编程智能体的能力边界远不止“补全代码”，它能读懂任务、拆解步骤、操作外部环境。这篇文章继续往视觉产出的深水区走——技术文章的配图。

很多人的第一反应是打开文生图模型，输入“生成一张科技感封面”。模型很配合，立刻给出一张蓝紫渐变、发光线条、芯片堆叠的图。看起来炫，实际上没有信息、没有上下文，与文章观点毫无关系，只是一层昂贵的“发光滤镜”。高效生图工作流的核心不是“画得更酷”，而是“图片服务于正文”——把图片从装饰品变成内容资产。

一、为什么“科技感”式提示词总在产出废图

1. 模糊形容词是“气味”，不是“指令”

“科技感”“未来感”“高级感”这类词，在图像模型眼里只是一种模糊的风格气味。它们描述的是氛围，而不是画面。模型无法从中推断出：要画哪些实体？实体之间是什么关系？这张图要传达什么信息？于是只能调用训练数据里与该氛围最相关的视觉套路——渐变底色、光效、网格、抽象几何——拼凑出一张“平均意义上的科技图”。

2. 三类典型废图

• 无意义仪表盘：满屏看不懂的曲线与数字，读者不知道它在度量什么；
• 来历不明的机器人：与正文讨论的对象没有任何对应关系；
• 悬浮的半透明窗口：模拟某种“未来界面”，但界面里的内容与文章无关。

这些图的共同问题是：既不能解释概念，也不能强化观点。读者滑动浏览时，大脑会自动过滤这类没有信息量的视觉噪音——图等于白配，还拖慢加载。

3. 第一条实操准则：不要让 AI 猜画面，要把画面任务说清楚

对比一下两种提示词的差距：

反例：

生成一张科技感封面，主题是 AI 编程

正例：

画面左侧是一个杂乱的代码编辑器窗口，满屏报错与临时补丁；
右侧是从代码中提炼出的一张简洁逻辑架构图，模块方框整齐排列；
中间用一道光束连接两侧，表达"从混乱到有序"的转换。
整体冷色调，扁平插画风格，不出现任何品牌标识。

具体实体、明确关系、清晰用途——这是生图提示词的三块基石。反例只给了氛围，正例给的是一份构图脚本。

二、配图的任务化：按信息职责安排，而不是按固定间距

1. “路灯式布图”为什么不好

不少作者的习惯是每写两段插一张图，像给文章按固定间距装路灯。这种均匀分布忽略了配图的本质——图是信息设计的手段，不是节奏填充物。该有图的位置没有图，读者会卡在抽象描述里出不来；不该有图的位置硬塞图，反而稀释注意力。

2. 深度文章中配图的四种典型任务

（1）解释抽象概念。 当文字解释成本很高时，一张示意图能把理解成本降低一个数量级。例如讲“模型上下文窗口”，与其堆砌术语，不如画一个装水的杯子：水是当前对话内容，杯壁是窗口上限，水满则溢出（早期内容被截断）。读者一眼就懂。

（2）呈现逻辑对比。 讨论“传统手工流程”与“自动化流程”的差异时，左右对照构图最有效：左列是人工逐步操作，右列是工具链自动串联，相同环节横向对齐。对比图的关键是“结构对齐”——两列的行数与颗粒度要一致，否则对比失效。

（3）承接结构转折。 当文章从“痛点分析”转向“解决方案”，读者的注意力需要重新锚定。一张浓缩全文主线的思维导图或路线图，能帮读者把碎片信息归位，再带着全局视角进入下半篇。

（4）强化关键观点。 文章的核心金句值得做成视觉信息卡：大字号观点加极简图形背景。这类图可截取、可传播，相当于文章在社交场景里的“封面摘要”。

3. 规划原则：先定任务，再定形式

动笔生图前先回答：这个位置为什么需要一张图？它承担上面哪种任务？任务决定形式——概念解释用示意图，逻辑对比用对照图，结构转折用导图，观点强化用信息卡。形式服从任务，而不是反过来。

三、把配图规划交给编程智能体：一套可复用的工作流

编程智能体恰好擅长这件事：它能完整读入 Markdown 草稿、分析结构、产出结构化清单、维护文件命名、批量执行重复操作。整个工作流可拆成五步。

步骤 1：让智能体通读草稿，输出配图需求清单

请通读我这篇文章的草稿，完成配图规划：
1. 找出 3 个最需要配图的关键位置；
2. 对每个位置说明：为什么这里需要配图（对应解释概念/逻辑对比/
   结构转折/观点强化中的哪一种）；
3. 给出建议的图形式（流程图/对比图/示意图/信息卡）；
4. 用一句话概括这张图要传达的核心信息。
只输出清单，暂不生成图片。

步骤 2：人工审核清单。 智能体给出的是候选方案，取舍权在人。逐条确认：这个位置真的需要图吗？任务类型判断得对吗？优先级符合文章重心吗？这一步花五分钟，能省掉后面成片返工的时间。

步骤 3：为每张图撰写结构化提示词。 建议固定五个字段：主体（画什么实体）、关系（实体间如何连接或对照）、构图（分栏/流向/放射）、风格（全文统一的插画风格与色调约束）、文字（图中标签尽量少，复杂文字后期叠加）。其中风格字段建议全文复用同一段描述，这是保证视觉一致性的关键。

步骤 4：批量生成与资产管理。 主流云平台（如百度智能云）普遍提供通用的文生图服务类别，配合智能体的脚本能力，可以把“生成—落盘—插入占位符”串成流水线：图片按语义化命名存入资产目录，正文用标准图片语法引用，占位符与文件一一对应。后续替换图片时只需覆盖同名文件，正文无需改动。

article/
├── draft.md
└── assets/
    ├── fig-01-context-window.png
    ├── fig-02-manual-vs-auto.png
    └── fig-03-roadmap.png

步骤 5：成稿复检。 按三条验收标准过一遍全文：

• 信息量：删掉这张图，文章是否受损？若不受损，说明它只是装饰品；
• 对应性：图中的每个元素能否在正文中找到对应概念？
• 一致性：风格、色调、文字样式是否与全文其他图统一？

四、常见的坑与规避方法

1. 过度装饰：光效、粒子、渐变堆得越多，信息密度越低，装饰元素只保留服务于构图的最低限度；
2. 图内文字失控：当前图像模型渲染长文本仍不可靠，图中文字应控制在几个短标签以内，正文性内容用排版工具后期叠加；
3. 风格漂移：每张图单独生成时风格容易各说各话，解法是把风格描述固化成一段“风格片段”，每次生成都原样拼进提示词；
4. 一次成型心态：把生成当作搜索而非抽奖——同一提示词出多张，横向比较后再迭代提示词，通常两三轮即可收敛。

结语

配图不是写作完成后的“美化工序”，而是与行文同步的信息设计。智能体负责把流程跑顺：读稿、规划、生成提示词、管理资产；人负责做判断：这张图该不该存在、它传达的信息对不对。把图片从装饰品变成内容资产后，读者感受到的不是“这篇文章图真多”，而是“这篇文章真容易懂”。同一套任务化思路，也完全可以迁移到封面设计、数据图表与流程图制作中——视觉产出的大门，才刚刚打开。