Are you ready to step into the future of technology where your sketches come to life? In a world where artificial intelligence (AI) is not just a buzzword but a tangible tool shaping our daily lives, TLDRaw’s Make It Real stands as a testament to the limitless possibilities of AI innovation. Imagine a tool so intuitive that it can transform your simple interface sketches into fully functional websites or software applications. That’s the magic of Make It Real, powered by the groundbreaking AI technology.
Created by visionary developer Steve Ruiz, Make It Real redefines the essence of creativity and collaboration. This open-source, collaborative whiteboard tool doesn’t just offer an infinite canvas for drawing, text, and media – it invites you to a world of endless possibilities, all accessible without the hassle of logging in.
But how does it work? At its core, Make It Real leverages the advanced capabilities of OpenAI’s GPT-4V API. This fusion of technology and creativity has captured the imagination of developers and tech enthusiasts worldwide, offering unprecedented opportunities for digital exploration and innovation.
Make It Real is not just a no-code solution; it’s a sketchbook-style software that empowers you to bring amazing concepts to life with minimal effort. It’s about turning your visions into reality, effortlessly.
In this article, I’ll showcase some examples of what I’ve been able to do with Make It Real, and explain how it all works (as a non-programmer). Read on!
What is TLDRaw Make It Real And What Can It Do?
TLDRaw’s Make It Real can help you to transform your visual mock-ups into functional prototypes, and will boost your creative exploration beyond your imagination.
Make It Real is a web application that allows users to sketch an interface, and then generate a working website from the sketch through using artificial intelligence (AI).
It is a part of TLDRaw, which is an open-source collaborative tool for creating whiteboards and other infinite canvas experiences.
The “Make It Real” feature of tldraw uses OpenAI’s GPT-4V API in order to interpret vector drawings into functioning Tailwind CSS and JavaScript web code, which can replicate user interfaces or create simple implementations of games like Breakout.
This innovative AI tool offers users a basic infinite canvas for drawing, text, and media, without requiring the need for a login. Users can experiment with a live demo of Make It Real via the website, although running it requires the need for an API key from OpenAI, which poses a potential security risk.
What Is The Purpose Of Make It Real?
As you can see, tldraw really is a blank slate, a whiteboard for your ideas to quickly come to life.
Make It Real’s purpose is to enable users to sketch an interface, and then generate a working website from the sketch with the help of AI. This feature, called “Make It Real,” utilizes OpenAI’s GPT-4V API to interpret vector drawings into functioning Tailwind CSS and JavaScript web code, which can replicate user interfaces or create simple implementations of games.
The project aims to simplify the process of creating working prototypes by allowing users to sketch their ideas, which can be non-technical, and then have an AI model generate functional code for it, in order to create a working website from the sketch.
This functionality gives users a new way to create interfaces with working code, making it valuable for UX designers and developers. It also represents a step towards providing a way for users to create interfaces with working code, which can be beneficial for non-technical users as well.
How Does Make It Real Work?
makereal.tldraw.com is a web application that allows users to sketch an interface on an online whiteboard, and then generate a working website from the sketch using AI.
It uses OpenAI’s GPT-4V API to interpret the vector drawings into functioning Tailwind CSS and JavaScript web code. When you visit the live demo website, you’ll se a basic infinite canvas that can be used for drawing, text, and media. And you won’t need to log in.
If you want to run Make It Real, then you will need to get hold of an API key from OpenAI.
Additionally, you must add at least $5 to your account (go to settings -> billing -> add to credit balance) in order to use the Make It Real functionality of TLDRaw. As you use tldraw, you’ll eat through your credits, and will eventually need to add more.
Note that you should not be throwing your API key around incautiously, so be careful. Regardless, TLDraw seems fairly safe, so I went ahead and added my API key. If you choose to do so, be sure to monitor your API usage.
The general creation process involves drawing on the user interface, exporting the drawing as a picture, sending the picture to GPT-4V, which generates the HTML/CSS for a working website, based on the drawing.
Example 1: Simple Progress Bar Timer
Here’s our first example of what it can do: a very simple timer progress bar. I added two boxes, the text “00:00:00”, an arrow, and one line of instructions.
The result?
A fully functional progress timer that cycles back after it completes a minute. TLDRaw blended the two boxes into one, but this is truly remarkable for such simple instructions.
You can export the code for the project you’ve created to replit, which I did. You can see the code and the program here. In this way, you could actually turn this basic project into part of a larger-scale tool.
Example 2: Recipe Scale Converter
For my second example, I again drew a few boxes, and added a few lines of text to show a recipe. I placed a an arrow and some instructions and ended up with this:
I selected my creation and clicked the “Make it Real” button on the top right, and it produced this output:
As you can see, when I entered in 16 servings, it correctly scaled the recipe to the proper quantities.
Very, very cool.
Example 3: A Basic Egg Timer
This one I made on my phone, to test the mobile experience. I drew a circle with an arrow, and gave some basic instructions to tldraw. Here’s the project:
And here’s the output, a working egg timer (but not exactly animated the way I was hoping for):
Does Make It Real Work All The Time?
I had a bunch of false starts trying to make various things like a basic pong game and a basic space invaders clone. It struggled with those, but I didn’t spend a lot of time on those tasks.
It seems that with care and persistence, you can have TLDRraw Make It Real create full basic games and applications for you.
Is Make It Real Free To Use?
Make It Real is free to use, because it’s a part of TLDRaw, which is an open-source collaborative whiteboard tool. But to do much with it, you’ll need to connect it to the OpenAI API, and put $5 onto that API. These funds will be depleted as you use TLDRaw.
Because it’s financed by GitHub sponsors, Make It Real has received $2.7 million in seed funding, so this prototype has legs. You can use the web-based application via the live demo. Although if you want to run the code, you’ll need to get an API key from OpenAI, and add at least $5 to your OpenAI account.
Doing this, however, could be a security risk, because other users could not only intercept your API key, but they can also use it and leave you with a hefty bill of charges from OpenAI.
Always monitor API usage.
What you get for free, though, is a basic infinite canvas for drawing, text, and media, while collaborators can be added to any project.
The Make It Real Button
As mentioned above in our experiments, there’s one unique feature of Make It Real that sets it apart from other collaboration tools — its ability to turn sketches into working websites and apps, simply by clicking a “Make Real” button. The functionality utilizes OpenAI’s GPT-4V API to interpret vector drawings into functioning Tailwind CSS and JavaScript web code, which allow for users to create interfaces with working code.
This feature provides a completely new way to create interfaces with working code, making Make It Real a valuable tool for UX designers and developers. In addition, because of its unique ability to generate functional code from sketches, the tool will be particularly valuable when it comes to interface design and development.
You can even export your code to replit or other IDE platforms to edit the code further, as I mentioned above.
Make It Real: Mobile Vs Desktop?
While Make It Real has been designed to be accessible on most devices through a compatible web browser, some users have reported issues related to using the tool on mobile devices. As shown above, I was able to use it without difficulty on an iphone using the Chrome browser, but others have reported issues. One Redditor mentioned having problems with Make It Real on their Android phone, including difficulty changing brushes and colors when using Chrome and Firefox.
The differences between using Make It Real on a mobile device, on a tablet, or a desktop device aren’t explicit, although obviously there are distinctions in terms of user interaction, screen size, and device capabilities, such as the involvement of touchscreens mobiles.
And because it is a web-based application, there are no specific hardware requirements needed to use it.
In addition, because Make It Real is web-based, its HTML output, styled with Tailwind CSS, supports responsive design, which allows for its layouts to adapt to different screen sizes. So technically, there aren’t any specific differences between using the tool on mobile or desktop devices, except for the screen sizes. This means your user experience and interaction shouldn’t vary based on the device used.
How To Get Started With Make It Real
To get started with your own Make It Real project, all you need to do is follow these simple steps:
1. Visit the GitHub repository at tldraw/make-real-starter and use it as a template to create Make Real style apps like makereal.tldraw.com. You can clone the template and begin your project from there.
2. You can also directly visit Make It Real to try out the Make Real feature, and start sketching on the user interface to generate a working website from your sketch using the AI model.
Both of these resources provide the necessary starting points to explore and utilize the features that Make It Real offers.
With its focus on simplicity, Make It Real has been designed to be as user-friendly as possible, so even people with only a basic knowledge of drawing and web design concepts can quickly adapt to using this AI tool.
It’s compatible with most web browsers, including Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari, to ensure a smooth user experience when working with the AI.
Final Thoughts
TLDRaw’s Make It Real stands out as a remarkable example, because of the way it harnesses the power of OpenAI’s GPT-4V API to transform user sketches into functional proof of concept, basic product sketches, UI workflows, etc.
Make It Real not only caters to software developers and interface designers, but also extends its accessibility to non-technical users, empowering them to engage in creative exploration within the digital realm starting with a no-code solution, and expanding from there..
As AI continues to push boundaries, Make It Real’s adaptability across various web browsers and responsive design ensures a consistent user experience that highlights its potential to revolutionize future interface design and development.
See also:
