/designer-tools

name: webflow-mcp:designer-tools
description: Build and manage pages, elements, components, and styles in Webflow Designer. Use when adding sections, creating layouts, building elements, inspecting or updating components, viewing what's inside a component, restructuring pages, creating new pages, previewing page structure, styling elements, or managing component properties. Building, styling, and inspecting run headlessly against an explicit page ID — no Designer connection needed. Designer is required for `designer_tool` actions (reading/switching the page open on canvas, interactively selecting an element, creating page folders, opening a component's canvas view) and for `element_snapshot_tool` visual previews.
mcp-version: 2.0.1

Page Structure

Build, inspect, and manage page elements and components in the 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 `data_pages_tool` with action `list_pages` to find the target page by name or slug — headless, works against any page
• Use Webflow MCP's `data_pages_tool` with action `create_page` to create new pages — headless
• Use Webflow MCP's `data_element_tool` with action `get_all_elements` or `query_elements` to retrieve or filter page elements — headless, pass the page's ID directly
• Use Webflow MCP's `data_element_builder` to create new elements — headless, pass the page's ID and a parent element ID
• Use Webflow MCP's `data_element_tool` with action `set_attributes`, `set_text`, `set_style`, or `set_link` to modify elements — headless
• Use Webflow MCP's `element_snapshot_tool` to get visual previews of elements before and after changes — this is a Designer tool and requires a Designer connection
• Use Webflow MCP's `data_style_tool` to create and update styles on elements — headless
• Use Webflow MCP's `webflow_guide_tool` to check supported style properties
• Use Webflow MCP's `data_component_tool` with action `get_all_components` or `query_components` to list site components — headless
• Use Webflow MCP's `data_component_tool` with action `get_component` to inspect a component's metadata — headless
• Use Webflow MCP's `data_element_tool` scoped with `scope_component_id` to inspect or edit a component's internal elements (its "content") — headless
• Use Webflow MCP's `data_component_props_tool` to manage prop definitions and set prop values on component instances — headless
• Use Webflow MCP's `data_component_variants_tool` to manage variants and per-variant style overrides — headless
• Use Webflow MCP's `data_component_tool` with action `insert_component_instance` or `unlink_component_instance` to manage component instances on a page — headless, not Designer-gated
• Use Webflow MCP's `designer_tool` only for actions that need a live canvas: `get_current_page`/`switch_page` (what's open in Designer right now), `select_element`/`get_selected_element` (interactive canvas selection), `create_page_folder` (page folders are Designer-only, unlike page creation itself), and `open_component_view` (viewing a component's canvas)
• 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 is required for `designer_tool` actions and for `element_snapshot_tool`.** Building, styling, inspecting, and updating elements, components, props, and variants (the `data_` tools) runs headlessly against an explicit page ID from `data_pages_tool`'s `list_pages` — but the before/after visual snapshots this skill relies on for safe mutation need Designer open and connected. If Designer isn't available, skip the snapshot steps and rely on `query_elements` output to describe changes instead.

Instructions

Phase 1: Discovery

1. **Call `webflow_guide_tool` first** — always the first MCP tool call in any workflow 2. **Get the site**: Use `data_sites_tool` with action `list_sites` to identify the target site. If only one site exists, use it automatically. 3. **Get the target page**: Use `data_pages_tool` with action `list_pages` to find the page by name or slug — no Designer connection needed. If the user is actively working in an open Designer session and wants "the page I have open," use `designer_tool` with action `get_current_page` instead. 4. **If user specifies a different page**: Just use that page's ID directly in later calls — no page "switch" is needed for headless operations. Only use `designer_tool` with action `switch_page` if the user wants the Designer canvas itself to navigate there. 5. **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

Phase 2: Inspection (read-only operations)

6. **List page elements**: Use `data_element_tool` with `get_all_elements` (or `query_elements` to filter by type/text/attribute) to retrieve page structure, passing the page ID from Phase 1. Present a summary of sections, elements, and nesting. 7. **Preview elements**: Use `element_snapshot_tool` to get visual previews of specific sections — requires Designer 8. **List components**: Use `data_component_tool` with action `get_all_components` or `query_components` to list all site components 9. **Inspect a component**: Use `data_component_tool` with action `get_component` for metadata (props, variants), or `data_element_tool` with `scope_component_id` set to the component's ID to inspect its internal elements

Phase 3: Planning (before any mutation)

Before creating, updating, or deleting anything: 10. **Snapshot current state**: Use `element_snapshot_tool` to c