Rules
The Rules tool provides comprehensive guidelines for working with Webflow’s MCP tools. It should be consulted before performing complex operations to ensure you’re following best practices and avoiding common pitfalls.
Always consult the Rules tool before complex workflows. It helps prevent errors and ensures proper tool usage across Data and Designer APIs.
When to use
Consult the Rules tool when you need to:
- Plan complex workflows: Understand the correct sequence of operations
- Avoid common mistakes: Learn about pitfalls before encountering them
- Understand tool constraints: Know what each tool can and cannot do
- Choose the right tool: Decide between Data API and Designer API tools
Tool details
Tool name: rules
Parameters: None required
Returns: Comprehensive guidelines covering all Webflow MCP tool categories
Core principles
Data vs Designer tools
Data Tools are REST API calls that work with site content and structure:
- Don’t require the Designer to be open
- Work with collections, items, pages, and site metadata
- Changes may not reflect immediately in the Designer
Designer Tools are UI tools that manipulate the canvas:
- Require the Designer companion app to be open
- Work with elements, styles, and visual properties
- Changes reflect in real-time in the Designer
Planning before execution
Always plan your approach before invoking tools:
- Understand your goal: Know exactly what you want to achieve
- Identify required tools: Determine which tools you’ll need
- Determine the sequence: Plan the order of operations
- Check constraints: Verify all prerequisites are met
Invoking tools randomly without planning often leads to errors and unexpected results.
Element management
Selection and inspection
Get the currently selected element:
Select a specific element:
Provide the element ID to select it.
Get all page elements:
Set breakpoint and style flags to false to prevent context overflow when retrieving all elements.
Attributes
Add or update attributes:
Only works on elements where canHaveAttributes: true. Check element details first.
Remove attributes:
Update custom IDs:
Don’t include the ’#’ character when updating custom IDs.
Styling
Apply existing styles:
Combo classes are supported.
Configure links: For Button, TextLink, or LinkBlock elements:
Never use CSS shorthand properties. Always use longhand:
- ✅
margin-top,margin-bottom,margin-left,margin-right - ❌
margin
Special elements
Set image assets: For Image elements only:
Requires a valid asset_id.
Update heading levels: For heading elements, set level 1-6:
Asset operations
Creating folders
For nested structures, specify parent_folder_id.
Retrieving assets
Query options:
"all"- Get everything"folders"- Only folders"assets"- Only assets
Use specific queries to limit data retrieval and prevent context overflow.
Updating assets
Can update:
- Asset name
- Folder location
- Alt text
Page operations
Creating pages
The system automatically switches to the newly created page after creation.
Switching pages
Requires page_id parameter.
Creating page folders
Optional parent_id for nested folder structures.
Style management
Creating styles
For combo classes, specify parent_style_name.
Updating styles
Main breakpoint defaults apply unless specified otherwise.
Breakpoint hierarchy
Understanding the breakpoint system:
Always use longhand CSS properties, not shorthand, when working with styles.
Variable system
Collections and modes
Create a variable collection:
Add modes to a collection:
Creating variables
Use type-specific tools for different variable types:
- Color:
create_color_variable - Size:
create_size_variable - Number:
create_number_variable - Percentage:
create_percentage_variable - Font Family:
create_font_family_variable
Variables function like CSS custom properties and are linked to styles.
CMS operations
Collections
Retrieve collections:
Create collections:
Fields
Create fields using appropriate tools based on field type:
- Static fields (text, number, etc.)
- Option fields (dropdown, radio)
- Reference fields (linking to other collections)
Items
Create items:
Update items:
Publish items: Include collection_id and proper data structures.
Use “live” tools to publish changes immediately, or draft tools to stage changes for later publishing.
Element creation workflow
Follow this workflow when creating elements:
-
Plan your element structure
- Decide on element type
- Identify required styles
- Determine necessary attributes
-
Create styles first (if needed)
-
Use element builder
Provide element type, styles, and attributes.
-
Select the new element
Newly created elements are NOT automatically selected. You must explicitly select them:
-
Add children (if applicable)
Only Container, Section, and DivBlock elements support children.
Best practices
Check capabilities before operations
Before modifying an element, check its capabilities:
canHaveAttributes- Can accept custom attributescanHaveChildren- Can contain child elementscanHaveStyles- Can have styles applied
Use appropriate tool types
- Data API tools: For content and structure (collections, items, pages)
- Designer API tools: For visual design (elements, styles, assets)
- Utility tools: For guidance and documentation (rules, AI chat)
Handle site IDs explicitly
Always pass site IDs when required. Don’t assume the system will use a default site.
Minimize context with filters
When retrieving large datasets, use filters and query parameters to limit results:
- Disable breakpoint data when not needed
- Disable style data when not needed
- Use specific asset queries
