参考：官方文档 消息卡片（如加载较慢，可稍后刷新）。
本文结合公开教程/实践文章对“卡片的组成、种类、适用场景、支持平台与价值”做结构化整理，便于落地使用（如：Coze智能体-卡片、消息卡片创建技巧）。

---

一、什么是消息卡片

消息卡片是一种 结构化的可视化消息载体：把文字、图片、按钮、链接等内容以卡片形式呈现在对话中，用户可“一眼看懂 + 一键操作”，常用于把工作流/插件的结果做成可交互 UI（参考：Coze智能体-卡片）。

---

二、卡片的种类（从形态与能力划分）

2.1 按呈现形态

类型	说明	典型场景
单张卡片	一次回复展示一张卡片	天气摘要、订单详情、审批结果
卡片列表（竖向列表）	同一结构重复渲染多条数据	商品/门店列表、航班/车次列表、搜索结果列表

许多卡片搭建工具会提供“单卡/列表”模板入口（参考：Coze智能体-卡片）。

2.2 按组件能力（组成结构）

组件类别	说明	常见组件
布局组件	用于排版分区	单列/双列/网格、容器、分组
基础组件	用于展示与交互	文本、图片、按钮、链接等

（参考：卡片由布局组件与基础组件构成的描述：🧩扣子卡片的制作及使用）

---

三、哪些平台支持/使用了卡片

不同渠道对“富 UI 消息”的支持程度不同。公开资料中，消息卡片在豆包客户端与飞书客户端可生效，且常见实践是把卡片用于“工作流/插件输出”（参考：Coze智能体-卡片）。

平台/渠道	是否支持卡片（公开信息）	备注
豆包客户端	✅ 支持	适合 C 端对话与内容展示
飞书客户端	✅ 支持	适合办公协作/审批/通知等
其他渠道	⚠️ 以官方文档为准	同一张卡片在不同渠道可能降级为纯文本

最终以官方文档与控制台渠道说明为准：消息卡片。

---

四、如何使用卡片（方法与步骤）

4.1 全流程（从制作到上线）

4.2 三种常见制作方式

方式	优点	适合谁	备注
模板创建	最快上手	新手/快速交付	常见为单卡/列表模板（参考：Coze智能体-卡片）
AI 生成	省设计时间	需要快速产出 UI	需要给清楚的数据字段与展示要求（参考：消息卡片创建技巧）
手动搭建（拖拽组件）	可控性强	追求精细化交互	适合复杂场景（参考：消息卡片创建技巧）

4.3 在工作流里输出卡片（推荐思路）

步骤	你要做什么	产出
1	工作流获取数据（HTTP/API/代码块/知识库等）	结构化结果（对象/数组）
2	选择“卡片输出/卡片消息”节点（或在回复节点选择卡片）	绑定某张卡片
3	映射变量（把结果字段映射到卡片变量）	卡片能渲染真实数据
4	预览调试	确认布局、空值、列表渲染
5	发布并在目标平台测试	验证渠道兼容性

---

五、适用场景（什么时候该用卡片）

5.1 高收益场景清单

场景	为什么适合卡片	卡片里常放什么
检索/搜索结果	列表展示更直观，减少长文本	标题、摘要、来源、按钮“查看详情”
商品/门店/内容推荐	支持图文+按钮，提高转化	图片、价格/评分、购买/导航按钮
订单/工单状态	状态与操作集中展示	状态、时间线、按钮“催单/取消/转人工”
审批/通知	一键处理，减少来回沟通	关键信息、按钮“同意/驳回/查看”
数据摘要（报表/指标）	结构化数字更易读	指标卡、趋势、异常提示

5.2 不建议用卡片的场景

场景	原因	建议
长篇解释/教程	卡片承载文字不如 Markdown	用 Markdown/富文本输出
目标渠道不支持卡片	会降级为文本，体验不一致	先确认渠道支持（见官方文档）

---

六、卡片的价值（为什么它值得做）

价值点	说明	直接收益
结构化呈现	信息按字段展示，少跑偏	更易读、更少误解
可交互	按钮/链接引导下一步	更高转化、更少对话轮次
弱化“长文本”副作用	列表/详情拆开	降低信息过载
与工作流强绑定	数据→变量映射	稳定输出、可测试
更接近“产品 UI”	对话变成交互式界面	体验更像 App，而非纯聊天

---

七、最佳实践与注意事项

7.1 数据与变量设计

建议	原因
卡片变量命名与工作流字段一致	映射更省事、少出错
先做“空值兜底”	避免渲染空白导致用户困惑
列表渲染用统一结构	便于循环渲染与复用

7.2 渠道兼容与降级

注意点	建议
同一卡片不同平台可能表现不同	上线前在目标平台实测
不支持卡片的平台可能降级文本	准备“同等信息量”的文本备用输出

7.3 维护与迭代

注意点	建议
修改卡片后未生效	重新检查数据映射/重新发布并回归测试（实践经验见：消息卡片创建技巧）

---

八、示例：天气服务卡片（思路）

字段建议（示例）：城市、日期、天气、最高/最低温、风向风力、湿度、穿衣建议。

---

新闻卡片示例：

组件中选择单列布局

这里支持循环渲染 ，开启循环渲染。

拉标题，以及文本

新建变量

[
    {
        "title":"新闻标题",
        "time":"新闻时间",
        "conent":"新闻内容",
        "url":"新闻url"
    }
]

设置新闻标题

同理设置新闻时间 和 新闻内容 。

创建新闻机器人

新增插件

点击绑定卡片数据

，之前创建的卡片有点问题，这里需要修改一下 。
singlecolumn1 中开启循环渲染 。

如果都开启，会将出现下面的这种效果 。标题和和时间放在一起了。

修改之后的效果如下

参考链接

• 消息卡片（官方）
• Coze智能体-卡片
• 消息卡片创建技巧（WayToAGI）
• 🧩扣子卡片的制作及使用