This project enables users to draw UI mockups and automatically generate HTML with Tailwind CSS using GPT-4 Vision. It's targeted at designers and developers looking for a rapid prototyping tool, offering a novel approach to translating visual wireframes into functional code.

How It Works

The application leverages tldraw for the drawing canvas and integrates with the GPT-4 Vision API. It converts the drawn canvas into a PNG image, which is then sent to GPT-4 Vision with a prompt to generate a single HTML file styled with Tailwind CSS. This method allows for a natural, visual input to code generation.

Quick Start & Requirements

• Install dependencies: npm install
• Run the development server: npm run dev
• Requires an OpenAI API key with GPT-4 Vision access.
• Node.js version greater than 18.17.
• Access the app at http://localhost:3000.
• Official documentation: draw-a-ui.com

Highlighted Details

• Generates HTML with Tailwind CSS from hand-drawn wireframes.
• Utilizes tldraw for an interactive drawing interface.
• Integrates with OpenAI's GPT-4 Vision API for code generation.

Maintenance & Community

The project is actively developed by SawyerHood. A hosted version is planned with a waitlist available at draw-a-ui.com.

Licensing & Compatibility

The core of the project is open source. The specific license is not detailed in the README, but it is presented as available for use.

Limitations & Caveats

This is a demo and not intended for production use due to a lack of authentication, which could lead to significant costs if deployed.