Draw a UI
Sketch a wireframe, get working code: Draw a UI turns hand-drawn layouts into web interfaces.
It pairs the open-source tldraw canvas with an OpenAI vision model: you sketch a layout -
boxes, labels, buttons, arrows, whatever communicates the idea - select the drawing, and click
Make Real. The app snapshots your selection as a PNG, sends it to the vision API with
instructions to return a single HTML file styled with Tailwind CSS, and renders the result in
an iframe directly on the canvas next to your sketch. The loop is iterative: annotate the
generated prototype or redraw parts of it, select both the sketch and the previous result, and
generate again - the model receives the earlier HTML as context and produces an updated
version. Built by Figma engineer Sawyer Hood as one of the first viral GPT-4 Vision demos and
the basis for tldraw's "Make Real", it is a Next.js app that runs against your own OpenAI API
key. Self-hosting matters here: the upstream demo ships without authentication, so a private
deployment keeps your API key from being drained by strangers. MIT-licensed.
Deploy