sawyerhood/draw-a-ui

★ 13,596TypeScriptAudience · vibe coderComplexity · 2/5Setup · moderate

Mindmap

mindmap
  root((draw-a-ui))
    What It Does
      Sketch to HTML
      No manual coding
      Browser prototype
    Tech Used
      GPT-4 Vision
      Next.js
      tldraw canvas
      Tailwind CSS
    How It Works
      Draw on canvas
      Export as PNG
      Send to GPT-4
      Receive HTML page
    Limitations
      Demo only
      No auth built in
      Not for production

mindmap root((draw-a-ui)) What It Does Sketch to HTML No manual coding Browser prototype Tech Used GPT-4 Vision Next.js tldraw canvas Tailwind CSS How It Works Draw on canvas Export as PNG Send to GPT-4 Receive HTML page Limitations Demo only No auth built in Not for production

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Sketch a rough website layout and get a working HTML prototype in seconds without writing a single line of code.

USE CASE 2

Use as a learning example to understand how to send canvas images to GPT-4 Vision and process the returned HTML in a Next.js app.

USE CASE 3

Experiment locally with the sketch-to-code concept before building a production version with proper authentication.

Tech stack

TypeScriptNext.jstldrawTailwind CSSOpenAI GPT-4 Vision

Getting it running

Difficulty · moderate Time to first run · 30min

Requires an OpenAI API key with GPT-4 Vision access, deploying publicly without authentication exposes the key to all visitors.

No license information is provided in the explanation.

In plain English

Draw-a-ui is a small demo app that turns hand-drawn wireframes into working HTML pages. You sketch a rough layout on a canvas inside the app, and it sends that sketch to GPT-4 Vision, which returns a single HTML file styled with Tailwind CSS. The goal is to close the gap between a quick drawing and a browser-viewable prototype without any manual coding in between. The app is built with Next.js and TypeScript, and it uses tldraw as the on-screen drawing surface. When you are ready to generate HTML, the app takes a snapshot of the current canvas, converts it to a PNG image, and sends that image to the GPT-4 Vision API with instructions to return one self-contained HTML file. The output comes back as a complete page with Tailwind styles already applied, based on whatever you drew. To run the app yourself you need Node 18.17 or later and an OpenAI API key that has access to GPT-4 Vision. Getting started takes three commands: write your API key to a local environment file, install the project dependencies, and start the development server. Once those steps are done the app is available at localhost:3000 in your browser. The project is a proof-of-concept and the author is explicit that it is not intended for production use. There is no authentication built in, so deploying it publicly would expose your OpenAI API key to anyone who visits the page, which could run up a large bill quickly. For anyone interested in the same idea taken further, the author points to a separate product called Terragon Labs as the intended follow-on to this work.

Copy-paste prompts

Prompt 1

Add a download button to draw-a-ui that saves the GPT-4-generated HTML file to my computer when I click it.

Prompt 2

Walk me through how draw-a-ui converts the tldraw canvas to a PNG and sends it to the GPT-4 Vision API, show me the relevant Next.js API route code.

Prompt 3

Modify draw-a-ui so I can toggle between Tailwind CSS and plain CSS output for the generated HTML page.

Prompt 4

How would I add a simple password gate to draw-a-ui before deploying it publicly so my OpenAI API key is not exposed?

Prompt 5

Change draw-a-ui to let me edit the generated HTML directly in the browser and regenerate from the updated sketch at any time.

Open on GitHub → Explain another repo

← sawyerhood on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.