webflow-mcp:designer-tools

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.