As a developer working daily with Webflow and Figma, I was excited when Anthropic released ClaudeCode with MCP (Model Context Protocol) support. The promise? Connect your design tools directly to AI and let it build your sites. I spent weeks testing WebflowMCP combined with FigmaMCP on real client work. Here's my honest breakdown of what works, what doesn't, and where you should actually use these tools.

The Setup

My workflow involves designing in Figma (using Client-First naming conventions), then building in Webflow. The dream scenario: point Claude at a Figma frame, have it understand the design, and build it directly in Webflow. I tested this extensively with Claude Code connected to both FigmaMCP and WebflowMCP servers.

Where WebflowMCP Actually Shines

Style Guide Creation

This is WebflowMCP's killer feature. If you're setting up a new Webflow project, start here.

The tool handles Client-First methodology surprisingly well. It sets up heading styles and text classes without issues. Need your `heading-style-h1` through `heading-style-h6` with proper sizing, weights, and line heights? WebflowMCP handles it cleanly.

Variables and Design Tokens

Creating variables is where WebflowMCP impressed me most. It handled primitives effortlessly — setting up color scales, spacing tokens, and typography values. It even grouped them logically without me having to specify the structure.

However, there's a significant limitation: WebflowMCP cannot cross-link variables. When setting up color schemes that should reference primitives, it falls back to hardcoded hex values. For example, if you want `text-primary` to reference `--color-neutral-900` from your primitives, it will instead insert `#1a1a1a` directly. This breaks the whole point of having a token-based system.

CMS and Collection Lists

Here's an unexpected win: WebflowMCP is excellent for CMS work. Creating Collection Lists, setting up CMS structures, binding fields to elements — all of this works reliably. This has nothing to do with FigmaMCP; it's purely Claude Code paired with WebflowMCP understanding Webflow's data model.

If you're doing CMS-heavy builds, this combination can save you significant time on repetitive setup tasks.

The Frustrating Limitations

The Token Economy Problem

Let's talk pricing reality. The Pro plan at $20/month burns through tokens fast — too fast for building actual pages. You'll hit limits before finishing a single section. For any serious site building, you need the Max plan at $100/month. Factor this into your ROI calculations.

FigmaMCP Without Code Connect Is Rough

Here's the core issue: FigmaMCP without Code Connect doesn't truly "understand" your design. It takes a screenshot of the frame and attempts to recreate what it sees. This visual interpretation approach leads to numerous problems downstream.

It Ignores Your Style Guide

Despite having a `.md` file with Client-First guidelines in the project, WebflowMCP doesn't apply global classes when building sections. Instead, it creates custom classes for every element.

A real example: you have a button in your style guide with the class `.button`. When building a features section, WebflowMCP creates `.section-name_button` instead. Multiply this across an entire site and you end up with hundreds of redundant classes that defeat the purpose of a systematic approach.

Inconsistent Pattern Recognition

Ask it to build five identical card components and you'll get three built one way, then cards four and five built differently. The lack of consistency makes it unsuitable for production work where visual coherence matters.

Incomplete Content Transfer

WebflowMCP partially copies content from Figma designs. It might grab the heading and subheading from a section, but ignore the list items in the same frame. You end up manually filling in gaps anyway, which defeats the automation purpose.

No HTML Semantic Understanding

If your Figma frame contains an element named "form" with child elements named "input" and "submit," WebflowMCP doesn't create actual form elements. Everything becomes divs. You lose semantic HTML, accessibility features, and native form functionality.

Responsive Design Is Not There Yet

I provided links to both desktop and mobile Figma frames. WebflowMCP couldn't handle building for both breakpoints simultaneously. You're essentially doing mobile styling manually regardless.

Asset Handling Doesn't Work

Images, icons, and other assets don't transfer. Plan to handle all visual assets yourself.

The Verdict: Know Your Use Cases

After extensive testing, here's my honest recommendation:

Use WebflowMCP for:

• Setting up style guides and typography systems
• Creating variables and design tokens (accepting the cross-linking limitation)
• CMS structure
• Repetitive data-entry tasks

Don't use it for:

• Building production pages from Figma designs
• Any work requiring visual consistency
• Project where you need semantic HTML
• Responsive design implementation

Looking Forward

WebflowMCP is a powerful tool searching for the right workflow. The technology is impressive, but the Figma-to-Webflow pipeline isn't ready for production use. The sweet spot today is infrastructure work: style guides, CMS setup, and variable systems.

If you're evaluating this for your workflow, start with style guide creation. Get familiar with the tool's behavior, understand its limitations, and build from there. Don't expect it to replace your page-building process — at least not yet.

The MCP ecosystem is evolving rapidly. What doesn't work today might work in six months. But right now, the honest answer is: WebflowMCP is a specialist tool, not a general-purpose site builder.