Claude Code Now DESTROYS Web Design with Stitch 2.0

If I wanted to build a beautiful website today, I wouldn't start inside of Cloud Code. Instead, I would start here. The

Code. Instead, I would start here. The

brand new Stitch 2.0 from Google. Now,

Stitch just got a huge update yesterday to the point that Figma stock dropped almost 8% because of it. And that's

because it gives us a free and effective way to show up one of the only weak points of cloud code, front-end design.

Now, Stitch isn't replacing Claude Code.

It's something we're going to use with clawed code. And by doing so, we are

clawed code. And by doing so, we are going to have a workflow that allows us to consistently create high quality websites with AI that don't look like AI slot. And in this video, I'm going to

slot. And in this video, I'm going to show you exactly how it works, how to get the most out of it, and how to integrate it with cloud code. So,

Stitched allows us to create highquality front-end design mockups for our web apps and our mobile apps. And again,

it's completely free. It's powered by Google. We have Gemini 3.1 under the

Google. We have Gemini 3.1 under the hood, which is great at front-end design work. And again, this is kind of a weak

work. And again, this is kind of a weak point of cloud code. Even when we use things like the front-end design tool or the UIUX Pro Max skill, it leaves something to be desired. On top of that,

when it comes to doing front-end design and visual work in general, I think having a canvas like this where I can see everything on one page where I can very quickly take a look at prototypes

and how it looks is a huge value ad.

Right? On top of that, it's really easy to edit here inside of Stitch. I just

hit the edit button. I can deal with individual components. I can edit the

individual components. I can edit the layout at large. I can regenerate the layout completely two, three, four times at once. So, what this allows us to do

at once. So, what this allows us to do is essentially speed up the entire design process. Because if you do this

design process. Because if you do this inside of cloud code, you know, it can be kind of laborious where even if I'm using all the skills, even if I'm throwing it screenshots, right, we're having it generate, spin up the dev

server, switch between tabs, and at the end of the day, you'll still have to do that at the end. But if we can get an 80% 90% solution here inside of Stitch, well, why wouldn't we? Especially if

it's free. And we're able to get that 90% solution because we can export whatever we build here as code, right? I

can come up here. I go to more. I can

view it as code. I can export it. I have

options to send it to the AI studio, Figma, Jules, whatever. Simplest is just to put the code on a clipboard and then head to Cloud Code. Right. So, this is a

great addition to our web design process. So, speaking of Cloud Code, a

process. So, speaking of Cloud Code, a quick plug from our sponsor today, yours truly. I just released the cloud code

truly. I just released the cloud code master class about a week and a half ago and since then I've already updated 20 plus modules at an additional hour of content. So if you're trying to go from

content. So if you're trying to go from zero to AI dev definitely check it out.

It's inside of Chase AI plus. There's a

link to that in the comment. And if

you're just all new to AI, I also have the free Chase AI community link to that in the description. So tons of resources no matter where you are in your journey.

So back to Stitch. You understand the value prop at this point. It helps us with one of the weak points inside of Claude Code and it does it in a free manner. So why wouldn't we? So, how do

manner. So why wouldn't we? So, how do you actually use it, right? What's the

actual workflow here? So, it's pretty straightforward. We're just going to

straightforward. We're just going to head to Stitch, and I'll put a link to that down below. You can just Google Google Stitch. And it's just a chatbot

Google Stitch. And it's just a chatbot interface like the same one you've been using since the beginning of time, aka the end of 2022. We just describe what we're trying to build. Now, it breaks it down by app or web app. So, if you're

doing a website, obviously you'll be doing web. And then we have the options

doing web. And then we have the options of what sort of models we want to use.

So, really, you have the option of three flash and 3.1 Pro. Obviously, if you can use 3.1 Pro, that's what I would stick with. It's a little bit slower, but it's

with. It's a little bit slower, but it's its frontier model versus 3.0 Flash, which is, you know, a few months old at this point. Now, we also have the

this point. Now, we also have the ability to upload files or add a website URL because one of the best things we can do when it comes to web design is give it some inspiration, right? I can

just talk to it in plain language to give it some crappy prompt and hope it figures it out, but why don't we go find a website we actually like? And there's

a bunch of places to help you find inspiration. We have Dribble, that's

inspiration. We have Dribble, that's with three B's. You can go somewhere like godly.ebsite or where I've been

like godly.ebsite or where I've been really going lately, which has some good ones, is Pinterest, right? Pinterest

actually has a great user interface when it comes to searching for landing page design because if you find one you like, like this one that you just saw a couple minutes ago, well, it's very easy to

find some additional ones as well. And

so, what I think you should do is go to one of those three places, search for something that speaks to you, and then take screenshots of it. or if you already have a website in mind, go grab the website URL because what's going to

happen is we're going to take screenshots of what we find. And I'll be using this one today. We're going to go back into Stitch and we're going to put in the screenshot. We're going to say, "Hey, I want you to create a landing

page that looks just like that screenshot.

Let's see what you got." So, I took a screenshot of this one right here. And

alls I said was, "Create a landing page for my AI agency, Chase AI, in the style of the screenshot. I want the exact same hero page setup as seen in the screenshot." Now, it's not going to do a

screenshot." Now, it's not going to do a one for one because what's going to happen is it's going to scene the screenshot and then it's going to use Nano Banana on the back end to essentially create a screenshot that

mimics it as the image as you'll see.

But that's pretty much it. You can add more to the prompt if you want to, but I'm going to show you why even if you have a really bland poor prompt like this one, you actually get a pretty good output. So, let's see what happens. So

output. So, let's see what happens. So

right away you'll see the screenshot here on the canvas and this is like an infinite canvas that goes everywhere forever like kind of like nad. Um we can see here on the bottom left you have an agent log where you can see what

commands you've given it. We can kind of see the thinking going on in the model down here. And the first thing I want to

down here. And the first thing I want to draw your attention to is this. This is

essentially the design system. Now what

is the design system? Well, the design system is essentially the set of rules that Stitched aka Gemini is going to be using when it creates your web page, right? What are the primary colors, the

right? What are the primary colors, the secondary colors, tertiary, neutral?

What are we doing for labels, buttons, search bars, text, all that, right? All

the conventions for how it's going to build your front end are right here in one place. And so if we come over here

one place. And so if we come over here on the right and you see this little button that says design system. If I

click on this and we'll move over here.

We can see our design system which it is named Obsidian Ember. And if I click on this, well, we pretty much see a copy of what's here visually, right? Our seed

color. I can very easily change this. I

can change the font. I can change the corner radius, right? How do you want your uh do you want rounded corners? How

rounded do you want them? But let's take a look at the design. MD file. Now, I'm

going to copy this over so it's a little easier for you to see. So, here's a look at that design system document that I just copied over. What Stitch aka Gemini does is it takes your bad prompt and whatever inspiration you give it and it

turns it into this essentially the guiding document for how it's going to create your front end. And it's very well put together. Like, first of all, it has the overview and the creative northstar. It specifically has language

northstar. It specifically has language about how it breaks away from standard templates aka how do we get away from AI slop aka what cloud code will give you

normally and then it goes into colors color strategy typography right this is really well done and you don't have to ask for this at all it just creates it on its own and so these two pieces the

design file and then the actual themes itself are essentially the bedrock for how it generates your front end let's take a look at what it gave us so is this a for one copy. Not exactly, but

you can kind of see what it was working with, right? So, we kind of have that

with, right? So, we kind of have that same like red bar coming down. We have

the text on top. The sort of the big numbers of 50 plus versus 10x are kind of off to the side. But you can see it also started to do things on its own, right? I didn't give it anything about

right? I didn't give it anything about core capabilities or kind of what I want at the bottom. And it already generated it, right? And this is pretty solid and

it, right? And this is pretty solid and I do like how the colors work. But let's

say right away I was like, nah, I don't actually like this. If I just click on this and then I right click, I can go to regenerate and it'll just redo it again.

Or I can go to varants and you can do variance of layout, color scheme, images, right? You can actually do

images, right? You can actually do different variations of specific parts or you can do custom. Right? If I hit custom, I can give it different creative range. This is also very reminiscent of

range. This is also very reminiscent of sort of majourney honestly. But we'll do explore and we'll see say I want three different options and I want all the aspects to vary. Right? Again, I ask

you, what would this look like if we try to do the same thing inside of Cloud Code? It would take a bit longer. And

Code? It would take a bit longer. And

so, this buys us a ton of room to iterate, iterate, iterate, and really get our creative vision kind of locked on. Now, also, in terms of editing, and

on. Now, also, in terms of editing, and there's actually a whole lot to do in Stitch, so I totally suggest you actually just like play around with this. If I come over here on the right,

this. If I come over here on the right, if I hit this little pencil, I can directed. So, I can click on individual

directed. So, I can click on individual components, kind of like what you saw before. I can also hit up over to the

before. I can also hit up over to the top for preview. I can open it up in a new tab. And so we can very easily

new tab. And so we can very easily scroll sort of full screen and on and on and on. There's a ton we can play around

and on. There's a ton we can play around with here. So here's some more

with here. So here's some more variations it gave us, right? You know,

totally different vibes, which I think is great, right? I think visually you just kind of need to see a bunch of things to like, I actually like that.

Now, what you might be thinking at this point was like, "Hey, Chase, I actually found a sick picture of something inside of Pinterest and it's just not giving me the exact thing." understand what you could also do at this point is if I took

this screenshot and I brought it into something like NanoBanana Pro and I said, "Hey, give me this exact background, take out all the text." I

can then bring that edited image back to Stitch, right? And then say, "Hey, use

Stitch, right? And then say, "Hey, use this as the background image, right? We

we can do a lot here." And also, if you want to edit certain things, so let's say now I wanted to edit this one. If I

just click on these different, you know, different variations, you'll see here on the bottom of the page, it will add them as essentially references. So, you know, it it's pretty easy to let Stitch know

which one you're actually trying to mess with. And the last thing I'll say is

with. And the last thing I'll say is there's also this like live mode. So, if

I click live mode, it's actually now looking at my screen and I can actually have like a conversation with it.

That's incredible. It's so exciting.

What are we thinking of creating today?

>> Yeah. Can we uh add some like motion to the background of this uh landing page?

I'm I'm talking about some like cursor motion. Maybe some like light graphics.

motion. Maybe some like light graphics.

I don't know. Kind of just go crazy with it and let me see what you come up with.

>> Which Chase AI landing page do you want me to modify?

>> Uh the one I'm looking at on it. I'll add a dynamic and energetic

on it. I'll add a dynamic and energetic background with light graphics and subtle cursor effects.

>> All right. So, you know, hey, take from that what you will. I don't know how good that actually is. I don't know what model actually powers their live mode, but just kind of a funny thing they added there. We'll see what it comes up

added there. We'll see what it comes up with. And here's what it came up with

with. And here's what it came up with the motion graphics, right? You can see, might be kind of hard to see on your computer, but it has like these little dots in the background that move away from my mouse as it moves. So, pretty

cool. Now, once you got something you actually like, now we can export it into cloud code. So, all you have to do is

cloud code. So, all you have to do is click on it. And to export it, you're going to go to more. You're going to go to export, and we're going to do code to clipboard. We'll hit copy. Then I hop

clipboard. We'll hit copy. Then I hop inside of Cloud Code, and I just said, create me a landing page for my AI agency. Here's the front-end code.

agency. Here's the front-end code.

Pasted it in there. We're going to let it go to work. So, after about 60 seconds, Claude Code gave us this.

Honestly, looks pretty solid. Again,

this is just purely the front-end design. This isn't connected to anything

design. This isn't connected to anything on the back end, but this is a great base to start from, right? Do I

necessarily love the image of these clouds? No, not really. Am I in love

clouds? No, not really. Am I in love with this? Would I rather have some sort

with this? Would I rather have some sort of like motion thing? Sure. But again,

80% 90% solution. None of the token use was done inside of cloud code. And I got something that looks pretty decent, right? If I was doing this purely with

right? If I was doing this purely with like the front-end design tool, as many of you have, you know, it's not the best. It all looks very sy. And now that

best. It all looks very sy. And now that the foundation is set, I can hop into things like 21st.dev, right? Start playing around with things

right? Start playing around with things like the buttons, get a little more fancy with kind of what's going on. But

like this is a great starting point. So

we really just touched the surface of what you can do inside of Stitched and sorted this workflow of inspiration into Stitch into Cloud Code before creating your final website. We didn't even really touch on deployment, although if

you take a look at any of my other web design videos, you will see me go through that. Very simple. pushing the

through that. Very simple. pushing the

code to GitHub and then into Verscell.

But I just really wanted to focus on this brand new tool because I don't think it's a surprise that like I said Figma's stock dropped like seven or eight%. Because for most of us, we're

eight%. Because for most of us, we're not professional web designers, right?

Jumping into something like Figma is still like a bridge too far. But what

this was able to create again just like the most basics of pro basic of prompt in a screenshot is should impress you.

Again, Claude Code is amazing, anti-gravity is amazing, codeex is amazing, but a lot of these agentic coding agents miss out on front-end design, and this kind of fills that gap.

So, we should all be excited. So, as

always, let me know what you thought in the comments. Make sure to check out

the comments. Make sure to check out Chase AI Plus if you want to get your hands on that cloud code master class and I'll see you