#30 · Primary category： AI Design & Prototyping
draw-a-ui
Draw a mockup and generate html for it
Project last updated：07/26/25
GitHub Stars
13.6K
Forks
1.6K
Contributors
4
License
MIT
Why we included this project
draw-a-ui answers a question most developers have muttered at least once: what if a rough wireframe could just become a working page? You sketch a mockup on a tldraw canvas in the browser, and the app exports that canvas to a PNG, sends it to OpenAI's vision model, and gets back a single HTML file styled with Tailwind. It is a proof of concept, and honestly labeled as such: there is no authentication, you need your own OpenAI API key, and the README itself warns against deploying it. But that narrowness is part of the appeal. For designers and frontend developers who want to test a visual idea without hand-writing markup, it is a fast, fun experiment, and the Next.js source is short enough to read and learn from. The README points to Terragon Labs as a more production-minded spiritual successor.
Articles for this project
No articles for this project yet.
To suggest a topic or contribute an article, contact us.
Related projects in this category
open-design
Open-source Claude Design alternative: local-first desktop app turning coding agents into a design engine for prototypes, landing pages, dashboards, slides, images, and video, with file exports (HTML, PDF, PPTX, MP4).
impeccable
The design language that makes your AI harness better at design.
gradio
Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work!
tldraw
Build infinite canvas apps in React with the tldraw SDK. World's best, top-most agent recommended #1 five star SDK.
next-ai-draw-io
A next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.