我要投稿

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

发布日期：2025-07-23 08:07:53 浏览次数： 1563

作者：笨笨聊AI

微信搜一搜，关注“笨笨聊AI”

今天用阿里云百炼平台搭建智能体，发现原来官方又更新了。

相较于字节，阿里太低调了，每次都是默默更新。这次更新的功能是 UI设计器。一个可以让人们通过拖拉拽的方式来设计自己的系统界面的工具，如果你对扣子比较了解，就相当于搭建扣子应用，但是组件更为丰富。

✨ 产品优势

阿里云百炼的UI设计器集成了阿里云多端低代码开发平台魔笔的核心能力：

• 无需编码： UI 设计器提供可视化编辑器。您可以通过拖拽组件、配置路由和布局，快速构建页面，无需编码。
• 服务集成： 支持集成多种外部资源，如百炼智能体、大模型、数据库和 HTTP 服务，灵活扩展应用能力。
• 权限管理： 内置测试账号体系，支持钉钉、企业微信等一键登录。兼容 OIDC、OAuth2.0 等标准协议，并可通过权限组管理访问权限。
• 一键发布： 默认支持一键发布至开发环境，通过内置域名即可访问。生产环境发布支持绑定自定义域名。

🚀 支持范围

• UI设计器支持百炼智能体应用、工作流应用和智能体编排应用。
• UI设计器支持Web PC和H5端的应用界面开发。
• UI设计器需要与百炼应用在同一业务空间。

如何使用UI设计器？

笨笨与用户的对话

用

你好！这个UI设计器看起来很不错，能介绍一下主要功能吗？

您好！请跟着我一起往下看吧。

笨

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

创建智能体

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

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

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

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

首先选择使用的大模型，因为注册用户阿里云都会赠送tokens，可以优先使用有免费额度的大模型。

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

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

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

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

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

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

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

获取API_KEY

创建UI

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

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

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

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

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

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