From HTML to Webflow using the Designer MCP - what actually works, and what doesn't

First impressions from the new Webflow Designer MCP

We've been spending time testing and working with the new Webflow Designer MCP - building pages, running conversions, and generally pushing it to see where it holds up and where it breaks. The short version: genuinely excited about this release. It sped up our workflow significantly and opens up workflows that weren't possible before.

This post isn't a hype piece. The Designer MCP has real limitations, some of which cost us significant time to discover. We're documenting both sides honestly - what works well, what the MCP simply cannot do, and the specific practices that made the biggest difference.

What the Webflow Designer MCP actually is

There are two Webflow MCP integrations - don't confuse them. The Data MCP handles CMS collections, publishing, and site settings via the API. The Designer MCP is different: it connects Claude directly to the Webflow Designer canvas, letting it read the page structure, insert HTML, apply classes, create styles, and manipulate elements in real time.

The use case that unlocks the most value: take any HTML output - from a vibe coding tool like v0 or Bolt, from a Claude artifact, or from any other source - and let Claude translate it into real Webflow elements with proper classes, responsive styles, and a structure that lives inside your design system. No embed blocks, no locked code. Real elements on the canvas.

Tips that made the biggest difference

Ask it to search all available components and styles when a page looks wrong. When a section isn't rendering correctly, having Claude search your full component and style library often surfaces an existing class that maps perfectly - rather than creating a redundant new one. This was consistently the most useful recovery move when output drifted from the existing design system.

Use Playwright constantly for verification. The MCP can make changes without visual feedback unless you build verification in. Having Claude use Playwright to screenshot what it changed after every major action catches mismatches and ordering issues before they compound. Don't skip this step.

Install the official Webflow Skills. Webflow has published official skill files for Claude that define the correct patterns for working with the Designer MCP. These significantly improve output quality and reduce hallucinated approaches to element manipulation.

Handle images separately - the right way. Image uploading via the MCP isn't straightforward. The workflow that actually works: ask Claude Code to collect all required images into a single folder, upload them manually to Webflow Assets, then tell Claude they're uploaded. It finds all the references and swaps them correctly. Don't try to automate the upload step.

Use the back-and-forth comparison approach. When migrating or converting an existing site, having Claude navigate between the source site and the new Webflow site to catch missed elements is extremely effective. Frame it as an audit task: "compare these two pages and identify anything on the source site that hasn't been implemented in Webflow." It catches things you'd miss manually.

What the Designer MCP cannot do

These are hard limitations. No workaround exists via the API - you'll need to do these manually in the Designer.

Painful but solvable - workarounds that cost time

Combo class gotcha. Applying a combo class alone does nothing if it's applied without a base class. We wasted a round-trip discovering this. The fix: create a new base-level class with the property you need (e.g. display:none) rather than relying on combo class inheritance.

Designer MCP disconnects frequently. If the Webflow Designer tab is not actively in the foreground, the MCP connection drops. This happened repeatedly during longer sessions. The fix is simple but annoying: keep the Designer tab visible and active, or expect to relaunch the connection multiple times.

Aggressive rate limiting on publish. The publish endpoint rate-limits after a single call, requiring 90+ second waits between publishes. For iterative work where you're publishing frequently to check live output, this adds up. Build publish checkpoints into your workflow rather than publishing after every small change.

Element builder depth limit. The element builder only supports 3 levels of nesting per call. Complex nested structures require multiple API calls. Account for this in how you structure build instructions.

What you'll still need to do manually in the Designer

Going in with realistic expectations means knowing upfront what the MCP won't be able to finish:

The bottom line

This is the most useful Webflow tooling release we've worked with. Pages and sections that used to require a developer spending hours inside the Designer can now be largely handled by Claude Code working autonomously - building out structure, applying classes, verifying output visually, and catching discrepancies as it goes.

The limitations are real and specific enough that this post exists. But the ceiling on what's possible keeps rising. Install the official Webflow Skills, use Playwright for verification, keep your Designer tab in the foreground, and go in knowing what you'll finish manually. The time savings are significant enough that the workarounds are worth it.