一、引言

一个月前，我写了一篇《AI 开发的捷径：工作流模式》，引起了很多读者的兴趣。

大家都认同，AI 应用是开发者的机会，而图形化、低代码/无代码、不需要编程基础的"工作流模式"，正是 AI 应用开发的入门捷径。

但是，我的那篇文章只介绍概念，没有操作步骤。很多读者实际上手时，遇到了困难，有些地方不理解，做不下去。

今天就是后续，我详细演示，一步步图解，没有编程基础，如何搭建一个最简单的 AI 应用。只要你跟着做，就能做出来。

二、开发工具

这篇教程使用的开发工具是扣子（Coze），所有操作都在它的浏览器 IDE（集成开发环境）中完成，

选择扣子（Coze），主要原因有三个。

（1）它是国产的 AI 应用开发平台，字节跳动的产品，界面、文档、客服都是中文。

（2）它有无代码编辑器 Project IDE，包含组件拖拽的 UIBuilder，可以生成全功能的前端界面，上手门槛相对低。

同时，它也提供后端数据库，可以数据读写。

（3）它免费使用（只要不超过使用额度），发布上线也不收费，适合新手练习。

三、示例项目

我们的示例项目，是一个最简单的"AI 文言文生成器"。

大家先看成品，可以点进去试用。（建议 PC 访问，UI 还没有适配手机。）

输入一段汉语白话文，点击按钮，AI 就会自动生成文言文。

架构上，它非常简单：前端是一个网页表单，将用户的输入发送给后端的 AI 模型，并展示后端的返回结果。

它的开发只需要两步，第一步先让后端的 AI 模型跑起来，第二步做一个网页，连接后端即可。

扣子的方便之处在于，前后端的生成都是图形化操作：后端是编排工作流的节点，前端是 UIBuilder 的界面拖拽组件。

下面就是开发步骤。为了保证大家跟得上，我写得比较详细，看起来有点长，但是实际操作是很快的，熟练的话，10分钟就能完成。

四、创建项目

首先是开发的准备工作，先创建 AI 应用。

（1）访问扣子官网，点击右上角的"基础版登录"。（基础版只比专业版少一些企业级功能，普通用户完全够用。）

（2）登录后，自动跳转到个人主页，点击左侧菜单的"工作空间"。

工作空间里面，有"项目开发"和"资源库"两个页面。进入"项目开发"，可以看到你所有的项目。

（3）点击右上角的"创建"按钮，跳出一个弹框。

上面有两个选项，"创建智能体"是创建一个传统的 AI 聊天，"创建应用"则是创建一个自定义界面的 AI 应用。

（4）选择"创建应用"，这时会让你选择应用模版，点击"创建空白应用"。

接着，输入项目的名称，这里是"AI 文言生成器"。

至此，项目创建完毕，系统会自动进入"AI 文言生成器"的应用主页（下图），正式的开发工作就要开始了。

五、业务逻辑

应用主页的最上方，有"业务逻辑"和"用户界面"两个分页，默认是"业务逻辑"页面。

这一节就讲解如何创建业务逻辑，也就是后端的 AI 模型。

我们采用工作流模式，即将业务逻辑编排成一个个节点。

（1）点击左侧菜单的"工作流"后面的"+"号，选择"新建工作流"。

输入工作流的名称和描述。（注意，名称只能是英文字母、数字和下划线，本例是 classicalchinesecreator。）

（2）工作流创建成功后，名称会出现在左侧菜单的"工作流"标签下方。点击它，就进入该工作流的"节点编排"画布。

画布上，默认有"开始"和"结束"两个节点。

（3）点击下方的"添加节点"，添加一个新节点，类型设为"大模型"。

然后，将这三个节点连起来（通过拖动边框上的控制点）。

（4）配置"开始"节点。双击该节点，在配置框增加一个 content 变量，表示用户的输入内容。

（5）配置"大模型"节点。

配置窗口的各个选项，填写如下。

模型：可以按自己的需要选择，这里保持默认值"豆包 Function call 模型"。

输入：将原来的 input 参数改名为 content，并跟"开始节点"的 content 变量连接起来。

系统提示词：输入以下内容，用来设定大模型的行为。

角色

你是一个专业的汉语文言文作者，能够准确地将用户输入的汉语白话文内容改写为文言文，不进行随意扩写。

技能

技能 1：文言文写作

1. 当用户提供一段汉语白话文时，迅速将其改写成文言文。
2. 确保改写后的文言文的准确性和完整性。

限制：

• 只进行文言文改写，不回答与文言文改写无关的问题。
• 严格按照用户提供的汉语白话文进行改写，不得擅自增加内容。

用户提示词：输入以下内容，作为给系统的直接命令。

将用户输入的汉语白话文{{content}}改写成文言文。

上面文本中的{{content}}，表示此处系统将插入 content 变量的内容。

输出：将输出格式改为"文本"。

（6）配置"结束"节点。首先点击配置框上部的"返回文本"。

输出变量：将 output 参数关联"大模型"节点的 output 变量。

回答内容：输入{{output}}（表示插入 output 变量的内容），并打开"流式输出"（即打字机效果）。

至此，整个工作流的搭建全部完成，可以单击画布右上角绿色的"试运行"按钮，测试工作流是否正常运行。

在 content 输入框，输入测试内容，比如"今天天气很好"。

然后，点击下方的运行按钮，就可以得到运行结果（今日，天善）。

如果一切正常，就可以开始搭建用户界面。

六、用户界面的搭建：页面布局

（1）点击进入画布上方的"用户界面"分页。

（2）在左侧菜单的组件面板，找到布局组件 > 容器组件，将其拖入中间的画布，作为页面的标题区域。

系统自动将这个容器命名为 Div1，双击进行配置。

尺寸：宽度为100%，高度为 60px。

布局：排列方向为"横向"。

样式：去除背景色，将边框设为灰色（#E2E8F0）。

（3）在 Div1 下方，再拖入一个容器组件，系统自动命名为 Div2，用作功能区域。

配置基本一样：尺寸部分，宽度和高度都设为填充容器；布局部分，排列方向为横向；样式部分，去除背景色。

（4）在 Div2 内部的左侧部分，拖入一个容器组件 Div3，用作用户输入区域。

宽度设为50%，高度设为 550px，样式删除背景色。

（5）在 Div2 内部的右侧部分，拖入一个容器组件 Div4，用作展示结果区域。

宽度设为50%，高度设为 550px，样式删除背景色。

至此，页面布局如下图。

七、用户界面的搭建：页面细化

做好布局后，下一步完善页面细节。

（1）在 Div1 内部，拖入推荐组件 > 文本组件，作为标题文本。

标题内容设为"AI 文言文生成器"，字号改成24，字重为粗体。

（2）在 Div3 中拖入一个表单组件，删除不需要的元素，只剩下文本输入框和按钮。

表单组件：宽度和高度都设为填充容器，并删除边框。

文本输入框：拉伸高度，宽度设为填充容器，标签和占位文案设为"输入汉语白话文"。

按钮：文本改为"生成文言文"。

完成后的表单效果如下图。

（3）在 Div4 中拖入一个展示组件 > Markdown 组件，作为展示文言文区域。

删除 Markdown 组件的已有内容，改成"###### 生成结果"。高度和宽度改为填充容器，圆角设为10，内边距设为20，边框设为灰色（#CBD5E1）。

至此，页面细化完成，单击属性面板上方的预览，查看效果。

八、用户界面的搭建：配置事件

页面外观做完后，要配置事件，将后端的业务逻辑与用户界面连接起来。

（1）点击"生成文言文"按钮，在配置面板切换到"事件"，点击"新建"。

事件类型设为"点击时"，执行动作设为"调用 Workflow"，workflow 设为已经创建好的"classicalchinesecreator"，并将工作流的入参content设为文本输入框的值 {{ Textarea1.value }}。

（2）配置生成结果区域，展示工作流的返回结果。

选中 Markdown 组件，点击"内容"栏的扩展按钮。

扩展面板中，在###### 生成结果后面添加一行，插入工作流的返回结果{{ classical_chinese_creator.data }}。

完成所有配置后，单击右上角"预览"按钮，测试整体效果。

如果一切正常，这个 AI 应用就算开发完成了。

九、应用发布

开发完成后，就可以发布该应用，让其他人也可以使用。

点击右上角"发布"按钮，版本号设为 v0.0.1，发布平台设为发布到扣子商店。

至此大功告成，"AI 文言生成器"就登录扣子商店，向世界公开了。

十、总结

大家可以根据这个示例，改变输入 AI 模型的提示，让它做不同的任务，就能变化出很多不同功能的应用。

比如，官方的"AI 翻译"示例，就是让 AI 把用户输入的中文译成其他语言，跟"AI 文言文生成器"异曲同工。

除了文本生成，扣子还提供许多其他能力，比如抓取外部数据、数据库读写等，从而可以做出更强大的 AI 应用。

总之，"工作流模式"使用图形化界面搭建一个 AI 应用，简单而便捷，随时查看效果，一键发布，值得大家尝试。

（此处有分割线。）

最后是一个活动预告。

扣子邀请我，参加12月19日在上海举行的"扣子开发者日"，也欢迎大家参加。

届时，字节的 AI 工程师会跟大家面对面交流，如何开发和推广 AI 应用。这是很好的学习交流、获取资源的机会，点击这里了解详情。

扫描下方海报二​维码，或者点击链接，现在就可以线下报名参加，或者线上预约直播。

（完）