Learn
Learn Framer Agents
A practical guide to working with AI on the Framer canvas — what agents are, what they can do, and how to get reliable results.
On this page
What Framer Agents are
Framer Agents bring AI directly onto the Framer canvas — the same place you already design, review, and publish. Instead of handing back a chat reply or a code snippet you have to interpret, the agent edits your real project: pages, components, styles, CMS content, SEO settings, even site settings. Every change lands as native Framer work you can inspect, adjust by hand, and ship when ready. The idea is a constant back-and-forth: the agent moves fast on the heavy lifting, you bring taste and the final call.
What they can do
Think of the agent as covering the whole website workflow:
Update existing sites — change copy, structure, and sections across pages at once.
Style and rebrand — colors, fonts, component styles, motion and effects, applied consistently.
Build from scratch — generate a first version of a whole site to refine.
Make things responsive — adapt layouts across breakpoints.
Build components — interactions, animations, and custom logic.
SEO and analytics — improve metadata and structure, and get suggestions grounded in your real visitor numbers.
Manage CMS — create, update, and bulk-edit collection items.
Fix and audit — find and repair accessibility, responsiveness, and consistency problems.
How to write a great prompt
A strong prompt usually has five parts. The Builder on this site assembles them for you, but here’s the framework:
Scope — where: the whole site, a page, a section, a component, a collection.
Action — what: add, restyle, reorder, rewrite, audit, fix.
Specifics — concrete values: hex codes, font names, counts, field names, timings. Specifics beat adjectives every time.
Constraints — guardrails: what to leave untouched, “keep as drafts,” “don’t change the copy.”
Output expectation — “list what you find first,” “explain each change,” “give me three options.”
Vague prompts make the agent guess; precise prompts make it reliable.
Connect external agents
You’re not limited to Framer’s built-in agent. Framer connects natively to Claude Code, Cursor, Codex, and Gemini CLI — no separate MCP server to configure. The connection gives your own AI tool direct access to your canvas, components, and CMS.
Quick setup (Claude Code shown):
In your terminal, run the install command:
npx @framer/agent setup— it installs the skills your agent uses to talk to Framer.Run the
/framerskill and grant access to your project from the browser.Prompt away — it works on your project even without Framer open.
This is also handy during a build sprint: the external agent runs on your own AI subscription, so it’s a clean way to keep going.
Branching and staying safe
Every change an external agent makes happens on a branch, not your live site. You can review what changed, compare versions, undo, and only merge when you’re happy. The agent works on your editor canvas — it doesn’t touch your published site until you publish. It also only has access to the specific projects you connect, not your account settings or billing, and you can revoke access anytime.
FAQ
Does the agent edit my live site?
No — it works on the canvas. Changes go live only when you publish them.
Can it touch my CMS?
Yes — it can create, update, and delete collection items, but you decide what publishes.
What if it makes a mistake?
Because changes happen on a branch, you can review, undo, or discard before merging.
Do I need an MCP server to use Claude or Cursor?
No — the native external-agent connection handles it.