把电商出图流程打包成开源 Skill，换任何产品直接批量生成详情页

月鹿造物AI时代独立创作者笔记

我用代码画了一张草稿，然后让 AI 帮我上色。

10 屏电商详情页，从文案到出图，全程没打开过设计软件。

这种多屏长图，任何一个 AI 模型都直接生成不出来。布局太复杂，屏与屏之间要衔接，文字要精确——纯靠提示词根本控不住。

我的做法是：给出产品信息，AI 自动规划分几屏、每屏放什么，再用代码逐屏画精确的线框，最后让 AI 只负责上色。

代码控制"在哪"，AI 控制"好看"。各干各的活，出错率最低。

1

整个流程长什么样

四步，但我只管第一步。

第一步，给产品信息。

我就说了一句：NFC 橙汁，6 瓶装，39.9 元。

AI 自动帮我规划好了 10 屏的内容结构——首屏放什么、第二屏讲什么痛点、第三屏怎么排卖点卡片，每一屏的文案也一起写好了。然后把这些内容直接变成 SVG 代码——一张精确的黑白线框图，每个元素放在哪、多大、什么文字，全用坐标锁死。

我不用写代码，也不用想分几屏、每屏放什么，只管看渲染出来的效果，觉得哪里不对就喊改。

后面三步，AI 自动跑完。

截图、压缩、发给 GPT Image 2 上色、下载结果、拼接长图——这些全是 AI 自己串起来的流水线。10 屏并行上色，不到 10 分钟全部跑完。

GPT 做的事就是——把黑白草稿变成有质感的设计图。布局不动，只加颜色、光影、产品图。

我从头到尾做的事就两件：说清楚每屏放什么，看完效果说"行"或者"改"。

2

换个品类试试

光做饮料不够说明问题。我又换了个完全不同的品类——福州茉莉花茶，250g 罐装，68 元。

同样的流程：说清楚产品信息 → AI 自动规划 5 屏内容 → 生成线框 → 上色 → 拼接。

配色从橙色系变成了莫兰迪绿，产品从玻璃瓶橙汁变成铁罐茶叶——但我做的事完全一样：说了产品名和价格，剩下的全是 AI 跑完的。

有个细节值得说一下：多屏长图拼接后，相邻屏的背景色如果不匹配，衔接处会有明显的色差断层。

线框阶段可以尽量让相邻屏的边缘颜色一致，但 GPT 上色的时候不一定完全听话——毕竟每屏是独立生成的，色调多少会有偏差。最后还是要靠 PS 手动修一下衔接处，几分钟的事。

3

换个品类再来一次

再来一个完全不同的品类——手工燕麦曲奇饼干，29.9 元。

这次走快闪版 5 屏（低客单价零食不需要 FAQ 和详细工艺，用户决策快）。

同样的流程：文案 → 线框 → 上色 → 拼接。

三个完全不同的品类，橙汁、茶叶、曲奇——配色不同、产品不同，但流程完全一样。

换产品不用重新设计，换文案重新跑一遍就行。

4

产品图怎么保持一致

做电商图有一个坑：10 屏里同一个产品要出现好几次，如果每次让 AI 重新画，橙汁瓶子可能每屏长得都不一样。

解决办法很简单：你只需要上传一张商品图，剩下的全自动。

推荐用 Codex 加我的 Skill 一起使用——安装 Skill 后，发送商品图，它会自动把这张图"垫"进每一屏，生成线框、补色、拼接，全流程一气呵成，每屏的产品长得都一样。

5

做成了 Skill

这套流程用了几次之后，我把它整理成了两个 Skill：

代码控图（yuelu-codeimg） —— 底层通用能力。给它任何内容，它帮你走完"线框→截图→上色→拼接"的全流程。做海报、做长图、做技能展示图都能用。

电商详情页（yuelu-ecom） —— 基于代码控图的电商专用模块。你只需要说产品名和价格，它根据客单价自动匹配模板：

150 元以下 → 快闪版 5 屏（零食、日用品）

250-200 元 → 标准版 10 屏（食品、护肤）

3200 元以上 → 深度版 12 屏（电子产品、保健品）

没有文案？它帮你写。没有产品图？它帮你生成。没有配色参考？它根据品类自动推荐。

开源地址：github.com/lunaark/yuelu-codeimg

6

这套方法适合谁

不适合追求像素级完美的专业设计师——他们用 AI + PS 效率更高。

适合的是：有产品要卖、有内容要展示、不懂设计的人、用 AI 生图但总觉得布局控不住的人。

而且这套方法天然适合批量。换个产品名、换段文案，同一套模板重新跑一遍就行——不用重新设计、不用重新调布局。

从橙汁到茶叶到曲奇，三个完全不同的品类，流程一模一样。

"

代码负责准，AI 负责美。批量的事，模板负责。

其实不只是电商图——我自己的技能全景图也是这么做的：

18 个 Skill、4 大板块、116 条温度互动——全用代码画线框，GPT 上色，一张图讲完整个体系。

你需要的不是设计能力，是知道画面里应该放什么、放在哪。这个判断，代码帮你锁住。剩下的交给 AI。

月鹿造物 · 不会代码也能造物