扣子卡片式交互设计实战指南完整版教程

在扣子里做智能体，如果输出还是纯文本，那基本等于——把精心准备的干货，塞进一个牛皮纸信封里扔给对方。用户看到一长段挤在一起的文字，关键信息被淹没，想点击跳转也无从下手。图文并茂、带按钮可交互的新闻摘要或商品列表，全靠消息卡片（Message Card）来实现。

所以，这篇直接聊实战：如何从零搭建一张能用的消息卡片，以及那些最常踩的坑。

确认卡片生效环境与权限前提

动手之前，先干一件事：打开扣子工作流或插件编辑页，右上角「设置」里，找到「消息卡片」开关，确保它是开启状态。

⚠️ 注意，这个开关只在豆包客户端、飞书客户端内生效。一旦用户从微信小程序、网页版或 Telegram 等平台打开，卡片会自动降级为普通文本——没法强制启用，这是平台限制，得认。

另外，卡片创建后只有所有者能编辑或删除。团队管理员和普通成员就算有工作流编辑权限，也改不了别人建的卡片。这块权限边界得心里有数，不然协作时容易白忙活。

搭建单张新闻摘要卡片

两种方式，看习惯选。

方法一：可视化卡片编辑器（新手友好）

在工作流节点末尾加一个「发送消息」节点，点击「+ 添加卡片」，选「单张卡片」模板。然后拖一个「容器」布局组件进来，设置背景色 #f8f9fa，内边距 16px。容器里依次嵌套：

• 「图片」组件，绑定变量 {{news.image_url}}
• 「标题文本」组件，绑定 {{news.title}}，字号 18px，加粗
• 「摘要文本」组件，绑定 {{news.summary}}，行高 1.5，颜色 #495057
• 「按钮」组件，文字“查看详情”，链接地址绑定 {{news.url}}

配置完点「预览」，在飞书 App 扫码看看真实效果。如果图片不显示，八成是变量名对不上——比如插件返回的是 img_url，但你绑定了 image_url，字段名必须完全一致。

方法二：手写 JSON Schema（适合批量复用）

切换到「代码模式」，替换默认 JSON 为以下结构。注意双引号、逗号、缩进都要严格合规：

{"type":"card","elements":[{"type":"image","url":"{{news.image_url}}"},{"type":"text","content":"{{news.title}}","size":"lg","weight":"bold"},{"type":"text","content":"{{news.summary}}","color":"gray"},{"type":"button","text":"查看详情","url":"{{news.url}}"}]}

制作多条新闻的竖向卡片列表

单卡搞定了，想做一个竖着排的新闻列表？流程其实很顺。

先完成单条卡片的完整配置（变量绑定、样式都调好），确保预览没问题。然后选中整张卡片，点右上角的「复制为列表」——系统会自动包一层「循环」结构，并把原卡片设为列表项模板。

接着在循环设置里，把数据源指向插件或大模型节点输出的数组变量，比如 {{zhihu_hot_list}}。前提是这个变量必须是合法的 JSON 数组，每个元素都含 title、summary、url、image_url 字段。

保存后跑一次测试。如果列表为空或报错，最常见的坑就是：插件实际返回的是单个对象，但循环却指向了非数组变量。这种低级错误排查起来其实很快，但对新手来说容易卡住。

插入交互按钮并关联动作

卡片的按钮不只用来跳转链接，还可以触发工作流。

在卡片任意位置加一个「按钮」组件，输入文字比如“立即订阅”，下拉选择「动作类型」为「触发工作流」。然后选一个已发布且具备执行权限的目标工作流。如果需要传递上下文，勾选「携带当前变量」；还可以额外加静态参数，比如 {"source": "news_card"}。

用户点击按钮后，工作流会在后台静默执行，结果以新消息返回。整个过程无需离开对话页，比外部跳转更可控，也能有效避免用户流失。

这是目前扣子里实现交互最灵活的方式，值得多用。

你是一名 AI 行业编辑，请围绕下面这条热点输出一份资讯解读：
热点：扣子卡片式交互设计实战指南完整版教程要求：
1. 先用一句话解释这条热点在讲什么
2. 再总结它为什么重要
3. 说明会影响哪些 AI 产品或内容方向
4. 最后给出 3 个适合资讯站使用的标题