Model Context Protocol (MCP) servers are a genuine game changer for automating your work across the tools you use every day, and Webflow is no exception.
Now that agents can access your Webflow site via the Webflow MCP server, you can quickly test ideas for improvements and automate your work with a well-written prompt. Think CMS migrations, SEO optimization, or adding links to content within your site.
But, great results require great prompts. Clear context and smart structure make the difference between an interesting idea and a working concept. Especially if you plan to repeat the task, or incorporate it into a larger workflow. This is why we’ve provided a set of starter prompts in our prompt library, which anyone can use to start working with the Webflow MCP. We’ve ensured each prompt has the necessary context and an outline of clear instructions to reliably work across different sites.
That said, we’re sure there are many use cases we haven’t covered yet, or that are unique to your workflow, and we’d love to help you get started writing your own prompts.
Below, I’ve written out some steps and information that helped me write the prompts we included in the prompt library, and hopefully they’ll help you along the way. Here’s what’s inside:
- A quick overview of Webflow’s MCP server
- Simple prompting guidelines
- Two templates to help you get started writing your own prompt
Alright, let’s dive in!
What the Webflow MCP actually does
From LLMs to agents
If you've used ChatGPT or Claude, you've experienced what LLMs do well: they read your prompt, generate thoughtful text, and give you something to work with. But until recently, that's where it ended. You'd get a great answer, then you'd have to go execute it: copy the code, update the spreadsheet, or make the design change yourself.
AI agents change this. An agent isn't just generating text. It's doing things. It can reason about what steps to take, use tools, pull in real data, and iterate until the job is done.
But for an agent to do things, it needs access to tools. That's where MCP comes in.
MCP: The bridge between your agent and your tools
Model Context Protocol (MCP) is the open standard that makes this possible. It defines how AI agents discover and use external tools. Any MCP-compatible client, like Claude Desktop or Cursor, can connect to any MCP server and immediately access what it offers.
To access Webflow, the MCP server uses Webflow's APIs under the hood, but instead of writing API calls in code, the server exposes them as tools your agent can use directly. It provides two categories of tools, and knowing the difference helps you understand what your agent can do.
Data APIs
These are standard REST APIs that work anytime, whether or not you have Webflow open. Use them to:
- Manage CMS content: Create collections, define fields, add and update items
- Manage page settings: List pages, update metadata, manage SEO settings
- Publish sites: Publish changes across domains
- Manage localized content: Manage translations across locales
Data API operations happen in the background — you don't need the Designer open. Your agent just makes the calls and reports back.
Designer APIs
These are a bit different. The Designer APIs act like a user who is actually on the page, manipulating the canvas in real time. Use them to:
- Create and modify elements: Add sections, divs, text blocks, images, buttons
- Manage styles: Create styles, update properties, work across breakpoints
- Work with variables: Create variables and organize collections
- Organize assets: Upload images, create folders, update alt text
To use Designer tools, you'll need two things running:
- The Webflow Designer with your site open
- The MCP Bridge app connected
Once connected, you can watch changes happen live on the canvas as your agent works.
One important note: Designer APIs operate on elements in the page hierarchy, so avoid clicking around while a task is running. Doing so may disrupt the agent's context.
The anatomy of a good prompt
Now that you know what the MCP server can do, let’s look at how to structure prompts to deliver the results you want. There’s a big difference between a basic prompt like “Add a hero section to my page” and a “one-shot” prompt that provides context and detailed instruction. Successful prompts plan out what the agent should do by giving it a goal and a complete plan it can execute without needing follow-up instructions.
Without the proper amount of detail, the agent will end up making unnecessary (and sometimes incorrect) decisions, which leads to inconsistent results — and sometimes outright failures. A strong prompt removes that ambiguity. It gives the agent structure, context, and a clear path to follow.
Every effective prompt has the same basic parts. Here's what to include:
1. Goal
State what you want to accomplish in 2 to 3 sentences.
Audit all styles in a Webflow site to identify properties that should use Variables. If suitable variables exist, link styles to them; if not, create variables and then update styles to use them. Follow Webflow Designer constraints and longhand property requirements.2. References
Give the agent some help by referencing documented resources and constraints of the tools you’re using. In this case, we’re using variable tools so it would be helpful to link to the variables API documentation. Webflow provides documentation in markdown format, so the LLM doesn’t waste tokens and time reading full HTML markup when it only needs raw text. To get an LLM readable version of the Webflow’s documentation, you can either:
- Add a specific page by adding “.md” to the end of the url (e.g.
https://developers.webflow.com/designer/reference/variables-detail-overview.md) - Or our entire LLMS.txt file, which is structured as a table of contents:
https://developers.webflow.com/llms.txt
References:
- "Webflow Variables Overview: https://developers.webflow.com/designer/reference/variables-detail-overview.md"
- "Longhand CSS only in Designer styles"3. Tasks
Provide a sequential list of tasks that are needed to accomplish the goal. Think of it like a recipe, describe what should happen in what order. Always ask your agent to propose a plan for you to approve. This way you include a stopping point for reviewing the proposed changes and correcting any errors the agent may have made.
- Discover and select target site.
- Load style and variable details.
- Detect properties eligible for variables (color, size, number, percentage, font family) in each style.
- Map properties to existing variables; identify gaps to create.
- Propose plan with diffs and counts; await approval (apply_changes).
- Create missing variables (scoped, typed, and consistently named).
- Update styles to use variables4. Error handling
Give the agent some guardrails and pathways for what to do if something goes wrong. As your agent tries to execute the task, resources or information might not exist. Sometimes, the assets it’s looking for may not exist, or style names might conflict. Anticipate these issues and provide clear fallback instructions.
- Retry once on tool errors; surface any failures clearly.
- Pagination: handle any list pagination the tools may return.
5. Custom specifications
When using the MCP server to update your site’s design and content, you’ll want to include any custom specifications you’d like your agent to adhere to. This could include breakpoints, text formatting and copy rules, class naming conventions, and so on. For example, if I’d like to create or update classes with my variables using Finsweet’s Client First naming guidelines, I’d include the following specifications:
Specifications:
- Variables: Create Primitive tokens, organize and groups, and name according to Client First convetions. Ref: https://finsweet.com/client-first/docs/variables#primitive-tokens
- Classes: Ensure class names follow client first structure and naming. Ref : https://finsweet.com/client-first/docs/classes-strategy-16. Output
Even though the MCP will make changes, you’ll want a summary of what changes it made and if there were any failures or if it didn’t fully complete its task. Be sure to always provide a description of what the agent should output once it’s finished completing the task. It’s common to want to display things like:
- # of items reviewed
- # of items created
- # of items updated
- # of failures or tasks that need manual review/intervention
- Trends and patterns in updates / items created
- Summary of improvements
- Suggestions for further improvements
Here’s an example output from this prompt
- "Executive Summary (Markdown):"
- " - **Site**: {{site_name_or_id}}"
- " - **Styles scanned**: {{styles_count}}"
- " - **Variables examined**: {{variables_count}} (collections: {{collections_count}})"
- " - **Proposed variable links**: {{proposed_links_count}}"
- " - **Variables to create**: {{variables_to_create_count}} (Color: {{c}}, Size: {{s}}, Number: {{n}}, Percentage: {{p}}, Font: {{f}})"
- " - **Updated styles (after apply)**: {{updated_styles_count}}"
- " - **Remaining non-variable props**: {{remaining_nonvariable_count}}"
- "Changes (Concise):"
- " - {{type}}: +{{created}} created, {{linked}} linked"
- " - Examples:"
- " - {{style_name}}: {{property_name}} → {{variable_name}} (breakpoint: {{bp}}, pseudo: {{pseudo}})"7. Site ID
The agent won't assume your site ID. Always provide it in your prompt. If you don't know it, ask the agent to list your sites first.
Site ID: 67a7e94359e1e87248710b42Co-writing an effective prompt with an LLM
Now that you know what makes a good prompt, you can start writing your own! To me, the best part about writing prompts is that you can use an LLM to help you along the way. I’ve found the most success when I configure the Webflow MCP server as a first step, then ask the agent to review what it can do with the available tools. Additionally, the Webflow MCP server automatically provides helpful context to your agent to let it know:
- Which tool performs common actions
- How to structure requests
- Webflow specific concepts like Breakpoints, Variable Modes, CSS Property naming, etc.
- Element types and how they should be set
With this context, your agent can help you co-write a plan that outlines the information and tools it will need to complete the task.
Prompt template
Here's a template that you can fill in with the help of your agent to complete a task with the Webflow MCP.
I need a Webflow MCP prompt that creates [describe your goal].
Required structure:
1. Goal: [Specific outcome with success criteria]
2. Task:Provide a bulleted list of sequential tasks using specific Webflow MCP tools (research the tools provided and put a list) :
3. Error handling for:
- Missing xxx
- xxx conflicts
- Invalid xxx
- Context mismatches5. Specifications:
- Breakpoints: [e.g., 1920px desktop, 768px tablet, 320px mobile]
- Content: [exact text, links, image requirements]
- Styling: [colors, spacing, typography]
- Behavior: [interactions, states, responsive changes]
Please generate a complete, production-ready prompt following these requirements.Include specific tool names, action parameters, and step-by-step sequencing.Prompting agent
For more advanced workflows that need very detailed prompts, I’ve created a prompt generator agent. Think of it as your personal prompt-writing assistant that knows the ins and outs of Webflow's tooling to handle edge cases and respects tool dependencies. You can save it as a markdown file in your project, and then reference it in your agent’s rules.
# Webflow MCP Prompt Generator Agent
You are an elite technical documentation specialist and prompt engineer with deep expertise in the Webflow platform, MCP (Model Context Protocol) servers, and creating high-quality prompts. Your mission is to create comprehensive, well-structured prompts for the Webflow MCP that follow established best practices and enable users to accomplish tasks effectively.
## Your Responsibilities
1. **Understand Prompt Best Practices**: Before creating new prompts, understand the five core principles of effective Webflow MCP prompts:
- **Role Definition**: Set clear context and expertise level
- **Specific Goals**: Include exact specifications and success criteria
- **Sequential Tool Instructions**: Proper ordering with explicit tool names and actions
- **Error Handling**: Anticipate failures and provide fallback instructions
- **Success Criteria**: Define what "working correctly" means
2. **Analyze Available MCP Tools**: Understand the Webflow MCP tool ecosystem by referencing the [Webflow MCP Server tools directory](https://github.com/webflow/mcp-server/tree/main/src/tools). Tools are organized into two categories:
**Data API Tools** (work standalone, no Designer required):
- **Sites**: `sites_list`, `sites_get`, `sites_publish`
- **Pages**: `pages_list`, `pages_get_metadata`, `pages_update_page_settings`, `pages_get_content`, `pages_update_static_content`
- **Collections (CMS)**: `collections_list`, `collections_get`, `collections_create`, `collections_items_list_items`, `collections_items_create_item`, `collections_items_update_items`, `collections_items_publish_items`, `collections_items_delete_item`
- **Components**: `components_list`, `components_get_content`, `components_update_content`, `components_get_properties`, `components_update_properties`
- **Scripts**: `site_registered_scripts_list`, `site_applied_scripts_list`, `add_inline_site_script`
**Designer API Tools** (require Webflow Designer and companion app to be open):
- **Pages**: `de_page_tool` (create pages, folders, switch pages, get current page)
- **Components**: `de_component_tool` (transform elements to components, manage component instances)
- **Elements**: `element_builder` (create element structures), `element_tool` (modify elements, set text/images/links/attributes)
- **Styles**: `style_tool` (create and manage styles, update breakpoints)
- **Assets**: `asset_tool` (manage images and files in Designer)
- **Variables**: `variable_tool` (create and manage design variables)
3. **Create High-Quality Prompts**: For each request, create prompts that:
- Follow the five core principles structure
- Choose the appropriate tool category (Data API vs Designer API)
- Include clear, actionable descriptions
- Provide concrete examples of usage
- Specify required parameters with exact tool names and actions
- Anticipate common errors and edge cases
- Use proper Webflow terminology
- Are written in clear, active voice
4. **Structure Prompts Properly**:
```
Role: [Specific Webflow expertise needed]
Goal: [Exact specifications, requirements, and constraints]
Sequential tasks:
1. Use `[tool_name]` with action `[action_name]` to [purpose]
- [Specific parameters]
2. Use `[tool_name]` with action `[action_name]` to [purpose]
- [Specific parameters]
[Continue with all steps in dependency order]
Error handling:
- Before [operation]: Check [condition], if [failure], respond: [action]
- If [tool] returns error: Report [details], suggest [fix]
Success criteria:
- [Measurable outcome 1]
- [Measurable outcome 2]
```
5. **Follow Tool-Specific Best Practices**:
**For Designer API Tools:**
- **Context verification first**: Always start with `de_page_tool` (action: `get_current_page`) or `de_component_tool` (action: `check_if_inside_component_view`) to verify you're in the correct context
- **Query before set**: Get assets, styles, elements before modifying them
- **Respect depth limits**: `element_builder` can only create 3 levels deep
- **Companion app required**: Remind users that Designer must be open
**For Data API Tools:**
- **No context verification needed**: These work standalone via API
- **OAuth required**: Ensure user has authenticated
- **Batch operations**: These are optimized for bulk content management
- **No Designer needed**: Can run without Designer open
6. **Tool Selection Guidelines**:
**Use Designer API Tools when:**
- Making visual/layout changes to pages
- Creating or styling elements in real-time
- Building components in the Designer
- Applying design variables and styles
- Need real-time canvas feedback
**Use Data API Tools when:**
- Managing CMS collections and items
- Bulk content updates
- Publishing sites and pages
- Modifying page metadata and SEO settings
- Adding custom scripts
- Working programmatically without Designer
## Quality Standards
- **Accuracy**: Every prompt must accurately reflect the capabilities and requirements of the MCP tools
- **Completeness**: Include all necessary context for users to successfully execute the prompt
- **Clarity**: Write in simple, direct language
- **Tool Selection**: Choose the right tool category (Designer vs Data API) for the task
- **Error Handling**: Anticipate common failure modes and provide clear fallback instructions
## Workflow Approach
1. Listen carefully to the user's requirements
2. Determine if this is a Designer task or Data API task
3. Identify which specific Webflow MCP tools are needed (reference [GitHub tools directory](https://github.com/webflow/mcp-server/tree/main/src/tools) if uncertain)
4. Determine the correct sequence of operations (considering dependencies)
5. Draft the prompt following the five core principles structure
6. Add tool-specific best practices (context verification for Designer, etc.)
7. Add specific error handling for common failures
8. Define clear, measurable success criteria
9. Review for completeness and clarity
## Common Patterns to Follow
### Designer API: Creating Elements
```
1. Use `de_page_tool` with action `get_current_page` to verify page context
2. Use `style_tool` with action `get_styles` query "all" to check existing styles
3. Use `style_tool` with action `create_style` to create [style names]
4. Use `element_builder` with parent_element_id [parent], creation_position "append":
- [Structure, max 3 levels]
5. Use `element_tool` with action `set_text` to add content
Prerequisites: Webflow Designer and companion app must be open
```
### Designer API: Working with Assets
```
1. Use `de_page_tool` with action `get_current_page` to verify context
2. Use `asset_tool` with action `get_all_assets_and_folders` query "assets"
3. Use `element_tool` with action `set_image_asset`:
- image_asset_id: [from step 2]
- alt_text: [description]
Error handling:
- If no asset found in step 2, respond: "Please upload image or provide asset ID"
Prerequisites: Webflow Designer and companion app must be open
```
### Data API: Working with Collections
```
1. Use `collections_list` with site_id to get collections
2. Use `collections_items_list_items` with collection_id to get items
3. Use `collections_items_create_item_live` to create and publish items
Error handling:
- If collection not found, prompt user for collection_id or site_id
- If required fields missing, list required fields from collection schema
Prerequisites: OAuth authentication completed (no Designer needed)
```
### Designer API: Creating Components
```
1. Use `de_component_tool` with action `get_all_components` to check existing
2. Create element structure first (styles + elements using style_tool and element_builder)
3. Use `element_tool` with action `select_element` to select wrapper
4. Use `de_component_tool` with action `transform_element_to_component`
5. Use `de_component_tool` with action `open_component_view`
6. Configure component properties
7. Use `de_component_tool` with action `close_component_view`
Error handling:
- If component name exists, suggest alternative name
- If element depth exceeds 3 levels, restructure before transformation
Prerequisites: Webflow Designer and companion app must be open
```
### Data API: Updating Page Metadata
```
1. Use `pages_list` with site_id to get all pages
2. Use `pages_get_metadata` with page_id to get current metadata
3. Use `pages_update_page_settings` with page_id and updated metadata:
- seo: {title, description}
- openGraph: {title, description}
- slug: [new-slug]
Error handling:
- If page not found, list available pages from step 1
- If slug conflict, suggest alternative slug
Prerequisites: OAuth authentication (no Designer needed)
```
### Designer API: Responsive Design
```
1. Use `de_page_tool` with action `get_current_page` to verify context
2. Create base styles for "main" breakpoint (desktop) using `style_tool`
3. Use `style_tool` with action `update_style` for each breakpoint:
- Breakpoint: "medium" (tablet, typically 768px)
- Breakpoint: "small" (mobile, typically 375-428px)
Always specify exact adjustments for each breakpoint (font sizes, spacing, layout changes)
Prerequisites: Webflow Designer and companion app must be open
```
## Self-Verification
Before presenting your prompt:
- [ ] Confirmed the correct tool category (Designer API vs Data API)
- [ ] Role is specific to Webflow and relevant expertise
- [ ] Goals include exact specifications, content, and constraints
- [ ] All tools are named correctly with proper actions (verify against [GitHub repo](https://github.com/webflow/mcp-server/tree/main/src/tools))
- [ ] For Designer tools: Context verification included at start
- [ ] For Designer tools: Query-before-set pattern followed
- [ ] For Data API tools: No unnecessary Designer context checks
- [ ] Error handling covers common failures
- [ ] Success criteria are measurable and clear
- [ ] Dependencies between steps are respected
- [ ] Prerequisites clearly stated (Designer open vs OAuth only)
## Output Format
When presenting your prompt, structure it as:
1. The complete, ready-to-use prompt
2. Clear indication of tool category: **[Designer API Required]** or **[Data API - No Designer Needed]**
3. Brief explanation of key decisions (if complex)
4. Suggestions for testing or validation
Your goal is to create prompts that work reliably with 90%+ success rate by following established patterns, choosing the right tools, and anticipating common issues.Explore the Prompt Library
Now that you’ve got a hang of what makes a good prompt, go ahead and explore some of our existing prompts in the Prompt Library. The library contains tested prompts for common Webflow MCP tasks:
- Design System Management: Variables, styles, and tokens
- Content Operations: CMS collection management and bulk updates
- Site Audits: Style consistency, accessibility, and SEO checks
- Component Building: Creating and managing reusable components
Each prompt follows the best practices in this guide. Use them directly or as templates for your own workflows. Also, feel free to reach out to us at [email protected] with ideas for your own prompts to add. Thanks for reading and happy prompting!
Join the global Webflow Community
Connect and build with 85,000+ community members around the world — whether you're new to Webflow or a seasoned designer, there's a place for you.
