Stars
Forks
Watchers
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.
Benefits
- From Idea to Prototype in Seconds
- The fastest possible path from a whiteboard sketch to something clickable - no design tool learning curve and no frontend boilerplate.
- Iterate on the Canvas
- Annotate the generated result and regenerate: the model sees your previous HTML plus the new marks, so refinement is a loop rather than a restart.
- Private Instance, Protected API Key
- The public demo has no authentication - anyone could burn your OpenAI credits. A self-hosted deployment keeps the key and usage under your control.
- A Shared Language for Teams
- Product managers and designers sketch, engineers get real Tailwind HTML as a starting point - the artifact is code, not a picture of code.
Features
- Sketch-to-HTML Generation
- Selected canvas drawings are converted to PNG and sent to an OpenAI vision model, which returns a single self-contained HTML file with Tailwind styling.
- Live Iframe Preview
- Generated prototypes render as interactive iframes directly on the tldraw canvas beside the source sketch.
- Iterative Refinement
- Include a previous result in the selection and the model updates it based on your new annotations instead of starting over.
- Full tldraw Canvas
- A complete whiteboard toolkit - shapes, freehand drawing, text, arrows - for expressing layouts at any fidelity.
- Bring Your Own API Key
- Runs against your OpenAI account, so usage and cost stay visible and controlled.
- Simple Next.js Deployment
- A single Next.js application with one environment variable - trivially hosted and easy to hack on, with the system prompt exposed in source.