Google Stitch: Build Apps in 1 Click (FREE)! 🤯

Google just dropped Stitch, a new tool built UI for apps in one click for free. And I'm about to show you exactly how to use it step by step. Built this dashboard for free in one single click. And you'll learn how to turn a single text prompt into a fully functional front-end application without writing any code. And you'll get all of my best prompts for doing this, plus why this could replace expensive front-end developers and save you thousands on custom app development. So basically

inside Stitch which is free you get about 300 generations per month. What you can see here is you can go inside Stitch and this is available at stitchwithgoogle. com. I've got all the notes and resources inside the AI success lab but essentially you can create a web or a mobile front end and then you just plug in the prompt that you want to create. For example, if we scroll down here you got to bear in mind this is just for the UI, right? So, if

we plug this prompt in, we'll say, "Make a catalog of SEO services displayed in bold glass morphic cards. Use high saturation neon and black theme with fat headline fonts and blowing button styles, right? And you can choose between web or mobile. We'll go with mobile for now. And then we can start running with this, right? And you'll see that it will start coding out on the left hand side. It will take a couple of minutes to generate, but basically that's how easy it is. And then you can see it's now generating the preview over here. Now you can go back and forth inside Stitch on the left hand side and then start building out whatever you want. And from here we can just wait for that to load. Now we can actually

generate multiple different apps at the same time as well. So if we go to duplicate on the tab, we can plug in another version. So this time we'll go with the web. So you could create like a front end for your website and that sort of thing. and we'll hit generate designs on that. Right? I've said design a single screen dashboard showing fake traffic, rankings, back links, and massive numbers blah blah. Basically create like an SEO tool. So those are going to take a little while to generate. And we'll start going with a few different ideas here. The main thing here is like you can basically go from idea to an image or wireframe for your UI in like literally one or two prompts. And if you don't like what you have some changes, you can iterate on it. So here's some examples of what you can build, how you can build it, etc. And literally just came out on the 20th of May, which is not long at all. And if we go back to our screenshot here, you can see an example of what the dashboard looks like. So we can actually grab the code for that like you can see or we can click on the design. We can also get the Figma as well. So we can copy the Figma for that too. Or if you wanted, you could just copy the image like this. Right now, if you wanted to

actually build out the app, let me show you how you can do that. So, you could go to something like Firebase Studio, for example. Inside here, you can generate apps for free. So, if we add an image from desktop and we save that image that we just generated from Stitch, we attach. There we go. What's it say? Okay. Generate an SEO analytics app like this. Right. And so we've attached the image from Stitch. And now we can create the rest of the functionality for the app. Right? You could also give some more descriptions on what you want the app to do etc. But basically you can design the front end and then get Firebase to design the actual functionality. So now it's actually coming back with the app blueprint based on the screenshot that we created. So the app blueprint SEO Zen features etc. style guidelines and prototype this app. Now what you can also do so you could go to bold new and use the same sort of process but bear in mind firebase studio is free to use but if we go over to bolt like we can say create an SEO analytics app with the same design attached hit enter this is available at bolt new and you can do the same on love as well so love. dev dev and then attach that image. Now, the good thing about doing this is let's say Firebase stops working for some reason, like you can see right here, or it takes ages to reply, that's okay because you can benchmark it against Bolt. New or lovable as well. They do have like free credits for each day. I think you can build out like maybe one project a day. With Lovable for free, with Bolt new, you can I think you get a limited number of tokens, but it's one task or a few tasks per month. And then with Firebase, you can create out like 20 different workspaces. So just delete the old workspaces you're not using if you run out of credits and that sort of thing. And then you can basically benchmark them between each other and see which one creates the best apps. Now, if we go back to Stitch, let's have a look at some of the other stuff we built. So this was the website. To be honest, I really don't like the design on that. We zoom out a bit here. See how it's just kind of like fuzzy on the quality side. Don't like that at all. But yeah, here's another one. So the prompt for this was design for an internal company tool that collects feedback from employees on a monthly basis. And then you can see the output right here. Now what you can also do is see if you want to go and give feedback or change it and that sort of thing. Then you can go back to the app that you've built and you can say okay create this in white or use my brand colors. and then just give it the brand colors that you want to work with. You can also click on the AI here and then it will just start building that out for you. Now, if we go back to SEO Zen, so this is the project that we built on Firebase. You can see an example of the app built out based on the analytics and the dashboard that we gave it. So, it's gone off started working its magic. You would need to go back and forth. So, you can see here if I click on this and this, it doesn't really work inside bolt. is taken that screenshot and then actually built it out. So we can flick between the tabs and we got the front end based on what Stitch gave us and then also the same as I lovable and then you can just build out each page, right? So you can see this is not clickable. Now create the keywords page also. What you can see here is you can connect this to superbase, right? So if you want people to be able to log in on the back end, then you can connect it to superbase. Pretty simple and easy. You just get an API key. But essentially you can go from idea to stitch with the UI. Then you can plug that into bold new Firebase or lovable. And from there you can just build out the app that you want

to build. Right now if you want to deploy any of this stuff you can go to deploy over here and that actually deploy it to a subdomain. So you see on the left hand side how it's deploying that. Now we've now got the app that we created deployed on that subdomain. Now, obviously, you wouldn't deploy it until you've built out each page. But you can see how that works. So, if we say now, okay, build out the rest of the pages, but you can see the keywords page now for this SAS tool. So, we said right now create the keywords page. It went off and did it. We can see the new feature. And then, if we click between the dashboard and the keyword section here, it's built out the rest of the app based on the example that we gave it from Stitch earlier, right? So, very similar UI. Now, you can also flick between the pages at the top here. And then you can flick between the web version and the mobile version. So, this is a mobile preview and what it looks like. So, you can see this is also responsive, too. You can flick between all the keywords, etc. I actually wish there was something like that for mobile to be honest. But, yeah, works pretty nice. So, now if we come back to Stitch, we've said use my brand colors. It went off and did that. created the plan like you can see. One thing we could also do as well here is we could just get the code. So let's click on the code here. We can take that code like I think you could probably go on to bold new and say use this code generate the rest of the app. I don't know if that will work but we'll try it. The other thing to note with Bolt is like it can often break. The actual output from Bolt this time worked perfectly to be fair. But I've seen instances where it doesn't work at all. But if we go back here, so we said build out the rest of the pages. It went off and coded and you can see each page works perfectly. So the dashboard works nice, the keywords, the competitor section, the reports, and the settings. Pretty crazy. So that was an app built in what, less than 10 minutes. Quick deployment. Really simple and easy to use. We can flick between responsive mode and normal. We can open that up in a separate preview. If we click on connect project, what that's actually going to do is deploy on a subdomain like you can see. And then if we click on code over here, we can download that, right? So we can download that as a zip file or we can integrate it with stripe superbase and GitHub as well. So pretty nice like workflow between Bolt, Loveable and everything else. really simple and easy to build. And for some reason, this doesn't normally work, but actually worked out perfectly. So

thanks very much for watching. If you want to get all of my prompts and the workflow for using Stitch, plus the links, etc., feel free to get that inside the AI success lab. This comes with all of my best trainings on pretty much everything related to AI that's come out recently. And it also has a community of 7,900 members. You can join it for free, link in the comments description. And if you want to get coaching support, if you want to get DMs, if you want to get my secret workflows that I do not share anywhere else, plus all my best training courses and weekly coaching calls, then feel free to get that inside the AI profit boardroom. This is where I'm most active, right? So, if you want to connect with me personally, the AI profit boardroom is the best place and you can get that directly link in the comments description. So, thanks so much for watching. Appreciate it. See you on the next one. Cheers. Bye-bye.