> ## 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.

创建 UI 页面后，你会得到一个空白的页面。通过简单的拖放操作，你可以轻松地向页面中添加所需的组件，从而搭建用户界面。用户界面编辑器提供了丰富的 UI 组件，满足不同用户界面的搭建需求，组件详情请参考[组件概述](/guides/component_overview_web)。
## 操作步骤 {#1795cdc9}
1. 登录[扣子编程](https://code.coze.cn/home)。
2. 在页面顶部选择目标工作空间，然后在左侧导航栏中单击**新建项目**。
3. 在**低代码模式**区域，将鼠标移动到**更多**，然后单击**打开应用开发**。
   ![Image=439x231](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/539d45b71bf14a3e8e1cb75a1d781fbd~tplv-goo7wpa0wc-image.image)



4. 在**应用模板**页面，单击**空白应用**。
5. 单击**用户界面**页签，选择页面类型，然后单击**开始搭建**。
   扣子编程支持搭建网页端用户界面，也支持搭建小程序和 H5 端用户界面。
6. 选中目标页面，然后单击**组件**页签。
7. 在组件栏中，拖拽目标组件至中间画布区域。
   如果不再需要某个组件，选中该组件并按下 Backspace ** 键进行删除。
   ![Image=555x239](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4133c5184b4f484cb5721086759cd4a1~tplv-goo7wpa0wc-image.image)

## 相关操作 {#b28bddb4}
### 删除组件 {#7766cd2e}
在**用户界面**的**结构**页签中，将光标悬浮在目标组件上，单击**删除**图标，删除该组件；或者在画布中选中目标组件，按下 Delete 键进行删除。
:::notice 注意
删除组件后，无法恢复，请谨慎操作。
:::
![Image=260x327](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5de4c15f71d84f7ba6585068d012904a~tplv-goo7wpa0wc-image.image)
## 下一步 {#2050e8f0}
[设置组件属性和事件](/guides/set_properties_events)