游乐游手机版
首页/AI热点日报/热点详情

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

类型:热点整理2026-07-06
消息卡片需在豆包或飞书客户端开启开关,支持可视化编辑器或JSONSchema搭建。单张卡片可绑定图片、标题、摘要和按钮;多条新闻通过复制为列表并指向数组变量实现。按钮可触发工作流,携带变量静默执行,提升交互可控性。

在扣子里做智能体,如果输出还是纯文本,那基本等于——把精心准备的干货,塞进一个牛皮纸信封里扔给对方。用户看到一长段挤在一起的文字,关键信息被淹没,想点击跳转也无从下手。图文并茂、带按钮可交互的新闻摘要或商品列表,全靠消息卡片(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 数组,每个元素都含 titlesummaryurlimage_url 字段。

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

插入交互按钮并关联动作

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

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

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

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

来源:https://www.php.cn/faq/2636666.html?uid=1589237

相关热点

继续查看同栏目近期热点。

延伸阅读

补充最近整理过的热点入口。