The category of "sketch to code" tools has existed for years and most of them have been disappointments — either the sketch interpretation was too literal (every box becomes a div with a border) or too liberal (your rough layout becomes something you don't recognize). This tool works because it understands the difference between what you drew and what you meant.
The workflow is simple: photograph a whiteboard sketch, rough paper wireframe, or even a Post-it with boxes on it. Upload it. The tool returns clean, semantic HTML with working layout and sensible defaults for typography and spacing. You get a base to work from, not a finished product — but it's a good base.
What it gets right that others don't
The key insight the developers seem to have applied is that wireframe sketches are intentionally abstract. A rectangle with an X through it means "image placeholder." Two horizontal lines mean "text." A rectangle with rounded corners probably means "button." Most previous tools interpreted these too literally. This one interprets them correctly.
The output code is also notably clean. It uses semantic HTML — actual nav, main, article, section elements — rather than a wall of divs. The CSS is organized by component and uses custom properties for spacing. You can hand the output to a developer and they'll be able to read it.
Limitations worth knowing
It's not particularly good at understanding implied hierarchy from rough sketches. If your boxes don't clearly nest, the output will flatten them. It also doesn't infer interaction — nothing becomes a dropdown or a modal without explicit annotation. If you want interactivity, you need to describe it in text alongside the sketch, which the tool accepts as a second input.
The free tier limits you to five sketches per week. The paid tier is priced for professional use, which is either reasonable or annoying depending on how often you need it.