webflow-mcp:designer-tools — Claude Code skill for Webflow pages

---
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 capture the area being changed — requires Designer; if unavailable, describe the current state from `query_elements` output instead
11. **Present the plan**: Describe exactly what will be created, modified, or deleted
12. **Request explicit confirmation**: Ask the user before proceeding:
    - "Would you like me to proceed with these changes?"
    - "Shall I go ahead and create this?"
    - "Do you want me to apply these changes?"
    - "Before I make changes, here's what I'll do: [plan]. Confirm to proceed."
13. **For destructive operations** (delete, restructure): Require "confirm" or "delete", warn about child elements that will also be affected

### Phase 4: Execution (after confirmation only)
14. **Build elements**: Use `data_element_builder` to create new elements (max 3 levels deep), passing the page ID and the parent element ID. For deeper structures, build in multiple passes.
15. **Style elements**: Use `data_style_tool` to apply or update styles on created or existing elements
16. **Modify elements**: Use `data_element_tool` with `set_attributes`, `set_text`, `set_style`, or `set_link` to update attributes, text, or links
17. **Update components**: Use `data_element_tool` (scoped with `scope_component_id`) to edit a component's internal elements; `data_component_props_tool` to change prop definitions or instance prop values; `data_component_variants_tool` to manage variants; `data_component_tool` with `insert_component_instance`/`unlink_component_instance` to add or unlink instances on a page
18. **Create pages**: Use `data_pages_tool` with action `create_page`. To create a page **folder**, use `designer_tool` with action `create_page_folder` — this specific action requires a Designer connection

### Phase 5: Verification
19. **Snapshot the result**: Use `element_snapshot_tool` to capture the new state — requires Designer; if unavailable, summarize the change from the tool response instead
20. **Report what changed**: Summarize the changes made

## Examples

### Example 1: List page elements

**User:** "Show me all elements on the homepage"

1. Call `webflow_guide_tool` for best practices
2. Call `data_sites_tool` with `list_sites` to identify the site
3. Call `data_pages_tool` with `list_pages` to find the homepage's page ID
4. Call `data_element_tool` with `get_all_elements` (using that page ID) to retrieve page structure
5. Present organized summary of sections, elements, and nesting

### Example 2: Build a hero section

**User:** "Add a hero section with a heading and CTA button"

1. Call `webflow_guide_tool` for best practices
2. Call `data_sites_tool` with `list_sites` to identify the site
3. Call `data_pages_tool` with `list_pages` to find the target page's ID
4. Call `element_snapshot_tool` to capture current state
5. Present plan: "I'll create a Section with a Heading and Button. Would you like me to proceed?"
6. After confirmation: call `data_element_builder` with nested structure
7. Call `data_style_tool` to apply styles (padding, background, typography)
8. Call `element_snapshot_tool` to show the result

### Example 3: Update a component

**User:** "Update the footer copyright text to 2026"

1. Call `webflow_guide_tool` for best practices
2. Call `data_sites_tool` with `list_sites` to identify the site
3. Call `data_component_tool` with `query_components` to find the footer component
4. Call `data_element_tool` (scoped with `scope_component_id`) to inspect its internal elements and find the copyright text element
5. Present: "I'll update the copyright text from '2025' to '2026'. Would you like me to proceed?"
6. After confirmation: call `data_element_tool` with `set_text` (scoped with `scope_component_id`)
7. Report the change

### Example 4: Restructure a section

**User:** "Restructure the hero section layout"

1. Call `webflow_guide_tool` for best practices
2. Call `data_sites_tool` with `list_sites` to identify the site
3. Call `data_pages_tool` with `list_pages` to find the target page's ID
4. Call `element_snapshot_tool` to capture current hero section
5. Call `data_element_tool` with `query_elements` to inspect current structure
6. Present restructuring plan with before/after description
7. After confirmation: apply changes using `data_element_tool` (`move_element`, `set_style`, etc.) and/or `data_element_builder`
8. Call `element_snapshot_tool` to show the result

### Example 5: Create a two-column layout

**User:** "Create a two-column layout with text on left and image on right"

1. Call `webflow_guide_tool` for best practices
2. Call `data_sites_tool` with `list_sites` to identify the site
3. Call `data_pages_tool` with `list_pages` to find the target page's ID
4. Call `element_snapshot_tool` to capture current state
5. Present plan: "I'll create a Grid with two columns — text block on left, image on right. Would you like me to proceed?"
6. After confirmation: call `data_element_builder` with grid structure
7. Call `data_style_tool` to set grid layout properties
8. Call `element_snapshot_tool` to show the result

## Guidelines

- **`webflow_guide_tool` always first** — before any other MCP tool in every workflow
- **Snapshot before and after** — use `element_snapshot_tool` before mutations and after to show results
- **Never silently mutate** — every write operation requires explicit user confirmation
- **Headless for building and editing** — get the page ID once via `data_pages_tool`'s `list_pages`, then pass it directly to `data_element_tool`, `data_element_builder`, and `data_style_tool`. Reach for `designer_tool` only when the task specifically needs the live canvas (current-page detection, interactive selection, page folders, component canvas view).
- **Visual snapshots need Designer** — `element_snapshot_tool` is a Designer tool; if Designer isn't connected, fall back to describing changes from `query_elements`/tool response data instead of skipping the before/after check entirely.
- **Batch changes need itemized preview** — if modifying multiple elements, list each change
- Prefer Webflow's native layout tools (Grid, Flexbox) over manual positioning
- Components shared across pages should be updated via `data_element_tool` scoped to the component (changes propagate to all instances)
- Component instance management (`insert_component_instance`, `unlink_component_instance`) is headless via `data_component_tool` — not Designer-gated
- `data_element_builder` supports max 3 levels per call — build deeper structures in stages
- Check `webflow_guide_tool` for supported style properties when unsure