designer-tools

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Page Structure

页面结构

Build, inspect, and manage page elements and components in the Webflow Designer.

在Webflow Designer中构建、查看和管理页面元素与组件。

Important Note

重要说明

ALWAYS use Webflow MCP tools for all operations:

Use Webflow MCP's
```
webflow_guide_tool
```
to get best practices before any other tool call
Use Webflow MCP's
```
data_sites_tool
```
with action
```
list_sites
```
to identify the target site
Use Webflow MCP's
```
de_page_tool
```
to get current page, switch pages, or create pages/folders
Use Webflow MCP's
```
element_tool
```
with action
```
get_all_elements
```
to retrieve page elements
Use Webflow MCP's
```
element_tool
```
with action
```
select_element
```
to select a specific element
Use Webflow MCP's
```
element_tool
```
with action
```
add_or_update_attribute
```
to update element attributes
Use Webflow MCP's
```
element_builder
```
to create new elements
Use Webflow MCP's
```
element_snapshot_tool
```
to get visual previews of elements before and after changes
Use Webflow MCP's
```
style_tool
```
to create and update styles on elements
Use Webflow MCP's
```
de_learn_more_about_styles
```
to check supported style properties
Use Webflow MCP's
```
data_components_tool
```
with action
```
list_components
```
to list all site components
Use Webflow MCP's
```
data_components_tool
```
with action
```
get_component_content
```
to inspect a component
Use Webflow MCP's
```
data_components_tool
```
with action
```
update_component_content
```
to update component content
Use Webflow MCP's
```
data_components_tool
```
with action
```
get_component_properties
```
to get component properties
Use Webflow MCP's
```
data_components_tool
```
with action
```
update_component_properties
```
to update component properties
Use Webflow MCP's
```
de_component_tool
```
to manage component instances in the Designer
DO NOT use any other tools or methods for Webflow operations
All tool calls must include the required
```
context
```
parameter (15-25 words, third-person perspective)
Designer connection required — user must have Webflow Designer open and connected

所有操作必须使用Webflow MCP工具：

调用任何其他工具前，首先使用Webflow MCP的
```
webflow_guide_tool
```
获取最佳实践
使用Webflow MCP的
```
data_sites_tool
```
配合
```
list_sites
```
操作定位目标站点
使用Webflow MCP的
```
de_page_tool
```
获取当前页面、切换页面或者创建页面/文件夹
使用Webflow MCP的
```
element_tool
```
配合
```
get_all_elements
```
操作拉取页面元素
使用Webflow MCP的
```
element_tool
```
配合
```
select_element
```
操作选中指定元素
使用Webflow MCP的
```
element_tool
```
配合
```
add_or_update_attribute
```
操作更新元素属性
使用Webflow MCP的
```
element_builder
```
创建新元素
使用Webflow MCP的
```
element_snapshot_tool
```
获取元素修改前后的可视化预览
使用Webflow MCP的
```
style_tool
```
创建和更新元素样式
使用Webflow MCP的
```
de_learn_more_about_styles
```
查询支持的样式属性
使用Webflow MCP的
```
data_components_tool
```
配合
```
list_components
```
操作列出站点所有组件
使用Webflow MCP的
```
data_components_tool
```
配合
```
get_component_content
```
操作查看组件内容
使用Webflow MCP的
```
data_components_tool
```
配合
```
update_component_content
```
操作更新组件内容
使用Webflow MCP的
```
data_components_tool
```
配合
```
get_component_properties
```
操作获取组件属性
使用Webflow MCP的
```
data_components_tool
```
配合
```
update_component_properties
```
操作更新组件属性
使用Webflow MCP的
```
de_component_tool
```
在Designer中管理组件实例
禁止使用其他任何工具或方法执行Webflow操作
所有工具调用必须包含必填的
```
context
```
参数（15-25字，第三人称视角）
需要连接Designer——用户必须打开并连接Webflow Designer

Instructions

操作指引

Phase 1: Discovery

阶段1：信息收集

Call
webflow_guide_tool
first — always the first MCP tool call in any workflow
Get the site: Use
```
data_sites_tool
```
with action
```
list_sites
```
to identify the target site. If only one site exists, use it automatically.
Get current page: Use
```
de_page_tool
```
to identify which page is active in the Designer
If user specifies a different page: Use
```
de_page_tool
```
to switch to it before proceeding
Identify the task type:
- Inspect: List elements, view structure, preview → go to Phase 2
- Build/Modify/Delete: Add, update, restructure, remove → go to Phase 3
- Components: List, inspect, update → go to Phase 2 or Phase 3 depending on read vs write

优先调用
webflow_guide_tool
——任何工作流的首个MCP工具调用必须是该工具
获取站点：使用
```
data_sites_tool
```
配合
```
list_sites
```
操作定位目标站点，如果仅存在一个站点则自动使用
获取当前页面：使用
```
de_page_tool
```
确认Designer中激活的页面
如果用户指定了其他页面：先使用
```
de_page_tool
```
切换到对应页面再继续操作
确认任务类型：
- 查看类：列出元素、查看结构、预览 → 进入阶段2
- 构建/修改/删除类：添加、更新、重构、移除 → 进入阶段3
- 组件类：列出、查看、更新 → 根据读/写操作分别进入阶段2或阶段3

Phase 2: Inspection (read-only operations)

阶段2：查看（只读操作）

List page elements: Use
```
de_page_tool
```
then
```
element_tool
```
with
```
get_all_elements
```
to retrieve page structure. Present a summary of sections, elements, and nesting.
Preview elements: Use
```
element_snapshot_tool
```
to get visual previews of specific sections
List components: Use
```
data_components_tool
```
with action
```
list_components
```
to list all site components
Inspect a component: Use
```
data_components_tool
```
with action
```
get_component_content
```
or
```
de_component_tool
```
for Designer instances

列出页面元素：先调用
```
de_page_tool
```
，再使用
```
element_tool
```
配合
```
get_all_elements
```
拉取页面结构，展示区块、元素和嵌套关系的汇总信息
预览元素：使用
```
element_snapshot_tool
```
获取指定区块的可视化预览
列出组件：使用
```
data_components_tool
```
配合
```
list_components
```
操作列出站点所有组件
查看组件：使用
```
data_components_tool
```
配合
```
get_component_content
```
操作，或者使用
```
de_component_tool
```
查看Designer中的组件实例

Phase 3: Planning (before any mutation)

阶段3：规划（所有变更操作前执行）

Before creating, updating, or deleting anything: 9. Snapshot current state: Use

element_snapshot_tool

to capture the area being changed 10. Present the plan: Describe exactly what will be created, modified, or deleted 11. Request explicit confirmation: Ask the user before proceeding: - "Would you like me to proceed with these changes?" - "Shall I go ahead and create this?" - "Do you want me to apply these changes?" - "Before I make changes, here's what I'll do: [plan]. Confirm to proceed." 12. For destructive operations (delete, restructure): Require "confirm" or "delete", warn about child elements that will also be affected

在创建、更新或删除任何内容前： 9. 快照当前状态：使用

element_snapshot_tool

捕获待修改区域的当前状态 10. 展示操作计划：清晰描述即将创建、修改或删除的内容 11. 请求明确确认：执行操作前询问用户，例如： - "你是否希望我继续执行这些变更？" - "我可以继续创建该内容吗？" - "你是否需要我应用这些变更？" - "执行变更前我将完成以下操作：[计划内容]，请确认是否继续。" 12. 针对破坏性操作（删除、重构）：需要用户回复"confirm"或"delete"确认，同时告知用户关联的子元素也会受到影响

Phase 4: Execution (after confirmation only)

阶段4：执行（仅在获得确认后执行）

Build elements: Use
```
element_builder
```
to create new elements (max 3 levels deep). For deeper structures, build in multiple passes.
Style elements: Use
```
style_tool
```
to apply or update styles on created or existing elements
Modify elements: Use
```
element_tool
```
with
```
add_or_update_attribute
```
to update attributes, text, or links

Update components: Use

data_components_tool

with

update_component_content

update_component_properties

. Use

de_component_tool

for Designer-level instance changes.

Create pages: Use
```
de_page_tool
```
to create new pages or folders

构建元素：使用
```
element_builder
```
创建新元素（单次最多嵌套3层），更深层级的结构分多次创建
设置元素样式：使用
```
style_tool
```
为新创建或已有的元素应用/更新样式
修改元素：使用
```
element_tool
```
配合
```
add_or_update_attribute
```
操作更新属性、文本或链接

更新组件：使用

data_components_tool

配合

update_component_content

或

update_component_properties

操作，针对Designer层级的实例变更使用

de_component_tool

创建页面：使用
```
de_page_tool
```
创建新页面或文件夹

Phase 5: Verification

阶段5：验证

Snapshot the result: Use
```
element_snapshot_tool
```
to capture the new state
Report what changed: Summarize the changes made

快照结果：使用
```
element_snapshot_tool
```
捕获变更后的新状态
反馈变更内容：汇总说明已完成的变更

Examples

示例

Example 1: List page elements

示例1：列出页面元素

User: "Show me all elements on the homepage"

Call
```
webflow_guide_tool
```
for best practices
Call
```
data_sites_tool
```
with
```
list_sites
```
to identify the site
Call
```
de_page_tool
```
to confirm current page is homepage (switch if needed)
Call
```
element_tool
```
with
```
get_all_elements
```
to retrieve page structure
Present organized summary of sections, elements, and nesting

用户： "展示首页上的所有元素"

调用
```
webflow_guide_tool
```
获取最佳实践
调用
```
data_sites_tool
```
配合
```
list_sites
```
操作定位站点
调用
```
de_page_tool
```
确认当前页面是首页（如有需要则切换）
调用
```
element_tool
```
配合
```
get_all_elements
```
拉取页面结构
结构化展示区块、元素和嵌套关系的汇总信息

Example 2: Build a hero section

示例2：构建英雄区块

User: "Add a hero section with a heading and CTA button"

Call
```
webflow_guide_tool
```
for best practices
Call
```
data_sites_tool
```
with
```
list_sites
```
to identify the site
Call
```
de_page_tool
```
to get current page
Call
```
element_snapshot_tool
```
to capture current state
Present plan: "I'll create a Section with a Heading and Button. Would you like me to proceed?"
After confirmation: call
```
element_builder
```
with nested structure
Call
```
style_tool
```
to apply styles (padding, background, typography)
Call
```
element_snapshot_tool
```
to show the result

用户： "添加一个带有标题和CTA按钮的英雄区块"

调用
```
webflow_guide_tool
```
获取最佳实践
调用
```
data_sites_tool
```
配合
```
list_sites
```
操作定位站点
调用
```
de_page_tool
```
获取当前页面
调用
```
element_snapshot_tool
```
捕获当前状态
展示计划："我将创建一个包含标题和按钮的Section区块，你是否希望我继续执行？"
获得确认后：调用
```
element_builder
```
创建嵌套结构
调用
```
style_tool
```
应用样式（内边距、背景、排版）
调用
```
element_snapshot_tool
```
展示结果

Example 3: Update a component

示例3：更新组件

User: "Update the footer copyright text to 2026"

Call
```
webflow_guide_tool
```
for best practices
Call
```
data_sites_tool
```
with
```
list_sites
```
to identify the site
Call
```
data_components_tool
```
with
```
list_components
```
to find the footer

Call

data_components_tool

with

get_component_content

to inspect it

Present: "I'll update the copyright text from '2025' to '2026'. Would you like me to proceed?"

After confirmation: call

data_components_tool

with

update_component_content

Report the change

用户： "将页脚的版权文本更新为2026"

调用
```
webflow_guide_tool
```
获取最佳实践
调用
```
data_sites_tool
```
配合
```
list_sites
```
操作定位站点
调用
```
data_components_tool
```
配合
```
list_components
```
操作找到页脚组件

调用

data_components_tool

配合

get_component_content

操作查看组件内容

展示计划："我会将版权文本从'2025'更新为'2026'，你是否希望我继续执行？"

获得确认后：调用

data_components_tool

配合

update_component_content

操作

反馈变更完成

Example 4: Restructure a section

示例4：重构区块

User: "Restructure the hero section layout"

Call
```
webflow_guide_tool
```
for best practices
Call
```
data_sites_tool
```
with
```
list_sites
```
to identify the site
Call
```
de_page_tool
```
to get current page
Call
```
element_snapshot_tool
```
to capture current hero section
Call
```
element_tool
```
to inspect current structure
Present restructuring plan with before/after description
After confirmation: apply changes using
```
element_tool
```
and/or
```
element_builder
```
Call
```
element_snapshot_tool
```
to show the result

用户： "重构英雄区块的布局"

调用
```
webflow_guide_tool
```
获取最佳实践
调用
```
data_sites_tool
```
配合
```
list_sites
```
操作定位站点
调用
```
de_page_tool
```
获取当前页面
调用
```
element_snapshot_tool
```
捕获当前英雄区块的状态
调用
```
element_tool
```
查看当前结构
展示重构计划，说明变更前后的差异
获得确认后：使用
```
element_tool
```
和/或
```
element_builder
```
应用变更
调用
```
element_snapshot_tool
```
展示结果

Example 5: Create a two-column layout

示例5：创建两栏布局

User: "Create a two-column layout with text on left and image on right"

Call
```
webflow_guide_tool
```
for best practices
Call
```
data_sites_tool
```
with
```
list_sites
```
to identify the site
Call
```
de_page_tool
```
to get current page
Call
```
element_snapshot_tool
```
to capture current state
Present plan: "I'll create a Grid with two columns — text block on left, image on right. Would you like me to proceed?"
After confirmation: call
```
element_builder
```
with grid structure
Call
```
style_tool
```
to set grid layout properties
Call
```
element_snapshot_tool
```
to show the result

用户： "创建一个左侧为文本、右侧为图片的两栏布局"

调用
```
webflow_guide_tool
```
获取最佳实践
调用
```
data_sites_tool
```
配合
```
list_sites
```
操作定位站点
调用
```
de_page_tool
```
获取当前页面
调用
```
element_snapshot_tool
```
捕获当前状态
展示计划："我将创建一个两列Grid，左侧为文本块，右侧为图片，你是否希望我继续执行？"
获得确认后：调用
```
element_builder
```
创建网格结构
调用
```
style_tool
```
设置网格布局属性
调用
```
element_snapshot_tool
```
展示结果

Guidelines

规范

webflow_guide_tool
always first — before any other MCP tool in every workflow
Snapshot before and after — use
```
element_snapshot_tool
```
before mutations and after to show results
Never silently mutate — every write operation requires explicit user confirmation
de_page_tool
before
element_tool
— always confirm/switch page before inspecting elements
Batch changes need itemized preview — if modifying multiple elements, list each change
Prefer Webflow's native layout tools (Grid, Flexbox) over manual positioning
Components shared across pages should be updated via
```
data_components_tool
```
(changes propagate)
Component instances on a specific page use
```
de_component_tool
```
```
element_builder
```
supports max 3 levels per call — build deeper structures in stages
Check
```
de_learn_more_about_styles
```
for supported style properties when unsure

webflow_guide_tool
始终优先调用——所有工作流中调用其他MCP工具前必须先调用该工具
变更前后快照：变更操作前和完成后都要使用
```
element_snapshot_tool
```
捕获状态展示结果
禁止静默变更：所有写操作都必须获得用户明确确认
element_tool
调用前先调用
de_page_tool
——查看元素前必须先确认/切换到对应页面
批量变更需要逐项预览：如果要修改多个元素，需要列出每一项变更内容
优先使用Webflow原生布局工具（Grid、Flexbox），避免手动定位
跨页面共享的组件需要通过
```
data_components_tool
```
更新（变更会自动同步）
指定页面上的组件实例使用
```
de_component_tool
```
操作
```
element_builder
```
单次调用最多支持3层嵌套——更深层级的结构分阶段创建
不确定支持的样式属性时，查询
```
de_learn_more_about_styles
```