背景介绍：

最近在使用coze制作爆款Agent智能体的过程中发现一个问题，如果Agent输出是多模态的，则实际在智能体中是无法进行整个图片、视频等多模态样式预览的，最多只是给到一个链接形式，对于用户不太友好。

---

如下图所示：

因此，为了解决这一问题，我们采用coze提供的卡片的配置，通过配置卡片以及结合工作流的变量，实现整个智能体输出的预排版，从而提高 用户体验以及整体的美观程度。如下图所示：

---

实现过程：

coze卡片是在coze智能体的一个配置选项，类似于工作流、插件等，可单独自定义设置，最终再整合到Agent中。coze卡片主要是可以自定义预设一些Agent输出的模版，比如输出的图文模版、视频模版以以及飞书表单模版等等，通过一系列的模版配置，增加Agent内容输出的结构性，提高用户体验。

1. 创建coze卡片

在coze官网中，我们可以找到资源选项，通过新建资源来创建卡片，如下图所示：

可以先看下coze卡片的官方教程：

2. coze卡片配置（重点）

我们可以根据本身智能体的一些特性进行制作不同类型的卡片，如果你的Agent主要是用于输出一些多模态的数据，那么就可以设置图文、音视频这些预览的内容，如果只是文字形式的，可以直接采用内容排版模版。都是比较不错的，我今天大家演示的就是我目前做的一个表情包图片生成的Agent，因此我们只需要图片即可。

2.1 卡片组件以及排版

卡片这边我们看提供了很多种组件，其中包括常见的布局组件、基础组件、表单等一系列的组件，我们可以根据自身的情况，进行拖拽，可视化自动Agent的输出模版。

当前我们只需要一个图片组件作为输出内容即可。

提示：默认可以先上传一张本地图片作为默认图片，然后根据图片的属性进行设置，比如操作以及样式等。

2.2 新建变量

提示：在上述卡片排版的过程中，我们需要哪些组件，后面我就要根据具体的组件进行变量设置，保证组件与变量一一对应。

根据工作流里面End node节点输出，我们来确定coze卡片中具体变量的类型。如下图所示表情包工作流最后节点输出的是Array<image> 列表类型。

新建图片变量，填写变量名称可以是中文、变量类型选择我们就可以选择Array列表，然后 默认值就是可以随便附上一个值就行。

提示：这里我们采用工作流的输出链表下来设置默认值。

	[
    	"https://s.coze.cn/t/W8FA34TkNK8/",
    	"https://s.coze.cn/t/gE4Ofraso2U/"
	]

提示： 由于我们现在使用的工作流输出Array列形式，因此需要特殊设置！！！！

针对图片的属性，我们要针对性的进行配置。比如，上述变量我们设置的就是列表，因此不止一张图片，我们需要在 高级配置的循环渲染绑定到我们刚建的变量。这样就可以根据实际情况输出多个图片。

与此同时，我们也需要把图片的url进行替换，选择列表的子元素item。

具体操作如下图：

2.3 预览与发布

通过左上角，点击预览或者发布即可。

3. 与Agent的结合

3.1 Agent配置

在Agent配置中，我们可以通过工作流来绑定刚刚发布的卡片。

提示：为什么是工作流绑定卡片？我们刚才也看到了，卡片中针对不同的组件是要配置变量，这个变量一般还是跟工作流进行绑定的。比如我要输出预览图片，那么工作流output的结果就必然是一个image的url。因此卡片的图片变量就必须绑定这个url，才能实现真正的效果。

绑定刚建好的卡片模版之后，将变量也进行绑定，这样基本就可以显示完美输出了！

4、效果

如下图所示，Agent直接输出的就是我们设置好的模版，结合工作流返回的数据就直接预览了图片。

---

5、结论：

今天主要还是跟大家分享了一个冷门但是好用的操作coze卡片，上述我只是简单的演示了从新建卡片到最终Agent的结合，整体效果还是不错。后续大家可以根据这个思路，自定义的制作自己专属Agent输出的卡片。

✅ 若有需要相关工作流的朋友，烦请点击关注，届时我会将其私发给大家。

✨ 至于对于整个工作流有兴趣的朋友可以点赞 + 私信，我这边私下发给大家 ~