手把手教你用 Zion 无代码搭建商品图自动生成系统

在电商场景中，商品展示图往往决定了用户的第一印象。

例如：

不同场景下的商品展示（居家、户外、办公）

更具吸引力的视觉效果

用于广告或社交媒体传播的图片

如果完全依赖人工设计，不仅成本高，也难以快速适配多种场景。

通过 AI 商品图片生成，可以基于一张原始商品图，加上一段场景描述，自动生成新的展示图。

整个过程可以理解为： 上传原图 → 输入需求 → AI 生成新图 → 自动展示与存储。

什么是 AI 商品图片生成以及何时使用

功能或工作流是什么

AI 商品图片生成，是指基于已有商品图片和文本描述，通过 AI 生成新的视觉内容。

在 Zion 中，该流程通常包括：

• 用户上传商品原图
• 输入场景或风格需求
• 行为流调用 AI Agent
• AI 生成新的商品图片
• 数据写入数据库并在页面展示

本质上，这是一个“图片 + 文本 → 新图片”的生成过程。

解决了什么问题

• 商品图设计成本高
• 多场景展示难以批量生产
• 图片素材不足
• 内容更新效率低

通过 AI 自动生成，可以显著提升内容生产效率。

典型使用场景

电商商品展示优化

• 为同一商品生成多种场景图
• 提升商品吸引力

广告与营销素材生成

• 快速生成用于投放的图片
• 支持不同风格测试

社交媒体内容生产

• 生成更符合平台风格的视觉内容
• 提高内容更新频率

商品图批量处理

• 自动生成多版本展示图
• 降低设计成本

AI 设计辅助工具

• 作为设计初稿生成工具
• 提供创意参考

不适用的情况（建议）

• 对图片精度要求极高（如工业设计）
• 商品细节必须完全一致的场景
• 需要严格品牌视觉规范的场景

如何在 Zion 中构建

数据存储

数据模型：创建一个名为 产品 的数据表。

逻辑与状态配置

AI Agent 配置

进入 AI 模块，配置用于生成图片的Agent。

输入 (Inputs)：定义两个参数：原图 (图片) 和 需求 (文本)，用于接收原图和需求描述。

提示词 (Prompt Template)：

角色 (Role)：顶尖商业视觉设计师和高级修图师。

目标 (Goals)：根据接收到的图片和需求生成高质量的产品图。使用 \{{Input/requirement\}} 引用用户输入的需求。

限制 (Constraints)：明确“材质锁定”、“视觉融合”及“模型适配”等规则，确保产品不走样，光影自然。

模型选择：选择支持图像生成的模型（如：纳米香蕉 2-4K）。

输出 (Outputs)：类型设为 纯文本 (Plain text)，并关闭“流式输出”。

行为流 (Actionflow) 构建

开始节点 (Input)：定义输入参数 original_image (图片) 和 requirement (文本)。

执行模式：在右侧面板将执行模式设置为 异步 (Async)。

AI 节点 (Start Conversation)：选择上一步创建的Agent，并将行为流输入参数绑定至Agent的输入项。

添加数据节点 (Save record)：

目标表：选择 产品 表。

字段绑定：original_image 和 requirement 绑定自行为流输入。

结果图处理：使用公式 GET_ITEM 从 AI 节点的返回数组 images 中提取第一项（索引为 0）。

UI 搭建与交互配置

组件结构

输入区域：拖入一个 图片选择器 (用于上传原图) 和一个 文本输入框 (用于填写需求)。在属性面板为文本输入框开启“多行”模式。

触发动作：放置一个 按钮，重命名为“开始生成”。

展示区域：添加一个 列表 组件用于动态显示生成历史，列表内放置一个 图片 组件显示结果。

交互逻辑设置

按钮点击事件：

调用行为流：选择 AI产品图片生成。将图片选择器和文本输入框的值分别绑定到行为流参数。

成功时动作：添加两个“重置输入组件值”动作，用于清空图片选择器和输入框，提升用户体验。

列表配置：

订阅模式下，当异步行为流在后台完成数据插入后，列表会自动刷新并显示新生成的图片。

数据源：选择“远程数据” -> 产品 表。

请求类型：务必选择 订阅 (Subscription)。

数据限额：关闭数据限额。

结果显示与下载：

在列表项内，将 图片 组件的来源绑定为 当前项.结果图。

点击交互：为该图片添加“下载图片”动作，目标图片同样绑定为 当前项.结果图。

功能验证

1. 预览测试：点击编辑器右上角的预览按钮。
2. 操作流程：上传一张产品图，并在输入框输入需求。
3. 结果确认：点击“开始生成”。稍等片刻（AI 生成时间），生成的图片会自动出现在下方的列表中。点击图片即可下载到本地。
4. 数据校验：进入数据库查看 产品 表，确认原图、需求描述和 AI 生成的结果图已正确保存。

如果图片长时间未显示，请确认列表组件的请求类型是否已设置为“订阅”。测试用例参考

场景一：腕表九宫格摄影展示

输入原图&输出结果图：

输入需求描述：

展示形式：精致的 3x3 九宫格（共 9 张图）产品摄影展示。每张图均为正方形比例，采用无缝九宫格布局。
视觉质量：超高分辨率 ，极致锐度，完美的摄影棚光影，干净的留白空间。
美学风格：高端腕表及奢侈品广告风，细腻高级的调色，顶级商业摄影美学 。
九宫格具体内容：
1. 核心主图：腕表在极简展台上的高雅构图。
2. 结构角度：侧向视角，强调表壳外形轮廓与比例。
3. 极致微距：表盘 (Dial) 细节的锐利特写。
4. 局部特征：表冠 (Crown)、按键等标志性设计元素的特写。
5. 触感质感：表带材质（如皮革纹理、金属拉丝等）的特写。
6. 环境互动：腕表与自然元素的互动。
7. 柔性背景：以细腻的亚麻或丝绸织物为衬底。
8. 暗调氛围：戏剧性的强光影对比 (Low-key)，增加神秘感。
9. 内刊排版：带有一丝生活方式氛围的精致编辑构图。

场景二：电商模特街拍

输入原图&输出结果图：

输入需求描述：

产品特征：浅蓝色、浅绿色和米色相间的粗线条纹针织冬装帽和围巾套装。（必须100%保留原图纹理和颜色，保持毛线物理交织逻辑。）。 
目标模特：25岁亚洲女性，极具透明感的清透裸妆（伪素颜），面容柔和自然，必须保留真实的皮肤纹理（如微小的毛孔或细碎的胎毛），拒绝过度磨皮。 
穿搭与动作：模特头上戴着这顶针织帽，脖子上随意但舒适地围着这条针织围巾。她正低头看着一旁，呈现自然的抓拍感，双手随意地插在口袋里。 
搭配服装（核心限制）：模特身穿一件【平滑哑光材质】的米白色纯棉风衣或无领呢子大衣。衣服绝对不能是针织或毛线材质，必须极简无图案，以此凸显帽子和围巾的质感。 
场景与光影：背景是一个极简的日式原木风咖啡馆门前，或者干净的白墙背景。使用柔和的自然漫反射光（阴天光线），画面整体呈现低对比度、低饱和度的胶片质感（Fujifilm aesthetic）。 
画面要求：自然的摄影景深（背景轻微虚化），商品细节极其清晰，画面留白，具有日系杂志《FUDGE》或《CLUÉL》的日常松弛感，加入极其轻微的胶片颗粒感以增加真实度。

动手尝试并深入学习

• 可通过示例项目快速理解整体流程
• 可扩展能力：
• 支持更多语言翻译
• 调整摘要长度规则
• 增加关键词提取或分类能力

示例项目

https://go.functorz.com/aMhmMd8z

学习视频

小Z结论

AI 商品图片生成可以将传统依赖人工设计的流程自动化，通过简单输入即可生成多样化展示图。结合 Zion 的 AI Agent 与行为流能力，可以快速搭建这一能力，并应用于电商、营销与内容生产等场景。