Draw My UI
The "Draw My UI" tool offered by tldraw enables users to create user interface (UI) designs through drawing. Accessed via the tldraw website, the tool allows us...
Last verified:
What is Draw My UI?
Draw My UI (draw-a-ui-umber.vercel.app) is an AI-powered tool that transforms hand-drawn UI sketches and wireframes into functional HTML code instantly. Built on tldraw's infinite canvas SDK and powered by the GPT-4 Vision API, the tool uses generative AI to interpret your drawings and generate production-ready HTML with Tailwind CSS styling. Users draw their UI vision on the canvas, then click
Draw My UI pricing
Pricing model: Free
Draw My UI uses a credit-based system for pricing. Free plan: $0 per month includes 200 credits. Basic plan: $10/month includes 1,550 credits. Standard plan: $30/month includes 5,000 credits. Premium plan: $50/month includes 10,000 credits. Each generation costs 10 credits, except the first generation which costs 30 credits. On paid plans, users can purchase additional credits on-demand as needed.
Draw My UI pros
- Converts hand-drawn sketches to HTML code instantly
- Uses powerful GPT-4 Vision API for accurate image recognition
- Built on open-source tldraw infinite canvas SDK
- Generates Tailwind CSS styling for modern responsive design
- Supports iterative refinement with updated code versions
- No setup required—works directly in browser
- Single HTML file output for easy deployment
- Intuitive drawing interface for sketching wireframes
- Automatic SVG to PNG conversion for API processing
- Works with open source libraries like Tailwind CSS and ShadCN UI
- Fast response time generating code within seconds
- Free to use with credit-based pricing system
- Integrates directly with Vercel's platform
- Accessible to developers of all expertise levels
- Minimizes manual coding requirements
- Supports multiplayer real-time collaboration
- Export images for sharing designs
Draw My UI cons
- Requires OpenAI API key with GPT-4 Vision access
- API costs can accumulate without proper billing limits
- Not intended for production use as standalone solution
- Limited customization options beyond Tailwind classes
- Potential need for additional modification when integrating with other frameworks
- Credit-based system may limit free tier usage
- First generation costs 30 credits (higher than subsequent 10 credits)
- Requires API billing setup with minimum $5 charge
Frequently asked questions about Draw My UI
How does Draw My UI convert sketches to code?
The tool takes your canvas drawing as an SVG, converts it to a PNG image, and sends that PNG to GPT-4 Vision with instructions to return a single HTML file with Tailwind CSS. The AI analyzes the visual elements in your drawing and generates corresponding HTML code.
What do I need to use Draw My UI?
You need an OpenAI API key with access to the GPT-4 Vision API. You can get one from platform.openai.com/api-keys. You'll also need to add at least $5 credit to your OpenAI billing account to access gpt-4-vision-preview.
What type of UI can I create with this tool?
You can create various UI components including wireframes, contact forms, navigation bars, dashboards, buttons, cards, multi-step wizards, and other common web interface elements using HTML and Tailwind CSS.
Is Draw My UI open source?
The core draw-a-ui project is open source and available on GitHub under an MIT license. The creator is working on a hosted version, but the underlying technology remains open source.
What CSS framework does the generated code use?
The generated HTML code uses Tailwind CSS for styling, which provides modern, responsive design patterns that align with contemporary development practices.
How many credits does each generation cost?
The first generation costs 30 credits, while all subsequent generations cost 10 credits each. This credit system is tied to the number of generations you create.
Can I deploy the generated code to my website?
Yes, the tool generates ready-to-upload HTML files that you can deploy to your website. The code outputs a single HTML file with embedded Tailwind CSS that works standalone.
Is this tool suitable for production use?
No, the tool is intended as a demo and not for production use. It doesn't have authentication built in, so you should be careful about API costs if deploying it yourself.
What happens if I run out of credits on my plan?
If you're on a paid plan, you have the option to purchase more credits on-demand as needed. Free tier users will need to wait for the next month's credit allocation or upgrade to a paid plan.