designer-tools

页面结构

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

重要提示

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

• 在调用任何其他工具之前，先使用 Webflow MCP 的 webflow_guide_tool 获取最佳实践
• 使用 Webflow MCP 的 data_sites_tool，并设置 action list_sites，以确定目标站点
• 使用 Webflow MCP 的 de_page_tool 获取当前页面、切换页面或创建页面／文件夹
• 使用 Webflow MCP 的 element_tool，并设置 action get_all_elements，以获取页面元素
• 使用 Webflow MCP 的 element_tool，并设置 action select_element，以选择特定元素
• 使用 Webflow MCP 的 element_tool，并设置 action 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，并设置 action list_components，以列出站点的所有组件
• 使用 Webflow MCP 的 data_components_tool，并设置 action get_component_content，以检查组件
• 使用 Webflow MCP 的 data_components_tool，并设置 action update_component_content，以更新组件内容
• 使用 Webflow MCP 的 data_components_tool，并设置 action get_component_properties，以获取组件属性
• 使用 Webflow MCP 的 data_components_tool，并设置 action update_component_properties，以更新组件属性
• 使用 Webflow MCP 的 de_component_tool 管理 Designer 中的组件实例
• 请勿使用任何其他工具或方法操作 Webflow
• 所有工具调用都必须包含必需的 context 参数（15-25 个单词，使用第三人称视角）
• 必须连接 Designer — 用户必须打开并连接 Webflow Designer

说明

阶段 1：探索

1. 首先调用 webflow_guide_tool — 在任何工作流中，这始终是第一次 MCP 工具调用
2. 获取站点：使用 data_sites_tool，并设置 action list_sites，以确定目标站点。如果只有一个站点，则自动使用该站点。
3. 获取当前页面：使用 de_page_tool 确定 Designer 中当前激活的页面
4. 如果用户指定了其他页面：继续操作前，使用 de_page_tool 切换到该页面
5. 确定任务类型：
   • 检查：列出元素、查看结构、预览 → 转到阶段 2
   • 构建／修改／删除：添加、更新、重构、移除 → 转到阶段 3
   • 组件：列出、检查、更新 → 根据读取或写入操作转到阶段 2 或阶段 3

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

5. 列出页面元素：使用 de_page_tool，然后使用 element_tool 并设置 get_all_elements，以获取页面结构。概述各个区块、元素及嵌套关系。
6. 预览元素：使用 element_snapshot_tool 获取特定区块的视觉预览
7. 列出组件：使用 data_components_tool，并设置 action list_components，以列出站点的所有组件
8. 检查组件：使用 data_components_tool 并设置 action get_component_content，或使用 de_component_tool 检查 Designer 中的实例

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

创建、更新或删除任何内容之前： 9. 捕获当前状态：使用 element_snapshot_tool 截取将要更改区域的快照 10. 说明计划：准确描述将创建、修改或删除的内容 11. 请求明确确认：继续操作前询问用户： - “要我继续进行这些更改吗？” - “要我现在创建这个吗？” - “你希望我应用这些更改吗？” - “进行更改前，我会执行以下操作：[计划]。请确认后继续。” 12. 对于破坏性操作（删除、重构）：必须要求用户回复“确认”或“删除”，并提醒用户也会影响哪些子元素

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

13. 构建元素：使用 element_builder 创建新元素（最多 3 层）。对于更深的结构，分多次构建。
14. 设置元素样式：使用 style_tool 为已创建或现有元素应用或更新样式
15. 修改元素：使用 element_tool 的 add_or_update_attribute 更新属性、文本或链接
16. 更新组件：使用 data_components_tool 的 update_component_content 或 update_component_properties。使用 de_component_tool 修改 Designer 级别的实例。
17. 创建页面：使用 de_page_tool 创建新页面或文件夹

阶段 5：验证

18. 生成结果快照：使用 element_snapshot_tool 捕获新状态
19. 报告变更内容：总结所做的更改

示例

示例 1：列出页面元素

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

1. 调用 webflow_guide_tool 获取最佳实践
2. 调用 data_sites_tool 并使用 list_sites 确定站点
3. 调用 de_page_tool 确认当前页面是首页（如有需要则切换）
4. 调用 element_tool 并使用 get_all_elements 获取页面结构
5. 有条理地汇总各个部分、元素和嵌套关系

示例 2：构建首屏区域

用户：“添加一个包含标题和 CTA 按钮的首屏区域”

1. 调用 webflow_guide_tool 获取最佳实践
2. 调用 data_sites_tool 并使用 list_sites 确定站点
3. 调用 de_page_tool 获取当前页面
4. 调用 element_snapshot_tool 捕获当前状态
5. 提出计划：“我将创建一个 Section，其中包含一个 Heading 和一个 Button。是否继续？”
6. 确认后：调用 element_builder 并传入嵌套结构
7. 调用 style_tool 应用样式（内边距、背景、排版）
8. 调用 element_snapshot_tool 展示结果

示例 3：更新组件

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

1. 调用 webflow_guide_tool 获取最佳实践
2. 调用 data_sites_tool 并使用 list_sites 确定站点
3. 调用 data_components_tool 并使用 list_components 查找页脚
4. 调用 data_components_tool 并使用 get_component_content 检查页脚内容
5. 提示：“我将把版权文本从‘2025’更新为‘2026’。是否继续？”
6. 确认后：调用 data_components_tool 并使用 update_component_content
7. 报告变更内容

示例 4：重新构建版块

用户：“重新构建首屏区域的布局”

1. 调用 webflow_guide_tool 获取最佳实践
2. 调用 data_sites_tool 并使用 list_sites 确定站点
3. 调用 de_page_tool 获取当前页面
4. 调用 element_snapshot_tool 捕获当前首屏区域
5. 调用 element_tool 检查当前结构
6. 提供重构计划，并说明更改前后的差异
7. 确认后：使用 element_tool 和/或 element_builder 应用更改
8. 调用 element_snapshot_tool 展示结果

示例 5：创建双栏布局

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

1. 调用 webflow_guide_tool 获取最佳实践
2. 调用 data_sites_tool 并使用 list_sites 确定站点
3. 调用 de_page_tool 获取当前页面
4. 调用 element_snapshot_tool 捕获当前状态
5. 提出计划：“我将创建一个包含两列的 Grid——左侧放文本块，右侧放图片。是否继续？”
6. 确认后：调用 element_builder 并传入 Grid 结构
7. 调用 style_tool 设置 Grid 布局属性
8. 调用 element_snapshot_tool 展示结果

指南

• 始终先调用 webflow_guide_tool——每个工作流中都要先于其他 MCP 工具
• 修改前后都获取快照——修改前使用 element_snapshot_tool，修改后再次使用以展示结果
• 绝不静默修改——每次写入操作都需要用户明确确认
• 先调用 de_page_tool，再调用 element_tool——检查元素前，始终先确认或切换页面
• 批量修改需逐项预览——如果要修改多个元素，请逐项列出每项修改
• 优先使用 Webflow 的原生布局工具（Grid、Flexbox），而不是手动定位
• 应通过 data_components_tool 更新在多个页面间共享的组件（更改会同步生效）
• 特定页面上的组件实例使用 de_component_tool
• element_builder 每次调用最多支持 3 层；更深的结构需分阶段构建
• 不确定时，查看 de_learn_more_about_styles 以了解支持的样式属性