How to use the Framer MCP with Claude to build a template

Framer's new MCP lets Claude work right inside your Framer project. Here's how I connect it, how I use it to build a template live, and where a designer still has to take the wheel.

Short answer: the Framer MCP is Framer’s official connector that lets an AI like Claude open your Framer project and build in it: pages, sections, styles, text and CMS content. You connect it once, sign in with your Framer account, and then you can ask Claude to lay out a template while you steer the design. I built a template live with it in the video above (Moontower, a Central Texas barbecue site), so watch that if you want to see the whole thing happen in real time.

Here’s the written version for anyone who’d rather skim.

What the Framer MCP actually is

MCP stands for Model Context Protocol. It’s an open standard Anthropic introduced so AI tools can plug into other apps in one consistent way, instead of every app inventing its own integration.

Framer’s MCP is a remote server, so there’s nothing to keep running on your computer. Before this, the way to do it was Framer’s External Agents setup, which needed a local bridge open the whole time. Framer still keeps that around for a few things like localization, but for building pages the MCP is the way to go now.

Two things I like about how Framer set it up:

Claude only sees the projects you connect. It can’t wander into your other client sites.
Changes land on a branch. You review what the AI did before it touches your live project. As a designer, that’s the part that lets me actually trust it.

How to connect the Framer MCP to Claude

Open the Framer MCP page and grab the server address for your tool.
Add it to Claude. In Claude Code that’s one line in your terminal:
```
claude mcp add --transport http framer https://mcp.framer.com/mcp
```
In the Claude app you add it as a custom connector instead.
A browser window opens. Sign in to Framer and approve the connection.
Pick the project you want Claude to work in, and start asking.

How I use it to build a template

The MCP doesn’t replace the design part. It speeds up the boring part. This is how I break it up:

I bring the direction. Before I prompt anything, I know the vibe, the layout, the fonts and the colors. “Make me a nice website” gets you something nobody wants to buy. A clear brief gets you a real starting point.
Claude does the heavy lifting. Stacking sections, setting up text and color styles, filling a CMS collection with placeholder content, making breakpoints line up. That’s hours of clicking that it does in minutes.
I take it back for the polish. Spacing, type rhythm, animations and the little details that make a template feel premium. That’s still the job, and it’s what people pay for.

If you’re making templates to sell, that split matters. Buyers on the Framer Marketplace can tell when something was generated and never touched. The AI gets you to 70% fast. Your taste is the other 30%.

Is it worth it?

For me, yes. It’s not magic, and it won’t make you a designer if you aren’t one. But if you already know Framer, the MCP turns Claude into a really fast assistant who works inside your actual project instead of handing you code to paste somewhere.

It’s also part of why I’m still all in on Framer for client sites, even though I rebuilt my own site in Astro.

Grab a template or get a site built

Browse my Framer templates. A bunch of them are free.
Check out the shop for merch and more.
More tutorials like this on my YouTube channel. Subscribe if this helped!
And if you’d rather have someone build your site for you, let’s talk.

— Gabe Amaya, Gabe Creative Dept.