参考：官方文档 消息卡片（如加载较慢，可稍后刷新）。
本文结合公开教程/实践文章对"卡片的组成、种类、适用场景、支持平台与价值"做结构化整理，便于落地使用（如：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 维护与迭代
| 注意点 | 建议 |
|---|---|
| 修改卡片后未生效 | 重新检查数据映射/重新发布并回归测试（实践经验见：消息卡片创建技巧） |
八、示例：天气服务卡片（思路）
用户：杭州今天天气
工作流：调用天气 API
代码块：整理字段/补齐星期几
卡片输出：天气卡片
豆包/飞书展示
字段建议（示例）：城市、日期、天气、最高/最低温、风向风力、湿度、穿衣建议。
新闻卡片示例：
组件中选择单列布局
这里支持循环渲染 ，开启循环渲染。
拉标题，以及文本
新建变量
java
[
{
"title":"新闻标题",
"time":"新闻时间",
"conent":"新闻内容",
"url":"新闻url"
}
]
设置新闻标题
同理设置新闻时间 和 新闻内容 。
创建新闻机器人
新增插件
点击绑定卡片数据
，之前创建的卡片有点问题，这里需要修改一下 。
singlecolumn1 中开启循环渲染 。
如果都开启，会将出现下面的这种效果 。标题和和时间放在一起了。
修改之后的效果如下
