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

0 阅读7分钟

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

例如:

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

更具吸引力的视觉效果

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

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

通过 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》的日常松弛感,加入极其轻微的胶片颗粒感以增加真实度。

动手尝试并深入学习

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

示例项目

go.functorz.com/aMhmMd8z

学习视频

小Z结论

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