成品链接：https://www.coze.cn/store/project/7536886217943171122?entity_id=1

一、为啥要做这个？

以前，做电商商品图，拍图、P 图，费时又费钱！而AI时代，出来了好多生成图片的工具，可要么效率低，要么模板老套、同质化超严重，根本没法体现咱商品的特色！所以，自己搭一个专属的 AI 商品图助手，又快又好又独特，能批量搞图，并且未来还有无限延展性，是一个非常不错的选择！

二、工具准备 —— 认识 "扣子"

咱要用的工具叫 "扣子"，是字节跳动出的 AI Agent 开发平台。就算咱不会写代码，也能靠它快速配置提示词、调用 AI 大模型，像搭积木一样建工作流，做出智能体或者 AI 应用！

不过注意啦，扣子现在开始收费咯，用 AI 大模型或者官方插件会扣 "资源点"。但别慌，每个免费用户账号每天有 50 个资源点可用！咱要用到的 "背景替换" 插件，每次用会消耗 25 个资源点，算下来每天不花钱也能免费生成 20 张图呢，要是团队有多个账号，完全够使！

三、搭建思路

搭建这个 AI 商品图助手，看着好像复杂，其实就 4 步，超简单：

1. 梳理需求：想清楚咱这助手要咋工作，用户咋操作，要实现啥功能。
2. 搭建工作流：把功能逻辑变成自动化的工作流程。
3. 搭建应用界面：让用户能方便操作、看结果。
4. 测试发布：全面测试，确保好用，然后发布投入使用。

四、梳理需求 —— 让助手 "懂" 咱

简单说，就是搞明白这 AI 助手咋工作，从 3 个核心问题入手：

1. 用户要输入啥？
2. 工具咋处理这些输入？
3. 工具会输出啥给用户？

（一）生成商品图流程

咱希望用户丢一张图给 AI，AI 能快速换背景。但背景咋来呢？用户可以选咱预设的模板，也能自己传背景图，所以得设计两条处理路径：

1. 用户上传商品图（这是起点，得传一张主体清晰、背景简单的图）。
2. 用户选背景参考图：可以从预设的背景模板里选，也能自己传自定义背景图。
3. 助手判断：根据用户选的，走不同处理路径。
4. AI 生成新商品图：选预设模板，AI 就按模板背景生成；选自定义背景图，AI 就用用户传的背景生成。
5. 保存图片到数据库：方便用户以后找。
6. 展示图片给用户：让用户看到最终效果。

（二）查询生成记录流程

用户生成好多图，以后想找咋办？得有个查询历史记录的入口，流程超简单：

1. 用户查询生成记录：在应用界面点 "查看" 按钮。
2. 系统查询数据库：到数据库里找之前存的商品图记录。
3. 系统展示生成记录：把找到的记录清晰展示给用户。

（三）应用界面构思

功能和流程想清楚了，就得设计用户操作的界面，好用的界面能让用户用着超顺手！咱把界面分成三大区域：

1. 区域一：素材准备与操作区。用户在这上传商品原图、选背景（模板或者自定义上传），还能看到背景模板示例图，点生成按钮。
2. 区域二：效果展示区。AI 生成新图后，在这展示。
3. 区域三：历史记录区。列出用户之前生成的图记录，方便查看管理。

五、搭建工作流 —— 让助手 "动" 起来

（一）生成商品图工作流

1. 登录扣子平台，网址：https://www.coze.cn/home ，点右上角 "创建应用"，在弹出框选 "创建应用"。
2. 创建应用：

• 工具空间：相当于电脑文件夹，放应用，选默认 "个人空间" 就行。
• 填应用名称、应用介绍，图标可以自己传，也能让 AI 生成，然后点 "确定"。

3. 新建工作流：进入应用编辑界面，在 "业务逻辑" 标签页下，新建 2 个工作流，分别实现 "生成商品图" 和 "查询生成记录" 功能。先搞 "生成商品图" 工作流：

• 点左侧资源区 "工作流" 右侧「+」，新建工作流，填名称（比如 replace_bg ，只能字母、数字和下划线，还得字母开头）、描述，点 "确定"。

4. 编辑工作流

新建好工作流，能看到默认有 "开始""结束" 两个节点，就像流水线的起点和终点。

接下来一个个加环节，让工作流跑起来：

• 开始节点：

设置用户上传和选择的数据。点开始节点，右侧弹出侧边栏，设置输入参数：

输入参数 1：上传的商品图，变量名设为 pro_image ，变量类型选 image ，勾选必填。

输入参数 2：选择的背景模板，变量名 bg_image_pre ，变量类型 string（就是文本类型，像字母、数字这些）。

输入参数 3：上传的自定义背景图，变量名 bg_image_upload ，变量类型 image 。

• 选择器节点：

判断用户选的是预设模板还是自定义背景图，决定走哪条路径。

点页面下方 "添加节点"，加 "选择器" 节点，连 "开始" 节点。设置条件分支，比如预设 8 个背景模板，用数字 1 – 8 代表，用户选模板 1，就走对应分支；选自定义背景图，走另一条分支。依次点条件分支左边「+」，新增 8 个分支（加上自定义的，共 9 条路径）。

• 背景替换节点：

生成商品图的核心。点 "添加节点"，搜 "背景替换" 添加。这个是扣子官方节点。

使用 8 个预设模板 + 1 个自定义背景图，所以要加 9 个背景替换节点，连 "选择器" 每个分支。

预设模板的背景替换节点，主体图选 pro_image ，背景图上传提前准备好的模板图（模板图可以结合场景用 AI 生成）；

自定义背景的背景替换节点，主体图选 pro_image ，背景图选 bg_image_upload 。

• 文本处理节点：

因为有多个背景替换节点，会有多个结果，得整合一下。点 "添加节点"，找 "文本处理" 添加。把所有 "背景替换" 节点连到 "整合信息输出（文本处理）" 节点，设置 9 个输入变量，把结果拼接起来，方便输出。

• 数据库节点：

为了记录生成的图，方便用户查询。点左侧资源区 "数据" 右侧「+」，新建数据库。填数据表名称（比如 image_records ）、描述，点 "确定"。

新建数据表，填名称、描述，选 "单用户模式"，新增字段：pro_image（用户传的原图）、bg_image_pre（选的背景模板）、bg_image_cum（传的自定义背景图）、new_image（生成的新图）。

建好表，回到工作流编辑页，点 "添加节点"，选 "新增数据"，连 "整合信息输出" 节点。设置新增条件，选刚建的数据表。

添加字段，对应前面的变量：pro_image 选 "开始" 节点的 pro_image ；bg_image_pre 选 "开始" 节点的 bg_image_pre ；bg_image_cum 选 "开始" 节点的 bg_image_upload ；new_image 选 "整合信息" 节点的 output 。

• 结束节点：

输出结果给前端界面。连 "整合信息" 节点，在右侧 output 变量选 "整合信息节点" 的 output ，这样工作流就跑完啦，生成结果会输出。

试运行：点页面下方 "试运行" 按钮，上传商品图，选背景模板（1 – 8 ）或者传自定义背景图，点 "试运行"，看结果对不对，有问题就调试。

试运行可查看节点运行情况

（二）查询生成记录工作流

• 新建工作流

填名称 (data_display)和描述。

• 查询节点

点 "添加节点"，加 "查询数据" 节点，连 "开始" 和 "结束" 节点。"开始" 节点不用配置。

点 "查询数据" 节点，右侧配置区，数据表选刚建的 gen_records ，查询字段选 bstudio_create_time（创建时间）、new_image（生成的新图），查询条件设 new_image 不为空，排序方式按 bstudio_create_time 从大到小排，查询上限可以设 100（根据需求调整）。

• 结束节点

输出变量 output 选 "查询数据" 节点的 outputList 。

试运行：点 "试运行"，看能不能查到之前生成的记录，没问题就成啦！

六、搭建应用界面 —— 让助手 "好看又好用"

点页面上方 "用户界面" 标签，选 "桌面网页" 类型（因为处理图片，电脑上用更方便），点 "开始搭建"，进入编辑器。

编辑器分三部分：左侧 UI 组件库（有按钮、文字等）、中间画布（用来排界面）、右侧配置区（设置页面或组件属性）。

咱按 "先搭框架，再调局部；从上往下，从左往右" 的原则来：

（一）搭框架

界面分 4 个板块：导航、准备素材、生成结果、生成记录。

先对页面（画布）进行简单设置

搭导航区：从左侧组件库拖个 "容器" 到画布，在右侧设置布局、位置、尺寸、样式，选喜欢的背景颜色。

再拖 3 个容器到画布，作为准备素材、生成结果、生成记录的展示区域，框架就搭好啦。

（二）调局部

1. 设置导航栏

往导航栏容器里再拖个容器，加图片组件（放 logo ）、文本组件（改应用名称，比如 "AI 商品图助手" ）、头像组件（展示用户在扣子平台的头像，系统自动读取），在右侧设置布局、尺寸、样式，让导航栏好看又实用。

2. 设置准备素材区

点准备素材区的容器，右侧设置布局、尺寸、样式。加表单组件，删去不需要的部分，留下标题、选择和按钮组件，用来收集用户上传的图和选择项。再加上传图片组件，设置标题、是否必填、尺寸、样式。

因为有两种模式（选预设背景模板、传自定义背景图 ），所以：

切换模式按钮：加文本组件当标题（比如 "请选择商品背景" ），再加容器和两个按钮组件（"背景模板""自定义背景" ），设置布局、尺寸、样式。点按钮，在右侧 "事件" 里设置点击跳转，"背景模板" 按钮跳转到预设模板选择页面，"自定义背景" 按钮跳转到自定义上传页面。

选择背景模板组件：加选择组件，让用户选背景模板（对应工作流 "选择器" 节点的 1 – 8 数字 ）。

但用户不知道模板啥样，得加模板示例图！先加文本组件当标题（比如 "模板示例" ），再加容器和 4 个子容器，每个子容器加图片组件（放模板示例图 ）和文本组件（简单介绍模板 ）。因为有 8 个模板，复制 4 个子容器，改成对应的模板图和介绍，让用户清楚选的是啥模板。

"立即生成" 按钮：设置按钮尺寸、样式，在右侧 "事件" 里，点 "添加事件"，选 "提交表单"，调用 "生成商品图" 工作流（replace_bg ）

参数配置：pro_image 选上传图片组件的值（{{ImageUpload1.value}} ）；bg_image_pre 选选择组件的值（{{Select1.value}} ）；bg_image_cum 不用填（选自定义背景时才用 ）。

3. 设置生成结果区

加文本组件当标题（比如 "生成结果" ），拖个容器放加载动画和提示文案。拖 "ottie 加载动画" 组件，选喜欢的动画效果，设置尺寸、样式。在右侧 "可见性" 里，点 "常用条件"→"添加条件"：当工作流 replace_bg 的状态为 "加载中" 时显示，让用户知道 AI 在干活。

再加图片组件显示生成的图，在右侧设置：来源选绑定数据→{{replace_bg.data.output}} ；填充方式选 "包含" ；可见性写表达式 {{replace_bg.data}} ，这样工作流生成图后才显示，不然隐藏。最后加文本组件，写 "生成后展示效果"，同样设置可见性，加载时或没结果时隐藏。

4. 设置生成记录区

加文本组件当标题（比如 "生成记录" ），拖容器，加按钮组件（文字设为 "查看" ），在右侧 "事件" 里，点 "添加事件"，调用 "查询生成记录" 工作流（query_record ）。

再加纵向列表组件，删掉不需要的标题，留下图片组件。在右侧设置：数据绑定选工作流 query_record 的输出结果 output ；在 "状态 – 何时加载" 里，添加条件：当工作流 query_record 状态为 "加载中" 时显示加载效果。

列表组件最下层的图片组件，来源选绑定数据→{{item.new_image}} ，关联数据库里生成的商品图。

5. 设置自定义背景页面

因为扣子平台切换标签组件不太方便，咱可以偷懒：复制 "预设背景模板" 页面，稍作修改。

在左侧组件库点 "结构" 标签，切换到页面结构视图，选 "首页"，复制（按 Ctrl + C ）整个页面，在画布空白区粘贴（Ctrl + V ），得到一个一样的新页面。

把新页面名称改成 "自定义背景"，删掉选择背景模板的组件，加图片上传组件，设置好参数。然后在按钮 "事件" 里，调用 "生成商品图" 工作流 replace_bg ，参数配置：pro_image 选新上传组件的值（{{ImageUpload2.value}} ）；bg_image_upload 选上传的值（{{ImageUpload3.value}} ）；bg_image_pre 不用填。

最后设置切换模式的方式：在 "自定义背景" 页面，给 "背景模板" 按钮加事件，点击跳转到 "首页"；在 "首页"，给 "自定义背景" 按钮加事件，点击跳转到 "自定义背景" 页面。

七、测试发布 —— 让助手 "正式上岗"

（一）测试

点 "用户界面" 编辑器右上角 "预览" 按钮，进入预览模式，按预设功能流程测试：选预设模板模式，传图、选模板、点生成，看新图是否生成并展示；选自定义背景模式，传图、传背景、点生成，看效果；再点 "查看" 按钮，看生成记录能不能查到。有问题就调试，直到一切正常！

（二）发布

在预览模式和用户界面编辑器右上角，都有 "发布" 按钮，点 "发布" 进入发布界面。

填版本号、版本描述，选发布到 "扣子" 平台，在 "扣子商店" 下方选 "展示为桌面端"，选好分类（比如 "图像与音视频" ），勾选 "发布到扣子商店"，点左上角 "发布" 按钮。

审核通过后，进入应用编辑界面，点右上角 "发布" 按钮，选发布的版本，应用就能被使用啦！发布后可以分享链接给朋友或团队，让大家用起来！

八、总结

咋样，整个搭建过程是不是超有趣！重点记住：

1. 梳理需求要清楚，把功能和界面逻辑想明白，搭建更顺。
2. 工作流是核心，结合功能流程，设置好每个节点的输入输出，多试运行调试。
3. 应用界面按 "16 字原则" 来，先搭框架再调细节，组件和工作流关联好。
4. 测试发布要认真，确保各种模式都好用，再发布让大家用。

AI 时代，掌握思路、善用工具，咱就能快速做出超好用的专属工具，效率直接拉满！别光看呀，赶紧动手试试，搭建属于自己的 AI 商品图助手，有啥问题或好玩的体验，都可以在评论区分享哟，咱一起玩转 AI ！