Send a design to Framer and back

How do I get a Brilliant design into Framer, or a Framer page onto my canvas? Connect Claude Code to both apps. One session reads a design in one and rebuilds it in the other, in either direction.

Brilliant and Framer side by side, with the Claude Code prompt that moves a Pricing canvas between them — One session reads a design in one app and rebuilds it in the other.

How do I connect the two?

Once, in three steps. You need Claude Code, Brilliant open, and a Framer project you can edit.

Connect Brilliant.

Turn on the Claude Code row in Settings, MCP Connections, or open the built-in chat once. See Connect Claude Code.

Connect Framer.

Framer runs an MCP server at https://mcp.framer.com/mcp, free during its preview. Add it to Claude Code and grant it your project.

Name what you want moved.

Name the canvas, page or component in your prompt. A precise name gets the agent to the right design first try.

Terminal

claude mcp add --transport http framer https://mcp.framer.com/mcp

How do I send a design to Framer?

Select the design, or know its canvas name, and paste a prompt like this. The agent reads through Brilliant’s read tool, exports HTML or SVG when it needs exact values, and builds the page in Framer. You review the change on the Framer canvas before you publish.

Read the Pricing canvas in Brilliant and rebuild it as a new page in my Framer project. Keep the layout, spacing, colors, fonts, and images.

How do I bring a Framer page into Brilliant?

Ask for it. The elements arrive as native frames, text and shapes you can edit by hand.

Read the Home page in my Framer project and recreate the hero section on a new canvas in Brilliant called Framer Home. Keep the text, colors, spacing, and images.

Claude Code rebuilding a Framer Home page hero as a new canvas in Brilliant — One prompt, and the Framer page lands as native elements.

What carries over?

Layout, text and typography, colors and fills, images, spacing and sizing carry in both directions. A Framer component with logic or CMS bindings arrives as its rendered shape. Each transfer is a rebuild, so run it again after the source changes.

Common questions

Does Brilliant need to stay open?

Yes. If it closes, the Brilliant tools stop answering until you relaunch.

How should I handle a large page?

A section at a time: a hero, then a features grid, then the footer. The agent holds less, and you get more chances to steer.

Where next?

Set up the Brilliant side: Connect Claude Code.
Hand a design to your codebase: Ship to code.
How the two tools differ: Brilliant vs Framer.
All the agents you can connect: Connect your agent.
See every format: Import and export.

Framer details come from framer.com/pricing, checked November 6, 2026.