💎【行业认证·权威头衔】
✔ 华为云天团核心成员：特约编辑/云享专家/开发者专家/产品云测专家
✔ 开发者社区全满贯：CSDN博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主
✔ 技术生态共建先锋：横跨鸿蒙、云计算、AI等前沿领域的技术布道者

🏆【荣誉殿堂】
🎖 连续三年蝉联"华为云十佳博主"（2022-2024）
🎖 双冠加冕CSDN"年度博客之星TOP2"（2022&2023）
🎖 十余个技术社区年度杰出贡献奖得主

📚【知识宝库】
覆盖全栈技术矩阵：
◾ 编程语言：.NET/Java/Python/Go/Node…
◾ 移动生态：HarmonyOS/iOS/Android/小程序
◾ 前沿领域：物联网/网络安全/大数据/AI/元宇宙
◾ 游戏开发：Unity3D引擎深度解析

🚀前言

扣子的插件是一个工具集，包括资讯阅读、旅游出行、效率办公、图片理解等 API及多模态模型，使用这些插件可以极大地拓展智能体的能力边界。扣子还支持智能体以消息卡片的形式发送消息，卡片可以让输出的格式更加美观。本章将介绍扣子的插件和卡片的用法。

🚀一、卡片：丰富智能体交互形式

🔎1.什么是卡片

在扣子平台中，卡片（Card） 是一种用于优化信息展示格式的富媒体消息模板。它旨在将智能体返回的原始文本数据（如标题、摘要、链接、图片地址等），按照预设的、美观的视觉布局呈现给用户，从而显著提升交互体验。

例如，智能体通过插件获取到一篇新闻数据。如果直接以纯文本输出，可能只是平淡的文字列表。而如果预先设计好一个新闻卡片模板，将标题、摘要、图片和链接等元素精心排版，最终就能呈现出一个图文并茂、结构清晰的新闻卡片（如图所示的新闻列表或列表卡片），使信息更易读、更吸引人。

🦋核心概念与规则

• 权限：卡片暂不支持多人协作编辑。只有卡片的创建者本人可以编辑或删除自己创建的卡片，团队内其他成员（包括所有者和管理员）均无此权限。

• 构成：卡片由组件（Component） 搭建而成，组件分为两类：

  1. 布局组件：用于划分卡片的整体结构区域（如图），例如分栏、网格等。可对每个布局区域单独进行参数设置，实现灵活多样的版面设计。
     

  2. 基础组件：用于承载和展示具体内容，如图片、文本、按钮等（如图）。一个完整的卡片通常由布局组件搭好骨架，再由基础组件填充内容（如图所示的图片+文本卡片）。
     
     

• 生效范围：目前，消息卡片仅在豆包客户端和飞书客户端内能够正确渲染显示。

• 支持场景：仅当通过工作流或插件返回数据时，才能调用并渲染消息卡片。

🔎2.卡片制作实战案例：最新头条新闻

本节将通过一个完整案例，学习如何制作一个用于展示头条新闻列表的消息卡片。目标是调用“头条新闻”插件获取数据，并利用卡片以列表形式优雅地展示出来。

案例目标：制作一个如图所示的新闻列表卡片，每条新闻包含左侧图片和右侧的文字标题与摘要，并能循环展示多条新闻。

🦋第1步：创建卡片并设计布局

1. 进入扣子平台“资源库”，点击“+资源”，选择“卡片”。
2. 在卡片编辑界面，从“组件”面板拖拽布局组件。本例需要左右两列（1:1），因此选择“多列布局”，并将其调整为两列。
3. 为了适配正方形图片并给文字更多空间，可以调整列宽比例。例如，将图片所在列的宽度比例设为1，文字所在列设为5，通过中间虚线框预览调整效果。
   

🦋第2步：添加并配置基础组件

在布局好的两列中，分别添加基础组件：

1. 左侧列：添加一个“图片”组件。
2. 右侧列：添加两个“文本”组件，分别用于显示新闻标题和摘要。
   （可选）为提升美观度，可在图片和文字列之间插入一个空列作为间隔。
   
   此时，卡片的静态结构已搭建完成。点击“结构”标签（如图），可以清晰看到由两列（Column）组成的树形结构，每列下包含对应的组件。

🦋第3步：创建模拟数据并绑定循环

为了预览效果，需要先创建模拟数据并实现列表循环渲染。

1. 创建数组变量：
   • 切换到“变量”选项卡，点击“新建变量”。
   • 设置变量名，如 newsList。
   • 变量类型选择 Array（数组）。
   • 在“默认值”中，粘贴一个包含3条模拟新闻数据的JSON数组。每条数据应包含 title（标题）、summary（摘要）、image（图片URL）、url（链接）等字段。

     [
       {
         "title": "新闻标题1",
         "summary": "新闻摘要的作用很重要。",
         "image": "https://www.cloudssss.com/images/common/footer-logo.png",
         "url": "https://www.cloudssss.com"
       },
       {
         "title": "新闻标题2",
         "summary": "新闻摘要的作用很重要。",
         "image": "https://www.cloudssss.com/images/common/footer-logo.png",
         "url": "https://www.cloudssss.com"
       },
       {
         "title": "新闻标题3",
         "summary": "新闻摘要的作用很重要。",
         "image": "https://www.cloudssss.com/images/common/footer-logo.png",
         "url": "www.cloudssss.com"
       }
     ]
     

2. 启用循环渲染：

   • 在画布或“结构”视图中，选中卡片的最外层布局组件。
   • 在右侧“高级配置”中，打开“循环渲染”开关。
   • 在“循环数据”中，选择刚刚创建的数组变量 newsList。此时画布会按数组长度（3条）循环生成对应的卡片项。
     

3. 为组件绑定数据：

   • 点击图片组件，在资源配置中，选择数据源为：循环项 -> image（即 item.image）。
   • 点击标题文本组件，在内容配置中，绑定数据源：循环项 -> title（即 item.title）。
   • 点击摘要文本组件，在内容配置中，绑定数据源：循环项 -> summary（即 item.summary）。

完成绑定后，画布将根据模拟数据动态显示3条新闻卡片预览。

🦋第4步：保存模板并发布卡片

1. 点击顶部“保存为模板”，为卡片模板命名（如“头条热榜卡片”），方便后续复用。
   

2. 点击右上角“发布”按钮。填写版本信息，可选择生成封面，最后确认发布。只有发布后的卡片才能被插件或工作流调用。
   

🦋第5步：在智能体中集成卡片

1. 创建智能体：新建一个智能体，命名为“头条新闻-卡片演示”。

2. 添加插件：在智能体编排页面的“技能”区域，添加“头条新闻”官方插件，并选择 getToutiaoNews 这个工具。
   

3. 绑定卡片：

   • 在该插件的配置区域，找到并点击“绑定卡片数据”按钮。
     

   • 在弹出窗口中，选择“我的卡片”，找到并选中已发布的“头条热榜卡片”。

   • 关键步骤：将卡片中各个组件的数据源，与插件返回的实际API字段进行映射绑定。例如，将卡片的 item.image 绑定到插件返回数据中的 image_url 字段，将 item.title 绑定到 title 字段等。
     

4. 测试效果：

   • 在右侧“预览与调试”区域，输入“查询头条新闻”。
   • 智能体将调用插件获取真实新闻数据，并自动套用卡片模板进行渲染。
   • 最终，用户将收到一个以美观的卡片列表形式呈现的最新新闻，效果如图3-54所示，体验远胜于纯文本回复。
     

总结：本案例完整展示了消息卡片从设计、制作、数据绑定到最终集成的全流程。掌握卡片功能，能极大提升你所开发的智能体或AI应用的专业度和用户体验。