deframer

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 --install

Then 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.
  • --json prints the result as JSON on stdout and progress as JSON lines on stderr.
  • deframer login --no-browser prints 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: read DEFRAMER_REPORT.md, tell the user what was left out, and don't retry. deframer sync later 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 sync

The agent uses your account and its plan (exporting needs Lifetime). See Plans and billing.