Claude Code + Webflow: How to Move Off Webflow in 5 Steps With an AI Coding Agent

You can use Claude Code with Webflow in two ways: next to it, through Webflow's official MCP server, or instead of it, by moving the site into a Next.js codebase that Claude Code edits. Moving off Webflow takes five steps: export, rebuild the templates, turn CMS collections into MDX, map 301 redirects, and validate before you switch DNS.

This post is for marketing teams deciding between staying on Webflow and owning their site's code. It covers when Webflow is still the right call, when a code-owned site wins, and the exact Webflow to Next.js steps, based on our own move off a page builder.

What Does Claude Code + Webflow Mean

Claude Code is Anthropic's AI coding assistant: it reads and edits real source code from plain-language instructions. Paired with Webflow, it means either managing a Webflow site from the terminal or using Claude Code to migrate from Webflow to a site you own.

The first option keeps Webflow as the source of truth. Webflow publishes an official MCP server that you add to Claude Code with one command, then authorize the sites it can touch.

claude mcp add --transport http webflow https://mcp.webflow.com/mcp

Webflow's own example prompts include listing your CMS collections, auditing a site for broken links and missing alt text, and building a hero section. Your pages, CMS, and hosting stay in Webflow.

The second option moves the site into a code repository. Claude Code then works as your editor: you describe a change, it edits the code, and a person reviews a preview before anything ships.

We took the second path. In June 2026 we moved pelcro.com off Wix and have built it with Claude Code ever since, as we describe in how we built our website with Claude Code. Our source platform was Wix, not Webflow, so every Webflow-specific detail below comes from Webflow's own documentation.

When Webflow Still Makes Sense, and When a Code-Owned Site Wins

Webflow is a strong product, and leaving it is not the right move for every team. The honest answer depends on who edits the site and what it needs to do.

Stay on Webflow if:

• Your editors want a visual designer and a CMS editor, with no code review step.
• Your site is mostly marketing pages and blog posts, with no custom application logic.
• You would rather pay for managed hosting than run builds, checks, and deploys yourself.
• You want AI help without migrating, in which case the Webflow MCP server above is the shortest path.

Move to a code-owned site if:

• You want Claude Code to change any part of the site, not only what a visual editor exposes.
• Your site needs real application logic, like subscriptions, paywalls, or gated content.
• You want every change to pass automated checks and a review before it goes live.
• You want to choose your own hosting and keep the full history of the site in Git.

Most teams that migrate from Webflow do it for the last group of reasons. If none of them apply to you, Claude Code alongside Webflow is the cheaper decision.

How to Migrate From Webflow to Next.js in 5 Steps

Here is the order we would follow for a Webflow to Next.js move, using the same setup that runs our site today.

1. Export everything Webflow gives you

Start with three exports, before you change anything.

• Site code. Webflow's code export produces a ZIP with your pages' HTML, CSS, JavaScript, and images. Webflow's help center notes it is only available on Workspace plans, not Site plans.
• CMS collections. The code export leaves out CMS content, so export each collection as a CSV from the CMS panel.
• Your URL list. Save your live sitemap and your current 301 redirects, so you know every URL you need to keep.

One detail matters a lot: in a CSV export, Webflow writes image and file fields as URLs that point at the original Webflow project. Download those files before you close the project, or the links break.

2. Rebuild the templates as components

Do not ship the exported HTML as it is. Treat it as a structural reference, and have Claude Code rebuild each layout as React components in your Next.js app.

Give Claude Code a rules file (we use CLAUDE.md in the repository) with your brand colors, type scale, and page speed targets. Every session then reads the same rules, so the hundredth page matches the first.

Webflow's exported classes carry a w- prefix, and interactions depend on Webflow's own JavaScript. Ask Claude Code to replace both with your own components, so the new site has no hidden dependency on the old one.

3. Turn CMS collections into MDX files

Each CSV row becomes one MDX file: the fields go in the frontmatter, and the rich text becomes the body. Webflow exports rich text as HTML, so ask Claude Code to convert it to Markdown and point images at the files you downloaded in step 1.

---
title: "How we priced our subscription"
description: "One line for search results."
publishedAt: "2025-03-14"
author: "jane-doe"
---

The body, converted from rich text.

Validate the frontmatter with a schema, so a missing date or a broken author fails the build instead of a page. That is how our blog works today, and it catches most migration mistakes before a reviewer opens the change.

4. Map every old URL with a 301 redirect

Claude Code SEO work during a migration is mostly about URLs. Keep the same paths wherever you can, and give every path that changes a permanent redirect.

On Cloudflare Pages, redirects live in a plain _redirects file in your repository, so they get a history and a review like any other change:

/blog-posts/:slug  /blog/:slug  301
/old-pricing       /pricing     301

Carry over titles, meta descriptions, and image alt text from the export too. Webflow also notes that forms, site search, and password protection do not work in exported code, so wire forms to your CRM before launch.

5. Validate before you switch DNS

Run the new site on a preview link and check it against the URL list from step 1. Every old URL should return a page or a 301, never a 404.

Then let automated checks decide. On our site, every change runs lint, a type check, a full build, and content validation, and our page speed floor is 90 on mobile and desktop.

Only after the preview passes do you point your domain at the new host. Keep the Webflow project until search traffic settles, as a backup for files and copy.

How Pelcro Plugs Into a Site Built With Claude Code

A site you own still needs a way to sell subscriptions, control access, and handle renewals. That is the part Pelcro adds.

Pelcro's JS SDK and React Elements drop into the same Next.js codebase Claude Code is already editing. Plans, entitlements, and checkout come from Pelcro's API, so there is no separate tool to bolt on.

For paywall and checkout changes after launch, Pelcro's AI Coding Agent works the same way. You describe the change, it lands as a commit on a branch, and you review it first. You can try the interactive AI Coding Agent demo on sample paywall and checkout changes.

Frequently Asked Questions

Can Claude Code edit a Webflow site directly?

Yes, through Webflow's official MCP server. You add it to Claude Code with one command and choose which sites it can access. Your pages and CMS stay in Webflow.

Can marketers use Claude Code instead of Webflow?

Yes, if someone sets up the repository, rules file, and checks first. After that, Claude Code for marketers works like an editor: describe the change, review the preview, and ship it. Have a developer review anything that touches payments or subscriber data.

Does moving from Webflow to Next.js hurt SEO?

Not if you keep your URLs, redirect every path that changes with a 301, and carry over titles, descriptions, and alt text. Check every old URL on the preview link before you switch DNS.

Does Webflow's code export include my CMS content?

No. Webflow's help center says CMS content is not included in exported code. Export each collection as a CSV instead, and download the image files those CSVs link to.