Mirage reads the geometry of a wireframe the way a person does. Position, proportion, and what sits beside what. Then it builds the page that geometry implies, and hands you the code.
Nobody needs a legend to read someone else's wireframe. The classifier uses the same signals you already do, in the same order.
A full width box at the top edge is a nav bar. The identical box at the bottom is a footer. Vertical position alone resolves it.
Tall and narrow is a rail. Wide and short is a bar. Square-ish and mid-width is almost always an image.
Three similar boxes sharing a row are a card grid, never three separate blocks. Two are a split. Five short ones are a logo row.
Every edge snaps to the column grid before anything is built, so what you draw roughly becomes something laid out exactly.
When two readings are close, Mirage flags the box instead of guessing quietly. You can override any box in one click, and an overridden box is never re-read.
Nine are detected from geometry alone. The rest are one click away in the inspector when you want something specific.
Themes are pure design tokens. The markup never changes, so switching one does not touch a single line of your structure.
Neutral defaults. A sensible starting point for a product page.
Get startedSerif display, warm paper, zero radius. Built for long reading.
Read onHard borders, offset shadows, tight tracking. Loud on purpose.
GoMonospace everything on near-black. For developer tools.
./runSemantic elements, real class names, no wrapper soup. Copy it, download it, or reload the sketch itself later.
The HTML target ships semantic markup with a token-driven stylesheet. React assumes a component library and passes props. Tailwind emits utilities with mobile-first breakpoints already in place.
Sketch JSON round-trips the whole document, so a wireframe is a file you can commit.
Open the editor, drag one box, and watch it turn into something real before you let go of the mouse.