draw-a-ui
Draw a mockup and generate html for it
A demo app that turns a hand-drawn wireframe sketch into a working HTML page styled with Tailwind CSS, using GPT-4 Vision to read your drawing and return a complete web page, no manual coding needed.
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.
Where it fits
- Sketch a rough website layout and get a working HTML prototype in seconds without writing a single line of code.
- 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.
- Experiment locally with the sketch-to-code concept before building a production version with proper authentication.