大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



 
｜从纯文本到富媒体｜图文并茂｜点击直接跳转
 

前几篇文章，我们做的机器人回复都是干巴巴的文字。用户问一句，机器人回一段话，毫无视觉冲击力。

如果能让回复变成带标题、图片、超链接的精美卡片，像今日头条一样展示新闻列表，用户体验瞬间提升一个档次。

今天这篇文章，就带你用Coze卡片功能，5分钟做出一个能返回图文新闻列表的机器人。全程拖拽配置，不需要写代码。

先看效果（文末有实际截图描述）：

用户问：“今天有什么新闻？”

机器人回复：

[卡片1]

OpenAI发布GPT—5（绿色加粗标题）

新闻时间：2025—05—20

摘要：新一代模型性能飙升...（最多4行）

[点击卡片跳转原文]

[卡片2]

国内AI政策新规出台

...

而且支持循环渲染——新闻有多少条，卡片就自动生成多少张，完全不用手动重复。

---

本篇你将学到什么？

—✅卡片是什么？有什么用？

—✅如何创建卡片并设计布局（单列+循环渲染）

—✅如何定义数组变量并绑定数据

—✅如何将卡片绑定到新闻机器人

—✅常见问题与避坑指南

---

一、为什么需要卡片？

对比一下两种回复方式：

纯文本回复：

1.OpenAI发布GPT—5，性能大幅提升，详情请访问https://xxx.com

2.国内AI政策新规出台，点击查看https://yyy.com

用户看着像一坨乱码，不想点。

卡片回复：

┌─────────────────────────┐

│OpenAI发布GPT—5│←绿色加粗标题，可点击

│新闻时间：2025—05—20│

│摘要：新一代模型性能飙升...│

│[图片]│←可选配图

└─────────────────────────┘

视觉上更友好，点击区域更大，用户自然愿意互动。

卡片的核心价值就是：用结构化的方式展示信息，提升点击率和用户体验。

目前卡片支持发布到豆包和飞书（两个平台的模板不通用，但变量通用）。

---

二、卡片基础认知

一张卡片由三部分组成：

—布局：单列布局（纵向排列）或网格布局（九宫格）

—组件：标题、文本、图片、按钮等

—变量：动态数据来源（比如新闻的标题、日期、图片链接）

我们今天要做的是新闻列表卡片，使用单列布局+循环渲染。

“循环渲染”是什么意思？你只需要提供一组新闻数据（数组），卡片就会自动为每一条新闻生成一个卡片块，数量随数据量变化。这是卡片最强大的功能。

---

三、分步实操：创建新闻卡片

3.1进入卡片模块

1.登录Coze，点击左侧“工作空间”→找到“卡片”入口（如果找不到，可以去“资源库”→“消息模板”）。

2.点击右上角“创建卡片”。

3.选择平台：本教程以豆包为例（飞书操作类似）。

注意：豆包和飞书的卡片模板不通用，如果你需要在两个平台都用，需要分别创建。

3.2布局设计：单列布局+循环渲染

1.从左侧组件库拖拽“单列布局”到右侧画布。

2.在右侧“结构”面板中，找到`singlecolumn`层级。

3.点击它，在属性区找到“循环渲染”开关，先把它打开（稍后绑定数据）。

开启循环渲染后，这个布局就会根据你提供的数组数据，自动重复生成内容。

3.3添加组件

向画布上的`singlecolumn`布局内部拖入以下组件（必须放在内部，否则无法循环）：

—标题（用“普通文本”组件代替，因为标题组件有时拖不进循环体）

—日期（普通文本）

—内容（普通文本）

—图片（可选）

如果拖拽时发现组件无法放入`singlecolumn`，可以先把`singlecolumn`在结构面板中展开，然后拖到它下面的空白区域。

3.4新建变量（新闻数据源）

点击顶部“变量”选项卡→“新建变量”。

填写：

默认值（JSON格式）：

json

[

{

"title":"OpenAI发布GPT—5",

"date":"2025—05—20",

"content":"新一代模型在推理、多模态方面取得突破，性能超越GPT—4十倍。",

"image":"https://picsum.photos/200/100",

"url":"https://example.com/news1"

},

{

"title":"国内AI政策新规出台",

"date":"2025—05—19",

"content":"国家网信办发布生成式AI服务管理办法，规范行业发展。",

"image":"https://picsum.photos/200/100",

"url":"https://example.com/news2"

}

]

提示：这是一个示例数组，包含两条新闻。每个新闻对象有`title`、`date`、`content`、`image`、`url`五个字段。图片链接我用的是随机占位图，你可以换成自己的。

3.5变量绑定（核心步骤）

第一步：绑定循环变量

—在“结构”面板中，点击`singlecolumn`。

—在属性区找到“循环渲染”→“数据源”→选择`newsData`。

这样，`singlecolumn`就会知道：我要根据`newsData`数组里的元素，每个元素生成一个卡片。

第二步：绑定各组件的数据

点击画布上的标题组件（你拖入的那个普通文本），在右侧属性区找到“绑定变量”按钮。

—点击后，选择`item`（代表当前循环的单个新闻对象）

—再选择`title`

同理：

—日期组件→绑定`item.date`

—内容组件→绑定`item.content`

—图片组件→绑定`item.image`（在“资源”或“图片地址”字段）

—标题的点击事件（稍后设置）→绑定`item.url`

注意：`item`是循环渲染自动提供的变量名，代表数组中当前正在处理的那个对象。

3.6设置样式与交互

标题样式：

—字体大小：中等（16px）

—颜色：绿色（00A67E）

—粗细：加粗

—对齐：左对齐

交互：选中标题组件，找到“点击事件”→选择“打开URL”→绑定变量`item.url`。

日期样式：

—添加固定前缀：`新闻时间：`（直接在组件内容框中写“新闻时间：{{item.date}}”）

—字体颜色：灰色

—字体大小：小号

内容样式：

—设置最大行数为`4`，超出自动省略（避免太长）

图片样式：

—设置固定宽度（如100%）和高度（如120px），对象—fit选择cover。

3.7保存并发布卡片

1.点击左上角编辑按钮，将卡片命名为`我的新闻卡片`。

2.点击右上角“发布”。

3.发布记录：填写版本号`1.0`，描述可空。

4.发布渠道：选择豆包。

5.点击确认，等待发布成功。

---

四、创建新闻机器人并绑定卡片

4.1创建智能体

1.进入“智能体”模块，点击“创建智能体”。

—名称：`新闻机器人`

—功能介绍：`查询最新新闻，并以卡片形式展示。`

2.点击确认，进入编辑界面。

4.2添加新闻插件

—左侧“技能”→“插件”→点击“+”。

—搜索“头条新闻”或“新闻阅读”，选择一个高评分的插件，点击添加。

4.3绑定卡片

1.在智能体编辑页，找到“卡片”或“消息模板”区域（位置可能略有差异，一般在技能下方）。

2.点击“绑定卡片数据”。

3.选择“待发布的卡片”→选择`我的新闻卡片`。

4.系统提示“卡片未发布，请先发布”？

你已经发布了，如果还提示，可以点击“去发布”确认一下状态。

4.4绑定数据源（映射字段）

这是最后一步，也是容易出错的地方。你要把插件返回的字段映射到卡片的变量。

不同插件的字段名不一样，你可以在绑定界面看到插件返回的示例数据，照着选就行。如果插件没有图片字段，可以留空或不绑定。

点击确认，保存智能体。

---

五、测试效果

在预览与调试模块中，输入：

今天有什么重要新闻？

等待几秒，机器人应该会返回卡片列表。效果如下（文字模拟）：

[卡片]

OpenAI发布GPT—5(绿色)

新闻时间：2025—05—20

摘要：新一代模型在推理、多模态方面取得突破...

[图片占位]

[卡片]

国内AI政策新规出台

新闻时间：2025—05—19

摘要：国家网信办发布生成式AI服务管理办法...

[图片占位]

点击标题，会跳转到对应的新闻原文页面。

如果你的插件没有返回图片，图片区域可能空白，但其他功能正常。

---

六、常见问题与避坑指南

我的亲身经历：有一次我折腾了一小时，发现是因为忘记开启“循环渲染”。这个开关藏得有点深，希望你第一次就能注意到。

---

七、下篇预告+互动

下篇预告：下一章我们将进入插件开发，从零做一个能发邮件的授权插件，让你的机器人真正“动手做事”——不只是聊天，还能执行操作。

私信了解：如果你想一次性获取所有卡片模板（JSON配置可直接导入），或者有其他问题，欢迎私信交流。

---

最后

卡片功能是Coze里最能体现“低代码优势”的模块之一。你不用写HTML、CSS，拖拽几下就能做出精美的交互界面。

今天的教程就到这里，快去试试吧！如果你成功做出了卡片，记得来评论区报喜～

柒柒

2026年4月

---

📌本文已同步收录于专栏《无代码AI智能体开发实战：从零到一搭建你的专属机器人》，欢迎订阅持续学习。