Send a design to Framer and back

Brilliant has no Framer export button, and it does not need one. Connect Claude Code to both apps and a single session reads a design in one and rebuilds it in the other, in either direction.

Prerequisites

Claude Code installed and signed in.
Brilliant open. The MCP server only runs while the app is running.
A Framer project you can edit.

Connect Brilliant

Turn on the Claude Code row in Settings > MCP Connections, or open the built-in AI chat once. The full walkthrough is in Connect Claude Code.

Connect Framer

Framer does not ship an MCP server. Its official door for outside agents is the Framer agent, which installs as a Claude Code skill.

Run the setup once in your terminal:

npx @framer/agent setup

Start a Claude Code session and run the skill:

/framer

Connect your Framer project and grant access to it from your browser.

The Framer app does not need to be open. The agent can read and write the canvas, components, and CMS of the project you granted.

Brilliant to Framer

Select the design in Brilliant (or know its canvas name), then paste a prompt like this into the session:

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.

The agent reads the design through Brilliant's lookup tool, exports it as HTML or SVG with the export tool when it needs exact values, and then builds the page in Framer through the Framer skill. You get a page built in Framer that you can keep editing there.

Framer to Brilliant

Paste a prompt like this:

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.

The agent reads the page through the Framer skill and lands it on a Brilliant canvas with the create_html tool, which takes HTML and CSS. The elements arrive as native Brilliant frames, text, and shapes, so you can edit them by hand straight away.

What carries and what does not

What carries in both directions:

Layout
Text and typography
Colors and fills
Images
Spacing and sizing

What does not:

Logic. A Framer component with logic or CMS bindings arrives in Brilliant as its rendered shape, not its behavior.
A one-click link. Each transfer is a rebuild by the agent, so run it again after the source changes.

Tips

Every change the agent makes in Framer lands on a branch. Review the branch in Framer and merge it when you are happy with the result.
Keep Brilliant open for the whole session. If it closes, the brilliant tools stop answering until you relaunch it.
Work a section at a time for large pages. A hero, then a features grid, then the footer, gives the agent less to hold at once and you more chances to steer.
Name the canvas, page, or component in the prompt. A precise name gets the agent to the right design on the first try.

Set up the Brilliant side: Connect Claude Code.
Hand a design to your codebase instead: Ship it into the codebase.
How the two tools differ: Brilliant vs Framer.