This week, Google has launched their AI powered UI design tool called Stitch, powered UI design tool called Stitch, and it's going to change the way we and it's going to change the way we design and build UI applications. So, design and build UI applications. So, Stitch is currently in beta mode, and Stitch is currently in beta mode, and it's available to everyone for free at it's available to everyone for free at this point. And you can access Stitch by this point. And you can access Stitch by going to the website going to the website stitch.withgoogle.com or you can just stitch.withgoogle.com or you can just directly go to Google and search for directly go to Google and search for Stitch and you'll end up on their Stitch and you'll end up on their homepage. From the homepage, we can see homepage. From the homepage, we can see that it's a website that transforms that it's a website that transforms ideas into UI designs for mobile and web ideas into UI designs for mobile and web applications. And this is with the help applications. And this is with the help of AI. And you can see that you can of AI. And you can see that you can describe your um design that you want to describe your um design that you want to create for mobile or the web uh using create for mobile or the web uh using natural language processing. And you can natural language processing. And you can optionally add an image so that you can optionally add an image so that you can basically tell stitch to in get inspired basically tell stitch to in get inspired by that particular design and create the by that particular design and create the design based on that mockup or the design based on that mockup or the sketch that you're creating. Now before sketch that you're creating. Now before we go on and explore the dashboard and we go on and explore the dashboard and how to create our own designs or look at how to create our own designs or look at some examples as well. Let's just go and some examples as well. Let's just go and know what stitch is and answer a few know what stitch is and answer a few questions over here. Now what is stitch? questions over here. Now what is stitch? Stretch is basically an AI powered tool Stretch is basically an AI powered tool to help application builders generate to help application builders generate highquality user interfaces for mobile highquality user interfaces for mobile and web apps and easily export them to and web apps and easily export them to Figma. I think that is an amazing Figma. I think that is an amazing feature that Stitch is offering or feature that Stitch is offering or directly access the front-end code. It directly access the front-end code. It uses some of the latest AI models from uses some of the latest AI models from Google Deep Mind. So behind the scene Google Deep Mind. So behind the scene they are using Gemini Pro and is Stitch they are using Gemini Pro and is Stitch free of charge? Is that the question free of charge? Is that the question that is coming in your head? And it is. that is coming in your head? And it is. Stretch is available for free of charge Stretch is available for free of charge with certain usage limits from the the with certain usage limits from the the flash mode that is the standard mode flash mode that is the standard mode allows you for 350 generations and the allows you for 350 generations and the experimental mode which is using that experimental mode which is using that image that optional image is 50 image that optional image is 50 generations. Now when your monthly generations. Now when your monthly limits exceed you won't be able to limits exceed you won't be able to design further for that particular month design further for that particular month but after that you know uh you can but after that you know uh you can continue with your designs and I think continue with your designs and I think it's a fair limit that they're offering it's a fair limit that they're offering and stitch is available in 212 countries and stitch is available in 212 countries so I think most likely where you are so I think most likely where you are viewing this video from your country viewing this video from your country will be having stitch and another will be having stitch and another important question that they've answered important question that they've answered is can I use these designs for is can I use these designs for commercial purposes because many of us commercial purposes because many of us are coming over here for the UI designs are coming over here for the UI designs because we don't want to spend that because we don't want to spend that extra time and effort designing these extra time and effort designing these applications and we want AI to help us applications and we want AI to help us design that faster and cleaner and we design that faster and cleaner and we are getting a answer from Google that are getting a answer from Google that says that Google won't claim ownership says that Google won't claim ownership over that content. So basically we are over that content. So basically we are responsible for fully reviewing and responsible for fully reviewing and complying with the terms. So basically complying with the terms. So basically we can use these designs for commercial we can use these designs for commercial purposes as well. Now when you come to purposes as well. Now when you come to the dashboard it's pretty clean. On the the dashboard it's pretty clean. On the left hand side you can see examples and left hand side you can see examples and you'll also see the designs that you've you'll also see the designs that you've made for yourself. And on the right hand made for yourself. And on the right hand side you have the stitch uh design tool side you have the stitch uh design tool and when you enter your prompts it will and when you enter your prompts it will basically process that into designs and basically process that into designs and you'll see those designs as well. On the you'll see those designs as well. On the right and top uh navigation you have two right and top uh navigation you have two modes standard mode which allows you for modes standard mode which allows you for 350 generations and experimental mode. 350 generations and experimental mode. If I click on experimental, you see a If I click on experimental, you see a optional uh image upload or you can also optional uh image upload or you can also attach a sketch or a mockup and or a attach a sketch or a mockup and or a visual inspiration. So you can go online visual inspiration. So you can go online and basically search for any of the and basically search for any of the visually inspiring websites that you visually inspiring websites that you have uh or you like and you can paste a have uh or you like and you can paste a snapshot of that so that Stitch can take snapshot of that so that Stitch can take those ideas and generate those designs those ideas and generate those designs based off those ideas. Now let's quickly based off those ideas. Now let's quickly have a look at a few of the examples have a look at a few of the examples that Stitch has already created for us. that Stitch has already created for us. For example, this is a board game For example, this is a board game planner. And you can see that the prompt planner. And you can see that the prompt given by the user was can you also add given by the user was can you also add or that's not the first prompt, but or that's not the first prompt, but let's go ahead. I'm working on a mobile let's go ahead. I'm working on a mobile app for my board game um friend group. app for my board game um friend group. I'd like the application to have a I'd like the application to have a calendar view with the next event, a calendar view with the next event, a creation page to add a new event, a creation page to add a new event, a browse page to visualize new board browse page to visualize new board games. We could play a history page and games. We could play a history page and other stuff as well. So, Google Stitch other stuff as well. So, Google Stitch has gone back and created this mobile has gone back and created this mobile application view which lets the user application view which lets the user creates the new event. So, it has a few creates the new event. So, it has a few input fields and it has the calendar input fields and it has the calendar view as well and has the new games view as well and has the new games section. So it has all it has filter as section. So it has all it has filter as well. You can search on it and shows well. You can search on it and shows that and also has a navigation at the that and also has a navigation at the bottom of this uh application. So it the bottom of this uh application. So it the design looks to be very clean something design looks to be very clean something that you can take back and you know that you can take back and you know design it or build it yourself uh by design it or build it yourself uh by looking at this or getting inspired from looking at this or getting inspired from this. And you also have the histories this. And you also have the histories board or it's a list basically and the board or it's a list basically and the leaderboard which shows enough leaderboard which shows enough information that the user wants. So this information that the user wants. So this you know conversation was you know back you know conversation was you know back and forth. The user uh Stitch gave the and forth. The user uh Stitch gave the user a few different designs but the user a few different designs but the user went back to update a few things to user went back to update a few things to dark theme or to other themes as well dark theme or to other themes as well and finally this was what was generated and finally this was what was generated and the user was pretty happy with it and the user was pretty happy with it and this was using the standard mode. We and this was using the standard mode. We also have a personal photo library which also have a personal photo library which is like a onepage website. um the photo is like a onepage website. um the photo library app with schematic image library app with schematic image recognition UX is a sidebar library and recognition UX is a sidebar library and a detail view. And for this one, the a detail view. And for this one, the experimental mode was used and the user experimental mode was used and the user also attached an image. So it's also attached an image. So it's basically a sketch or like a fiddle that basically a sketch or like a fiddle that the user did and based off of that the user did and based off of that Google Stitch went ahead and create that Google Stitch went ahead and create that design. I think it's brilliant. You can design. I think it's brilliant. You can see that the user tried their best to u see that the user tried their best to u give enough details to the to stitch to give enough details to the to stitch to have the sidebar over here with the have the sidebar over here with the header, the search and some categories. header, the search and some categories. Um this is the section and this is the Um this is the section and this is the details view and Google basically details view and Google basically created the same thing using the sketch created the same thing using the sketch that the user provided. Um so Stitch did that the user provided. Um so Stitch did an amazing job in this place. I think an amazing job in this place. I think the details section looks amazing and the details section looks amazing and clean um and has all the details that clean um and has all the details that the user wanted. All right, so now it's the user wanted. All right, so now it's time to go ahead and create our own time to go ahead and create our own design now. And we'll use the standard design now. And we'll use the standard mode in this case and then we'll go mode in this case and then we'll go ahead and use the experimental mode. In ahead and use the experimental mode. In this one, I'm asking Stitch to create an this one, I'm asking Stitch to create an e-commerce website for me that sells e-commerce website for me that sells indoor plants. Homepage should have a indoor plants. Homepage should have a hero section, popular products, hero section, popular products, categories, and a footer. I also want categories, and a footer. I also want categories page, the product details categories page, the product details page, the cart, checkout, success in page, the cart, checkout, success in error pages. Basically, it has all the error pages. Basically, it has all the pages that an e-commerce application pages that an e-commerce application has. And you know, let's see how stitch has. And you know, let's see how stitch does using the standard mode. And I'm does using the standard mode. And I'm wanting it for web. So, I'm clicking wanting it for web. So, I'm clicking web. So, it took about a minute or two web. So, it took about a minute or two uh for Stitch to create those designs uh for Stitch to create those designs for me. And it's come up with six pages. for me. And it's come up with six pages. Let's look at the first page over here. Let's look at the first page over here. So, it gave us the homepage with the top So, it gave us the homepage with the top navigation. It's this is the name of the navigation. It's this is the name of the website. Uh a few categories or website. Uh a few categories or different pages you can go to the different pages you can go to the website. So like a shop page, plant website. So like a shop page, plant care, about us and a contact page. It care, about us and a contact page. It also has the search feature. So like you also has the search feature. So like you can search by the plant name, a wish can search by the plant name, a wish list button and a cart button. And this list button and a cart button. And this shows that the user is currently logged shows that the user is currently logged in. Pretty brilliant. Now on the hero in. Pretty brilliant. Now on the hero section, it shows the name of uh the section, it shows the name of uh the page or the website or uh you know the page or the website or uh you know the what we sell um and a nice little image. what we sell um and a nice little image. We also have the popular pick which is We also have the popular pick which is the popular products page that I asked the popular products page that I asked uh Stitch to give me which it has done uh Stitch to give me which it has done that and it has shop by categories as that and it has shop by categories as well. So that's amazing. And it also has well. So that's amazing. And it also has a call to action to subscribe to the um a call to action to subscribe to the um to the page and by the way if you like to the page and by the way if you like this video you should subscribe to the this video you should subscribe to the channel as well. Now, also a footer. channel as well. Now, also a footer. Now, that's that's good. I like the Now, that's that's good. I like the theme as well. It's nice, clean, and you theme as well. It's nice, clean, and you know, the greens go with the plant as know, the greens go with the plant as well. And the next page is the shop all well. And the next page is the shop all plants. Shows all the categories or the plants. Shows all the categories or the plants. Categories will also be kind of plants. Categories will also be kind of the same thing. Um, and this has the same thing. Um, and this has changed. You know, the cart button has changed. You know, the cart button has changed over here, but that's not pretty changed over here, but that's not pretty consistent. The third page is the consistent. The third page is the product details page. We have the image, product details page. We have the image, a pretty big image. We shouldn't have a pretty big image. We shouldn't have that. Um, but then we have the that. Um, but then we have the description of the product. Then we have description of the product. Then we have the size of the product. And then the the size of the product. And then the price add to cart. I think it has enough price add to cart. I think it has enough information. And we get the theme that, information. And we get the theme that, you know, where it's leading to. We also you know, where it's leading to. We also have this um this bar over here. Next, have this um this bar over here. Next, we have the shopping cart page where we we have the shopping cart page where we have the three items that we have added have the three items that we have added to the cart. We have the subtotal, to the cart. We have the subtotal, shipping information, and the total as shipping information, and the total as well. uh and a button from which we can well. uh and a button from which we can check out. Check out has the shipping check out. Check out has the shipping information. I specifically did not information. I specifically did not mention shipping and I wanted to see how mention shipping and I wanted to see how it would come up with the uh checkout it would come up with the uh checkout page but it has done a good job to page but it has done a good job to capture those shipping information capture those shipping information because that's a vital thing and the because that's a vital thing and the shipping mode as well a method and then shipping mode as well a method and then the payment summary that used by credit the payment summary that used by credit card or PayPal and it has also given the card or PayPal and it has also given the uh design for the credit card and uh design for the credit card and complete order button and finally it complete order button and finally it also gave us the success page when the also gave us the success page when the order is complete. You can see the order order is complete. You can see the order number and all the other details. I number and all the other details. I think it skipped on the um error page think it skipped on the um error page that I asked it to do. But that's that I asked it to do. But that's totally fine. I think we we get the gist totally fine. I think we we get the gist of it. So now that it has created us a of it. So now that it has created us a design and um a design template design and um a design template basically for our website, you can go basically for our website, you can go ahead and edit a few things in here. Now ahead and edit a few things in here. Now there's a few options. I'll go one by there's a few options. I'll go one by one. There's an edit theme option. Uh if one. There's an edit theme option. Uh if you click over here, you can have the you click over here, you can have the appearance as the light theme or the appearance as the light theme or the dark theme. Um, I'll stay with the light dark theme. Um, I'll stay with the light theme. And then you can choose the theme. And then you can choose the colors that go on your website. Let's colors that go on your website. Let's say I like the color yellow. And then say I like the color yellow. And then you can also go ahead and change the you can also go ahead and change the corner radius or the border radius corner radius or the border radius basically. And you can play around with basically. And you can play around with these options and also change the font. these options and also change the font. And let's apply the theme and see how it And let's apply the theme and see how it looks like. So you can see that it looks like. So you can see that it applied the changes to our website. We applied the changes to our website. We have more border radius for u all our have more border radius for u all our elements. And these call to action elements. And these call to action buttons have a special yellow color buttons have a special yellow color applied to them. It's still making the applied to them. It's still making the changes at the moment, but we get the changes at the moment, but we get the gist of it. Now, you can also have the gist of it. Now, you can also have the option to edit um the templates from option to edit um the templates from here. So, if you if I click on the edit here. So, if you if I click on the edit button, you can see that it added the button, you can see that it added the context of that template to this um this context of that template to this um this chat window. And now I can basically chat window. And now I can basically tell it to edit or update that tell it to edit or update that particular template. So, let's say I uh particular template. So, let's say I uh please change the top please change the top navigation background navigation background to dark. Now, it's gone ahead and to dark. Now, it's gone ahead and changed the entire homepage background changed the entire homepage background to dark, which we didn't want it to, but to dark, which we didn't want it to, but it's done that. But, you know, it's not it's done that. But, you know, it's not perfect at the moment. I think it needs perfect at the moment. I think it needs changes because I specifically asked it changes because I specifically asked it to change only the top navigation to a to change only the top navigation to a dark theme. But, it's done this. Uh, dark theme. But, it's done this. Uh, another feature that it offers is that another feature that it offers is that you can copy the design and export it you can copy the design and export it directly to uh Figma using just one directly to uh Figma using just one click. So, if I click on this button click. So, if I click on this button that says copy to Figma, you can go that says copy to Figma, you can go ahead and go to your Figma template and ahead and go to your Figma template and just paste it. So, I'll say paste here. just paste it. So, I'll say paste here. And it's basically copied that design And it's basically copied that design template directly inside of Figma. And template directly inside of Figma. And you can go ahead and now edit this you can go ahead and now edit this design uh and fiddle around with your design uh and fiddle around with your design as you would do in Figma. But design as you would do in Figma. But you've got a great start already. So, you've got a great start already. So, let's say I want to change the heading let's say I want to change the heading over here. I'll just expand on this one. over here. I'll just expand on this one. I'll say this or my indoor plant store. I'll say this or my indoor plant store. So you can go ahead and this basically So you can go ahead and this basically generates you a Figma design directly generates you a Figma design directly from stitch. And I think this is from stitch. And I think this is brilliant because you don't have to brilliant because you don't have to start creating those Figma designs from start creating those Figma designs from scratch. You can go ahead describe what scratch. You can go ahead describe what you want from the application or the you want from the application or the website that you're about to build. Go website that you're about to build. Go ahead and use Stitch to create it for ahead and use Stitch to create it for you. And even then you can you know come you. And even then you can you know come back in Figma and then edit your designs back in Figma and then edit your designs um the way you want it to be. So another um the way you want it to be. So another great feature that Stitch offers us is great feature that Stitch offers us is the experimental mode in which you can the experimental mode in which you can click on the experimental mode and then click on the experimental mode and then you can attach your inspiration or the you can attach your inspiration or the visual inspiration. So I'm going to do visual inspiration. So I'm going to do that and from selections I'm have a that and from selections I'm have a orange colored uh let's say visual orange colored uh let's say visual inspiration that I want it to be to take inspiration that I want it to be to take the colors at least um have a clean the colors at least um have a clean template and design a price comparison template and design a price comparison landing page comparing three different landing page comparing three different retailers. So if I click on generate retailers. So if I click on generate designs and this is for the mobile this designs and this is for the mobile this time. So this is what Stitch has come time. So this is what Stitch has come back with. This is the picture that I back with. This is the picture that I gave it. This is an orange colored gave it. This is an orange colored website that I found uh or liked and I website that I found uh or liked and I thought I'll just give Stitch this thought I'll just give Stitch this website uh screenshot. Basically, I website uh screenshot. Basically, I just, you know, snipped it from here and just, you know, snipped it from here and attached it to uh Stitch and it came up attached it to uh Stitch and it came up with this price comparison website with this price comparison website comparing three different retailers from comparing three different retailers from the theme and the colors that I told it the theme and the colors that I told it to. I didn't even write all that stuff to. I didn't even write all that stuff but it went ahead and you know gave me a but it went ahead and you know gave me a orange colored price comparison mobile orange colored price comparison mobile friendly website. So yeah this was a friendly website. So yeah this was a quick little demo with Google Stitch and quick little demo with Google Stitch and I think it's an amazing tool to build I think it's an amazing tool to build and design uh your websites really fast and design uh your websites really fast and you can also give you know like and you can also give you know like low-level mockups to stitch and it can low-level mockups to stitch and it can give you uh UI designs in just a few give you uh UI designs in just a few seconds. Um for personally for you know seconds. Um for personally for you know people like me who hate designing stuff people like me who hate designing stuff from scratch uh Stitch brings a lot on from scratch uh Stitch brings a lot on the table and even if this was a paid the table and even if this was a paid tool I would have been happy to pay for tool I would have been happy to pay for it but it's a free tool for everyone to it but it's a free tool for everyone to use. You should go ahead and check use. You should go ahead and check Stitch out. Uh the links are in the Stitch out. Uh the links are in the description and you know go ahead create description and you know go ahead create a few designs and implement that. a few designs and implement that. Basically build it for your personal Basically build it for your personal projects. You can start using that but projects. You can start using that but even if you are building something for even if you are building something for commercial use you don't have to spend commercial use you don't have to spend hours and hours thinking about a design. hours and hours thinking about a design. You can go ahead use Stitch and it'll You can go ahead use Stitch and it'll give you a design that you can give you a design that you can implement. I hope you like this video. implement. I hope you like this video. If you did, please click the like button If you did, please click the like button and subscribe to the channel.