AI Tools

How I Started Using Claude to Speed Up My WebFlow Workflow

For the last three years, WebFlow has been my main tool. I build sites, structure CMS collections, write copy or fix broken canonical tags, the usual. But lately I've been experimenting with something that's actually changed how I work: connecting Claude directly to my WebFlow projects through what's called an MCP integration, and in some cases, using Claude Code alongside it.

Here's what I've learned so far, from the perspective of someone who is not a "prompt engineer" - just a designer trying to get more done without burning out.

What MCP actually means (in plain terms)

MCP stands for Model Context Protocol. Don't let the name scare you off - all it really means is that Claude can connect to real tools, not just chat about them. Instead of me copy-pasting CMS data back and forth or explaining my site structure from scratch every time, Claude can actually look at my WebFlow project directly: the CMS collections, the site structure, even elements on the canvas.

WebFlow

built an official MCP server for exactly this. It works with Claude, and also with a few other AI coding tools, but Claude is the one I use daily.

The two ways I connect Claude to WebFlow

There are really two paths, and I use both depending on the job:

The native connector, inside Claude itself. This is the easy version. No terminal, no code. I just added the WebFlow connector from Claude's Connectors panel, authorised it against my WebFlow account, and picked which sites it could access. From there, I can just talk to Claude in plain language about my actual site: "audit the meta descriptions on my CMS blog posts" or "check for duplicate CSS classes across this project." This is the version I'd recommend to any Webflow designer who isn't a developer by background - it takes minutes.

Claude Code, for the more technical work. This is where things get more interesting for me as someone who wants to grow past pure visual design work. Claude Code runs from the terminal, and connecting it to WebFlow needs a bit more setup - Node.js installed, a proper MCP configuration, authenticating per project. It's more effort up front, but it's given me a level of control the native connector doesn't: I can set up a separate Claude Code project per client site, so each one has its own permissions and I can actually see how much I'm using it per project. For someone about to go freelance and juggle multiple client sites, that separation matters more than I expected.

What I've actually used it for

A few things that have made a real dent in my week:

  • CMS audits. Claude reads through my CMS pages and flags meta titles that are too long, missing alt text, inconsistent naming. What used to take me an afternoon now takes minutes to review.
  • Design system cleanup. On older projects - the ones I inherited or built a year ago before I tightened up my process - class names and variables get messy. Claude can scan the whole site and point out duplicate classes, inconsistent naming, and hardcoded values that should be variables instead.
  • Bulk content generation. For CMS-heavy sites, I can ask Claude to draft a batch of realistic content items based on the pattern of a few existing entries, instead of writing each one by hand. I still edit everything afterward - the voice needs a human pass, especially since I write across three languages - but it removes the blank-page problem.

What it hasn't replaced

Claude doesn't design. It doesn't have taste, and it definitely doesn't understand a client's brand the way I do after a discovery call. What it's replaced is the repetitive, low-judgment work: the audits, the first-draft CMS content, the tedious naming cleanup. That's time I'd rather spend on the actual craft - page structure, visual hierarchy, the parts of the job that made me want to be a designer in the first place.

Why this matters for where I'm headed

As I move toward more freelance and independent client work, this workflow is becoming part of how I'll actually deliver faster without cutting corners. Fewer hours lost to manual audits means more room for the parts of a project clients actually notice and remember. If you're a WebFlow designer or developer curious about this, my honest advice: start with the native Claude connector first. It's the lowest-effort way to see if this changes anything for you, before deciding whether the Claude Code setup is worth the extra configuration.

I'll keep sharing what I learn as I build this into my regular process.