Download
draw-a-ui is an experimental open source application that converts hand-drawn interface wireframes into working HTML code using artificial intelligence. draw-a-ui combines the tldraw canvas drawing tool with a vision-capable language model to interpret user-created mockups and translate them into a single HTML layout styled with Tailwind CSS. When a user sketches a UI on the canvas, the application captures the current drawing as SVG, converts it into a PNG image, and sends that image to a vision model that generates the corresponding markup. The result is an automated design-to-code workflow where rough interface ideas can quickly become functional web layouts. It is implemented as a modern web application built with Next.js and TypeScript and requires a compatible Node.js runtime to run locally. It is designed primarily as a demonstration of AI-assisted UI generation rather than a production-ready platform.
Features
- Converts hand-drawn wireframes into HTML using a vision AI model
- Uses the tldraw canvas for creating and editing UI sketches
- Generates a single HTML file styled with Tailwind CSS
- Captures canvas drawings as SVG and converts them to PNG for analysis
- Built with Next.js and TypeScript for a modern web application stack
- Designed as a demo showcasing AI-powered design-to-code workflows
Project Samples
