AI Inspiration WorldWhat it is
Draw-a-UI is a demo app by Sawyer Hood (GitHub SawyerHood). Sketch a page wireframe on a tldraw whiteboard, and it turns the canvas into a PNG, sends it to OpenAI's GPT-4 Vision, and asks for a single HTML file styled with Tailwind. What sets it apart is how direct it is: you draw, a page comes back, and the whole flow is easy to follow. The author points to Terragon Labs as the project's successor.
Highlights:
- Drawing happens on a tldraw whiteboard
- the output is one HTML file styled with Tailwind
- it's a small Next.js app that's easy to read and change.
How to use:
- First put your OpenAI API key in .env.local in the project root.
- Then run npm install and npm run dev.
- Finally open http://localhost:3000 and sketch a wireframe.
Who it's for:
Developers curious how "sketch to web page" works, or who want a small base to tinker with.
Before you start:
- You need Node.js 18.17 or later and an OpenAI API key with GPT-4 Vision access.
- Your sketches are sent to OpenAI.
- The author warns it's a demo not meant for production: it has no auth, so if you deploy it publicly, others can use your key and you pay the bill.
- If you use these features, weigh the safety risks yourself.
- AI Inspiration World is not responsible for any consequences.
- The OpenAI API charges by usage.
- MIT license.
Based on the project's public documentation. Not tested by AI Inspiration World.