Ship it into the codebase
Handoff is a document problem pretending to be a design problem. Brilliant skips the document: your coding agent reads the canvas directly over a local MCP server, and if you'd rather move bytes than context, the selection exports as HTML in three flavors, React JSX, SVG, PDF, or raw CSS properties.
Two routes to the same place. Most people use both.
Route one: your agent reads the design
Brilliant runs a local MCP server the whole time the app is open, at http://127.0.0.1:3333/mcp. Claude Code, Cursor, Codex, Copilot, Windsurf, Antigravity, and anything else that speaks MCP connect with one toggle, and MCP usage is unlimited on every plan.
Once connected, the agent can read structure, search across canvases by name, text, type, color, or component, and export any element for itself. So the prompt is the whole handoff:
"Build the settings panel from the Dashboard canvas in our React components. Match the spacing and type."
This is the route that adapts to your stack. The agent already knows your repo's conventions, so it writes your components, your framework, your constraints, rather than generic markup.
It also runs the other way. The same connection lets an agent create and edit designs from your editor, so a component you changed in code can be reflected back on the canvas without anyone opening a design tool by hand.
Route two: export the markup
When you want a concrete artifact, the Export panel in the right toolbar and the right-click Export as and Copy as menus cover it:
| You want | Take |
|---|---|
| Markup to adapt | HTML (snippet, full document, or flex) |
A component to paste into a .tsx | React (JSX), the same markup with JSX style objects |
| Icons and illustrations | SVG, with native filters for drop shadow, outer glow, and layer blur |
| Just the values | CSS properties: size, position, colors, border, radius, rotation, text |
| The design itself | Blueprint, full hierarchy, pasteable back into Brilliant or into an AI tool |
Cmd+E exports a PNG for a ticket or a review thread. Everything else lives in the palette, the panel, or the right-click menu. The + button in the Export panel header adds another config row, so PNG at 1x, PNG at 2x, and an SVG can ship in one click.
For pixel-clean UI shots, reach for PNG rather than WebP: the by-hand UI exports WebP lossy at quality 90, which leaves faint gray banding on rounded corners and color ramps.
Tokens are the shared vocabulary
The reason generated markup is worth anything is that the design was built on named decisions rather than hex codes. Brilliant writes a resolved artifact at Styles/.gen/default.gen.yaml on every save, expanded to concrete values, and that's the file Style Dictionary, Tokens Studio plugins, and build scripts read. Your design tokens and your code tokens can be the same tokens.
Designs live in Git already
.bl files are plain, deterministic Blueprint text, so a design change reviews like a code change: branch it, diff it, comment on it in a pull request, git blame the line where a color drifted. A published project is also a real Git repository you can clone.
What this is not
Brilliant does not compile your app. It generates HTML and React from vector shapes, so that output is a starting point to adapt, not a build artifact, and it won't carry your state, your routing, or your data layer. Brilliant components are design components: they don't run your app code, and you can't drop a live React component onto the canvas. The agent is the piece that bridges design intent to your actual stack, which is exactly why the MCP route beats the export route for anything real.
Next
Every format, both directions: Import and export.
Connect your editor: Use with AI agents.
The language your agent writes: The Blueprint DSL.
Keep design and code on one vocabulary: Design system overview.