编辑器围绕画布分为四个区域。需要时，工作区会滑出覆盖在画布上；用完后再滑走。
| 区域 | 包含内容 |
|---|---|
| 工具栏（顶部） | 站点菜单、页面切换器、工具、断点切换器、缩放、时间轴、撤销/重做、协作者、同步状态、Preview 和 Publish。 |
| 左侧边栏 | Layers、Pages、Components 和 Assets 标签页，底部是工作区按钮。 |
| 画布（中间） | 当前页面每个断点各一个画板、组件画板以及散落的元素。 |
| 检查器（右侧） | Design、Interactions 和 Tokens 标签页。未选中任何内容时显示页面设置。 |
工具栏
- 站点菜单：站点设置、插件、另存为模板、导出和键盘快捷键。
- 页面切换器：在页面和模板页面之间跳转。
- 工具：Select V、Frame F、Text T、Image I 和 Hand H。
- Sections：在页面末尾插入一个已保存的区块。
- 断点切换器：选择样式修改写入哪个断点。
- 缩放、撤销/重做、显示站点成员在线状态的头像栈，以及同步状态标签（已保存、保存中、离线）。
- Timeline ⌥T 打开交互的时间轴面板。
- Preview ⌘↵ 在画布上运行交互、绑定和客户端工作流。Publish 发布到预发布或生产环境。
左侧边栏
- Layers：页面的节点树。拖拽可调整顺序，双击或按 ↵ 重命名，通过行操作隐藏和锁定。
- Pages：添加、重命名页面并调整顺序；为 CMS 集合创建模板页面。
- Components：站点的组件；把组件拖到画布上即可放置一个实例。
- Assets：已上传的图片和文件。
工作区
左侧边栏底部的按钮会在画布上方打开一个工作区。再次点击同一个按钮即可回到画布。
Data当前页面的变量、集成、查询和公式。
Logic客户端和服务端工作流，支持实时测试运行和运行日志。
CMS集合、条目、富文本、定时发布和版本。
Forms站点的表单、表单设置以及各环境的提交记录。
Tables原生表、数据行、行规则和访客列表。
检查器
Design 显示适用于当前选中内容的分区：内容、链接、图片、布局、尺寸、位置、排版、填充、边框、效果、可见性、事件，以及表单、字段、实例和集合列表专用的分区。分区上方的类栏用于选择元素使用哪些类，状态栏用于选择悬停、聚焦或按下状态。
Interactions 列出由选中元素触发或以它为目标的动画。Tokens 用于编辑站点的颜色、字体和间距。未选中任何内容时，检查器显示页面设置：标题、路径、SEO 预览和访问规则。
时间轴面板
点击工具栏中的 Timeline 按钮，或按 ⌥T，会在画布下方停靠一个时间轴。它以秒为单位，用横条显示一个交互的各个步骤：拖动播放头可以在画布上查看动画，也可以播放动画，或拖动横条调整时间。参见时间轴面板。
AI 面板
在设计会话中，画布旁边有一个 AI 面板。描述你想做的修改，它就会通过与你相同的、经过校验且可撤销的操作来编辑页面。参见 AI 与 MCP。
协同工作
站点中的每个人都在编辑同一份实时文档。你能看到其他人的头像、光标和选中内容。修改会自动合并，撤销只会还原你自己的编辑。