Make Real by tldraw: Turn Sketches into Websites
Make Real turns hand-drawn UI sketches into functional websites using AI, letting designers and developers prototype interfaces directly on tldraw's infinite canvas.
Overview
Make Real is an AI-powered feature built into tldraw's infinite canvas that bridges the gap between rough sketches and working code. Instead of manually coding a UI from scratch, you simply draw boxes, buttons, and layout elements on the canvas, select them, and hit 'Make Real' to watch AI transform your doodles into a functioning website. It's a dream tool for anyone who thinks visually and wants to skip the blank-page problem of starting a new interface.
What sets Make Real apart is its flexibility with AI providers—you can plug in your own API keys from OpenAI, Anthropic, or Google, giving you control over which model powers your generations and how much you spend. The real magic, though, is in the iterative workflow: once a website is generated, you can draw directly on top of it to request changes, add new sections, or refine existing elements, creating a tight feedback loop between sketching and code generation. This makes Make Real less of a one-shot generator and more of a continuous design-to-code collaborator.
Capabilities & Features
- AI website generator
- UI design
- tldraw
- Prototyping
- Code generation
- AI-assisted design
Core Features
- Converts hand-drawn UI sketches into functional website code
- Supports multiple AI providers including OpenAI, Anthropic, and Google
- Allows iterative refinement by drawing on top of generated outputs
- Bring-your-own-API-key model for personalized usage and billing
- Built directly into tldraw's infinite canvas interface
Use Cases
- Rapidly prototyping web interfaces straight from whiteboard sketches
- Converting hand-drawn wireframes into functional demo websites
- Building interactive UI elements without writing code from scratch
- Exploring multiple design directions quickly before committing to development
- Teaching or demonstrating how UI concepts translate into real code
Best For
- UI/UX designers
- Web developers
- Rapid prototypers
- Creative coders
- Product teams validating early concepts
Pros
- •Dramatically speeds up the jump from idea to working prototype
- •Flexibility to choose your preferred AI model provider
- •Iterative workflow supports continuous refinement rather than one-off generation
- •Built on tldraw's intuitive, infinite canvas drawing experience
- •No vendor lock-in since you control your own API keys and costs
Cons
- •Requires users to set up and pay for their own API keys separately
- •No built-in pricing or free credits—costs depend entirely on chosen AI provider's rates
- •Output quality depends heavily on the AI model selected and clarity of the sketch
- •Not a full replacement for custom development on complex, production-grade sites
How to Use
1. Obtain API keys from your preferred AI provider(s)—OpenAI, Anthropic, or Google—by creating developer accounts and adding billing information. 2. Enter these API keys into Make Real's settings within tldraw. 3. Draw your desired UI shapes, buttons, and layout elements on the tldraw canvas. 4. Select the shapes you want converted and click 'Make Real' to generate a working website. 5. Continue drawing on top of the generated site to request refinements or additions, repeating the process to iterate toward your final design.
Frequently Asked Questions
Open in AI Studio
Ask our AI to evaluate if make real by tldraw fits your specific workflow.
Connect & Contact
Pricing
Make Real itself has no direct pricing—users bring their own API keys from OpenAI, Anthropic, or Google and pay those providers directly based on usage.
Pricing data is provided as a summary. Visit the vendor website for full tier details.