✨ 产品优势
ingFang SC', -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;font-size: 15px;letter-spacing: 0.1em;color: rgb(34, 34, 34);word-break: break-all;">阿里云百炼的UI设计器集成了阿里云多端低代码开发平台魔笔的核心能力：🚀 支持范围
如何使用UI设计器？
笨笨与用户的对话
你好！这个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设计生成页面。