Claude builds responsive Framer pages through MCP

• Claude built a responsive Framer page, including its breakpoints, in tranmautritam's demonstration.
• Client files and brand rules feed the workflow: 0xCharlota pairs Claude’s file access with Framer Skills while retaining visual approval.
• Website builds can use an existing Claude subscription, a benefit 0xCharlota highlighted in her setup note.

Framer’s remote MCP connection works with the editor closed, including from supported phone clients. For existing Claude- or Codex-built sites, MengTo proposes a one-prompt copy into Framer for polishing and template work. His instruction: “Create a copy of this site in Framer using the MCP.”

Tranmautritam demonstrated Claude generating a page’s layout and responsive breakpoints without manually working in Framer.

The appealing part for client handoff is an editable canvas: Framer’s capability guide says AI changes remain editable in Framer, and agents can reuse a project’s existing styles and components.

Charlota’s workflow combines Claude’s access to client briefs and reference files with design rules she keeps as Skills in Framer. Claude handles source material and copy; she retains visual review and approval.

Her proposed jobs for the pair extend beyond generating a landing page:

1. Last-minute client website updates sent from her phone.
2. Ambitious new website builds.
3. Case studies assembled from files already on her computer.
4. Short design video reels published on her portfolio site.
5. Site translation into two additional languages.

These are her intended workflows, rather than five completed demonstrations. Charlota also ruled out building and maintaining a website builder for clients to update their own sites.

The official setup guide, updated October 22, describes the Claude connection:

1. The user selects Connect to Claude from Framer’s listing in the Claude Directory.
2. A browser tab opens for Framer sign-in and access approval.
3. Claude receives the Framer project link and a description of the requested changes.

Other compatible clients can connect through https://mcp.framer.com/mcp, using remote MCP and OAuth.

Charlota highlighted using tokens from her existing Claude subscription for website builds. Framer’s FAQ specifies that AI usage follows the connected agent’s plan or credits.

By default, changes stay in the project or a branch without affecting the live site. Branch changes can be reviewed and compared with main before publishing.

The agent uses the connected Framer account’s permissions. It can publish live changes when explicitly asked, so human approval is part of Charlota’s workflow rather than a mandatory manual publishing step.

Charlota’s two-language expansion runs into a current tooling gap: Framer’s compatibility guide says localization still requires the older @framer/agent CLI setup, which uses Node.js and a local bridge.

Framer continues supporting both connections while MCP reaches feature parity.