1.AI应用业务逻辑分析
-在开始之前,我们仍然对工作流的业务逻辑进行分析:
我们的目标是搭建一个「新闻摘要机器人」,它能够接收任意新闻链接作为输入,然后输出该新闻的精简摘要、关键事件时间线以及情绪分析结果。这个机器人可以帮助用户快速了解新闻的核心内容、事件发展脉络以及新闻所传达的情绪倾向,提高信息获取的效率。
目标:输入任意新闻链接 → 输出精简摘要 + 关键事件时间线 + 情绪分析
-整个工作流的设计就是这样:

2.界面雏形设计
对于界面设计,我们简单的给大家介绍一个图形——用户界面原型图
原型图就是用最简单的线条和方块,把你想做的APP/网页的“样子”和“怎么用”画出来!

我们的新闻摘要机器人以手机端的界面设计为例,给大家展开讲一下相关的硬核内容
(1)画图工具推荐
-我们给大家再推荐一款免费的画图工具
对于定制化要求高的朋友,推荐使用该画图工具来进行界面原型图的设计

登录进入网站之后,我们点击左上角的新建,然后在专业图形部分找到原型图,点击一下

进入画板界面之后可以看到,我们能够使用模板新增原型图(红色区域),也可以直接选用左侧的控件进行元素的添加(黄色区域),而中间空白的绿色区域就是我们的编排画板

我们直接选择第一个产品登陆注册模板进行界面的原型设计

可以看到画板上已经出现了两个界面,接下来我们在上面进行更改,完成自己的界面设计

然后依次删除界面上的元素,最后剩下这两个手机样式的图片,我们再开始在界面上添加元素

(2)构思界面设计
接下来我们构思一下界面的设计,我们设计两个简单的界面,并且在ProcessON上完成界面元素的堆砌设计
第一个界面配备一个简单的图形在上部展示,然后是设计一个简洁的输入框,用于用户输入新闻链接。输入框旁边可以添加一个提示文字,如“请输入新闻链接”,让用户清楚知道该输入什么。在输入框旁边添加一个“分析”按钮,用户输入链接后点击该按钮,机器人开始对新闻进行分析。按钮的颜色可以选择醒目的颜色,如蓝色,以吸引用户的注意力。
第二个界面(分析结果界面):
1.核心区域: 占据界面大部分空间,清晰展示新闻分析结果。
2.卡片式布局: 使用三个独立的、带有轻微阴影/边框的矩形“卡片”来分别展示:
卡片 1:新闻摘要
顶部大标题:新闻摘要
内容:用 简洁段落 或 要点符号 列出核心内容,关键信息可加粗。
卡片 2:事件时间线
顶部大标题:事件时间线
内容:采用 视觉化时间线!
一条垂直参考线贯穿卡片。
左侧标记 时间点 (加小图标)。
右侧对应 事件描述。
按时间顺序从上到下排列。
卡片 3:情绪分析
顶部大标题:情绪分析
内容:可视化展示!
一个 水平进度条,左端消极,中间中性,右端积极。
一个 滑块指针/高亮区域 指示分析结果的具体位置。
旁边用 文字标签 说明结果(如“中度积极”)。
布局与留白:
三个卡片 从上到下垂直排列 (摘要 -> 时间线 -> 情绪分析)。
卡片之间和卡片内部有 充足的间距/留白,确保内容呼吸,阅读舒适。
加载状态:
结果出来前,此区域显示 加载动画 (如旋转圆圈) 和提示文字:正在分析中,请稍候...。
最终效果想象:
用户点击“分析”后,稍等片刻,看到一个清爽的结果页面。三个醒目的卡片整齐排列:第一个卡片用几句话概括了新闻;第二个卡片像一条时间轴,清晰列出了事件发展步骤;第三个卡片有个直观的进度条,一眼就看出这条新闻整体是偏积极还是消极。整个页面看起来条理分明,重点突出,用户能快速获取所需信息。
使用AI工具进行界面原型图的绘制
同样的,对于完全无法进行页面设计的朋友们,我们也早就准备好了一个解决方案——使用AI工具帮助构思界面设计
我们这里使用了豆包的文生图功能,将两个界面的设计构思输入进去,然后让AI帮助我们生成即可
当然,如果你有想要参考的设计图,也可以点击蓝色区域的按钮进行上传

再给大家分享一下我们的提示词:
根据界面设计要求,完成手机端新闻摘要机器人的界面原型图设计
最后豆包生成的结果就是这两张图片,我们到时按照这个界面原型图对AI应用智能体进行设计即可


这个见面比较难,其中涉及到时间线图文生成和滑块组件的设计(Coze目前不支持自定义代码展示组件),所以我们这两个地方仍然用文字展示,后续进阶板块会说到该怎么自定义组件
3.创建AI应用智能体
在创建窗口选择创建应用

然后选择创建空白应用
模板创建的部分我们后面会讲

在弹出来的窗口中填入应用名称和应用介绍

接下来设置一下图标,可以自行上传,也可以点击下面的AI按钮帮助我们生成一个

这部分的设置逻辑和创建智能体是一样的,我们都弄好之后点击一下确认

4.编排业务逻辑
在Coze平台,你能调用大模型、代码模块、意图识别组件、知识库读写接口等多样化的工作流节点,轻松应对各类复杂业务场景。不仅如此,还能通过变量传递、插件扩展、知识库对接等方式,实现与本地数据及线上系统的无缝集成。
还是那句话,本质上AI应用和AI智能体的底层搭建逻辑是一样的。

完成AI应用项目创建后,就可以开始进行业务逻辑编排了
a.创建工作流
在业务逻辑页面,点击 + > 新建工作流

输入工作流名称(如
news_summarizer
)和说明(无论用户输入任何内容,都直接调用此工作流,用户的输入作为工作流的输入。)
然后点击 确认

b.配置开始节点
单击 开始节点

在输入区域添加变量:
-
变量1:
news_url
(新闻链接)

c.添加网页提取节点
单击开始节点的连接线 → 选择 网页提取插件


配置输入:
-
url
→ 绑定变量news_url
(从开始节点获取)

d.添加大模型节点
连接网页提取节点 → 选择 大模型节点

模型配置:
-
选择 豆包 工具调用 模型
-
保持默认参数(或按需调整温度/Top-P)

输入配置:
-
添加变量
article_content
→ 绑定 网页提取节点的输出


配置提示词:

系统提示词(角色定义):
用户输入的内容;
'''
{{article_content}}
'''
#角色:你是专业新闻分析师,需完成三项核心任务:
1.生成精简摘要(核心事实,不超过100字),输出为'''{{summary}}''''
2.提取关键事件时间线(按时间顺序,含明确日期/时间点),输出为'''{{timeline}}''''
3.分析情绪倾向(正面/负面/中性)并说明依据,输出为'''{{sentiment_analysis}}''''
#工作规则-
摘要必须客观中立,禁止添加个人观点
时间线仅提取新闻中明确提及的事件节点,从远至近输出
情绪分析需基于关键词、语气、事件性质
#demo:
输出格式:
'''{{summary}}''''
'''{{timeline}}''''
'''{{sentiment_analysis}}''''
#限制:拒绝处理非新闻类链接
用户提示词:
用户输入的内容;
'''
{{article_content}}
'''
配置输出节点:
大模型输出设置:
这里需要配置三个输出变量
-
精简摘要→
summary
时间线→
timeline
情绪分析→
sentiment_analysis

e:配置结束节点
连接大模型节点到 结束节点

输出配置:
-
返回类型 → 返回变量

输出变量配置:
我们需要分别输出大模型的三个输出,所以也是设置三个输出变量,依次设置即可

output →
summary
output2→
timeline
output3→
sentiment_analysis

5.进行界面设计
业务逻辑编排完善之后,我们进行用户界面设计
在上面点击一下用户界面,进入编辑页

前面提到过,我们的新闻摘要机器人以手机端的界面设计为例
所以选择小程序和H5的UI搭建类型,然后点击开始搭建

a.界面逻辑讲解
(1)界面结构
先介绍下界面结构

红色区域:
红色区域支持的东西比较多,分为四个部分:
1.Coze支持添加的组件
目前Coze只支持添加这些组件,其他的功能还没有开发出来
所以大家构思AI应用的时候要考虑好,平台没有的组件我们是实现不了的


2.界面模板的套用
这个部分很简单,就跟主题是一个道理,Coze提供了应用模板主题,你应用之后就可以直接套用,在模板的基础上修改成你想要实现的应用效果即可



比如我点击了这个卡片04,我的界面就会变成这样,它自动把这个模板下的组件添加了上去



3.界面结构的设计
界面结构的逻辑也很简单,是采用图层组的逻辑展示的
页面是一个大的图层组,它下面还有很多小的图层组成了它
当然,这肯定是要你设计了之后,结构这个部分才会变成这样
目前我们什么都没有,就只有一个首页,结构展示下就只会有一个首页


4.界面数据的添加

这个就是界面的变量,只在当前界面下有效,作为一个界面的数据进行存储,属于难点,不建议大家深究
感兴趣的朋友可以看一下官方教程:📄Coze官方文档:设置界面变量
黄色区域:
黄色区域是可视化编辑界面,点击红色区域的组件拖动到界面上,就可以实现界面组建的添加

蓝色区域:
蓝色区域是一些参数的修改,包括界面参数和组件参数
页面有页面的属性和事件设置,组件也有组件的属性和事件设置,也是比较难的部分
感兴趣的朋友可以看一下官方教程:📄Coze官方文档:设置组件属性和事件


(2)界面的编排逻辑
接下来我们深入浅出的给大家讲解一下界面的编排逻辑
在Coze的官方教程中,对于界面的编排逻辑是这样解释的:扣子-AI 智能体开发平台

官方的叙述已经非常浅显易懂了,所以我们就不再多做补充
我们现在回顾一下前面的界面设计图,第一张是首页,第二张是分析页,接下来需要分别对两个界面进行设计


b.进行首页界面设计
界面设计页打开就是首页,所以不需要再进行界面添加,直接进行组件添加即可


我们根据设计图进行添加,分别需要添加四个组件:图标、智能体名称、搜索框、按钮
(1)添加图标
在左侧的组件菜单中选择图片组件,拖动到界面上

点击右侧菜单的上传,把我们的图标上传上去

上传好发现是这样,不对,需要调整一下

点击右侧菜单的填充方式,把覆盖更改成包含

这个时候我们对图标的位置不满意,拖动界面上的图片却发现无法操作
这是因为位置类型的设置不支持自定义拖动,需要更改一下

把位置类型由相对定位更改为绝对定位

然后拖动图标放到喜欢的位置即可

最后的效果就是这样

绝对定位是有位置参数的,我们的参数是这样,仅供大家参考

(2)添加智能体名称
在左侧菜单选择文本组件拖动到界面上

在左侧菜单的内容更改文字内容为我们的智能体名称

更改成功后,接下来需要调整一下字号
点击自定义

然后会出现一个这样的菜单,我们在这里依次更改数据,调整成自己喜欢的样式即可

大家可以参考一下我的参数

然后继续调整文字的位置,还是一样的操作
首先更改位置类型为绝对定位,然后再将智能体名称拖动到自己喜欢的地方即可

(3)添加输入框
在左侧菜单的输入组件处找到单行输入,拖动到界面上

添加上来是这个效果,和我们想要的不一样,需要在右侧菜单更改一下它的属性
点击标签,关闭标签

再更改占位文案为请输入新闻链接



更改位置类型为绝对定位,移动到想要放置的地方

拖动过来之后,我们发现它太长了,无法在后面添加按钮,还需要继续调整
在右侧菜单中更改尺寸和容器样式

调整好就是这样,大家可以参考一下我们最后的参数设置
依次修改了尺寸的高度和宽度,以及容器样式中的圆角样式,然后还重新挪动了一下输入框的位置

(4)添加按钮
找到按钮组件,拖动到界面上

先在右侧菜单中更改尺寸和容器样式

依次修改了尺寸的高度和宽度,以及容器样式的填充颜色和圆角数据
这里给大家看一下我们修改后的参数

修改按钮内的文字内容,修改为分析

更改位置类型为绝对定位,移动到想要放置的地方

大家可以参考一下我们的设置参数,这里还调整了输入框的绝对位置


c.进行分析页界面设计
接下来我们再完成分析页的界面设计,首页点击下方的 新建页面 按钮,添加一个新的界面

添加好之后就是这样,然后我们对照界面原型设计图进行组件添加
需要注意的是,我们能够完成的是红色框选区域的三个并列输出容器,蓝色框选区域是无法实现的,因为coze不支持这个加载组件的设置,不过我们可以换一种思路,在这三个并列组件之中添加加载动图!


容器
在这里我们给大家导入一个新的知识点——容器
这是cozeAI应用组件中的一个布局组件

简单点说,它的作用就是形成一个框选区域
把其他的组件全部都装在这个区域内,跟设计中的图层组是一个概念
大家可以发现——
在我们的设计图上,分析页是由三个并列的结构一样的容器区域组成的
使用容器结构去规整我们的组件结构,能够方便我们对多个组件同时进行管理和迁移,在后面的步骤中就可以直观的感受到使用容器的好处

(1)修改界面名称
首先修改一下界面名称,点击第二个界面

可以看到右侧界面出现了界面设置菜单
找到页面标题,点击一下进行修改
我们修改成了分析,大家可以参考一下



(2)添加新闻摘要输出容器
1.容器添加与设置
在左侧的组件菜单找到布局组件——容器,把他拖动到页面上



容器内应该添加的组件按照界面原型设计图来,很简单,只需要添加标题和工作流的文字输出
前面有提到过,由于Coze限制问题,所以下面的两个组件我们也需要按照这样的逻辑去设置哦

点击容器,在右侧菜单中更改一下它的属性

大家可以参考一下我们的设置参数,修改了尺寸和容器样式

2.标题添加与设置
在左侧的组件菜单找到推荐组件——文本,把他拖动到容器内

然后在页面上点击文本,在右侧菜单中进行文本样式的修改

我们这里修改了文本内容、大小、颜色和文本的位置(位置类型修改为绝对定位),大家可以参考一下我们的参数

3.输出文本添加与设置
在左侧的组件菜单找到推荐组件——文本,把他拖动到容器内

然后在页面上点击文本,在右侧菜单中进行文本样式的修改

我们这里修改了文本大小、颜色、对齐方式、文本的位置(位置类型修改为绝对定位)、文本尺寸、容器演示-溢出设置
大家可以参考一下我们的参数
(由于文本内容涉及工作流输输出配置,所以暂时不设置)



(2)添加时间线输出容器
接下来添加时间线输出容器,由于我们之前采用了容器结构规整页面组件,所以这里可以非常简单的省略步骤
首先点击新闻摘要输出容器,然后按键盘上的
Ctrl+C

再
Ctrl+V
,就可以看到页面上出现了一个和上面一模一样的容器,我们只需要更改下标题文字和背景颜色即可
大家可以参考下我们的设置参数


(3)添加情绪分析输出容器
这一步的操作也一样,所以我们直接给大家看我们的设置参数


d.进行首页的界面逻辑设置
接下来我们要进行界面的逻辑设置
这个界面的功能是:
1.输入框接收输入的新闻链接,传递到分析页作为工作流的输入(变量在不同页面的值的传递)
2.点击分析按钮跳转到第二个界面(页面跳转设置)

但是由于在Coze界面的设置逻辑里,需要先设置页面跳转逻辑才能实现页面传参逻辑
所以我们先实现页面跳转逻辑
(1)实现页面跳转逻辑
这个逻辑需要实现的是点击分析按钮跳转到第二个界面(页面跳转设置)
所以我们直接点击首页的按钮,然后再点击右侧菜单栏的事件

在弹出来的菜单栏中点击新建按钮

选择执行动作为页面跳转

在弹出来的窗口中选择页面为页面2

跳转方式为自动模式,不需要配置入参,设置好之后点击确定
这样我们就实现了页面跳转逻辑的设置


(2)实现输入内容的页面传递逻辑
首先跟大家展示下设置逻辑是怎样的,点击首页整个页面,然后点击右侧菜单的设置按钮

看到这个入参
简单点说,页面入参实现的功能就是页面间参数的值的传递

不过需要注意一下它的特殊说明,想要设置入参的话,我们的页面就不能开启底部导航栏
现在给大家讲一下该怎么设置
我们想要从首页把输入框的输入值传递到分析页,那就是分析页需要一个入参
所以点击分析页,然后关闭底部导航栏

再点击设置,点击添加符号

设置参数名为
news_null
,默认值为null
然后点击确认

设置好分析页的入参之后,我们要对首页进行传参的设置
点击分析按钮,再点击事件

点击刚刚设置好的那个事件,再点击这个(X)

然后选择Input1的value

设置好之后点击确定,这样就实现了参数的传递

e.进行分析页的逻辑设置
分析页的设置很简单,前面已经实现了参数传递和页面跳转,这里只需要设置两个逻辑
1.调用工作流
2.实现分点文字内容输出
(1)实现调用工作流
点击这里的事件

点击这个新建按钮

执行动作为调用工作流

工作流选择我们之前创建的那个

点击按钮(X)

然后选择系统变量这里的
news_url

设置好之后点击确定

(2)实现分点文字内容输出
这部分的设置逻辑也很简单,就是把这三个容器内的文本内容链接为工作流的输出变量而已

点击文本,然后在右侧菜单栏找到(X)并点击

选择绑定为工作流的
output

链接好了之后记得删除一下原文本,只保留这个参数

其他两个地方的文本依次按照这个逻辑设置即可,这里给大家看一下配置参数


6.运行测试
接下来我们测试一下,CozeAI应用的测试比较灵活,可以直接在UI设计界面进行测试
直接粘贴一个新闻链接到输入框,然后点击分析按钮

耐心等待测试完成,分析页出现了新闻摘要、事件时间线、情绪分析等内容,说明我们的应用无误,测试成功!

7.分析界面优化设置
我们这里再多讲一个板块,界面的优化,其实也就是做一个界面美化
大家回顾一下我们的设置逻辑,在首页输入链接-点击按钮-跳转分析页-出现分析结果
但是在实际应用场景中:跳转分析页-出现分析结果的中间是存在一个工作流加载的阶段的
所以当工作流未加载完成的时候,分析页面上什么也没有,这样是不是太单调了?那我们加一个加载图片的显示怎么样?
我们在左侧菜单的展示组件部分,找到Lottie动画,把他拖动到分析页上的第一个容器里


拖动上来就是这样,我们点击右侧菜单的红框部分,可以选择一个自己喜欢的加载动画

选择好之后,我们要完成一个逻辑的设置:这个动图只能在工作流加载的时候出现
看到右侧菜单的可见性

点击常用条件-添加条件

选择显示,我们要设置一下显示条件

点击Worlflow运行状态-work

具体条件如图,然后我们再依次给三个容器都添加好

这个时候却发现,页面上已经看不到加载动图了,该怎么办呢?

点击左侧菜单的结构 然后再点击Lottie1


可以看到页面上已经再次出现了,我们复制一下依次粘贴到下面的两个容器里即可

粘贴好之后的左侧菜单结构如图

接下来我们就不再多做赘述,大家自行跟着操作设置好,再运行一下看看!