Google Stitch – The New AI-Powered UI Design Tool Explained - Design UI Templates For Free

00:03

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

00:31

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

01:03

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

01:34

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

02:06

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

02:35

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

03:04

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

03:36

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.

03:58

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

04:31

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

05:02

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

05:36

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.

05:53

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

06:24

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

06:51

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

07:21

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.

07:50

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

08:22

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

08:50

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

09:22

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

09:50

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

10:17

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

10:51

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.

11:21

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.

11:39

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

12:13

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

12:43

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

13:14

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

13:47

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.

14:06

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.

test demo

Google Stitch – The New AI-Powered UI Design Tool Explained - Design UI Templates For Free

Video Transcript

Related videos

Purple Flower

Tomatoes

Screen Recording 2026-06-05 at 09.39.10

Cucumber

OpenWebinar test 2

Orange Flower

You should add some kind of spot here

This is a temp footer ? if you see this, you haven't yet imported the real one 🤔