designer-tools

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
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: D