2 apps Figma
Draw a UI screenshot thumbnail

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
Quant-UX screenshot thumbnail

Quant-UX

Most design tools stop at prototyping; Quant-UX also measures how real users actually perform with the prototype. The visual editor creates prototypes that behave like real apps - functional input widgets, animations, form validation, data binding across screens, and business logic modeled with REST requests and decision elements. Design systems are first-class, with components, design tokens, and master screens; if you design elsewhere, drop in image files or import from Figma. Testing is a shared link or QR code - no installs on the tester's side. Define user tasks up front, and Quant-UX records every session: click heatmaps show where users found (or missed) actionable elements, user journey graphs expose lost users, drop-off charts reveal where tasks stall, and success rates and task KPIs are extracted automatically into a dashboard. An A/B test operator wires two design variants into one prototype and compares task duration, success rate, and interaction counts. In-prototype surveys collect qualitative feedback alongside the numbers, and an AI assistant generates prototype fragments like styled forms on request. The RepoCloud deployment runs the full stack - frontend, backend, and WebSocket server containers over MongoDB - so all test recordings and research data stay on your infrastructure.

Deploy