draw-a-ui
Draw a rough wireframe in a canvas and get HTML/Tailwind code generated from it by GPT-4 Vision.
- Stars
- 13.6k
- Forks
- 1.6k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 1.3 years ago
- Type
- App
No commits in over a year — check for forks or alternatives before adopting.
What it is
draw-a-ui is a Next.js web app built on the tldraw drawing canvas. You sketch a wireframe, the app exports the canvas as an image, and sends it to OpenAI's gpt-4-vision API with instructions to return a single HTML file styled with Tailwind. It is a demo that shows how an image of a layout can be turned into working front-end code.
- Sketch a landing page layout on the canvas and generate a first HTML draft
- Turn a rough wireframe into a Tailwind-styled page to iterate on
- Study how the app exports canvas SVG to PNG and sends it to the model
Great for
- Developers exploring how vision models can turn sketches into HTML
- Designers who want a quick rough draft of a page layout as code
- People learning how to connect a canvas drawing tool to an AI API
- Anyone who wants a starting point for a Tailwind-based page
Not ideal for
- Production deployment: the README says it is a demo with no auth, so it could run up API costs for anyone who finds it
- Users without an OpenAI API key with GPT-4 Vision access, since the app cannot work without one
- People needing pixel-accurate or production-ready code, since the output is generated and not reviewed
How to get it
- 1
Clone and build from source
You'll need: Node.js greater than 18.17 · An OpenAI API key with GPT-4 Vision access
Create env file with your OpenAI key
echo "OPENAI_API_KEY=sk-your-key" > .env.localInstall dependencies
npm installStart the dev server
npm run dev - 2
Run it
- Add your OpenAI API key to .env.local as shown in the README
- Run npm install in the project root
- Run npm run dev
- Open http://localhost:3000 in your browser
- Draw a wireframe on the canvas and generate the HTML
- 3
Get the most out of it
- Read the README note on Next.js 14 and the Node version requirement before installing
- Keep the project local or behind your own access controls, since the README warns it has no auth
- Review the generated HTML before using it, since the README describes it as a demo
- Check the linked demo GIF and draw-a-ui.com homepage to see expected behavior
Downloads
Strengths
- Simple idea that is easy to follow from the README
- Built on established tools: Next.js, tldraw and the OpenAI API
- Open source under the MIT license
Trade-offs
- Depends on a paid OpenAI API key with GPT-4 Vision access
- README explicitly says it is a demo, not for production, and has no authentication
- Output quality depends on the model and the sketch; the README does not describe accuracy
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| draw-a-ui (this) | 13.6k | App | beginner | 1.3 years ago | Developers exploring how vision models can turn sketches into HTML |
| screenshot-to-code | 81k | App | intermediate | 10 days ago | Developers who want a first draft of a page from a design image |
| OpenHands | 92.5k | App | intermediate | 4 days ago | Developers who want coding agents running on a server while their laptop is off |
| one-api | 37.3k | App | intermediate | 10 months ago | Developers who want one OpenAI-compatible endpoint for several model providers |
| generative-ai-for-beginners | 123k | Learning resource | beginner | 5 days ago | Developers who know some Python or TypeScript and want a guided introduction to generative AI |
| repomix | 29.1k | CLI | beginner | 5 days ago | Developers who want to ask an AI assistant questions about a whole project |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.