← all repositories
SawyerHood/draw-a-ui

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.

13.6k stars TypeScript App BuildersCoding Assistants
draw-a-ui
Velocity · 7d
+14
★ / day
Trend
steady
star history

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.

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.