How to Migrate Off Webflow With Claude Code: A Practical Walkthrough

Coding agents have made leaving Webflow far less painful than it was. We build with agents every day, and this is the workflow we'd use to move a Webflow marketing site to Next.js with Claude Code: crawl, plan, rebuild, transform content, diff, redirect and launch. It's practical rather than theoretical, including the places where the agent needs a firm hand. For the bigger picture on what agents can and can't do, start with our hub on AI-assisted website migration.

Can you migrate Webflow with Claude Code?

Yes, you can migrate a Webflow site with Claude Code. It works well because Claude Code operates inside your codebase and terminal: it can fetch pages, read exported files, write components, run the build and fix errors in a loop. Teams have published accounts of agent-led Webflow exits; Vellum, for example, described migrating off Webflow with coding agents in about a week.

What makes it work is not the agent alone but the structure around it. Webflow has no export to a maintainable codebase; its code export gives you static files, and CMS content doesn't come across in a usable form (check Webflow's current export docs), so every migration is a rebuild. Claude Code makes the rebuild fast. You still need a precise inventory, a clear target and a QA process, or the agent will happily produce a site that looks close and is missing things. If you're weighing whether to move at all, our comparison of Webflow, Framer and Next.js costs over three years is a good first read.

What do you need before starting a Webflow to code migration with AI?

Before starting a Webflow to code migration with AI, you need access to the Webflow project and its CMS exports, a target stack decision, a hosting account, and an inventory of the current site. You also need someone who can read the code Claude Code writes and judge whether it's right.

• Webflow access: Designer access to inspect styles and interactions, and the ability to export each CMS collection as CSV.
• Target stack: for example Next.js on Vercel with a headless CMS, or content in Markdown files if marketing rarely edits.
• A repository: an empty Next.js project with your linting and formatting set up, so the agent follows your conventions.
• Search data: your top pages by organic traffic and backlinks from Search Console, so you know which URLs matter most.
• A brief file: a written project instruction file in the repo describing the stack, folder structure, naming, content model and definition of done.

How do you migrate Webflow with Claude Code step by step?

You migrate Webflow with Claude Code in seven steps: inventory, content model, design system, page templates, content transform, visual diff and redirects, then launch. The agent does most of the typing in steps three to five; you do most of the judging in steps one, two, six and seven.

1. 1

   1. Crawl and inventory

   Have Claude Code write a small script that crawls the sitemap and every internal link, saving each URL, title, meta description, H1, canonical and the page's HTML. Add forms, embeds and third-party scripts to a spreadsheet. This is your source of truth.

2. 2

   2. Design the content model

   Review the CMS collections and their fields. Decide how each maps to the new CMS or to content files, including references between collections. Write it into the brief.

3. 3

   3. Rebuild the design system

   Ask the agent to extract colors, type scale, spacing and repeated elements from the live HTML and CSS into tokens and components: buttons, cards, navigation, footer, section layouts.

4. 4

   4. Build page templates

   Rebuild static pages and CMS templates one at a time, each from its saved HTML, using the shared components. Review structure before moving on.

5. 5

   5. Transform content

   Feed the CSV exports to a transform script that writes entries in the new format. Download every image, re-host it, and rewrite references.

6. 6

   6. Diff and fix

   Screenshot each old and new page at mobile, tablet and desktop widths and compare them. Fix differences by priority, starting with your top traffic pages.

7. 7

   7. Redirect, test and launch

   Build a redirect map from the inventory, test every old URL, test every form end to end, then switch DNS and watch Search Console daily.

Work in small, reviewable chunks: one template per session, committed and checked. The same approach works for Framer, with different gotchas around Motion animations; see our guide to Framer to code with AI.

How do you handle Webflow CMS content and images?

You handle Webflow CMS content by exporting each collection as CSV, transforming it with a script into your new CMS or content files, and then fixing what the export loses. Our research found two consistent gaps: Webflow's CSV import and export process turns images inside rich text into placeholders, and every image URL points to the Webflow CDN, so images must be downloaded and re-hosted.

Have Claude Code write the transform as a script you can run repeatedly, not a one-off conversion. Then you can fix a mapping and re-run it. For rich text, pull the published page HTML for each item as well as the CSV, so the script can recover inline images and embeds the export dropped. Webflow documents its CSV export feature for collections, which is the starting point.

How do you check the rebuild matches the original design?

You check the rebuild matches the original design with automated screenshot diffs at several breakpoints, followed by a designer's review of the differences. A browser automation tool such as Playwright can capture the old and new versions of every page; comparing them shows layout, spacing and typography drift that's easy to miss by eye.

Ask Claude Code to write the diff script: for each URL in the inventory, capture both versions at mobile, tablet and desktop widths, and save side-by-side images or a pixel difference. Expect some noise from fonts and animation timing; pause animations before capture. Then a human goes through the diffs. Agents are decent at fixing a difference once you describe it, but they're poor judges of which differences matter. Interactions need a separate pass, since screenshots don't show hover states or scroll effects.

Speed is one area where a coded site should win, but only if you use the framework's image, font and script handling properly. Our guide to Core Web Vitals on Framer, Webflow and Next.js covers the Next.js settings that matter.

How do you protect SEO and redirects when leaving Webflow?

You protect SEO when leaving Webflow by keeping URLs identical wherever possible, redirecting every URL that changes, carrying over titles, descriptions, canonicals and structured data, and confirming the new pages render full HTML. Generate the redirect list from your inventory, then test every old URL against the new site before launch.

1. Match URLs by default. Webflow's collection paths, such as /blog/post-name, are easy to keep in Next.js routing.
2. Export existing redirects. Copy any 301s already set in Webflow's hosting settings into the new config.
3. Script the redirect test. Have the agent request every old URL on a staging domain and report anything that isn't a 200 or a single 301 to the right page.
4. Compare metadata. Diff titles, descriptions, H1s and canonicals between the inventory and the new build.
5. Submit and monitor. After launch, submit the new sitemap and watch coverage and traffic for the top pages for several weeks.

Don't forget forms, which often post to Webflow's own form handling. They need a new destination, and they need testing end to end. If you're going the other way, from code to Webflow, our guide to Next.js to Webflow migration covers that route, and moving from code to a visual builder explains when it's the better call.

When should you get help instead of doing it yourself?

You should get help instead of migrating Webflow with Claude Code yourself when nobody on the team can review code confidently, when organic search drives a large share of revenue, or when you also want a redesign or new copy. In those cases the agent's speed doesn't remove the risk, and an experienced reviewer is cheaper than a traffic drop.

For a cost comparison, our guide to AI migration versus agency migration covers when each makes sense. We migrate sites across Framer, Webflow and Next.js using the same agent workflow; migration work is scoped on the intro call, and we include redirects and SEO checks in any migration we take on.