Claude Code + Stitch 2.0 Destroys Web design (Figma Killer)

Google Stitch 2.0 just landed. And if

you combine that with clawed code, you unlock a gamechanging way to build beautiful apps and websites, but only [music] if you use the correct strategy.

And in this video, I'm going to show you exactly how to build beautiful apps and websites with Google [music] Stitch and how to supercharge that with Claude so you can have integrations like Stripe

and email authentication even if you've never coded before. so you can get light years ahead of your competitors and avoid all the AI [music] slop websites.

And if you know who I am, my name is Jack Roberts. I built and sold my last

Jack Roberts. I built and sold my last tech [music] startup with over 60,000 customers, and I've sold websites just like this for thousands of dollars.

[music] So, if you haven't already, grab that coffee and let's dive straight in.

Now, in this video, we're going to cover the brand new Stitch 2.0 updates, as well as actually showing you how you can effectively build and deploy anything you're imagining using Claude code. And

to do that, we're going to use a very simple four-step drip framework with the first D standing for design. So, with

design, effectively, the first thing we need to do is head over to stitch.withgoogle.com

stitch.withgoogle.com and create a brand new account. Once

you've done that, we can now build beautiful things that look like this, great designs, um, great color palettes, but what the D in design stands for is essentially what does this website look like? So, what we're going to do is

like? So, what we're going to do is create a brand new project together on the left hand side where we can describe what we'd like to do. So, first thing I'm going to do is click on web, which means it's going to be more 16 by9 than

vertical app. Now, my recommendation is

vertical app. Now, my recommendation is that you actually come down and start with the redesign because we want to create an initial base image with nano banana pro first of all. So, here we can drop in images and URLs to feed that.

There's a couple of great website.

Goddardly website is a wonderful place just full of beautiful, gorgeous designs. We can take a look through here

designs. We can take a look through here and find anything that we think looks really interesting. So, in this video,

really interesting. So, in this video, we're going to build a cyber security VPN type of website with a login dashboard, and we're also going to attach Stripe to it. And the techniques we use, you can apply for essentially anything you'd like. The other one,

which is really great, is Dribble. If

you go to dribble.com, you can see lots of different ideas and designs that we could leverage. And all we're going to

could leverage. And all we're going to look really for is just to capture a couple of screenshots that we think look really great. And so, once you've taken

really great. And so, once you've taken a look around and you've gotten two to three different sample images, I've got a couple here that I'm going to use and leverage. So again, 21st.dev is a

leverage. So again, 21st.dev is a website. We'll come back to later. But

website. We'll come back to later. But

I've got this one here. I think is really cool. I like the design and the

really cool. I like the design and the kind of vibe, specifically the typography. And then I've also grabbed

typography. And then I've also grabbed this one here, which is browser without borders. I love the interactivity. I

borders. I love the interactivity. I

want something that's pulsing and interactive. So we come basically back

interactive. So we come basically back over to Stitch. So we've added them in.

Let's give it a prompt. Hey there, I'd like to create for me a cyber security VPN type of website using the images as inspiration. I'd particularly like the

inspiration. I'd particularly like the typography of the one on the right, but I'd love some beautiful almost interactive design for a big world map that shows this kind of global

protection that looks really great. Now,

one of the reasons why with Stitch and think of Stitch conceptually, by the way, as vibe design, that's the best way to think about it that we really get to see different components. We get to generate it. Now, a lot of people won't

generate it. Now, a lot of people won't tell you this, but the reason why it's great to start with image generation is because it's not limited to the confines, if you like, of HTML or any of the coding languages. It can literally

just design and create for us anything we imagine. And then from that reference

we imagine. And then from that reference image, we can work backwards to basically create whatever we like. And

while Stitch is working on that in the background, let's cover what it can actually do now with these updates. So,

here we go. Design and generation. So,

you can do prompt based UI generation.

You can drop in screenshots of anything you like like I've just done and then turn that into a user interface. We can

also if we wish give it a URL. So if

we're starting with an existing website, we can feed it a a URL which we could do for example in a second tab. So let's

run that one simultaneously. So for

example, I've just searched for gorgeous cyber security website to see what this element of its creativity actually does.

So you can see these are okay. I suppose

nothing crazy, but this one looks quite fine. So if I say this one here, we've

fine. So if I say this one here, we've got data dum. If I just open this one up, grab a URL. Okay, great. So, let's

copy this one here and come back over to Stitch. And again, we'll just give it

Stitch. And again, we'll just give it here as a link. And then we can say something like, "Hey there. I want you to design for me a gorgeous and beautiful cyber security website using the content that exists on this website.

I'd love an interactive component that shows a global dashboard like a world map that flashes up and emphasizes it.

Make it creative, make it look gorgeous.

And then we're going to come down here.

We're going to select web. And instead

of 30 flash, we're going to go for thinking with 3.1 Chrome. And then, of course, we can send that one off and then let it work in the background. And

this can run for us over whilst we're doing our core thing. So, not only can it do that, you can have basically like a canvas. Think of it like Canva like

a canvas. Think of it like Canva like I'm on right now. We can pull in different images and stuff and also very different images. I'll show you in a

different images. I'll show you in a second. Now, one of the cool thing that

second. Now, one of the cool thing that it does is this design system stuff where you can generate and reverse engineer typography and colors. And when

we combine that with Claude, we can basically spin up a million different pages using the exact same brand identity that we're going to do. Then

later in the video, I'll show you how we export this as well pretty much to anything we want to with just one click.

and we can pull up prototypes and do anything that we like in the system. So

let's come back here and let's see what we've generated. So these look amazing.

we've generated. So these look amazing.

So global protection without compromise.

I love what it's done at the top. We can

see this gorgeous interactive graph now.

It looks fantastic. Let's come down start free trial. I think that's fantastic. Trusted by the different

fantastic. Trusted by the different platforms. And you can see the image generation powered by Nano Banana 2 is just something that we wouldn't really get anywhere else. I think this is fantastic. And again, it's actually

fantastic. And again, it's actually drawn in and brought the typography which is fantastic. made the future of private browsing. Cool. So, I think it's

private browsing. Cool. So, I think it's kind of gotten the gist of all of them really, which is wonderful. And so, of all the ones that exist here, I think this one here has the best in terms of design system specifically because of

the typography. So, now we can look at

the typography. So, now we can look at all the ones that we like. So, we can highlight this image. And I quite like the look of this as well. And then if there's anything else we think is cool, I think these are our best ones. And

then the map here, right? So, we've got two different things loading up now.

They're going to be reference images for us. We've got this one. We have this

us. We've got this one. We have this one. And then we also have this one

one. And then we also have this one here. So then we're going to ask it now

here. So then we're going to ask it now instead of redesign and of course we could keep refining it if we wish to.

We're going to ask it to create something. So instead of redesign going

something. So instead of redesign going to come down here to Gemini 3 thinking 3.1 Pro and give it a prompt. Hey there,

I would like you to turn this into a beautiful website for me using the typography of the variant 2 and then the imagery of variant one and the

image.png. I would like a H1. I'd like

image.png. I would like a H1. I'd like

the beautiful graphic with a CTA, the companies we work with, but underneath I would like essentially some testimonials. And then below that, I

testimonials. And then below that, I would like there to be a login/signup form. Awesome. So, we give it a pro. And

form. Awesome. So, we give it a pro. And

now we've got the images. We can

basically just create something cool.

So, this now will go ahead and generate for something decent. And if I bring this over, you can see all the actions it's taking down there in the bottom left. So, it's become a lot more

left. So, it's become a lot more interactive. I think the design

interactive. I think the design ironically stepped up quite a bit. And

as you can see, it's actually now created a design system automatically for us when we've asked that. So, you

can come down, you can have a look, we've got primary, secondary, we've got the fonts. I think these fonts are

the fonts. I think these fonts are absolutely gorgeous. And if we don't

absolutely gorgeous. And if we don't like it, of course, we can change it. We

can edit it. If you look on the right hand side, if you click on I think design system, you can see these different things here. You can change the seed color, you can change the palette, you can change the fontage, that's everything. Remember, fonts is

that's everything. Remember, fonts is one of the easiest way just to elevate the feel and vibe of anything. The other

thing you can do is actually chat with it if you want to. So, if I click on this one here, we'll actually have a full conversation with an AI. And so,

you can just conversate with it instead of just actually typing, which is a really cool feature.

>> Hey, that sounds incredible. Having a

creative riffing partner is a total gamecher. What are we designing today?

gamecher. What are we designing today?

>> Okay, so you get the idea. You can just talk to it instead if you wish to. Some

people get a little bit annoyed by the voices. I think it's great when they

voices. I think it's great when they give a voice with some personality. And

whilst that's finishing up, I want to show you the other thing that it's done for us. Now, so this was given a URL,

for us. Now, so this was given a URL, which I think is really cool. These

three images don't look great, but this one here actually does look decent. So

this is neutralized threats with Sentinel AI, which I think is really cool. This actually is HTML. So if you

cool. This actually is HTML. So if you click on modify, you can actually come over here and edit it. So I can edit and I can actually start to change the text if I wish. As you can see I can edit text. I can say not something like that.

text. I can say not something like that.

It could be XYZ. You get the idea, right? Very very cool. And it's pulled

right? Very very cool. And it's pulled through all the information. So if you give it a URL, if I come onto that website, you can see protection outperform. So as a seed asset, you can

outperform. So as a seed asset, you can give it either a URL or you can give it an image. I think to be honest, this

an image. I think to be honest, this actually is quite good for HTML. It's

kind of hit the core basis of it. All I

said is I want something interactive and you can see tax bark uptime SLA looks pretty decent for a first shot and I think this looks quite nice. It's got a color palette that is quite in line with what we're looking for and again we've got everything here and this is

basically the foundation that we can use to build any other websites like this.

So step one you basically decide do I want to lead by images or do I want to lean in and grab a URL for it. And so

now we've got our initial design. The

second step in our drip framework is where we refine the image and then we actually start to build out the system color scheme that we're going to use for the rest of our design and any future apps that we have. So, as you can see,

we've got a landing page, which is great. I think this is decent. We've got

great. I think this is decent. We've got

some good typography. Come down trusted by experts, some different aspects, and it's built the whole thing. But what I would like to do is incorporate this asset right here, which is this beautiful tab in the middle. So, the way that we're going to do that is literally

select this image, like so. Come over

here and select this one. And then what we're going to do if we can select both of them, you have to hold command to select both of them. It's just give it a bit of a prompt. I'm going to say, "Hey, looks great. What I'd like you to do

looks great. What I'd like you to do underneath the logos is leverage the asset from image.png, which is almost like a tab that has Zurich Switzerland on it and just shows a world map with

some live metrics. Make it look interactive and beautiful. I also want you to use the font that has been suggested in in this part here as well, please." And you can see as long as you

please." And you can see as long as you hit command, you can basically select all the different things that you would like to do that. So, I'm going to say one last thing, which is also I'd like you to decapize the actual H1 um H1

tags, please. And then we have this,

tags, please. And then we have this, which I think is approaching a part that I think is really decent. So, we've got this locked down. I like the purple, which is cool. That's typically

associated with, you know, various different aspects of protection. But I

think what would be cooler actually if is if it was blue. So, why don't we grab this and come back over to our color palette here and then we can actually change what this looks like. So, if we double click into it, we've got the seed cord. So, let's actually just scroll

cord. So, let's actually just scroll this around till we get one we think is really nice. When I did my last

really nice. When I did my last business, we had blue because blue itself is associated with trust and anything to do with data. Typically

speaking, you want to lead in with trust. So, I've just edited that a

trust. So, I've just edited that a little bit. I think that's fine. They

little bit. I think that's fine. They

all seem to be pretty decent. Will come

off this one here and that will of course update the design, which is wonderful. But when you click on this,

wonderful. But when you click on this, you can see we can edit the text if we want to. But what we can do now, now

want to. But what we can do now, now we've highlighted this is just say, "Hey there, what I'd like to do is just update this to my color palette blue, which I've just selected. Please. So,

change blue for purple. And then

actually, if you come here, this button, you can see we've now decided that and you can select it or if you want to let Stitch decide. Guys, I can't even say

Stitch decide. Guys, I can't even say what the hell's going on. That's how

cool this is. Now, this is not perfect.

This is not um you know, never think about design again. But effectively,

what we've done here realistically is brought this era of vibe design to the table, which is so freaking cool that we can do this. We can bring in different websites, image generation. This is

really a step up. And what I always look at when I'm looking at tools is what I call improvement velocity. How much is it improving and at what speed? And the

reality is that Google's investing heavily in Stitch. Let's be honest, the future of design is absolutely heading towards AI. You don't need to know lots

towards AI. You don't need to know lots of complicated individual tools. We can

leverage this in other systems to build something spectacular. One other thing

something spectacular. One other thing I'll point out here as well is you see how these are coming up. This is

suggesting from a design point of view that they will there'll be like an animation where they flow in. So very

cool. And I think that this is generally sleek and we can do some nice little details and touching. Wonderful. So now

we've got this whole section here which I think is fantastic. Now again, what's cool about Stitch is we can build it out. We can add different pages. We can

out. We can add different pages. We can

do anything that we want to. Typically

speaking, what I find helpful is to have your kind of actual pages up the top.

Then I have everything else down here.

And of course, you can duplicate it whenever you want to. But now we've got the blue color. We're going to be ready to head on to the real magic. So now

we've created the design and the design systems. The next step in the process is to bring this over into claude code so we can build a fully functioning app and take the design up an entirely new level. And so to do this, we're going to

level. And so to do this, we're going to be using claude code within anti-gravity which is my preferred IDE. If this all sounds like Spanish, I'll put a link on screen so you can get fully up to speed and follow along with that. So to use cl

code actually now what we can do is click on the claude code here and he will appear and then click on a new session which is ace. If this doesn't exist for you, if you click on extensions, type in claude, you'll find it, and then you can actually go ahead

and use it. Now, there's two ways we can bring in Stitch. One is via an MCP, model context protocol, that lets you essentially create hundreds of these, extract the brand identity, and do a

billion different things. And I'll put a link on screen for show you how you can connect it. So, you can programmatically

connect it. So, you can programmatically create as many as you want to. I'll put

that link on screen for you. But to keep things simple, what we're going to do in this video is actually just download the stuff and bring it over. So the way that we do that effectively is we're going to click on everything we want to export.

So we want to export this, click on command uh and then highlight this as well. So we've highlighted two things

well. So we've highlighted two things and then on export which you can find over here in the top right. You're going

to come down and you can just download these as a zip just really easily and then click on export. What this enables you to do then now you got the stitch zip is put this anywhere you want to.

You want to use it in lovable, you want to use it in AI studio, doesn't make a difference. You can put them anywhere

difference. You can put them anywhere you want to. And now we have the zip. So

let's open up the zip. Double click on this guy. And then we've got everything

this guy. And then we've got everything we want. We've got the designer.md which

we want. We've got the designer.md which

is all of our credentials explaining everything which is fantastic. Okay, so

that's absolutely fine. Click on open.

And again, it just starts to appear. And

so what we need to do is open a new folder. So let's open up a new folder

folder. So let's open up a new folder and create a brand new one. Again,

Stitch is okay. So let's just call it Stitch. And that has basically created

Stitch. And that has basically created the folder that we just downloaded from Stitch itself. And yes, we trust the

Stitch itself. And yes, we trust the authors. And so now we have everything

authors. And so now we have everything from Stitch on the left hand side. I'm

going to go ahead and start a brand new Claude session. And the very first thing

Claude session. And the very first thing that we're going to tell Claude to do here is first of all we're going to give it the following prompt. Hey there dude.

I've created a design within Stitch. And

you'll see all those files on the left hand side. What I'd like to do is turn

hand side. What I'd like to do is turn this into a gorgeous app using any of the libraries that you think are appropriate to make this an absolute standout app using the very best unique typographies as shown in the screen

image. Install any libraries you require

image. Install any libraries you require to do this. And once that's completed, I'd like it to open up for me in a local host. So the key detail to bear in mind

host. So the key detail to bear in mind here is the fact that this exists as HTML. But reality the best websites

HTML. But reality the best websites aren't just HTML. So let's broaden our horizons for a second and think with a fresh perspective. So we've set cl on

fresh perspective. So we've set cl on the ramp page and then we're going to get our first variation. Then after

you've played around with it for a little bit, you go back and forth. You

get particular about the design. You'll

get something looks really cool and you can be specific. So I I designed this really cool aspect here that has, you know, I think a real core feature piece.

You know, we've got New York, we've got Tokyo, got all this different stuff.

Really bringing the design to life. We

come down, we've got the different companies that it's fritted by. So, we

need to figure out the logos. But I

think Netflix is cool, Apple is cool, Google's decent. Just add those logos in

Google's decent. Just add those logos in there. And then we've got different

there. And then we've got different reviews. And at the bottom, we have the

reviews. And at the bottom, we have the sign up, which we can then connect to our account. So, last thing we want to

our account. So, last thing we want to do on this really is decide is there anything else that we want to bring into it. Great website is 21st.dev. Here we

it. Great website is 21st.dev. Here we

can find anything. What I often recommend that you do, you come to components, you go to best of the week.

These are the highest upvoted ones that the world loves. And we can find things and basically extract anything that's gorgeous. Whilst that's loading, let me

gorgeous. Whilst that's loading, let me show you another one real quick. If you

come over to Code Pen, Code Pen is another example of this. You just

basically copy all the HTML. Now, you

can bring it over to any of your designs. It's gorgeous. And ironically,

designs. It's gorgeous. And ironically,

the actual top best of the week signs are global, which is the exact thing that we're doing. So, if you click on this global interactive thing is, for instance, check this out. So, you can interact with this. It's completely 3D.

That one's a little bit laggy. This one

I think is a little bit better. You see

this? You can like move it around. I

think this is so cool. So I reckon we go and grab one of these globes which is trending right now. I think this is a good one. This one's coding. So yeah, I

good one. This one's coding. So yeah, I think this is really cool. So if you find a component that you like, all you're going to do is come down and click on share component like so. Head

back over to anti-gravity include code.

And then I'm going to say something like, "Hey there, what I'd like you to do is add this asset to the website. Put

it underneath the contact form, please."

And blend it in. And then you're going to paste in the code. And then what we can also do if we come back is there should be a copy prompt. If you come down and let's just say we want to copy the prompt there. Beautiful. Okay. We'll

just sign in very quickly with GitHub.

And then once you've done that, you will be able to copy the prompt. I am highly assured that's possible. Then if you can come down basically there's so many different things, not just limited to that. You can go to themes, you get to

that. You can go to themes, you get to backgrounds. Essentially anything that

backgrounds. Essentially anything that you need in your website, you can just search for here. Templates, hooters, you know, headers, footers, you literally name it. You can come down and grab it

name it. You can come down and grab it from here. Just have a look at the ones

from here. Just have a look at the ones that you think are cool. I think this one looks great. So you can look at this one if I scroll down and it all just blends in nicely. This is a dark mode one again. This I think is really crisp

one again. This I think is really crisp and nice. I actually quite like quite a

and nice. I actually quite like quite a lot of this actually. It's really cool.

Yeah, this is really crisp. This one is by far my favorite though. So I think we should take both. Maybe just make it kind of like a light mode dark mode. So

let's come back over. So we'll drop in this one. And then I'm also going to say

this one. And then I'm also going to say after I've given the prompt we'll send that one off. And that's another one.

And then I would also like you to add this one also. And again once again copy the prompt. Come back over. Drop this

the prompt. Come back over. Drop this

one in. And then we can also copy the link to the actual thing which I always find helps quite nicely. Come back over and then share the component. Of course,

make this dark mode if the bottom is dark mode. And then we can let code work

dark mode. And then we can let code work for us in the background. And just like that, it's now done. So we refresh it and let's go down and see if we can see it. We've got our wonderful designs. I

it. We've got our wonderful designs. I

think this is really cool. Scroll down.

Trusted by leaders. Look at this guys.

This is crisp. This is really nice. Then

we come down. Got the login form which is awesome. Protected everywhere you go.

is awesome. Protected everywhere you go.

How cool is that? We'll just copy that and come down to the bottom. Then we've

got our crisp, beautiful footer, which is amazing. So the fourth step of our

is amazing. So the fourth step of our drip framework stands for publish. And

in the publishing step, we're going to do any integration like with Stripe and assign an emails and anything else we want to take our app into Stellar. And

so we can start collecting cash either for us or for our clients. And so here guys, this is the exact same process regardless of whatever it is that we're connecting to. And one thing to

connecting to. And one thing to understand now that we have the MCP with Stitch in anti-gravity include code, we can do many things. Previously we had to do a lot of manual stuff but since we've

integrated the stitch MCP with claw code we can actually design in stitch vehicle code for anything we want to we can batch update everything but the real superpower here comes with everything that we can now integrate. So for

example we can integrate stripe lemon squeezy paddle basically you have the idea you can create it we have authentication so we can connect to any database superbase firebase clerk next or we have our database and back end

again the same core four things we have planet scale and neon you've got emails so if we want to send emails or my or my systems for example use resend which is awesome that's when people sign up they forget their password they forget whatever it is we can actually do that

whole process which is great and that's a whole new a new part of the system you've got deployment which we're going to be using versel for oneclick deployment off GitHub hub as well. And

of course, we can do loads of things here like analytics. Uh, and then finally, lots of different integrations if we want to go above and beyond. But

the key is that we can pretty much integrate anything we want to. So, let's

start with a login and authorization.

Hey, what I'd like you to do is integrate Superbase such that individuals can create a username, their name, and their password, and that is stored in Superbase. I would like you to connect to Superbase via the following token, and then when an individual

creates an account, you are to store that with role level security. And once

it's done that, what we need to do then is just grab a token from Superbase. And

you can do that in anti-gravity by pressing command and now and letting this thing appear here. You're going to click on the dots. I'm going to click on MCP service. You're going to click on uh

MCP service. You're going to click on uh you're basically going to search for Superbase here. There we go. Come down

Superbase here. There we go. Come down

and click on this guy. And I'm just showing this as a quick quick hack to find the thing. It's really easy. If you

click on configure, this will take you directly to the page that you need to actually go and do. So, let me just install this real quick. This is

installing it in anti-gravity, which is absolutely fine. But you see Superbase

absolutely fine. But you see Superbase access token is the only thing I need here. Just click on that. Opens up this

here. Just click on that. Opens up this page and what you can do is just generate a token basically. So just come down here, click on generate token, give it a name like tester. You can set the expiry date for whatever. Since this is just an example, I'm going to set it for

one day. Click on generate token. Once

one day. Click on generate token. Once

you've copied that token, come back over here. Just get rid of that for now. And

here. Just get rid of that for now. And

you can paste your token in here. Then

it'll basically connect everything for you. Now superbase is complete. What I

you. Now superbase is complete. What I

want to do is actually publish this to get it to be a live website. Then we can test it together. If you've never done this before on Versail and GitHub, check out this video on screen somewhere so you can get a full idea of the process so it feels a little bit less like

Spanish. But in any case, all we're

Spanish. But in any case, all we're going to do is this, which is, hey, I want you to go ahead and create a GitHub repo and publish this and then oneclick publish it to Versel. If you're not

connected to GitHub, open this up with the CLI. If not, go ahead and do it. And

the CLI. If not, go ahead and do it. And

then I want you to publish it to VEL using the below token. And you can basically go over to this website here, visel.com/account

visel.com/account settings/tokens, and then we create a brand new token. We'll call this one token. We give access and then we just

token. We give access and then we just put expir date for a day and click on create and then share that back with claude code. Now, if you don't know, Vel

claude code. Now, if you don't know, Vel is the place where we can just basically host our websites. The code lives on GitHub, which is just short for kind of like a repository essentially. And then

every all the websites itself is hosted then on VELL. Just lets us have websites. And the second that you make a

websites. And the second that you make a change to your website at all in anti-gravity include code, it will be reflected in the live website, which is awesome. Okay, great. So, since it's not

awesome. Okay, great. So, since it's not installed, we can actually this together, which is amazing. So, I'm

going to copy this code here, and then at the top, I'm going to click on terminal, click on new terminal, and then if I just enter in this code here, it will then open up, which is fantastic. Yes, we want GitHub. Yes,

fantastic. Yes, we want GitHub. Yes,

that's fine. And then we go for yes, login with the web browser. Awesome.

Don't look. All we got to do is literally copy this, open it up, and it will just click on continue, which is great. It'll ask for a code. We come

great. It'll ask for a code. We come

back over and all you're going to do is just copy this code like so and then come back and we go enter that in. Click

on continue and then we should be fully connected which is awesome and just click on authorize GitHub. Then we give it our password and then we're all officially set. Then if I come back and

officially set. Then if I come back and I come back over to our conversation we can say hey that is all complete. Please

proceed. Now that's completed. Allegedly

it's all pushed up now and ready on Versel. So all we're going to do is

Versel. So all we're going to do is click on command and open this guy up and we should see Stitch Amber beta Visela app. And this is our live

Visela app. And this is our live website. We could share this with our

website. We could share this with our clients. We got loads of cool stuff.

clients. We got loads of cool stuff.

They can sign in which is awesome. Let's

refresh it and put this to the test.

Wonderful. So, we land on here which is cool. And now, basically, we have this

cool. And now, basically, we have this website so we can share with everybody.

Let's go ahead and create a brand new account. So, we just basically fill up

account. So, we just basically fill up with some with some information. And

then once we've done that, we can click on create account and see what happens.

Beautiful. We saved that. And would you believe now we are in our account, which is fantastic. You can see everything

is fantastic. You can see everything that we've got here. Hey, welcome back, which is decent. Now, the key question is what happens if I refresh page? Does

it remember who I am? So, I've done that. It has. Yeah. Cool. That's really

that. It has. Yeah. Cool. That's really

freaking sweet, actually. So now we know that it's fully connected and individuals are now creating an account.

So the only thing left to do next is actually integrate this with Stripe, which believe it or not isn't as complicated as you think, but it used to be, but not anymore. Not with Claude. So

I've come back over. Let's open a brand new Claude session. I'm doing this in the terminal just because it's a little bit easier and a little bit faster. To

do that, by the way, just click on terminal. Click on new terminal and then

terminal. Click on new terminal and then just type in Claude. What I'd like to do next is integrate Stripe into the dashboard. So for example, I would love

dashboard. So for example, I would love it that when someone signs up, they can actually decide basically to pay $10 a month. I'll have a product for that in

month. I'll have a product for that in my Stripe account. What I'd like from you first of all is to do the integration and let me know all the information that you require from me from Stripe and actually would be even better if you could grab that yourself

with the right connective informations or tokens. Let me know what is required

or tokens. Let me know what is required to make this as easy as possible. Now, I

know the specifics with Stripe. I've

done it quite a few times, but one of the reasons why I asked that is because generally speaking, when you're doing these kinds of integrations, you can actually have Claude educate you through the connective process. So, if you don't know how to connect something, just say,

"Claude, hey, how the hell do I actually connect it?" And then you obviously want

connect it?" And then you obviously want to make sure it's all locked and loaded, sound, and secure. Okay. So, what we need to do is come into Stripe and create an account. Now, I'm going to create a product here for $10 a month.

So, on the left hand side, let's go to product catalog. Let's click on create a

product catalog. Let's click on create a brand new product. Cool. So, I've given it a name, a really brief description.

Let's add, you can add an image if you want to. Really easy. What we're going

want to. Really easy. What we're going to do is come down and make it a£10 per month subscription. Build monthly.

month subscription. Build monthly.

That's awesome. Click on add product.

Give that a hot second and that will load. Cool. And now we have a monthly

load. Cool. And now we have a monthly VPN running at £10 a month. And actually

guys, I'm just going to give it an image and then we'll click on update product down there just so we can get some cool visual detail which is awesome. So this

needs two things. The first one is a secret key. So we'll find that on

secret key. So we'll find that on dashboard developers and API. So let's

go and check that one out. So if you come down, you won't be able to see it.

Let me just exit full screen. And then

what we're looking for is the secret key. So we're just going to do is copy

key. So we're just going to do is copy that and then come back and share that with Claude. And then it needs a public

with Claude. And then it needs a public key. So we just copy this one as well.

key. So we just copy this one as well.

Now guys, this is a test account. If you

switch to a live account, the actual beginning won't be PK test. It'll be

something live, which means it will actually work with the customer's accounts. But when you're building it

accounts. But when you're building it out, test everything in the sandbox, which you can do in the top left. If you

click on Santa sandbox, it'll drop down.

You can actually choose to be in sandbox mode, which means you can test all of this stuff. And then when it's live and

this stuff. And then when it's live and secure, you just switch it back over to the live version. And core detail is that if you give it those two pieces of information, Claude Code can actually come over and grab the product ID. Just

tell it how much it costs and it will grab the relevant product ID for you so it knows exactly what that is. Now, as

you can see, it's come down. Look, I

found everything I need. Here's the

price ID. It's £10 a month. Let me read the key files and build the full integration for us. Wonderful. And then

to complete what it's going to do is send a few functions off via Superbase, which is great for us because we haven't built a back end for BZ. To do that, we need to do the CLI, so the command line interface. But basically, Club Code will

interface. But basically, Club Code will coach you through all the steps that you need to do. So, we're going to click on this one right here, for example. Now,

if you've already gotten a token from before, you can provide it here. But if

not, you can literally give the new token to Chloe. Wonderful. So, now it is officially complete. So, we can test it

officially complete. So, we can test it out and create a fake account. So, let's

go ahead and do that. So, now come over to the dashboard. And you can see we now have the pro plan, which is cool, and the free plan. If yours doesn't see this, but a little hack, you can do command, shift, and R, and it will hard reset the page. Also, interesting. I

love this little graphic, by the way.

You just need to make sure you always enter code. Hey, publish this to GitHub

enter code. Hey, publish this to GitHub so you always get the latest version.

Great. So, now let's actually go ahead and test it. Let's click on upgrade to £10 a month and see how this works. It

should boot me out and send me directly to Stripe. Cool. So, now it's opening up

to Stripe. Cool. So, now it's opening up and it's giving me in durhams cuz it knows I'm in the beautiful Dubai. So,

we're going to give it some fake information. Let's go ahead and do that.

information. Let's go ahead and do that.

By the way, if you want to test, just do 424242 and it works. Give it a random name on a card. It's fine. And click on subscribe and we'll see if this works.

Give this a hot second and see if we've now got our first paying customer which is awesome. You can see it's a sandbox

is awesome. You can see it's a sandbox here at the top which is fantastic. It's

an art processing. We've got our logo.

Highly recommend that you have an image.

definitely elevates it somewhat.

Wonderful. And now it says, "Hey, you're now on pro. Your subscription is active.

Enjoy unlimited access." Which is great.

But what we need now need to do is basically make sure that that's now reflected in the dashboard to make sure it's all connected. And so I just came back over to CL code. I basically said that I paid for the upgrade. It wasn't

reflected in the dashboard. Just make

sure that we're saving that to Superbase and that all works functionally correct.

And this is just the kind of finetuning you need to do to get the Stripe integration up and running. And it's

already found the issue. And so if I come back over to the dashboard now and I refresh it, I should see I am now on the pro plan. And look at this. I'm

officially on the pro plan, which means you're now ready to rock and roll and start taking on subscribers. Now,

integrating Stitch is one thing, but if you want to create gorgeous 3D websites to get even more of an edge, we have to integrate Nano Banana in a creative way, which we can learn by watching this video right We have