字节神器，用 UI 玩转 AI！

前一段时间，我看到有人问：感觉 AI 大模型热度下降了，人们是不是去 AI 祛魅了？我的看法是这样的，不是 AI 失去了魅力，而是大多数人不会使用，原因就出现在聊天对话框这样的 LUI 形式上。

我相信很多人都有这种感受，使用 AI 大模型，一开始的时候，感觉这东西很好玩，可以聊天，就会问一些奇葩问题，去测试它。或者前期也会用它做一些事情。

但是，用久了之后，是不是也会感觉很乏味，感觉大语言模型也就那样。

这之间到底出现了什么问题呢？

我感觉在于大语言模型的产品形式：聊天对话框。看似跟 AI 聊天很好玩，也很方便。但是，注意但是：大多数人都不具备提问问题的能力，面对 AI ，大多数人不知道该如何提问，即使知道怎么提问，但是，也有很多人不知道问什么？

这就是目前 ChatGPT 这类人工智能大语言模型遇到的困境。大家试玩之后，新鲜感和兴趣大大下降了。

要想让 AI 真正用起来，就必须解决这种产品形态，不能使用 LUI 的形式。

AI 的最佳体验方式

要想让 AI 用起来，就必须结合具体的场景去细化封装 AI ，让用户用起来很方便，不用动脑，拿来即用，就类似于国外的 Glif 一样，采用无代码的 GUI 搭建方式，才符合人性操作体验，也是趋势。

说到底，两点：

1、必须是傻瓜式的操作，用户无需动脑；

2、必须能够结合具体场景，解决具体问题。

我们都知道，在国内大模型领域，字节跳动的「扣子」平台是最早推出工作流和智能体相结合的厂家，但是， 前一段时间，字节的 Coze 平台又升级了，推出了全新的项目形态 ：AI 应用，这可能是最接近我想法的形式，用户可以通过画布中的组件，组合形成界面，然后跟创建的工作流进行事件绑定，这样，以后用户操作就是以界面的形式了，不再是聊天了。

换句话讲，针对用户的需求和业务，结合 AI 大模型，开发傻瓜式操作的界面应用才是高效利用 AI 的最佳方式。

扣子（Coze）为大家提供了Project IDE，并搭载了UI Builder，结合工作流，可以搭建具有完整前后端的AI应用。

今天，我就详解介绍一下这个 AI 应用到底应该怎么搭建和怎么使用？我平时每天都得写文章，写完文章难免会有错别字或者语句不通顺的地方，有时候，我也懒得检查或者自己写的也不容易检查出来，我就把这件事就交给了 AI 来做。

我们今天就利用 Coze 推出的这个新形式搭建一个文章校验的 AI 应用。

一、设计应用功能

我的需求是这样的，我把我写完的原文输入给 AI ，AI 可以帮我做这么几件事：

1、检查错别字，并列出正确的字；

2、检查病句，并输出正确的语句；

3、顺便帮我给文章起 10 个爆款标题；

4、输出修改后的原文。

其实，这个应用的界面，我们想象一下，应该很简单：

页面的最上方，正中间是一个网页标题；

下面横排有两块区域：输入原文的区域和展示结果的区域。

还有一个触发事件的按钮。

大概整个应用功能和设计就是这样的，接下来，我们就开始创建 AI 应用。

二、创建 AI 应用项目

登录扣子平台，然后选择「工作空间」，点击「项目开发」，再点击页面右上角的「创建」，会弹框，出现两个选择：智能体和应用。

我们选择创建 AI 应用。然后填写应用的名称和介绍，以及制作应用的 logo 。

最后，点击确认，就来到了网页版的 IDE 应用编辑中心了。

这个页面有两个主要的菜单，分别是业务逻辑页和用户界面页。

业务逻辑页主要是创建应用的业务逻辑，比如：工作流，插件和数据等等。

那用户界面页，就是组件页，在这个页面我们可以用拖拽的形式组合组件，来搭建跟自己需求匹配的页面。如下：

三、编排业务逻辑（创建工作流）

我们来点击「业务逻辑」页面，我们选择创建工作流。

我创建了一个名字为：ArticleProofreading 的工作流。我在之前很多关于 Coze 的教程当中都讲过如何创建工作流了，没看过的可以看看之前的教程。

这个工作流很简单，只有三个节点：开始节点和大模型节点以及结束节点。

开始节点这里，我们增加一个 article 参数，就是我们写好的原文内容。

点击下边的「添加节点」，然后创建一个大模型节点。

这个 AI 大模型的作用就是帮我们检查错别字，检查病句以及生成 10 个爆款标题。

这个大模型节点的参数：模型我选择的是 kimi 大模型，input 参数就是我们开始节点的 article 参数。

接下来我们给这个大模型设置角色和任务。

系统提示词就是给这个大模型设置角色提示词；

用户提示词，就是给这个大模型布置任务，让 AI 大模型按照我们的要求执行任务。

我直接把我写好的提示词复制过来。

系统提示词：

你是文章校验转专家，我需要你根据输入 {{input}} 的内容进行文章校验，检查错别字或者病句，并给文章起 10 个爆款标题。

用户提示词：

按以下操作流程对数据 {{input}} 进行文章校验，流程如下：

1. 检查错别字：

- 检查文章当中的错别字；

- 标准出有哪些错别字，修改后正确的字应该是什么？

2. 检查病句：

- 检查文档中的病句，比如是否语句是否通顺等；

- 展示病句是哪些，修改后，正确的语句应该是什么？

3、起 10 个爆款标题，标题需要具备以下特点：

- 短小精悍，震撼有力（字数不超过 20 字）。

- 有吸引力，结合好奇心、数字、利益导向、情绪共鸣等元素。

- 点击率高，通过制造紧迫感或埋下悬念吸引用户点击。

要求：请按照 MarkDown 格式输出，注意排版和标题的使用，尤其是段落要换行，让格式结构和排版保持整洁、漂亮。

4. 完成以上步骤后，输出校验完毕之后的原文。

到这里， 中间大模型节点，我们就配置好了。

结束节点：

这个节点这里的 output 参数就是大模型输出的结果参数。

到这里我们业务逻辑算是配置完成了，然后我测试了一下，整个业务逻辑没问题，

四、搭建用户界面

我们点击「用户界面」切换到用户界面这个页面之中，开始往容器里拖拽组件，来搭建界面。

首先，我们拖拽容器，通过容器来完成我们需要的布局。

第一步，我先拖拽一个底部的容器，专门用来放标题，标题是：文章校验专家。

点击容器，然后拖拽到页面的正上方。

容器拖拽完成之后，我们就可以往里面放组件了，我们在这里是标题，所以需要一个文本组件就行了，那我们就把文本组件拖拽过去。

把 Text 文本组件拖拽到指定位置之后，点击最右边的侧边栏，在这里给文本组件配置参数，比如：字体，宽度，颜色，是否居中等等。

我这里是让文本组件的宽度 100% ，然后选择水平对齐方式为：文本居中，然后再给组件内容的文本内容修改为：文章校验专家。字体为粗体，字体大小 20 。

这样一个应用的标题基本就配置完成了。

接下来，我们开始布局输入框和展示框和按钮了。

首先，我们再拖拽一个容器进来。

注意，这个容器拖进来之后，我们要把这个容器的排列方向改成横向。为什么要改成横向呢？因为我们需要在这个容器内放三个组件，横向排列。从左到右是：输入框、按钮和 MarkDown 展示框。

所以，在横向排列这三个组件之前，再专门拖拽三个专门放置这 3 个组件的容器进来。排列如下：

三个容器横向排列。

这里我们可以给 3 个容器设置占页面的百分比和高度。比如：左边容器我们需要放一个输入框，占父容器的宽度是：45%，中间是放一个按钮，按钮小宽度是 10%，右边是一个展示检验完结果的展示框，占比是 45% 。

看到了吗？在最右边我们可以设置各种参数，比如：宽度、高度，这里统一是 500 px，还有间距值，内边距和外边距之类的，大家可以根据自己的需求，进行相应的调整，让界面更美观，更齐整。

其他几个容器都是这么配置。

我们开始往容器里拖拽组件了。我们先拖拽一个「多行输入框」组件。如下：

拖拽进来之后，我们可以点击这个组件，然后在右边的侧边栏配置各种参数。比如：标签内容我们修改为「文章原文」，然后宽度和高度都是占满父容器。

我们往中间容器当中拖拽一个按钮进来，然后给这个按钮起名是：检验，按钮位置竖向居中，尺寸宽度 100% 填充父容器，高度固定 40 px。

大家可以仔细看看我右边的参数配置，按钮样式、内容、位置和尺寸，大家可以根据自己的需求调整。

我们接下来往最右边的容器当中拖拽进一个 MarkDown 组件，用来展示结果。

看看右边的侧边栏我对这个组件参数的配置，尺寸和样式，这里大家可以根据自己的需求配置，我的宽度和高度都是 100% 填满父容器，样式为圆角 20 ，内边距 10 ，加了一个 1 px 的黑色边框。

到这里，我们的用户界面算是搭建完成了。

当然了，大家可能看出来一个问题，不算好看，怎么背景色都是蓝色啊？这么做是为了让我们看清楚布局的结构，当界面布局完成之后，我们可以点击每个容器和组件，然后修改样式的参数来让布局更漂亮。

接下来，我们就改一改，我们把最大的页面容器，颜色改成一个淡黄色的，有一种泛黄的纸的颜色。

点击「导航」，点击 Page1 图层，再点击右边侧边栏的「背景色」，选中那个淡淡的黄色。

以此类推，我们把其他容器的蓝色背景都换成这个颜色。比如：Div1 。

同理，我就不截图，一一这么修改。

到这里，好像还是不好看，那个地方不好看呢？就是 MarkDown 组件的颜色，我需要让他的背景变成白色和输入框遥想对应。

点击 MarkDown1 图层，然后修改背景色。

这里将背景色修改成了白色，边框修改成了灰色，并把 MarkDown 组件中默认的内容清空。

这样就好了，我们可以预览一下界面。

这样是不是就很漂亮了？

到这里，整个用户界面才算真正搭建完成，接下来就是将组件和工作流进行事件绑定了。

五、事件绑定

我们这个应用事件绑定主要是在「校验」按钮上。

点击校验按钮，将输入框中的内容和工作流的开始节点的输入参数相关联。

所以，我们点击按钮组件，然后点击添加事件。

选中按钮，点击事件下的新建，事件类型选择「点击时」，执行动作是：调用 Workflow ，就是工作流，Workflow 里选中我们在这个项目下创建的工作流。

选中工作流之后，就会让你选择入参配置，在入参配置这里，你点击这个输入框，放大到整屏幕，然后去里面选择输入框的 Value 值，就跟工作流的输入参数 article 关联上了。如下：

点击确认，就会关联成功。

接下来，我们就要给展示组件 MarkDown 关联工作流的输出结果参数了。将工作流处理完成的内容展示在 MarkDown 组件之中。

我们选中 MarkDown 组件，在内容框这里，选择放大，然后选择工作流的输出参数进行关联。

填入成功之后，工作流输入的结果就会在这里展示。

到这里，事件就关联成功了，但是，有一个问题，就是工作流处理需求可能需要时间，我们需要给按钮设置一个加载状态，点击校验按钮之后，让按钮当中有一个加载状态。

我们选中按钮组件，然后，选择「加载态」的输入框，点击点击放大输入框，在这里选择工作流加载状态。

这里的加载状态是布尔值，当工作流开始运行的时候，返回 true ，加载状态就展示了，结束，返回 false ，加载状态消失。

好了，事件我们绑定完车了，来个预览测试一下。

你看，我复制粘贴了一段我准备好的文案，然后点击校验按钮之后，校验按钮当中就会出现一个加载旋转的圈，正在旋转，表示工作流正在处理。

当处理完成之后，效果如下：

错别字和病句以及 10 个爆款标题和修改后的原文都给输出了。

效果还不错，对吧？

测试完成之后，我们可以发布了。

到这里，整个文章校验的 AI 应用就全部完成了。

总结一下吧。看完这个流程和过程，大家有什么感受呢？是不是创建一个应用变得很简单了呢？当你创建应用成功之后，以后再使用，就可以直接傻瓜式的界面操作了，再也不用对着冰冷的对话框聊天了。

这用 UI 界面式的应用，最大的特点就是对于小白用户来讲，一目了然，一看就知道该怎么操作，该怎么使用，比使用聊天对话框跟 AI 聊天强多了。

创业者/开发者的机会

当大家看完整个搭建过程，我相信大家应该能够感受到了对于创业者的机会来自于哪里了吧？就是基于 AI 大模型去搭建 AI 应用，如果你有这种搭建 AI 应用的能力，完全可以去找客户，根据客户的需求和业务，帮助他们搭建 AI 应用来提效，助力客户快速跟上 AI 时代的变化。

我周围有很多朋友，都在开展类似的业务，2b 和 2c 的都有，如果你有人脉资源，可以找到客户，完全可以做 to B ，那如果你不具备对接企业的能力，可以做 to B ，很多人都开始做短视频直播去对接有 AI 需求的个体用户。这市场其实挺大的。

而且，如果你是开发者的话，其实，你可以提供模版或者工作流，前一段时间，扣子（Coze）也推出了付费模版功能，如果你开发的模版非常实用，能够解决很多人的痛点的话，那很多人就可以付费购买你的模版，去搭建 AI 应用。这就是像移动互联网时代的应用市场平台，你开发一个优质的应用，别人付费下载使用。这个逻辑是相通的。

开发者大会

给大家宣布一个好消息，如果你想赶上 AI 应用这班车，在 AI 应用时代能够分一杯羹，赚点钱的话，一并不要错过扣子平台的开发者大会。

火山引擎将于12月17日~12月19日在上海举办2024冬季FORCE原动力大会，其中扣子(Coze)在12月19日下午将进行面向扣子开发者的分论坛活动，开发者将与扣子核心团队面对面，具体内容包括:

官方面对面交流:

平台功能抢先知，最新发布的Project IDE/UI builder、最近火热的模板的最新功能、内测抢破头的语音API，都将在本次面对面中进一步发布独家信息。

成功案例分享:

资深扣子开发者实战案例分享，启发创意，探索变现。资深技术大拿、知名大V、AI创业者、企业内的AI先行者，这是AI开发最佳实践者的聚会。

长按下方海报，扫码预约直播

开发者主题探讨:

关于扣子 “好的”、“坏的”、“想吐槽的”，大胆开麦，核心团队准备好了聆听所有声音。

想了解更多开发者日详情点击文章《扣子开发者日｜邀你参与扣子创作者年终聚会，聊聊 AI 应用的未来》了解更多。

↓点击阅读原文报名开发者日活动