Scribble a wireframe, get a webpage: the laziest frontend workflow yet
A weekend hack that turns tldraw sketches into Tailwind HTML via GPT-4 Vision—no coding required until the AI hallucinates a button.

What it does
You draw boxes and squiggles in tldraw. The app grabs the canvas as SVG, converts it to PNG, and ships that image to GPT-4 Vision with a prompt asking for a single HTML file styled with Tailwind. The result renders in your browser. That’s the whole pipeline.
The interesting bit
The cleverness is in the deliberate crudeness: no complex AST parsing, no design-to-code framework, just “here’s a picture, figure it out.” It treats the vision model as a human frontend dev who can eyeball a napkin sketch. The README is admirably blunt that this is a demo, not a product.
Key highlights
- Built on tldraw’s infinite canvas and Next.js 14
- Requires Node >18.17 and a GPT-4 Vision-enabled OpenAI key
- Output is a single self-contained HTML file with Tailwind CSS
- No authentication layer; the README warns you’ll “go broke if you deploy it”
- Spiritual successor lives at Terragon Labs if you want the grown-up version
Caveats
- Explicitly “not intended for production use”
- No auth means anyone with access burns your API credits
- Output quality depends entirely on GPT-4 Vision interpreting your sketch; no guarantees on structure or accessibility
Verdict
Grab it if you want to prototype fast or demo the “draw it and ship it” fantasy to your team. Skip it if you need reliable, maintainable components—this is a party trick with a warning label, not a design system.