Framer to Claude Code: Turning a Framer Site Into a Shippable Next.js Codebase

Here is the workflow we use at Goodspeed Studio when a client asks to move off Framer, why we reach for Claude Code, and where the tool does not save you. (For the non-AI, hand-crafted version of this migration, see Framer to code.)

What Claude Code is (and isn't)

Claude Code is Anthropic's CLI-based coding agent. It reads your codebase, runs commands, edits files, and iterates against tests, all inside your terminal. It is not a website builder. It does not "convert" a Framer URL into a Next.js app on its own. What it does is compress the boring parts of a migration — component scaffolding, schema modelling, page rebuilds, redirect maps — from days to hours.

You still direct the work. Claude Code does the typing.

The Framer to Next.js migration, with Claude Code doing the lifting

Step 1: Extract the design system from Framer. Open the Framer project. Read off the colour tokens, type ramp, spacing scale, and shared components. Feed those into Claude Code with a prompt like "set up a Tailwind config with these tokens." Fifteen minutes of work becomes two.

Step 2: Scaffold the Next.js app. npx create-next-app with TypeScript, App Router, Tailwind. Hand Claude Code the file tree of your Framer site (a screenshot of the page list works) and ask it to scaffold empty route files that mirror the URL structure. You now have an app skeleton.

Step 3: Rebuild pages one by one. For each page, take the Framer design (a Figma export, a screenshot, or a live URL) and hand it to Claude Code with the design tokens already in context. "Rebuild this page in Next.js, using the existing shared components." It will produce the page. You review, correct, and move on.

Step 4: Model the content in Sanity. If the Framer site had a CMS, describe the schema to Claude Code and ask it to generate the Sanity schema files, the GROQ queries, and the typed hooks. Content model that took a day to hand-write is done in an hour.

Step 5: Migrate the animations. Framer's animation library is Motion (previously Framer Motion) and it works in any React app. Claude Code can port animation code from a Framer Code Component to a Next.js page component with minor prompting.

Step 6: Set up redirects and verify. Ask Claude Code to build a redirect map from the old Framer URLs to the new Next.js routes. Drop it into next.config.js. Verify in Search Console after cutover.

What Claude Code will not do for you

• Design decisions. If your Framer site has visual bugs or the design is not final, Claude Code will faithfully rebuild the mess. It is not a design tool.

• Content migration. Copy from Framer's CMS to Sanity is a separate exercise. Claude Code can write the import script; you still have to run it and check the output.

• QA. Every page needs a human review pass. Claude Code produces plausible-looking code that occasionally hallucinates a Tailwind class or an import path. Trust but verify.

• Ship on its own. You still own the git history, the code review, the deploy, and the DNS cutover.

Why this beats the old workflow

Before Claude Code, a Framer-to-Next.js migration for a 20-page marketing site took a competent developer two to three weeks. With Claude Code driving the mechanical work, we ship the same migration in one week. The difference is not that the tool is smarter than the developer. It is that the developer stops burning time on component scaffolds and schema boilerplate and spends it on the parts that actually need judgement.

When you should use this workflow

Use it when:

• The Framer site is design-final and you are ready to migrate as-is

• You have a target stack (Next.js plus Sanity is what we default to)

• Someone on the team is comfortable reviewing generated code

Do not use it when:

• The site is mid-redesign

• You have no engineering resource to review output

• You want to keep the Framer visual editor. In that case, do not migrate at all.