Most AI website builders hand you a mockup.
Looks great in the preview. But it lives on a separate canvas — disconnected from your brand colors, existing components, and the site you actually run. You still have to rebuild it manually.
Framer 3.0 Agents open your live Framer project from the start. And edit it directly.
How is this different from other AI builders?
The biggest difference: where the agent actually works.
Most AI web builders generate new designs on a separate canvas — disconnected from your existing site. The layout looks decent, but your brand colors, fonts, and components are nowhere to be seen. You are always starting over.
Framer Agents work differently. The first thing the agent does is read your existing site. It takes in your page structure, section layout, text styles, color system, and CMS collections — then starts editing based on what is already there.
| Other AI Builders | Framer Agents | |
|---|---|---|
| Working context | Separate generation canvas | Your live Framer project |
| Brand fidelity | Limited (template-based) | Uses existing components & styles |
| Edit scope | Content generation only | Pages, CMS, SEO, responsive — all of it |
| Applying results | Manual copy-paste to live site | Branch merge → instant publish |
| External tools | None | Claude Code, Cursor, Gemini CLI via MCP |
In Framer's own words, Agents focus on "editing, not generating." The goal is not to spin up a shiny new site from scratch — it is to make what you already have better.
What if the AI breaks my site?
Imagine asking the agent to redo the responsive layout across your entire site. Exciting — but if something goes wrong on your live site, that is a real problem.
Framer 3.0 solved this with Branching.
What is Branching?
It is the git branch model, built for designers and content teams. You create a separate copy of your project, run AI edits there, review the result, then merge if you like it. If not, discard. Your live site is completely untouched the whole time.
It is especially useful for teams. A designer can run an AI-driven redesign experiment on a branch while a marketer publishes blog posts on the live site — in parallel, with no conflicts.
Framer calls it "Git branch model built for designers." Use Agents and Branching together and nothing the AI does will ever touch production until you are ready.
Claude Code can edit my Framer site?
Here is the feature that will get developers excited. External Agents — meaning third-party AI tools can directly edit your Framer project.
Via MCP (Model Context Protocol), Claude Code, Cursor, Codex, and Gemini CLI can all connect to your Framer project. Run an SEO audit from your terminal, pull Notion pages into Framer CMS automatically, or convert a CSV file into a CMS collection.
Pricing changed too. Editor seat dropped from $40 to $20. The Scale plan is gone — just Basic and Pro now. AI Credits: 500/day on Free, 3,000/month on Pro.
The Community got a full rebuild. Marketplace, Gallery, Feed, Awards, and Contests are now under one tab, and the pre-publish review process for the marketplace is gone. Creator payouts in 2025: $6.5M — 200% year-over-year growth.
How to get started with Framer Agents
- Open the Agent panel
Click the agent icon in the bottom-right corner of the Framer canvas. Works on new and existing projects alike. - Create a branch before major AI work
Before anything big, hit "New Branch" from the top menu. Your live site stays intact. Narrow, specific prompts get better results than broad ones. - Give the agent an edit request
Plain language works: "Add a new Pricing section using my existing color system," "Fix the responsive layout on the hero," "Build a blog CMS and import these text pages." - Connect External Agents via MCP (optional)
If you use Claude Code or Cursor, go to Project Settings → External Agents tab → copy the MCP URL and paste it into your AI tool settings. - Review the branch, then merge
Check what the agent built on the branch. Happy with it? "Merge to Main" and it goes live. Not happy? Discard and try again.
To get better results from Agents
Clean up your design system first — define color tokens and reusable components. The agent will do much better when it can say "use the existing styles." Narrow prompts beat broad ones: "Fix the broken responsive on the About page" beats "Redesign everything."
Dive deeper
Framer 3.0 Official Blog Full announcement of Framer Agents, Branching, and the new Community framer.com
Framer Agents Official Page Use-case guides: site updates, new builds, and migrations framer.com
Framer 3.0 AI Agents & Branching Guide Deep dive on the "editing, not generating" philosophy and real-world habits lushbinary.com
Framer 3.0: Everything You Need to Know AI Credits pricing, Community overhaul, and External Agents roundup frameplate.co
Framer 3.0 External Agents Coverage Claude Code, Cursor, Codex, Gemini CLI integration details alternativeto.net
Framer on Product Hunt 4.8/5 from 255 reviews — real user feedback producthunt.com
