48 tools

Design to Code

Design-to-code and front-end AI that turns screens into working UI.

figma.com icon
Figma MCP Server
Freemium
Exposes design structure/tokens to AI coding agents
github.com icon
Framelink MCP
Open Source
Open descriptive Figma→agent context (JSON)
github.com icon
Cursor Talk To Figma
Open Source
Plugin+local MCP for free/Starter Figma plans
animaapp.com icon
Anima
Freemium
Figma→React/HTML/Vue; Playground AI apps
locofy.ai icon
Locofy
Freemium
Figma→developer-friendly React/Next.js
builder.io icon
Builder.io
Freemium
Visual CMS + Figma→code
v0.dev icon
v0 by Vercel
Freemium
Prompt→React/Tailwind/shadcn components
lovable.dev icon
Lovable
Freemium
Prompt→full-stack apps with hosting
bolt.new icon
Bolt.new
Freemium
Browser WebContainers prompt→full-stack
replit.com icon
Replit Agent
Freemium
Cloud IDE + AI app builder + DB/auth
cursor.com icon
Cursor
Freemium
AI-native IDE for design→production code
claude.ai icon
Claude Code
Usage-based
Terminal agent with Figma MCP / Code to Canvas

Showing 1–12 of 48

of 4

About this shelf

Design-to-code tools promise that a frame becomes a component. Some of them now generate whole app shells from a prompt. This shelf is that range: Figma exporters, AI UI builders, and front-end generators you can review in git. If you would not merge the output, it is a prototype, not a system.

Pick by how much repo you already have. v0-class tools win when Next.js and a design system exist. Full-app generators win when you need a demo on Friday and will rewrite later. Classic exporters still help for handoff, but expect cleanup on states, tokens, and accessibility.

Featured picks match the jobs we see most: drop a block into an existing app, scaffold a greenfield demo, or start from a Figma file. The grid is the rest of the catalog, including smaller utilities that only do one export well.

Read the Lovable vs v0 compare guide if you are stuck between an app scaffold and a component playground. Then come back here for the long tail. Pair with coding agents when a human still has to own the PR.

Questions

Will these replace frontend engineers?: No. They change what the first draft looks like. Someone still has to own states, a11y, and the design system.
What is the difference from no-code builders?: App builders publish a hosted product. This shelf is about generating UI or code you take into a stack.
Should I start from Figma or from a prompt?: Figma if the file is the source of truth. Prompt if you already know the stack and need blocks, not pixels.
Where is the ranked list?: See /best/design-to-code-tools for criteria and picks. This page is the full shelf.

About this shelf

Questions

Will these replace frontend engineers?

No. They change what the first draft looks like. Someone still has to own states, a11y, and the design system.

What is the difference from no-code builders?

App builders publish a hosted product. This shelf is about generating UI or code you take into a stack.

Should I start from Figma or from a prompt?

Figma if the file is the source of truth. Prompt if you already know the stack and need blocks, not pixels.

Where is the ranked list?

See /best/design-to-code-tools for criteria and picks. This page is the full shelf.