# 配图

生成图最常见的失败不是画得不好，而是画得太满：细节越丰富越像图库照片，放进版面后没有重点，也和页面没有关系。好的配图要先承担意思，再承担气氛，最后和页面接成一个整体。

## 先让图承担意思

生成之前先写一句：这张图要让人一眼看懂什么？答不上来就先别生成。“一张好看的使用场景”不是答案；“产品把一堆混乱变成了哪几个清楚的结果”才是。

用对比把信息编进图里。整体统一成一种低调的材质或颜色，比如白模、单色、失焦或剪影，只让承载信息的少数几处有颜色、光或细节。例如白色仓库模型里只有出了异常的两排货架亮成橙色，灰度地图上只有正在配送的路线是彩色。所有地方都一样精细，就等于没有重点；第一版通常就是这样失败的。

选能和页面“接上”的主体：

- 能跨过两块色面分界的单个物件。
- 能延伸出画面的线：线缆、轨道、河流、胶片、纸带。
- 能在上面标注的空间：模型、地图、剖面、平面图。

这样的主体，之后能和页面里的线、标注和区块连成一体；一张自给自足的风景照做不到。

## 写提示词

按固定顺序写，每项一两句：

1. **主体与表现形式**：什么东西，用什么体裁呈现（照片、插画、模型或图解），体裁从页面的方向推出。
2. **视角与镜头**：机位的高度和角度；焦段和景深。
3. **构图**：主体在画面里的位置和占比，四周留多少边距，哪一块留空给文字。要整件物体完整入画，就写明“完整地放在画面内，四周留出宽松边距”，否则常被裁掉一角，之后没法排版。
4. **背景**：写出页面实际使用的十六进制色值，或者要求透明背景。
5. **材质与光**：主光方向、辅光、质感。同一页的多张图用同一个光向。
6. **重点**：用什么对比让哪几处成为焦点，其余部分怎样退后。
7. **排除**：不要文字、标志、界面、屏幕内容；透明物件写明“地面不要阴影”。

文字、界面和数据一律不让生图模型画：会画错，改不了，也不能被选中、翻译和读屏。它们放在页面上，用真实元素压在图上，或用引线连到图上。

## 生成后放进页面再判断

在真实页面、真实尺寸里看，不在图片查看器里判断。单独看很好的图，放进版面后常常主体太满、朝向不对、留白在错的位置。

不对就改提示词重新生成，并写清要改什么，例如“除了三处重点，其余全部改成白色”“把整个模型收进画面”。不要围着一张不合适的图改版式。同一批里挑最能排版的一张，不挑细节最多的那张。

## 让图和页面接成一体

**背景融合。** 不透明的图，从图的四角实际取色，页面背景用同一个值；四条边都淡出到这个颜色，不加框，也不放进圆角卡片。只淡出一侧时，其余三边在宽屏上会露出矩形接缝。淡出可以用 CSS 遮罩，也可以在导出时直接把边缘渐隐成页面色值，后者不增加样式，适合样式体积受限的页面。生成图的底色常常不均匀，靠边缘会偏色，要在实际显示尺寸下检查接缝。

**透明图。** 先放在最终背景上检查边缘、白边和残留的棋盘格；检查透明通道要看像素，不能看文件后缀。阴影不烘焙在图里，由页面按实际背景加投影，这样换了背景也对。

**跨越结构。** 透明物件放在两个色块或两个区块的分界线上，让它同时属于两边。

**图和代码接力。** 生成图负责代码做不出来的材质和光，例如金属、玻璃、模型、光影。代码负责需要精确、可编辑、会延续的部分，例如从图里延伸出去的线、路径和标注。如果图里有一段本该延续到页面的部分，就把它裁掉，改用矢量接着画。这样它能准确穿过版面，带上真实文字，并在不同宽度下重新走线。

**标注。** 在图上标注用细引线加文字，不用带底色和阴影的气泡卡片。引线端点要对准图里的真实位置：图在版面里用固定的尺寸和位置，按图片像素换算坐标。窄屏上隐藏标注，或改成图下的列表，不让它们漂移到错误的位置。

**窄屏裁切。** 不把整张大场景等比缩小到看不清。从原图裁出焦点区域另存一张给窄屏用，或用对象定位对准焦点。桌面和手机两种裁切，都要保住承载信息的那几处。

**一张图用多次。** 结尾或其他区块可以用同一张图的局部特写，比再生成一张光线和风格对不上的图更统一。

## 让一张画当舞台

另一种用法正好相反：图不讲信息，只给气氛，界面保持黑白克制，全页只用一种有笔触的画当唯一的颜色来源，例如油画、水粉、水彩或版画。

- **画当舞台，界面在上面演示。** 把真实界面的简化版放在画上，画从四周露出来。滚动时画固定不动，只换前面的界面内容，和“滚动叙事”接得上。
- **大胆裁切。** 只留画的一角或一个局部，接近抽象，不和界面抢。题材不必和产品字面相关，但气质要对得上：快、静、暖或者松弛。
- **松和紧互相衬托。** 画越松，界面越要精确、干净；两者一起出现，彼此都更好看。
- **用得少。** 一张画贯穿全页，或者只在两三处出现，例如价格卡的顶端和页脚；不要每个区块配一张。同一页的画统一画种和笔触。
- **演示用简化过的真实界面。** 次要内容虚化或换成骨架，只把要讲的那一处做清楚；数字对比直接用界面元素画出来，例如两条长短不同的进度条，而不是另做一张图表。

## 文件与说明

- 按显示尺寸的 2 倍导出，不直接内嵌原始大图。不透明的图用 JPEG 或 WebP，透明的用 WebP 或 PNG；单张控制在几百 KB 以内。内嵌成 data URL 后体积会再大约三分之一。
- 保留提示词、原图和处理后的版本，写清每张图的用途和处理方式。
- 生成图不冒充真实产品、真实场所或真实人物。虚构产品的小样，在页脚注明图片由 AI 生成。