> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coze.cn/llms.txt
> Use this file to discover all available pages before exploring further.

用户界面编辑器作为扣子编程的前端低代码搭建功能，用于创建和编辑用户界面，开发者可以通过拖放组件来构建用户界面布局，并设置组件的属性和样式。此外，用户界面编辑器还支持为组件绑定事件，配置事件处理程序，例如按钮点击或列表项选择，从而实现交互逻辑。
用户界面编辑器既提供了一般前端低代码工具的通用搭建能力，又提供了调用扣子编程内各项资源的能力，将界面编辑器与扣子编程的工作流、插件、知识库、数据库功能结合，开发者可以搭建出前后端兼具的全栈低代码应用。
## 功能特性 {#3f8afa8e}
用户界面编辑器具有以下功能特性：

* **丰富的组件**：提供了丰富的 UI 组件，覆盖了从基础的按钮、文本到复杂的表单等多种组件，满足不同用户界面的搭建需求，使用户界面构建更加灵活多样。
* **组件事件绑定**：支持为组件配置事件处理程序，轻松实现复杂的交互逻辑。
* **多平台支持**：用户界面编辑器不仅支持搭建网页端用户界面，还可以搭建小程序和H5端的用户界面。
* **拖拽式搭建**：采用图形化界面，通过直观的拖放操作，简化了页面布局过程，使得开发者即使没有编程经验也能轻松上手。
* **自定义样式**：开发者可以根据设计需求调整组件的外观，包括颜色、字体、大小等属性，实现个性化的页面设计。
* **高性能渲染**：即使是构建复杂页面，也能保持流畅的用户体验，提升应用的性能和响应速度。

## 应用场景 {#a92373dc}
用户界面编辑器支持多平台界面构建，不仅能设计桌面网页端的用户界面，还能轻松搭建小程序和 H5 端的界面。

* 图像生成：通过用户界面编辑器，可以轻松构建图像编辑和生成工具的用户界面，并绑定自定义编排的图像生成工作流，能够根据用户的描述和选择的比例自动生成图像，为用户提供一种从创意构思到视觉实现的创作体验。
   ![Image=506x332](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2ae11fbd4c8546ce8786fce05ad39797~tplv-goo7wpa0wc-image.image)
* 内容写作：通过用户界面编辑器，可以高效地设计出一个专为内容写作的用户界面，并绑定文本处理工作流。这个界面能够识别用户的写作主题和要求，自动生成写作内容，提供一个从构思到成稿的写作体验。
   ![Image=235x507](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/dd704f06fe8b4448afb958c9790791b2~tplv-goo7wpa0wc-image.image)
* 创意写真：通过用户界面编辑器，开发者可以快速搭建一个生成创意作品的个性化用户界面，并绑定图像编排工作流。这个界面能够根据用户上传的图片以及指定的风格，自动生成创意十足的写真，提供一个从灵感捕捉到视觉展示的艺术创意体验。
   ![Image=515x241](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e04d5609ec664f0ca51507ebf6b7da44~tplv-goo7wpa0wc-image.image)

## 组件列表 {#a9ff0711}
用户界面编辑器支持丰富的组件类型，例如输入组件、展示组件和布局组件，每一类组件包含多个不同的组件。用户界面编辑器支持 Web 端、小程序和 H5 端的用户界面开发，不同开发端支持的组件也不同，组件详情请参考[组件概述](/guides/component_overview)。
## 使用限制 {#9d06a315}
使用用户界面编辑器前，请了解以下限制：

* 用户界面编辑器支持 Web 端、小程序和 H5 端的用户界面开发。
* 一个低代码应用最多支持创建 20 个 UI 页面。 

## 用户界面搭建流程 {#4731f232}
用户界面编辑器是一款高效的可视化页面搭建工具，即使是没有编程背景的开发者也能轻松上手。用户界面搭建流程如下：
![Image=1818x300](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/88ee65d2dcb848c892acfed17f8697ff~tplv-goo7wpa0wc-image.image)

1. [创建页面](/guides/create_page)
   使用用户界面编辑器搭建用户界面，首先需要创建一个新页面，为后续添加组件和布局设计提供基础。
2. [为页面添加组件](/guides/add_components)
   页面创建完成后，你需要添加所需的组件。用户界面编辑器提供了丰富的组件库，包括按钮、文本框、列表、导航栏等，以满足不同的设计需求。
3. （可选）[设置组件内容参数](/guides/set_content_parameters)
   如果你在页面中添加了输入类型的组件，例如文本、多行文本、按钮，你需要为这些组件配置内容参数。
4. [设置组件属性和事件](/guides/set_properties_events)
   为了让页面具有交互性，需要为组件设置属性和绑定事件。
5. [预览页面](/guides/preview_page)
   在完成页面的搭建后，需要进行预览以检查页面的显示效果和交互逻辑是否符合预期。