David (00:00)
Hey Ilan, I want to show you something really cool. It's called Stitch by Google.

Ilan (00:04)
Sounds great, let's look at it.

David (00:18)
All right. So this is Stitch and it's free. It's free for anybody. do not need a pro tier subscription with Google. And what it does is it lets you create these awesome mockups for websites and apps. I'll give you an example. Here's one where I had just given it a very simple prompt. Hey,

make a website for a modern upscale Chinese fusion restaurant. And look at this, this cool thing that it, that it made. Look at that. It even, it even made the, uh, the background images. It shows you all of that. It shows you all the pages. shows you the, like all the dumplings, the seating. I don't know how that, if that's how it might look. Uh, but like at least the layout of it is going to be awesome, right? It has a booking page. It understands all the things that are, that are needed.

Ilan (00:46)
wow.

David (01:07)
for a restaurant. And I think that this is something that more people ought to know about because, you know, there's a lot of restaurants that I like. And when I go to their site, it's kind of meh. It's like somebody knew somebody who knew like a second cousin who kind of dabbled with HTML, right? Like why not democratize this power of AI for all of the entrepreneurs and small businesses out there? And I think this is a great way to do that.

Ilan (01:25)
Right.

I love that it also gives you your design system on the left hand side there.

David (01:39)
Yeah, it does. And the great thing about this is that you can chat with the agent to change this. So let's say if I wanted to change ⁓ something about this, change the palette, let's say.

I'm going say, me three different options for palettes. It's going to go ahead and research different design patterns, and it's going to generate this for me. Now, this is one of those infinity canvases. So it's going to make all these different iterations of this website.

Ilan (02:06)
Very cool.

David (02:06)
And we can see that it's going ahead and generating all of these ⁓ new and different palettes. So the original one, which by the way, was a pretty good palette selection. know, red and gold tend to be like sort of classic Chinese colors. ⁓ But here we've asked it for brand new palettes here and it's already gone ahead and created this one here. This blue themed one.

Ilan (02:30)
Fantastic can't wait to see what that looks like in the end.

David (02:34)
All right, so here is the website redesigned with a new palette here. So we can see this is the blue palette, although what it ended up creating was a few options here where it was, there's a green option, I guess, like a Imperial Jade option, and then there's a Midnight Silk option. ⁓ And then there's also a Charcoal and Ginger option. Look at that, very different approach to it.

So I think this is great for ideation, right? If you have a website that you want to make and you're like, I don't know what I should go with. This is what some people would pay thousands of dollars for, maybe tens of thousands to ask an agency to do something.

Ilan (03:14)
Absolutely. This is very cool.

David (03:17)
And now if you have a style that you end up liking, you come here and you say, ⁓ instant prototype, and it's going to generate the code that you can then download and then deploy.

Ilan (03:27)
Amazing. Are you able to just grab this as a design file as well if you want to share it?

David (03:33)
Yes,

you can. So there are ways that you can copy to Figma, for example. So this does interact with existing design tools.

Ilan (03:42)
Very, very cool.

Are you able to feed it a template that you already have? So for example, let's say you already have a website and you want it to make an update to that.

David (03:54)
I don't know about updating a website, but what you can do is tell it to mimic the style of an existing website. If there's a pattern in there that you really like.

Ilan (04:02)
Interesting.

David (04:03)
Alright, so like I said, what you can do is copy the theme and style of an existing website. So here's an example of a website that looks really cool. It's very minimalist and modern, right? ⁓ And let's say that we wanted to...

to mimic the style of this website. So what I'm going to do is take screenshots of this and then I'm going to upload it to say, just give me a website in this style.

So I've taken those screenshots and uploaded them to ⁓ Stitch and I've just asked it to make a sports clothing website that mimics this style. Let's go.

Ilan (04:39)
Let's do it.

David (04:40)
So there are the example screenshots, and it's going to craft the components and then go through all this amazing work.

All right. And so here is the website that it made for sportswear. You can see over here that look at all this cool sports gear that we're selling and look at the look and feel of the website, right? Like it has a similar kind of font. It has this kind of very minimalist style to it.

And once again, it came up with this design system. Isn't that cool?

Ilan (05:10)
That's awesome. Thank you very much for showing this to us, David. I can't wait to play around with this more.

David (05:14)
Yeah, everybody ought to be doing this.

Ilan (05:16)
Follow Prompt and Circumstance to get more videos about cool tools that you should be using.