Design to code
Design to code is generating working interface code from a visual input or a description of one — a screenshot, a Figma file, or written art direction. Output is typically React components with styling, ready to paste into a project.
Quality depends heavily on the input. A screenshot gives layout and colour but no behaviour, no states, and no responsive intent, so the model infers all three. Written direction can carry what an image cannot: what should happen on hover, what the empty state shows, how the layout reflows at 320 pixels.
The common disappointment is a pixel-accurate desktop layout that collapses on mobile, because nothing in the input said what mobile should look like.
What this means in practice
v0 is the strongest of the tools we cover at this. Whatever the visual input, state the states nobody remembers — hover, focus, loading, empty, error, and small viewport — because those are what separate a screenshot from a component you can ship.
Prompts for the tools this applies to
Related terms
- AI code generation
AI code generation is producing working code from a natural-language description — a function, a component, a module, or an entire application.
- Text to app
Text to app describes tools that generate a working application from a written description — pages, data model, and often auth and deployment — without you writing the scaffolding.