webflow-mcp:designer-tools

页面结构

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

重要说明

所有操作始终使用 Webflow MCP 工具：

• 在调用任何其他工具之前，使用 Webflow MCP 的 webflow_guide_tool 获取最佳实践
• 使用 Webflow MCP 的 data_sites_tool，并将操作设为 list_sites，以确定目标站点
• 使用 Webflow MCP 的 data_pages_tool，并将操作设为 list_pages，按名称或 slug 查找目标页面——以无头模式运行，适用于任何页面
• 使用 Webflow MCP 的 data_pages_tool，并将操作设为 create_page，以创建新页面——以无头模式运行
• 使用 Webflow MCP 的 data_element_tool，并将操作设为 get_all_elements 或 query_elements，以获取或筛选页面元素——以无头模式运行，直接传入页面 ID
• 使用 Webflow MCP 的 data_element_builder 创建新元素——以无头模式运行，传入页面 ID 和父元素 ID
• 使用 Webflow MCP 的 data_element_tool，并将操作设为 set_attributes、set_text、set_style 或 set_link，以修改元素——以无头模式运行
• 使用 Webflow MCP 的 element_snapshot_tool，在修改前后获取元素的视觉预览——这是 Designer 工具，需要连接 Designer
• 使用 Webflow MCP 的 data_style_tool，为元素创建和更新样式——以无头模式运行
• 使用 Webflow MCP 的 webflow_guide_tool，检查受支持的样式属性
• 使用 Webflow MCP 的 data_component_tool，并将操作设为 get_all_components 或 query_components，以列出站点组件——以无头模式运行
• 使用 Webflow MCP 的 data_component_tool，并将操作设为 get_component，以检查组件的元数据——以无头模式运行
• 使用带有 scope_component_id 的 Webflow MCP data_element_tool，检查或编辑组件的内部元素（即其“内容”）——以无头模式运行
• 使用 Webflow MCP 的 data_component_props_tool 管理属性定义，并为组件实例设置属性值——以无头模式运行
• 使用 Webflow MCP 的 data_component_variants_tool 管理变体和各变体的样式覆盖——以无头模式运行
• 使用 Webflow MCP 的 data_component_tool，并将操作设为 insert_component_instance 或 unlink_component_instance，管理页面上的组件实例——以无头模式运行，不受 Designer 限制
• 仅在需要实时画布时使用 designer_tool 执行以下操作：get_current_page/switch_page（查看 Designer 当前打开的页面）、select_element/get_selected_element（在交互式画布中选择元素）、create_page_folder（页面文件夹只能通过 Designer 创建，页面本身则不受此限制）以及 open_component_view（查看组件画布）
• 不要使用任何其他工具或方法执行 Webflow 操作
• 所有工具调用都必须包含必需的 context 参数（15-25 个词，以第三人称视角编写）
• designer_tool 操作和 element_snapshot_tool 都需要连接 Designer。 构建、设置样式、检查和更新元素、组件、属性及变体（data_ 工具）时，可通过 data_pages_tool 的 list_pages 获取明确的页面 ID，并以无头模式运行；但为了安全修改，此技能依赖的修改前后视觉快照需要 Designer 已打开并连接。如果 Designer 不可用，请跳过快照步骤，并改用 query_elements 的输出描述更改。

说明

阶段 1：发现

1. 首先调用 webflow_guide_tool — 在任何工作流中，这始终是第一个 MCP 工具调用
2. 获取网站：使用 data_sites_tool，并将操作设为 list_sites，以确定目标网站。如果只有一个网站，则自动使用它。
3. 获取目标页面：使用 data_pages_tool，并将操作设为 list_pages，按名称或 slug 查找页面 — 无需连接 Designer。如果用户正在已打开的 Designer 会话中操作，并且想要“我当前打开的页面”，则改用 designer_tool，并将操作设为 get_current_page。
4. 如果用户指定了其他页面：在后续调用中直接使用该页面的 ID — 对于无头操作，无需“切换”页面。只有当用户希望 Designer 画布导航到该页面时，才使用 designer_tool，并将操作设为 switch_page。
5. 确定任务类型：
   • 检查：列出元素、查看结构、预览 → 前往阶段 2
   • 构建/修改/删除：添加、更新、重构、移除 → 前往阶段 3
   • 组件：列出、检查、更新 → 根据读取还是写入，前往阶段 2 或阶段 3

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

6. 列出页面元素：使用 data_element_tool 和 get_all_elements（或使用 query_elements 按类型/文本/属性筛选）获取页面结构，并传入阶段 1 中的页面 ID。提供有关各个区段、元素和嵌套关系的摘要。
7. 预览元素：使用 element_snapshot_tool 获取特定区段的视觉预览 — 需要 Designer
8. 列出组件：使用 data_component_tool，并将操作设为 get_all_components 或 query_components，以列出网站上的所有组件
9. 检查组件：使用 data_component_tool，并将操作设为 get_component，以查看元数据（属性、变体）；或使用 data_element_tool，将 scope_component_id 设为组件的 ID，以检查其内部元素

阶段 3：规划（任何修改前）

创建、更新或删除任何内容之前： 10. 记录当前状态：使用 element_snapshot_tool 捕获要更改的区域 — 需要 Designer；如果无法使用，则根据 query_elements 的输出描述当前状态 11. 展示计划：准确说明将创建、修改或删除的内容 12. 明确征求确认：继续操作前询问用户： - “要我继续进行这些更改吗？” - “要我开始创建吗？” - “要我应用这些更改吗？” - “在进行更改前，以下是我的操作计划：[计划]。请确认是否继续。” 13. 对于破坏性操作（删除、重构）：必须要求用户回复“确认”或“删除”，并提醒用户哪些子元素也会受到影响

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

14. 构建元素：使用 data_element_builder 创建新元素（最多嵌套 3 层），并传入页面 ID 和父元素 ID。对于更深层的结构，分多次构建。
15. 设置元素样式：使用 data_style_tool 为新建或现有元素应用或更新样式
16. 修改元素：使用 data_element_tool 和 set_attributes、set_text、set_style 或 set_link 更新属性、文本或链接
17. 更新组件：使用 data_element_tool（通过 scope_component_id 指定范围）编辑组件的内部元素；使用 data_component_props_tool 更改属性定义或实例属性值；使用 data_component_variants_tool 管理变体；使用 data_component_tool 和 insert_component_instance/unlink_component_instance 在页面上添加或取消链接实例
18. 创建页面：使用 data_pages_tool，并将操作设为 create_page。要创建页面文件夹，请使用 designer_tool，并将操作设为 create_page_folder — 此特定操作需要连接 Designer

阶段 5：验证

19. 拍摄结果快照：使用 element_snapshot_tool 捕获新状态 — 需要 Designer；如果不可用，则根据工具响应总结所做的更改
20. 报告更改内容：总结所做的更改

示例

示例 1：列出页面元素

用户：“显示主页上的所有元素”

1. 调用 webflow_guide_tool 获取最佳实践
2. 调用 data_sites_tool，使用 list_sites 识别站点
3. 调用 data_pages_tool，使用 list_pages 查找主页的页面 ID
4. 调用 data_element_tool，使用 get_all_elements（并传入该页面 ID）获取页面结构
5. 按区块、元素和嵌套层级整理并呈现摘要

示例 2：构建主视觉区块

用户：“添加一个包含标题和 CTA 按钮的主视觉区块”

1. 调用 webflow_guide_tool 获取最佳实践
2. 调用 data_sites_tool，使用 list_sites 识别站点
3. 调用 data_pages_tool，使用 list_pages 查找目标页面的 ID
4. 调用 element_snapshot_tool 捕获当前状态
5. 呈现计划：“我将创建一个包含标题和按钮的 Section。要继续吗？”
6. 获得确认后：调用 data_element_builder，传入嵌套结构
7. 调用 data_style_tool 应用样式（内边距、背景、排版）
8. 调用 element_snapshot_tool 展示结果

示例 3：更新组件

用户：“将页脚版权文本更新为 2026”

1. 调用 webflow_guide_tool 获取最佳实践
2. 调用 data_sites_tool，使用 list_sites 识别站点
3. 调用 data_component_tool，使用 query_components 查找页脚组件
4. 调用 data_element_tool（使用 scope_component_id 限定范围）检查其内部元素，并找到版权文本元素
5. 呈现：“我将把版权文本从‘2025’更新为‘2026’。要继续吗？”
6. 获得确认后：调用 data_element_tool，使用 set_text（并通过 scope_component_id 限定范围）
7. 报告更改内容

示例 4：重构区块

用户：“重构主视觉区块布局”

1. 调用 webflow_guide_tool 获取最佳实践
2. 调用 data_sites_tool，使用 list_sites 识别站点
3. 调用 data_pages_tool，使用 list_pages 查找目标页面的 ID
4. 调用 element_snapshot_tool 捕获当前主视觉区块
5. 调用 data_element_tool，使用 query_elements 检查当前结构
6. 呈现重构计划，并描述更改前后的差异
7. 获得确认后：使用 data_element_tool（move_element、set_style 等）和/或 data_element_builder 应用更改
8. 调用 element_snapshot_tool 展示结果

示例 5：创建双栏布局

用户：“创建一个双栏布局，左侧放文本，右侧放图片”

1. 调用 webflow_guide_tool 获取最佳实践
2. 调用 data_sites_tool，使用 list_sites 识别站点
3. 调用 data_pages_tool，使用 list_pages 查找目标页面的 ID
4. 调用 element_snapshot_tool 捕获当前状态
5. 呈现计划：“我将创建一个包含两列的 Grid — 左侧为文本块，右侧为图片。要继续吗？”
6. 获得确认后：调用 data_element_builder，传入 Grid 结构
7. 调用 data_style_tool 设置 Grid 布局属性
8. 调用 element_snapshot_tool 展示结果

指南

• 始终先调用 webflow_guide_tool——每个工作流中都要先于其他 MCP 工具调用
• 操作前后都要获取快照——变更前使用 element_snapshot_tool，变更后再次使用以展示结果
• 绝不静默执行变更——每项写入操作都需要用户明确确认
• 构建和编辑时使用无头模式——通过 data_pages_tool 的 list_pages 获取一次页面 ID，然后直接将其传递给 data_element_tool、data_element_builder 和 data_style_tool。只有在任务明确需要实时画布时（检测当前页面、交互式选择、页面文件夹、组件画布视图），才使用 designer_tool。
• 视觉快照需要 Designer——element_snapshot_tool 是 Designer 工具；如果未连接 Designer，则改为根据 query_elements／工具响应数据描述变更，不要因此跳过前后检查。
• 批量变更需要逐项预览——如果要修改多个元素，请逐项列出每项变更
• 优先使用 Webflow 的原生布局工具（Grid、Flexbox），而不是手动定位
• 跨页面共享的组件应通过作用于该组件的 data_element_tool 更新（变更会传播到所有实例）
• 组件实例管理（insert_component_instance、unlink_component_instance）可通过无头模式使用 data_component_tool，无需 Designer
• data_element_builder 每次调用最多支持 3 层；更深的结构需分阶段构建
• 不确定时，请通过 webflow_guide_tool 查看支持的样式属性