手把手教你用扣子搭AI智能体，0代码开发「春节头像生成器」微信小程序

春节前，我发布了一款微信小程序「春节头像秀」（欢迎体验），帮用户生成专属的春节头像。

我，一个小小的 AI 产品经理，不懂编程，一行代码都没写，竟然独立完成策划、设计、开发、测试、发布的全流程工作，上线了这款具备 AI 生成能力的微信小程序。

你是否会好奇，我是怎么做到的？

这篇就聊聊，我是怎么一步步设计与开发这款 AI 产品的。

内容很长，实操为主，不过相信你看完，也能自己搭建 AI 智能体。

简单来说，我是用扣子搭建一个 AI 应用，再发布到微信小程序。

扣子 Coze 平台（coze.cn），是字节跳动出的 AI 应用开发平台。

他们把各种常用的大模型都准备好了，我们不用会编程，只需拖拖拽拽，就能搭一个满足业务逻辑的工作流，发布 AI 智能体。

去年底，扣子发布 AI 应用，提供一套常用的前端 UI 组件，不用写代码，徒手就能搭一个产品的前端 UI 界面。

而且，还能直接发布成 H5、抖音或微信小程序。

在我看来，AI 应用具备前端操作界面和后端处理能力，才是完整的 AI 智能体。

AI 时代，真是人人都能开发自己的产品，门槛非常低。

AI 智能体 + 微信小程序，是目前做 MVP（最小可行产品），去验证可行性和需求最简单的方式。

产品经理还可以用它来发布作品，证明个人能力。

了解完扣子，咱们来看看，如何用它开发这款小程序？

基本思路：在扣子上创建应用、搭建工作流、设计用户操作界面、关联用户界面与工作流，最后测试发布。

1. 梳理需求，明确业务流程

原本，我想做一个红包封面生成器，但太多人做了，又想到还有许多人在春节或国庆时，会换具有节日氛围的头像。

以往「国庆头像」的做法，是在头像图片上加一个边框、添加文字。现在有 AI，可以整点不一样的玩法。

我快速在扣子上验证可行性，果然还蛮简单的。

总结一下，需求想实现的效果：

• 用户上传头像后，选择传统模板，直接给头像加上模板的边框文字。

• 用户上传头像后，选择 AI 模板，用 AI 将头像背景换成有节日氛围的背景，或者给头像主体加点有节日特色的装饰内容，头像主体保持不变。

• 用户可查看生成过的头像。

梳理好需求，这个产品的业务流程就清晰了，作为产品经理，我习惯把流程图画出来：

1）生成头像流程

2）查询生成记录流程

2. 搭建工作流，实现业务流程与功能

现在开始把想法变为功能。

首先，进入扣子平台的「工作空间」，点击右上角的「创建」按钮，在弹出框中选「创建应用」。

这正是 AI 应用，有用户操作界面的完整智能体；而创建智能体只能对话，不适合做复杂操作的功能。

创建好后，进入应用编辑界面，在「业务逻辑」页面下，新建一个工作流来实现生成头像的功能。

这个生成头像的工作流并不复杂，只有 6 个环节，容我一个个讲。

1）开始节点

每个工作流都会有一个开始节点，用来接收用户输入的信息。

根据需求，这里要添加 2 个输入参数：image 接收用户上传的头像图片，style 接收用户选择的模板类型。

2）选择器节点

这个节点，用来判断用户选择了什么模板，以决定工作流要走哪条分支。

我把传统和 AI 两类模板合在一起，用数字识别，方便与前端界面关联。

3）图片处理节点

传统模板，用画板节点，在画板设置中添加引用头像，打开画板编辑界面，上传提前准备好的模板底图，调整好图片的层级、尺寸大小就完事啦。

我设计了 3 款传统模板底图，因此，用 3 个画板节点，配置方法相同。

至于模板底图素材，创客贴、稿定设计这些设计平台上非常多，你可以选喜欢的来用。

AI 模板，用指令编辑插件，它能根据一句话直接修改原有图片。

配置也简单，只有 2 个输入参数：原图引用上传的头像，提示词填写修改要求。

我设计了 6 个 AI 模板，有 6 个节点，每个节点配置一句提示词。

以「喜庆灯笼」模板为例，提示词如下：

将原始图片背景替换为新年灯笼场景，同时完全保持人物主体特征、表情和轮廓不变。在主体人物后方的背景层添加灯笼装饰，灯笼采用珊瑚红色调，分别位于画面左右两侧的远景区域。灯笼大小适度，位于主体人物肩部以上区域，散发温润的奶白色光晕，光线均匀柔和。背景自然虚化，与灯笼光效融合。整体画面通透明亮，突出主体人物的前景层次。

4）整合信息节点

由于有多个模板，为方便结束节点引用输入数据，加多这个节点，把每个模板图片处理节点的输出信息拼接起来，统一输出。

5）数据库节点

要供用户查询生成过的头像，得把每次生成的头像记录下来。

添加一个数据库节点，点数据库节点配置中「数据表」右边的「 + 」，新建一个数据表。

数据表配置如图：

添加好数据表，回到数据库节点，配置「输入参数」与「SQL」，具体如下图所示。

如果你不会 SQL 语句，别慌，点「SQL」右边的按钮，输入你的需求，用 AI 帮你生成 SQL 语句（我也是这么干的）。

6）结束节点

每个工作流都会有一个结束节点，配置选择「返回变量」，在输出变量中，输出参数值引用「整合信息」文本处理节点的输出结果。

7）试运行

最后，点击「试运行」，模拟用户的实际操作，上传图片、输入模板，看工作流是否能正常运行。

调试通过，这个工作流才算完成。

8）查询生成记录

查询生成记录的工作流，非常简单，只有 3 个节点，分别是开始、数据库和结束。

• 开始节点，无需配置。

• 数据库节点，添加前面新建的数据库表，用 AI 生成查询数据库的 SQL 语句。

• 结束节点，选择「返回变量」，输出参数值引用「数据库」节点的输出结果。

同样，我们要点试运行，看工作流是否正常。调试通过后，这两个实现业务流程的工作流就搞定啦。

3.设计页面结构与UI，搭建用户界面

前面搭建的工作流，实现了产品的后端功能。

接下来，我们为产品设计一个好用的操作界面。

点「用户界面」标签，选择「小程序和 H5」，点「开始搭建」。

进入「用户界面」编辑页面，左边是 UI 组件，如按钮、输入框等，拖到中间画布，可以设计界面，右边可对组件进行设置。

用户界面的搭建比较灵活，你可以根据需求设计布局和样式，这里重点介绍搭建思路，以及如何关联工作流。

根据需求，前端页面只需 3 个：首页、制作详情、我的页面。

1）首页

用户界面核心是首页，由 3 个部分组成，分别是：上传图片组件、选择风格模板、「立即制作」按钮。

核心功能：当用户击「立即制作」按钮时，把用户上传的图片和选择的模板信息，传给工作流，调用工作流干活。

在首页先添加一个表单组件，把上传图片组件和选择模板的组件拖到表单里。

选择风格模板，用「下拉选择」组件，给每个选项设置「选项值」，要与工作流中的「选择器」模板分支对应。

我总共做了 9 个模板，「选项值」，设置成从 1 到 9。

为优化交互体验，我用多种组件和事件组合自定义了一套「选择」组件，但设置繁琐，模板一多，配置更麻烦，容易出错，不建议用这种方式。估计扣子后续会出更多「选择」组件。

接着，选中首页的表单组件，点右侧表单设置中的「事件」标签，新建一个事件：提交成功时，调用生成头像工作流，入参配置如下。

image:{{ ImageUpload1.value[0] }}style:{{ Picker1.value }}

然后，再新建一个事件：提交成功时，自动跳转到「制作详情」页。

最后，点「立即制作」按钮，给它也新建一个事件：点击按钮时，提交首页的表单组件。

2）制作详情页

制作详情页，主要实现：生成中，显示加载动画；生成后，展示生成图片。从而让用户感知状态变化、看到结果。配置方法如下。

加载动画：添加一个容器，可见性设置为{{ !生成头像工作流名称.loading }}，再拖入一个图片组件，在图片组件属性中上传加载动画 gif。

生成图片：添加一个容器，可见性设置为{{ 生成头像工作流名称.loading }}；再拖入一个图片组件，绑定数据{{ 生成头像工作流名称.data.output }}，接收工作流输出的结果。

3）我的页面

我的页面，用来显示生成记录列表。

首先，拖入一个纵向列表组件，在右侧设置数据绑定查询数据库工作流。

接着，点列表中的图片组件，在右侧设置绑定数据为{{ item.查询数据库字段名称 }}。

然后，点页面名称，新建 2 个事件：

页面加载时、下拉刷新时，都调用查询数据库工作流。

至此，这个 AI 应用的前后端功能都完成啦。

4. 测试发布上线

进入测试环节，在「用户界面」点击预览按钮，把自己当作用户玩一玩，看看功能有没有问题。

测试通过，就可以发布。

发布微信小程序，需提前到微信公众平台（mp.weixin.qq.com）注册账号，按平台指引，完成小程序信息填写、备案、认证等操作。

备案通过后，再回到扣子 AI 应用的发布页面，填写版本号，在发布平台-微信小程序中点击配置，填写微信小程序后台的 AppID，点击保存，提交发布。

然后，耐心等待微信审核通过，你将拥有一个自己开发的微信小程序。

AI 时代，人人都可以借助 AI 创造出自己的作品。

这个「春节头像秀」AI 应用，我还发布到扣子商店，欢迎体验！

扣子商店地址：

https://www.coze.cn/s/iPb1sCc3/

小程序：春节头像秀

如能看到这，感谢你的耐心。

原创保姆级教程不易，随手点个赞、推荐、转发吧，您的转发和支持是我持续创作的动力，下次见。

项目管理工具x「多人协作文档」，这才是你想要的项目协作工具！

了解更多

产品经理四月

查看原文：手把手教你用扣子搭AI智能体，0代码开发「春节头像生成器」微信小程序

文章来源：

产品经理四月

扫码关注公众号