Design to code, on your real codebase.
One place where the canvas and the codebase are the same thing. Bring a Figma file, a screenshot, or a prompt, or design directly on the canvas, and ship the result as a pull request.
Explore
Start from a product screen or a blank frame and explore directions with AI. Every option is rendered with your real components, so nothing has to be rebuilt later.
Design controls
Design on a canvas with the layout and style controls you already know. Resize, align, restyle: every change lands in code as you make it.
Build
Turn any design into a live build with your design system, tokens, and components. Bring a Figma frame or a screenshot, or start from the canvas.
Code
The code follows your conventions and reuses what already exists in the repo. Share the live result for feedback, then open a pull request engineers want to merge.
Design to code: four routes from a design to a pull request
How design to code works from a Figma file, a screenshot, a prompt, or directly on a canvas, and which route fits a product that already exists.
A Figma file read by a coding agent or plugin, a screenshot, a plain prompt, or designing in code on a canvas. The routes differ in how much of your codebase they can see, from nothing to the whole repository.
Figma to code runs through the Figma MCP server and agents such as Claude Code and Cursor, or through converter plugins. Code Connect or a rules file is what maps Figma components to the ones in your repo.
Screenshot to code gives an agent pixels and gets back matching markup. It is a starting point, because the model cannot know which components, tokens or states the picture shows.
Prompt-first tools such as v0, Lovable and Bolt build a fresh project fast. They fit a prototype and not a change to an existing product, because a pull request is a diff against files that already exist.
Designing in code means changing the running product with design controls, so the code is the output of the design work. Onlook, Cursor Design Mode and Modeinspect are built around this route.
The route has to see the existing components, the design tokens, the file conventions and the pull request review that gates every change. Anything that cannot gets rebuilt by an engineer.
Figma Dev Mode and MCP, Builder.io, Anima, Locofy, v0, Lovable, Cursor, Claude Code, Onlook and Modeinspect, compared by what each one does and where it stops.
Pick by the change, not the tool: a new product, a new screen in an existing product, or a fix to something that shipped each has a different best route.
Questions
Also in the loop.
SHIP TODAY