阿里云百炼上线UI设计器：给智能体换装，从此人人都是界面设计师

如下图，想给自己的智能体制作一套漂亮的衣服，整体流程如下：

创建智能体

这里默认大家登陆过阿里云百炼平台，如果没有可以查看这篇文章: 阿里云让MCP不再有门槛 10分钟 手把手教你搭建MCP智能体

本篇文章主要说明如何使用UI设计器功能，所以就开发一个简单AI智能体做为演示。

首先进入阿里云百炼的应用创建界面，如下图进行智能体的创建。

智能体应用搭建界面如下，整体功能和其他平台类似，如果你用其他平台开发过智能体，那么一定不会觉得陌生。

接下来输入提示词，之后还有插件、MCP等等其他功能，这里我创建了一个儿童英语陪练的智能体，只使用了提示词。

# 角色
你是一位富有耐心和热情的小学英语教师，擅长通过有趣的方式激发孩子们对英语学习的兴趣。你的目标是帮助孩子们在轻松愉快的氛围中提高英语听说能力，并鼓励他们大胆地用英语表达自己。

## 技能
### 技能 1: 激发英语学习兴趣
- 采用生动有趣的方法吸引孩子们的注意力，使他们对英语学习产生浓厚的兴趣。
- 通过游戏、歌曲、故事等互动活动，让孩子们在玩中学，学中玩。

### 抃能 2: 引导孩子大胆表达
- 鼓励孩子们用英语进行日常对话，培养他们的口语表达能力。
- 通过角色扮演、小组讨论等形式，增强孩子们的语言运用能力和自信心。

### 技能 3: 中英文结合教学
- 使用中文解释单词和句子的意思，确保孩子们能够理解所学内容。
- 用标准的英语发音教孩子们读单词和句子，帮助他们掌握正确的语音语调。

## 限制条件
- 只讨论与小学英语教学相关的内容。
- 教学过程中始终以激发孩子的学习兴趣为首要目标。
- 在讲解新词汇或句子时，先用中文解释含义，再用英文教授发音。
- 保持积极乐观的态度，鼓励孩子们大胆开口说英语。
- 确保所有教学内容适合小学生的认知水平和语言能力。

智能体测试通过后，点击右上角的发布。

获取API_KEY

创建UI

在阿里云百炼平台的应用tab中，左侧有一个UI设计器，点击创建UI按钮。

首先会要求你给这个UI起一个名字，上次个图标(非必填)

之后会进入创建界面，这里官方给出了两个模板，一个是对话类型的，一个是知识库类型，如果觉得和自己的设计不符合，也可以选择从空白模板搭建。

因为刚开始接触，先从最简单的开始大家，这里我选择AI基础对话模板，下一步就是要求填写刚才获取的api_key等信息。

技巧

技巧: 这里说明下，不用你去记住创建的key,只要你创建过，在这步就会有下拉框让你选择。

完成API_KEY和APP_ID的配置后，点击确定就进入了UI设计器的编辑界面。

因为刚才选择了对话模板，所以进入编辑页面后，已经预制了一个AI聊天的组件，此时你与它沟通已经在使用你创建的智能体应用了。你需要做的就是修改欢迎语，右侧有很多调整界面样式的参数可供配置。

发布

如果调整好以后，就可以点击右上角的发布按钮了，这里可以选择是发布为开发环境，还是生成环境(生成环境需要单独收费)

上面的例子很简单，只是带大家先跑通一下流程

接下来，给大家分享下自定义UI界面时该如何操作。

这里要和大家说明一下，UI设计器不一定要绑定智能体使用，它本身也是一个单独的产品。可以直接绑定大模型。

在模板市场里有很多可供学习的模板

由于功能太多了，这里演示不全，大家可以查看官方文档，里面有样例和每个组件的使用教程文档地址

这里给大家介绍一个讨巧的办法，用AI生成页面设计。进入UI设计器，选择页面&布局功能，点击AI设计生成页面。

在这里输入你的界面描述，或者直接上传图片,我这里让它帮我设计一个点餐系统的页面。

在接收到你的提示词后，先进行需求确认，之后会根据需求帮你选择出需要的组件。点击生成页面按钮，Ai开始根据需求自动生成页面。

整体页面框架很快就搭建好了，现在看可能比较丑，但是添加上页面，调整CSS格式后页面就会变得很不错。