How to Use Claude Code with Webflow (Webflow MCP Tutorial 2026)

Learn how to connect Claude Code to Webflow with the Webflow MCP server, then use plain-English prompts to rewrite a homepage, build new sections, set up the CMS, and fix your SEO settings. In this Webflow MCP tutorial, we take a free Webflow template made by the Flowout team and turn it into a website for a completely different business, without touching most of the design by hand. You'll see how to install the Webflow MCP in Claude Code, how to open Webflow inside the Claude Code browser so you can prompt and watch changes at the same time, and how far you can push it: bulk copy changes, swapping images, adding a brand new masonry gallery section that matches the existing design system, building a blog CMS template from scratch, and writing title tags and meta descriptions with help from the Semrush MCP. What you'll learn: How to add the Webflow MCP server to Claude Code (CLI or the connectors directory) How to rewrite a full Webflow page using copy from another site How to select a section in Webflow and edit it with a prompt How to create new sections that use your site's fonts, spacing and components How to build a CMS collection template page with Claude Code How to combine the Webflow MCP with SEO MCPs like Semrush or Ahrefs How to update title tags, meta descriptions and publish from Claude Code Free Webflow template used in this video: https://webflow.com/made-in-webflow/w... Webflow MCP setup docs: https://developers.webflow.com/mcp Chapters 00:00 Can Claude Code edit a Webflow site? 01:00 How to connect the Webflow MCP to Claude Code 02:44 Open Webflow inside the Claude Code browser 04:13 First prompt: update every button 04:50 Rewrite the whole homepage from another site 06:00 Swap images and fix unreadable text 07:36 Build a new gallery section from scratch 08:33 Build a CMS blog template with the Webflow MCP 10:13 Add the Semrush MCP for SEO suggestions 11:46 Title tags and meta descriptions 12:43 Publish the site 13:10 Recap Need help with a bigger Webflow project, migration or AI workflow? Flowout is a Webflow agency that has built sites for Stripe, Zapier and PayPal. Talk to us: https://www.flowout.com #webflow #claudecode #mcp