扣子卡片式交互界面显示优化实操：从新手到高手的完整指南

想让你的智能体拥有更专业的“可视化输出”，不再是单调的纯文本？那就为其配置一张结构化的卡片模板——就像主流新闻客户端那样，集成图片、分栏布局、标题与摘要。关键在于，变量类型必须与工作流输出参数严格一致；否则整张卡片会因数据映射失败而无法渲染。

创建卡片并搭建基础框架

登录扣子控制台，点击左上角「资源库」，在顶部导航栏切换至「卡片」标签页，然后点击右上角的「+ 创建卡片」。

进入编辑器后，先为卡片设定一个辨识度高的名称，例如“知乎热榜单条卡片”——名称将直接出现在资源列表中，影响后续检索与复用的效率。

接着，从左侧「组件」面板中拖入「单列布局」组件。该布局作为整张卡片的根容器，所有其他组件必须嵌套于其内部；否则保存时会触发错误提示：【组件未嵌套在布局中】。

添加图文混合组件并设定占位内容

有两种实现路径可供选择。

方法一：在「单列布局」内依次添加「图片」→「文字」→「文字」三个基础组件。

方法二：直接拖入「多列布局 1:2」，左侧放置「图片」，右侧从上到下叠放两个「文字」组件——这种结构更贴近主流资讯卡片的视觉权重分配：图片负责吸引注意力，右侧双文本分别承载标题与摘要。

点击任意文字组件，在右侧属性面板将「内容」设为纯文本，例如填入“这里是标题示例”；图片组件则在「图片地址」字段粘贴一个可用的链接（如 https://via.placeholder.com/300x200 ）。此时预览区已能呈现静态卡片效果。

创建变量并绑定至组件

先点击顶部菜单「变量」→「新建变量」。

新建第一个变量，名称为 news_title，类型选择 String，默认值填写“AI正在改变世界”。

新建第二个变量，名称为 news_summary，类型同样选择 String，默认值填写“本条新闻摘要长度控制在两行以内为佳”。

新建第三个变量，名称为 news_image_url，类型仍为 String，默认值填写一个真实可访问的图片链接（避免使用 placeholder，否则绑定后图片无法显示）。

注意：变量类型必须与工作流输出字段完全一致。String 和 Text 在扣子平台中不可互通，选错类型会导致组件内容留空。

将变量动态绑定至对应组件

点击图片组件 → 右侧「图片地址」栏点击「fx」图标 → 在弹出的窗口中选择「变量」→ 找到并选中 news_image_url → 确认。

点击上方的文字组件 → 右侧「内容」栏点击「fx」→ 选择变量 news_title。

点击下方的文字组件 → 同样绑定 news_summary。

此时卡片上仍显示之前填入的占位文字，但已具备数据驱动能力——只要上游工作流传入同名变量，卡片内容便会自动替换。

发布卡片并关联至智能体

点击右上角「保存」，再点击「发布」，卡片即刻生效。

打开目标智能体 → 进入「技能」或「工作流」编辑页面 → 找到最终「结束节点」→ 在「消息卡片」下拉菜单中，选择刚刚发布的卡片名称。

确认该结束节点的「输出参数」中仅包含三个字段：news_title、news_summary、news_image_url，字段名与类型必须与卡片变量严格一致。