Skip to content
Get packs

Guide · Open source

How to use draw-a-ui: sketch a wireframe and get HTML

Updated · written with AI from the project's own documentation and checked against our catalogue data

draw-a-ui is an open-source Next.js app that lets you sketch a wireframe on a tldraw canvas and asks OpenAI's gpt-4-vision API to return a single HTML file styled with Tailwind. This guide covers what you need before you start, how to install and run it locally, how the drawing-to-HTML flow works, and where its limits are. It is a demo, so treat its output as a rough draft.

draw-a-uiSawyerHood/draw-a-ui · ★ 13.6k · MIT

Quick start

  1. 1Check prerequisites. Confirm you have Node.js greater than 18.17 and an OpenAI API key with GPT-4 Vision access.
  2. 2Clone the repository. Download the draw-a-ui source and open a terminal in its root directory.
  3. 3Add your API key. Run echo "OPENAI_API_KEY=sk-your-key" > .env.local with your own key in place of the placeholder.
  4. 4Install dependencies. Run npm install to install the project's packages.
  5. 5Start the dev server. Run npm run dev, then open http://localhost:3000 in your browser.
  6. 6Draw and generate. Sketch a wireframe on the canvas and request HTML generation to get a single Tailwind-styled HTML file.

What you need before you install draw-a-ui

draw-a-ui is installed by cloning the repository and building it locally. You need two things: Node.js greater than 18.17, and an OpenAI API key with access to the GPT-4 Vision API. The app cannot work without that key.

The project uses Next.js 14, which is why the Node.js version matters. The README links to Next.js's upgrading guide if you need to change your Node version.

  • Node.js version greater than 18.17
  • An OpenAI API key with GPT-4 Vision access

Install and run draw-a-ui locally

Run the following commands in the root directory of the project. The first creates a .env.local file that holds your OpenAI key, the second installs dependencies, and the third starts the development server.

When the server is running, open http://localhost:3000 in your browser to see the app.

  • Replace sk-your-key with your own OpenAI API key.
  • Open http://localhost:3000 after the dev server starts.
echo "OPENAI_API_KEY=sk-your-key" > .env.local npm install npm run dev

Draw a wireframe and generate HTML

The drawing canvas is built on tldraw. Sketch a layout such as a header, a row of cards or a form. When you are ready, the app takes the current canvas SVG, converts it to a PNG, and sends that image to gpt-4-vision.

The model is instructed to return a single HTML file styled with Tailwind. The README describes this as the core of the workflow: an image of a layout goes in and front-end code comes out.

  • Draw simple, clearly separated blocks so the layout is easy to read.
  • The output is one HTML file that uses Tailwind classes.

Understand what the output is and is not

The README is clear that this is a demo and not intended for production use. The output is generated by a model and is not reviewed, so expect to adjust spacing, content, and responsiveness by hand.

The project also has no authentication. Anyone who can reach a deployed copy can trigger API calls on your OpenAI account, so keep it running on your own machine unless you add protection yourself.

  • Good for rough layout drafts and learning the sketch-to-code idea.
  • Not suited to pixel-accurate or production-ready code.
  • Not safe to deploy publicly as-is, because it has no auth.

Learn how the app connects a canvas to an AI API

If you want to learn from the project, the useful part is the pipeline. A drawing tool exports an image, that image is sent to a vision model with a fixed instruction, and the text response is returned as HTML.

This makes draw-a-ui a readable example for anyone studying how to link a canvas library like tldraw with the gpt-4-vision API.

  • Canvas: tldraw
  • Export: current canvas SVG converted to PNG
  • Model: gpt-4-vision with instructions to return one HTML file using Tailwind

What people use it for

  • Sketching a landing page layout and getting a first HTML draft to edit
  • Learning how a vision model can read an image of a layout
  • Showing a non-developer teammate how a rough mockup becomes code
  • Building a starting point for a Tailwind-based page

Frequently asked questions

Is draw-a-ui free to use?

draw-a-ui is released under the MIT licence, so you can use and modify the code. Running it still requires an OpenAI API key with GPT-4 Vision access, and API calls are billed by OpenAI.

What do I need to run draw-a-ui?

You need Node.js greater than 18.17 and an OpenAI API key with access to the GPT-4 Vision API. The app cannot generate HTML without the key.

How do I install draw-a-ui?

Clone the repository, create a .env.local file with your OpenAI key, run npm install, then run npm run dev. Open http://localhost:3000 to use it.

Can I deploy draw-a-ui publicly?

The README says it is a demo, not for production, and has no authentication. Anyone who reaches a public deployment could run up your OpenAI costs, so it is safer to run it locally.

Is the generated HTML production-ready?

No. The code is generated by a model and is not reviewed, so it is best used as a rough starting point that you edit yourself.

What are alternatives to draw-a-ui?

Comparable projects include Screenshot-to-code, v0 by Vercel, and tldraw, which is the drawing canvas draw-a-ui is built on. Choose based on whether you want a local demo, a hosted generator, or a drawing tool to build on.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

draw-a-ui suits developers and designers who want to see how a sketch can become Tailwind HTML, or who want a readable example of connecting tldraw to the gpt-4-vision API. It is not a good choice for production sites, for anyone without GPT-4 Vision API access, or for teams needing reviewed, pixel-accurate code.

Install options & downloads