In-depth review: Make Real

417 words · Editorial

Make Real by tldraw occupies a curious and specific niche in the AI-assisted design landscape. It is not a website builder in the traditional sense, nor is it a code generation tool that outputs production-ready files. Instead, it is a rapid prototyping instrument that shortens the distance between a hand-drawn UI sketch and a functional, interactive web page. The tool lives inside tldraw, an infinite canvas SDK that many designers already use for whiteboarding and wireframing. The workflow is deceptively simple: draw shapes, select them, click the Make Real button, and the AI generates a working website from those drawings. The result is not a static image but a live, clickable interface, complete with basic interactivity. This immediacy is where Make Real shines, particularly for designers who want to test a layout or interaction pattern without writing a single line of code. The iterative loop is its strongest asset. Users can draw on top of the generated website, refine elements, and regenerate, effectively treating the output as a malleable prototype rather than a final artifact. This approach suits workflows where speed and exploration matter more than pixel-perfect fidelity. However, the tool’s utility is tightly coupled to the user’s willingness to manage API keys. Make Real requires users to bring their own API keys from OpenAI, Anthropic, or Google, which means setting up billing accounts and understanding that costs are separate from any tldraw subscription. This adds friction but also grants control over model choice and output style. For UI/UX designers, Make Real fits into the early stages of the design process, where turning wireframes into clickable prototypes can accelerate user testing and stakeholder feedback. Web developers may find it useful as a starting point for code generation, but they should expect to refine the output manually, as the generated code is often basic and may not follow best practices. Prototypers and creative coders will appreciate the speed of iteration: draw, generate, adjust, regenerate. The tool’s limitations are equally important. The quality of the conversion depends heavily on the clarity and detail of the drawing. Vague shapes or sloppy lines produce unpredictable results. Additionally, Make Real is not a full-fledged web development tool; complex interactions, responsive layouts, and backend logic are beyond its scope. Practical buyers should view it as a complement to existing design tools, not a replacement. For those comfortable with the API key setup and the experimental nature of AI-generated code, Make Real offers a compelling way to bridge the gap between sketch and screen.

Who it's built for

UI/UX designers
Why it fits
Designers can sketch wireframes or UI components and instantly get a functional website, bridging the gap between visual design and interactive prototype without writing code.
Best value
Rapidly testing interaction flows and layout ideas with stakeholders using clickable prototypes generated from simple drawings.
Caution
Output fidelity depends on drawing clarity and chosen AI model; complex designs may require multiple iterations.
Web developers
Why it fits
Developers can use Make Real to generate a starting codebase from rough sketches, saving time on boilerplate and focusing on refining logic and styling.
Best value
Accelerating initial scaffolding for simple pages or components, then manually optimizing the generated code.
Caution
Generated code may not follow best practices or be production-ready; manual review and refactoring are necessary.
Prototypers
Why it fits
The iterative draw-generate-redraw loop enables fast experimentation with different UI variations directly on the live output.
Best value
Quickly exploring multiple design directions by drawing on top of the generated website and regenerating.
Caution
Layering too many changes can clutter the canvas; requires disciplined organization of drawings.
Creative coders
Why it fits
Offers a playful way to explore how AI interprets abstract shapes and arrangements into structured web code, inspiring new approaches to generative design.
Best value
Experimenting with unconventional drawings to see how different AI models translate visual ideas into functional elements.
Caution
Results can be unpredictable; not suitable for precise or production-oriented work.

Key features

UI Drawing to Website Conversion
Select shapes drawn on the tldraw canvas and click 'Make Real' to generate a functional website from those shapes.
Benefit
Transforms visual ideas into working web pages instantly, enabling rapid prototyping without coding.
Limitation
Conversion quality heavily depends on drawing clarity and the AI model used; ambiguous shapes may produce unexpected results.
Multi-Provider AI Integration
Supports OpenAI, Anthropic, and Google AI models. Users bring their own API keys to choose which provider powers the conversion.
Benefit
Flexibility to select the model that best fits your needs in terms of cost, output style, or performance.
Limitation
Requires separate API keys and billing with each provider, adding setup friction and potential costs.
Iterative Design Process
After generating a website, users can draw additional shapes on top of the live output and regenerate to refine or expand the design.
Benefit
Enables incremental improvements and rapid experimentation directly on the working prototype.
Limitation
Complex layering can become messy; careful organization of drawings is needed to avoid confusion.
API Key Management
Users must obtain API keys from AI providers and enter them into Make Real to enable generation.
Benefit
Gives users control over which AI model is used and direct management of usage costs.
Limitation
Adds an extra step before use; users need to understand how to create and manage API keys on provider platforms.
tldraw Integration
Make Real is built into tldraw, an infinite canvas SDK for React, providing a familiar drawing environment for UI sketches.
Benefit
Leverages tldraw's intuitive drawing tools and infinite canvas for flexible design exploration.
Limitation
The tool is limited to what tldraw's canvas offers; advanced vector editing or design features are not available.

Real-world use cases

Rapid Prototyping of Web Interfaces
UI/UX designers
1. Scenario
  A designer sketches a landing page layout with header, hero image, call-to-action button, and footer on the tldraw canvas.
2. Solution
  Select the shapes and click 'Make Real' to generate a functional website. The designer can then click through links and test the layout.
3. Outcome
  Instantly validates layout and interaction flow without writing any code, speeding up the feedback loop with stakeholders.
Generating Website Code from Sketches
Web developers
1. Scenario
  A developer draws a simple form with input fields and a submit button, then generates the website to get the underlying HTML/CSS/JS.
2. Solution
  The developer inspects the generated code, copies relevant parts, and integrates them into a larger project, modifying as needed.
3. Outcome
  Saves time on writing boilerplate code for common UI patterns, allowing focus on custom functionality.
Creating Interactive UI Elements from Drawings
Prototypers
1. Scenario
  A prototyper draws a navigation bar with dropdown menus and a search bar, then generates the website to see it in action.
2. Solution
  After generation, the prototyper draws additional elements on top, like a hover state or a modal, and regenerates to refine interactivity.
3. Outcome
  Quickly iterates on component behavior and visual feedback, creating a more polished prototype.
Teaching AI Design Concepts
Educators
1. Scenario
  An educator demonstrates how AI interprets visual design by drawing simple shapes and comparing outputs from different AI models.
2. Solution
  Students draw the same sketch but use different API keys (OpenAI vs. Anthropic) to see variations in generated code and design quality.
3. Outcome
  Illustrates the capabilities and limitations of AI in design, fostering critical thinking about human-AI collaboration.

Pros & cons

Pros

Quickly generates functional websites from simple drawings
Supports multiple AI providers for flexibility
Enables iterative design and refinement
Easy to use within the tldraw environment

Cons

Requires API keys and associated costs
Output quality depends on AI model capabilities
May require troubleshooting for API key issues
Relies on external AI services for functionality

Frequently asked questions

How do I get an API key for Make Real?Workflow

You need to create an account with an AI provider like OpenAI, Anthropic, or Google, add billing information, and generate an API key from the provider's developer console. Then enter that key into Make Real's settings.

Why isn't my ChatGPT subscription working with Make Real?Limitations

Your ChatGPT subscription is separate from API access. Make Real requires an API key from the OpenAI developer platform, which has its own billing. A ChatGPT subscription does not grant API usage.

What AI models does Make Real support?General

Make Real supports models from OpenAI, Anthropic, and Google. You can choose which provider's API key to use, but the specific model versions may vary over time.

Can I use Make Real without coding knowledge?Fit

Yes, you can draw UI sketches and generate a functional website without writing code. However, understanding basic web concepts helps in interpreting and refining the output.

Is Make Real free to use?Pricing

Make Real itself is free to use within tldraw, but you must provide your own API keys from AI providers, which may incur costs based on usage. There is no separate subscription for Make Real.

How accurate is the conversion from drawing to website?Limitations

Accuracy depends on drawing clarity, complexity, and the AI model used. Simple, well-defined shapes convert more reliably. Complex or ambiguous drawings may produce unexpected results, requiring iteration.

Browse all