Use deframer
Use with AI agents
Claude Code, Codex and other coding agents can run the whole export for you, then edit the project.
Claude Code: install the skill
Run this once. Claude Code then knows deframer in every project:
npx deframer@latest skill --installThen ask Claude Code “turn my Framer site into a Next.js project”, or type /deframer https://yoursite.framer.website. npx deframer@latest skill prints the skill, for other agents that read skill files.
Or paste this prompt
Add your site's address at the end:
Export my Framer site to a Next.js project with deframer. First read https://deframer.dev/llms.txt and follow it.
1. Run `npx deframer@latest login` and wait while I sign in with Google in the browser.
2. Run `npx deframer@latest create <my site URL> ./site` with a 10-minute timeout. If it stops early, run the same command again: it picks the build up.
3. Start it with `cd site && pnpm dev` and tell me the local address.
My Framer site is: The agent runs npx deframer@latest login. Your browser opens; sign in with Google yourself (the agent never sees your password). Then it runs deframer create and starts the project.
For scripts and agents
- A build takes a few minutes. Give the command a 10-minute timeout. If it is stopped early (exit code 130, or the tool's time limit), run the same command again: the build continues on the server and is picked up, not started over.
--jsonprints the result as JSON on stdout and progress as JSON lines on stderr.deframer login --no-browserprints the sign-in link instead of opening it, for a remote machine.- Exit codes: 0 done, 1 the site could not be read or the install failed, 3 refused before any work (not logged in, plan, update needed), 130 stopped with Ctrl+C. See Troubleshooting.
- If the output says
⚠ N parts need attention, the project still works: readDEFRAMER_REPORT.md, tell the user what was left out, and don't retry.deframer synclater picks up our fix. - Short instructions for agents are at deframer.dev/llms.txt.
Change texts
This keeps a text change on every sync. Run it in the project, then sync:
npx deframer@latest text "Old headline" "New headline"It picks the copy of the text the page shows (a text can also be a component's default) and saves it in content.overrides.json.
Then edit with the agent
Every project has an AGENTS.md (and a CLAUDE.md that points to it) describing where pages, texts, images and colours live. Ask for changes by name: “change the Hero headline”, “use #2563eb as the brand colour”.
When the Framer site changes, ask the agent to run this in the project:
npx deframer@latest syncThe agent uses your account and its plan (exporting needs Lifetime). See Plans and billing.