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
```
de_page_tool
```
to get current page, switch pages, or create pages/folders
Use Webflow MCP's
```
element_tool
```
with action
```
get_all_elements
```
to retrieve page elements
Use Webflow MCP's
```
element_tool
```
with action
```
select_element
```
to select a specific element
Use Webflow MCP's
```
element_tool
```
with action
```
add_or_update_attribute
```
to update element attributes
Use Webflow MCP's
```
element_builder
```
to create new elements
Use Webflow MCP's
```
element_snapshot_tool
```
to get visual previews of elements before and after changes
Use Webflow MCP's
```
style_tool
```
to create and update styles on elements
Use Webflow MCP's
```
de_learn_more_about_styles
```
to check supported style properties
Use Webflow MCP's
```
data_components_tool
```
with action
```
list_components
```
to list all site components
Use Webflow MCP's
```
data_components_tool
```
with action
```
get_component_content
```
to inspect a component
Use Webflow MCP's
```
data_components_tool
```
with action
```
update_component_content
```
to update component content
Use Webflow MCP's
```
data_components_tool
```
with action
```
get_component_properties
```
to get component properties
Use Webflow MCP's
```
data_components_tool
```
with action
```
update_component_properties
```
to update component properties
Use Webflow MCP's
```
de_component_tool
```
to manage component instances in the Designer
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 required — user must have Webflow Designer open and connected

Instructions

Phase 1: Discovery

Call
webflow_guide_tool
first — always the first MCP tool call in any workflow
Get the site: Use
```
data_sites_tool
```
with action
```
list_sites
```
to identify the target site. If only one site exists, use it automatically.
Get current page: Use
```
de_page_tool
```
to identify which page is active in the Designer
If user specifies a different page: Use
```
de_page_tool
```
to switch to it before proceeding
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)

List page elements: Use
```
de_page_tool
```
then
```
element_tool
```
with
```
get_all_elements
```
to retrieve page structure. Present a summary of sections, elements, and nesting.
Preview elements: Use
```
element_snapshot_tool
```
to get visual previews of specific sections
List components: Use
```
data_components_tool
```
with action
```
list_components
```
to list all site components
Inspect a component: Use
```
data_components_tool
```
with action
```
get_component_content
```
or
```
de_component_tool
```
for Designer instances

Phase 3: Planning (before any mutation)

Before creating, updating, or deleting anything: 9. Snapshot current state: Use

element_snapshot_tool

to capture the area being changed 10. Present the plan: Describe exactly what will be created, modified, or deleted 11. 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." 12. For destructive operations (delete, restructure): Require "confirm" or "delete", warn about child elements that will also be affected

Phase 4: Execution (after confirmation only)

Build elements: Use
```
element_builder
```
to create new elements (max 3 levels deep). For deeper structures, build in multiple passes.
Style elements: Use
```
style_tool
```
to apply or update styles on created or existing elements
Modify elements: Use
```
element_tool
```
with
```
add_or_update_attribute
```
to update attributes, text, or links

Update components: Use

data_components_tool

with

update_component_content

update_component_properties

. Use

de_component_tool

for Designer-level instance changes.

Create pages: Use
```
de_page_tool
```
to create new pages or folders

Phase 5: Verification

Snapshot the result: Use
```
element_snapshot_tool
```
to capture the new state
Report what changed: Summarize the changes made

Examples

Example 1: List page elements

User: "Show me all elements on the homepage"

Call
```
webflow_guide_tool
```
for best practices
Call
```
data_sites_tool
```
with
```
list_sites
```
to identify the site
Call
```
de_page_tool
```
to confirm current page is homepage (switch if needed)
Call
```
element_tool
```
with
```
get_all_elements
```
to retrieve page structure
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"

Call
```
webflow_guide_tool
```
for best practices
Call
```
data_sites_tool
```
with
```
list_sites
```
to identify the site
Call
```
de_page_tool
```
to get current page
Call
```
element_snapshot_tool
```
to capture current state
Present plan: "I'll create a Section with a Heading and Button. Would you like me to proceed?"
After confirmation: call
```
element_builder
```
with nested structure
Call
```
style_tool
```
to apply styles (padding, background, typography)
Call
```
element_snapshot_tool
```
to show the result

Example 3: Update a component

User: "Update the footer copyright text to 2026"

Call
```
webflow_guide_tool
```
for best practices
Call
```
data_sites_tool
```
with
```
list_sites
```
to identify the site
Call
```
data_components_tool
```
with
```
list_components
```
to find the footer

Call

data_components_tool

with

get_component_content

to inspect it

Present: "I'll update the copyright text from '2025' to '2026'. Would you like me to proceed?"

After confirmation: call

data_components_tool

with

update_component_content

Report the change

Example 4: Restructure a section

User: "Restructure the hero section layout"

Call
```
webflow_guide_tool
```
for best practices
Call
```
data_sites_tool
```
with
```
list_sites
```
to identify the site
Call
```
de_page_tool
```
to get current page
Call
```
element_snapshot_tool
```
to capture current hero section
Call
```
element_tool
```
to inspect current structure
Present restructuring plan with before/after description
After confirmation: apply changes using
```
element_tool
```
and/or
```
element_builder
```
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"

Call
```
webflow_guide_tool
```
for best practices
Call
```
data_sites_tool
```
with
```
list_sites
```
to identify the site
Call
```
de_page_tool
```
to get current page
Call
```
element_snapshot_tool
```
to capture current state
Present plan: "I'll create a Grid with two columns — text block on left, image on right. Would you like me to proceed?"
After confirmation: call
```
element_builder
```
with grid structure
Call
```
style_tool
```
to set grid layout properties
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
de_page_tool
before
element_tool
— always confirm/switch page before inspecting elements
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_components_tool
```
(changes propagate)
Component instances on a specific page use
```
de_component_tool
```
```
element_builder
```
supports max 3 levels per call — build deeper structures in stages
Check
```
de_learn_more_about_styles
```
for supported style properties when unsure

designer-tools

NPX Install

Tags

SKILL.md Content

Page Structure

Important Note

Instructions

Phase 1: Discovery

Phase 2: Inspection (read-only operations)

Phase 3: Planning (before any mutation)

Phase 4: Execution (after confirmation only)

Phase 5: Verification

Examples

Example 1: List page elements

Example 2: Build a hero section

Example 3: Update a component

Example 4: Restructure a section

Example 5: Create a two-column layout

Guidelines