电商主图与详情页配图的AI工作流:从信息清单到排版落地

一、主图的信息密度决定了点击率

电商和内容站的配图有一个共同点:第一眼要能说明"这是干什么的"。

很多AI生成的图很好看,但看完不知道卖什么——因为画面里没有信息。

我现在的做法是先写信息,再画图。

二、先写一张"信息清单"

出图前,先把要表达的东西列清楚:

```

产品是什么(形态、颜色、材质)

核心卖点(一句话)

使用场景(谁在哪里用)

情绪(干净、温暖、专业、神秘)

必须出现的道具(1-2个)

```

这五行写完,画面就有了靐子。

三、主图:一个主体 + 一个环境

主图最怕两件事:背景太厨房、元素太多。

我的固定构图:主体占画面 50%-65%,背后留出环境但保持模糊,光源从左上方来。

提示词示例:

```

产品摄影,米白色陶瓷杯子,表面哑光,

放在浅灰木桌上,旁边一片干柠檬,

左侧窗光,背景是暖灰墙面并虚化,

主体占画面三分之二,俯抷15度,

不要文字,不要多余物品,不要高对比 HDR

```

主体占比和俯抷角度写死了,返工次数会明显降低。

四、详情页配图:一次出三张

详情页不是一张图能解决的。我通常一次出三张:

一张全景(场景),一张局部(细节),一张对比(使用前后或尺寸对比)。

三张图的风格词必须一致,不然拼在一页里会很跳。

五、排版环节别用美工刀切图

图做完还要落地到页面。很多时候不是图不好,是放上去之后变形、留白过多、与文字挤压。

这类问题在组件库的示例页里能直接看出来。比如 Bootstrap 组件实验室 把卡片、轮播、图库这些组件的展示效果都做成了可交互页面,基于 5.3.8 版本,你改一下宽度就能看到图在窄屏下的真实表现。比凭空想象靠谱。

六、文字千万别交给模型

主图上的促销标签、价格、押韵短句,AI 经常写错字。

我的做法是:图只负责画面,文字用代码或排版工具叠上去。这样改文案不用重新出图,成本低很多。

七、一套完整流程

  1. 写信息清单
  1. 定比例与主体占比
  1. 出三张(全景、局部、对比)
  1. 选图,统一色温
  1. 页面里排版,文字单独叠
  1. 看窄屏效果,再回修

这六步跑熟之后,一套主图加详情图大概一个小时以内能完成。省下来的时间,可以拿去优化文案。