§ 01 · The Hook
The bait, then the rug-pull.
Google Stitch 2.0 dropped quietly, but its real power only shows when you pair it with Claude Code. This video is the live proof: one host, one session, zero prior design training, and a fully deployed cybersecurity SaaS site with real authentication and a working Stripe subscription by the end.
Where the time goes.
00:00 – 00:52
01 · Cold open and DRIP overview
Hook on Stitch 2.0 + Claude Code combination, host intro, promise of the four-step DRIP framework
00:52 – 03:07
02 · D — Design in Stitch
Creating a Stitch project, gathering reference images from Godly and Dribbble, prompting for a cybersecurity VPN concept, explaining image-generation vs HTML-generation distinction
03:07 – 04:43
03 · Stitch 2.0 feature tour
Design systems, export and integrations (HTML/CSS/React/Tailwind), URL-as-seed-asset, canvas workflow, simultaneous generation runs
04:43 – 09:31
04 · R — Refine design system
Selecting best variant, switching color palette from purple to blue, typography refinement, conversational voice editing, design system export as zip
09:31 – 14:55
05 · Refine into React with Claude Code
Opening exported zip in AntiGravity, prompting Claude Code to convert HTML to React app, sourcing interactive globe components from 20first.dev and CodePen, iterating on design
14:55 – 22:50
06 · I — Integrate Supabase and Stripe
Supabase MCP setup for auth with RLS, creating Stripe product at 10 pounds per month, providing API keys, Claude Code auto-retrieving price IDs, Edge Functions for Stripe webhooks
22:50 – 26:17
07 · P — Publish to Vercel
GitHub CLI authentication flow, pushing repo, Vercel one-click deploy, live URL test with account creation, Stripe sandbox subscription test with 4242 card
26:17 – 26:29
08 · Close and CTA
Tease for follow-up video on 3D web with Nano Banana integration
Visual structure at a glance.
Named ideas worth stealing.
00:52
acronym
DRIP Framework
- Design
- Refine
- Integrate
- Publish
Four-step pipeline for going from blank canvas to deployed app using AI design plus AI coding tools
Steal for Any AI-assisted web project or client site workflow
10:54
concept
Improvement Velocity
Evaluating AI tools by their rate of improvement over time rather than current capabilities alone
Steal for Tool selection decisions when the category is moving fast
Lines you could clip.
02:57
"Think of Stitch conceptually as vibe design. That's the best way to think about it."
10:54
"What I always look at when looking at tools is what I call improvement velocity — how much is it improving and at what speed?"
11:03
"The future of design is absolutely heading towards AI. You do not need to know lots of complicated individual tools."
22:54
"If you do not know how to connect something, just say Claude, hey, how the hell do I actually connect it?"
Things they pointed at.
How they asked for the click.
26:17
next-video
"Now integrating Stitch is one thing, but if you wanna create gorgeous three d 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 here."
Soft bridge to follow-up content rather than a subscribe pitch; no newsletter or product offer at the close.
Word for word.
HOOK opening / re-engagementCTA the pitch metaphor analogy
00:00HOOKGoogle Stitch two point o just landed. And if you combine that with Claude code, you unlock a game changing way to build beautiful apps and websites, but only if you use the correct strategy.
00:13HOOKAnd in this video, I'm gonna show you exactly how to build beautiful apps and websites with Google Stitch and how to supercharge that with Clawd. So you can have integrations like Stripe and email authentication even if you've never coded before.
00:28HOOKSo you can get light years ahead of your competitors and avoid all the AI slop websites. And if you know who I am, my name is Jack Roberts. I built and sold my last tech startup with over 60,000 customers and I've sold websites just like this for thousands of dollars.
00:41HOOKSo if you haven't already, grab that coffee and let's dive straight in. Now in this video, we're gonna cover the brand new Stitch two point o updates, as well as actually showing you how you can effectively build and deploy anything you're imagining using ClaudeCode.
00:54HOOKAnd to do that, we're gonna use a very simple four step drip framework with the first d standing for design. So with design, effectively, the first thing we need do is head over to stitch.withgoogle.com and create a brand new account.
01:07Once you've done that, we can now build beautiful things that look like this, great designs, great color palettes. But what the d in design stands for is essentially what does this website look like.
01:17So what we're gonna 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 gonna do is click on web, which means it's going to be more 16 by nine than vertical than an app. Now my recommendation is that you actually come down and start with the redesign, because we want to create initial base image with Nano Banana Pro, first of all.
01:35So here we can drop in images and URLs. To feed that, there's a couple of great website. Godly.website
01:40is a wonderful place just full of beautiful, gorgeous designs. We can take a look through here and find anything that we think looks really interesting. So in this video, we're gonna build a cyber security VPN type of website with a login dashboard, and we're also going to attach Stripe to it.
01:55And the techniques we use, you can apply for essentially anything you'd like. The other one which is really great is Dribbble. If you go to dribble.com,
02:01you can see lots of different ideas and designs that we could leverage. All we're gonna look really for is just to capture a couple of screenshots that we think look 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.
02:16So again, 20first.dev is a website we'll come back to later. But I've got this one here.
02:20I think it's really cool. I like the design and the kind of vibe, specifically the typography. And then I've also grabbed this one here, which is browser.borders.
02:27I love the interactivity. I want something that's pulsing and interactive. So we come basically back over to Stitch.
02:32So when 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.
02:40I'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,
02:54and think of Stitch conceptually by the way, as . 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 tell you this, but the reason why it's great to start with image generation is because it's not limited
03:07to 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 from that reference image, we can work backwards to basically create whatever we like.
03:19And 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.
03:25So 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.
03:33We 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.
03:43So for example, I've just searched for gorgeous cybersecurity websites to see what this element of its creativity actually does. So you can see these are okay, I suppose. Nothing crazy.
03:53But this one looks quite fine. So if I say this one here, I've got Datadome. I just open this one up, grab a URL.
03:57Okay. Great. So let's copy this one here and come back over to Stitch.
04:00And 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 cybersecurity website using the content that exists on this website.
04:09I'd love an interactive component that shows a global dashboard, like the a world map that flashes up and emphasizes it. Make it creative and make it look gorgeous. And then when we come down here, we're gonna select web, and then so three o flash, we're gonna go for thinking with 3.1 at prem.
04:23And then, of course, we can send that one off and then let it work in the background. And this can run for us ever whilst we're doing our core thing. So not only can it do that, you can have basically like a canvas.
04:31Think 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 second.
04:37Now 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.
04:50Then later in the video, I'll show how we export this as well pretty much to anything we want to with just one click, and we can put 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.
05:02So global protection without compromise. I love what it's done at the top. We can see this gorgeous interactive graph now.
05:07It looks fantastic. Let's come down, start free trial. I think that's fantastic, trusted by the different platforms.
05:12And you can see the image generation powered by Nano Banana two is just something that we wouldn't really get anywhere else. I think this is fantastic. And again, it's actually drawn in and brought the typography, which is fantastic.
05:23Made the future a private browsing. Cool. So I think it's kind of gotten the gist of all of them really, which is wonderful.
05:28And 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 all the ones that we like. So we can highlight this image, and I quite like the look of this as well.
05:41And 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.
05:47They're gonna be reference images for us. We've got this one, we have this one, and then we also have this one here. So then we're gonna ask it now instead of redesign, and of course, we could keep refining it if we wish to.
05:56We're gonna ask it to create something. So instead of redesign, gonna come down here to Gemini three Thinking 3.1 Pro and give it a prompt. Hey there.
06:02I would like you to turn this into a beautiful website for me using the typography of the variant two and then the imagery of variant one and the image dot p n g.
06:13I would like a h one. I'd like the beautiful graphic with a CTA, the companies we work with. Then underneath, I would like essentially some testimonials.
06:21And then below that, I would like there to be a login slash sign up form. Awesome. So we give it a probe, and now we've got the images.
06:27We can basically just create something cool. So this now will go ahead and generate for it something decent. And if I bring this over, you can see all the actions it's taking down there in the bottom left.
06:36So it's become a lot more 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.
06:44So you can come down, you can have a look. We've got primary, secondary, we've got the fonts. I think these fonts are absolutely gorgeous.
06:50And 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.
06:57You can change the seed color. You can change the palette. You can change the fontage.
07:01That'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.
07:07You want to, so 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.
07:15That sounds incredible. Having a creative roofing partner is a total game changer. What are we designing today?
07:22Okay. So you get the idea. You can just talk to it instead if you wish to.
07:24Some people get a little bit annoyed by the voices. I think it's great when they give a voice with some personality. And whilst that's finishing up, I wanna show you the other thing that it's done for us now.
07:31So 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.
07:41This 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.
07:48As you can see, I can edit text. I can say not Sentinel AI. It could be x y z.
07:52You get the idea. Right? Very, very cool.
07:53And 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 give it either a URL or you can give it an image.
08:04I 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 block, uptime SLA, looks pretty decent for a first shot and I think this looks quite nice.
08:17It'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.
08:25So step one, you basically decide, do I wanna 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 gonna use for the rest of our design and any future apps that we have.
08:42So as you can see, we've got a landing page, which is great. I think this is decent. We've got some good typography.
08:47Come down, proceed 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 gonna do that is let you select this image like so, come over here and select this one.
08:59And then what we're going to do, if we select both of them you have to hold command to select both of them. It's just give it a of a prompt. I'm gonna say, hey.
09:05Looks 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.
09:18I 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 hit command, you can basically select all the different things that you would like to do that. So I'm gonna say one last thing, is also I'd like you to decapitalize
09:31the actual h one h one 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.
09:40I 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 is is if it was blue.
09:48So 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 code.
09:55So let's actually just scroll this around till we get one that we think is really nice. When I did my last business, we had blue because blue itself is associated associated with trust. And anything to do with data, typically speaking, you wanna lead in with trust.
10:07So I've just added that a little bit. I think that's fine. They all seem to pretty decent.
10:10We'll come off this one here, and that will, of course, update the design that I've been, which is 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, I've highlighted this, is just say, hey there.
10:20What 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.
10:30Or if you want to, let's stitch decide. Guys, I can't even say what the hell is going on. That's how cool this is.
10:35Now, this is not perfect. This is not, 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.
10:47We 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.
10:54How 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
11:03heading towards AI. You don't need to know lots of complicated individual tools. We can leverage this in other systems to build something spectacular.
11:09One 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 when they flow in. So very cool, and I think that this is generally slick and we can do some nice little details and touching.
11:21Wonderful. 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 do anything that we want to.
11:29Typically speaking, what I find helpful is to have your kind of actual pages up the top, then have everything else down here. And of course, you can duplicate them whenever you want to. But now we've got the blue color, we're gonna be ready to head on to the real magic.
11:40So 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 gonna be using Claude Code within anti gravity, which is my preferred IDE.
11:55If 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 Claude code actually now, what we can do is click on the Claude code here, and it will appear, and then click on a new session, which is Ace. This If 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.
12:13Now, 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, do a billion different things. And I'll put a link on screen to show you how you can connect it so you can programmatically
12:29create as many as you want to. I'll put that link on screen for you. But to keep things simple, what we're gonna do in this video is actually just download the stuff and bring it over.
12:36So the way that we do that effectively is we're gonna click on everything we want to export. So we wanna export this, click on command, and then highlight this as well. So we've highlighted two things, and then on export, which you can find over here at the top right, you're gonna come down and you can just download these as a zip, just really easily, and then click on export.
12:50What this enables you to do then, now you got the stitch zip, is put this anywhere you want to. You wanna use it in Lovable, you wanna use it in AI Studio, it doesn't make a difference. You can put them anywhere you want to, and now we have the zip.
13:01So let's open up the zip. Double click on this guy, and then we've got everything we want. We've got the designer.md,
13:06which is all of our credentials, explaining everything, which is fantastic. Okay? So that's absolutely fine.
13:10Click on open. And again, it just starts to appear. And so what we need to do is open a new folder.
13:14It says 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 the folder that we just downloaded
13:21from Stitch itself. And yes, we trust the authors. And so now we have everything from Stitch on the left hand side.
13:27I'm gonna go ahead and start a brand new Claude session. And the very first thing that we're gonna tell Claude to do here is first of all, we're gonna give it the following prompt. Hey there, dude.
13:35I'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 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 to do this.
13:53And 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 here is the fact that this exists as HTML. The reality, the best websites aren't just HTML.
14:04So let's broaden our horizons for a second and think with a fresh perspective. So we set Claude off on a rampage, and then we're gonna get our first variation. Then after you've played around it for a little bit, you go back and forth, you get particular about the design, you'll get something that looks really cool, and you can be specific.
14:18So 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.
14:25We've got all this different stuff really bringing a design to life. We come down. We've got the different companies that it's hosted by, so we need to figure out the logos.
14:31But I think Netflix is cool. Apple is cool. Google's decent to add those two logos in there, and then we've got different reviews.
14:36And at the bottom, we have the sign up, which we can then connect to our account. So last thing we wanna do on this really is decide is there anything else that we wanna bring into it. Great website is 20first.dev.
14:45Here we can find anything. What I often recommend that you do, you come to components. You get to best of the week.
14:50These are the highest upvoted ones that the world loves. And we can find things and basically extract anything that's gorgeous.
14:56Whilst that's loading, let me show you another one real quick. If you come over to CodePen, CodePen is another example of this. You just basically copy all the HTML and you can bring it over to any of your designs.
15:05It's gorgeous. And ironically, the actual top best of the week signs are global, which is the exact thing that we're doing.
15:12So if you click on the global interactive thing, is it for instance? Check this out. So you can interact with this.
15:17It's completely three d. That one's a bit laggy. This one I think is a little bit better.
15:21You see this? You can like move it around. I think this is so cool.
15:23So 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.
15:28So, yeah, I think this is really cool. So if you find a component that you like, all you're gonna do is come down and click on share component like so, head back over to anti gravity and claw code. And then I'm gonna say something like, hey there, what I'd like to do is add this asset to the website, put it underneath the contact form please, and blend it in.
15:44And then you're gonna 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, let's just say we want to copy the prompt there.
15:52Beautiful. Okay. We'll just sign in very quickly with GitHub.
15:55And 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.
16:02Not just limited that. You can get to themes, you can to backgrounds. Essentially, anything that you need in your website, you can just search for here, templates, huddle, you know, headers, footers.
16:10You literally name it. You can come down and grab it from here. Just have a look at the ones that you think are cool.
16:14I think this one looks great. So you could look at this one if I scroll down, and it all just blends in nicely. This is a dark mode one.
16:19Again, this I think is really crisp and nice. Actually, quite like quite a lot of this actually. It's really cool.
16:23Yeah. 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.
16:28So let's come back over. So we'll drop in this one, and then I'm also gonna say after I commit the prompt, I thought we'll send that one off and that's the end of one. And then I would also like you to add this one also.
16:37And again, once again, copy 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.
16:49And then we can let ClodeCode 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.
16:55We've got our wonderful designs. I think this is really cool.
16:58Scroll down. Trusted by Leaders. Look at this, guys.
17:01This is crisp. This is really nice. Then we come down, got the login form, which is awesome, protected everywhere you go.
17:06How cool is that? We'll just copy that. If we come down to the bottom, then we've got our crisp, beautiful footer, which is amazing.
17:11So the fourth step of our drip framework stands for publish. And in the publishing step, we're gonna do any integration like the Stripe and assign in 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
17:30of whatever it is that we're connecting to. And one thing to understand now that we have the MCP with Stitch in anti gravity and called 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 called code, we can actually design in Stitch their call code for anything we want to.
17:46We 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.
17:55Basically, have the idea, you can create it. We have authentication, so we can connect to any database, Superbase, Firebase, Clerk, Next Auth. We have our database and back end.
18:03Again, the same core four things. We have planets going neo. You've got emails, so if we want to send emails or my or my system, for example, use Resend, which is awesome.
18:11That's when people sign up. They forget their password. They forget whatever it is.
18:14We 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 gonna be using Vercel for one click deployment off GitHub as well. And, course, we can do loads of things here, like analytics,
18:24and then finally, lots of different integrations if we wanna 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.
18:33Hey, though. 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
18:42via the following token, and then when an individual creates an account, you want to store that with row level security. And once it's done that, what we need do then is just grab a token from Superbase. And you can do that in anti gravity by pressing command and l and letting this thing appear here.
18:54You're gonna click on the dots. You're gonna click on MCP servers. You're gonna click on
18:59you're basically gonna search for super base here. There we go. Come down and click on this guy.
19:03And I'm just showing you 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.
19:10So let me just install this real quick. This is installing it in anti gravity, which is absolutely fine. But you see, super base access token is the only thing I need here.
19:17Just 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.
19:26Since this is an example, I'm gonna set it for one day, click on generate token. Once you've copied that token, come back over here, just get rid of that for now, and you can paste your token here, then it'll basically connect everything for And our soup base 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.
19:41If you've never done this before on Versal and GitHub, check out this video up 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 gonna do is this, which is, hey, I want you to go ahead and create a GitHub repo and publish this. And then one click publish it to Vercel.
19:58If you're not connected to GitHub, open this up with the CLI. If not, go ahead and do it, and then I want you to publish it to Vercel using the below token. And you can basically go over to this website here, vercel.com/account/settings/tokens,
20:12and then we just create a brand new token. We call this one token. We give access, and then we just put expire date for a day, and then click on create, and then share that back with Claude Code.
20:19Now if you don't know, Vercel is the place where we can 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 Vercel.
20:30This lets have websites. And the second that you make a change to your website at all in anti gravity in Cloud Code, it will be reflected in the live website, which is awesome. Okay.
20:39Great. So since it's not installed, we can actually do this together, which is amazing. So I'm gonna copy this code here.
20:43And then at the top, I'm gonna 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.
20:50Yes. We're on GitHub. Yes.
20:52That's fine. And then we go for yes. Log in with the web browser.
20:55Awesome. Don't know what All you gotta do is literally copy this, open it up, and it'll just click on continue, which is great. It'll ask for a code.
21:00We come back over, and all you're gonna 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 then just click on authorize GitHub, then we give it our password, and then we're all officially set. Then if I come back and I come back over to our conversation, we can say, hey, that is all complete.
21:18Please proceed. Now it's completed. Allegedly, it's all pushed up now and ready on Versalm.
21:22So all we're gonna do is click on command and open this guy up, and we should see Stitch Amber beta Versalva app, and this is our live website. We could share this with our clients. We've got lots of cool stuff.
21:31They can sign in, which is awesome. Let's refresh it and put this to the test. Wonderful.
21:34So we land on here, which is cool. And now, basically, we have this website so we can share it with everybody. Let's go ahead and create a brand new account.
21:39So we just basically fill up this with some information. And then once we've done that, we can click on create account and see what happens. Beautiful.
21:45We saved that. And would you believe, now we are in our account, which is fantastic. You can see everything that we've got here.
21:50Hey, welcome back, which is decent. Now the key question is, what happens if I refresh page? Does it remember who I am?
21:55So I've done that. It has. Yeah.
21:57Cool. That's really freaking sweet, actually. So now we know that it's fully connected and individuals are now creating an account.
22:01So 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.
22:09Let'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 just type in Claude.
22:17What I'd like to do next is integrate Stripe into the 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 on my Stripe account.
22:29What 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, it would be even better if you could grab that yourself with the right connective informations or tokens. Let me know what is required to make this as easy as possible.
22:42Now 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,
22:50you 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 wanna make sure it's all locked and loaded, sound, and secure.
23:01Okay. So what I need to do is come to Stripe and create an account. Now I'm gonna create a product here for $10 a month.
23:06So on the left hand side, let's go to product catalog. Let's click on create a brand new product. Cool.
23:10So I've given it a name, really brief description. Let's add you can add the image if you want to. Really easy.
23:14What we're gonna do is come down and make it a 10 pounds per month subscription. Bold monthly. That's awesome.
23:19Click on add products. Give that a hot second, and that will load. Cool.
23:21And now we have a monthly VPN running at 10 pounds a month. And actually, guys, I'm just gonna 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.
23:31The first one is a secret key. So we'll find that on dashboard developers and API. So let's go ahead and check that one out.
23:36So if you come down, you won't be to see it. Let me just exit full screen. And then what we're looking for is the secret key.
23:41So what just gonna do is copy that, then come back and share that with Claude. And then it needs a publishable key, we just copy this one as well. Now guys, this is a test account.
23:48If 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 out, test everything in the sandbox, which you can do in the top left.
24:00If you click on send to 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 secure, you just switch it back over to the live version.
24:09And core detail is that if you give it those two pieces of information, Claude Co 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.
24:23Look. I found everything I need. Here's the price ID.
24:25It's £10 a month. Let me read the key files and build the full integration for us. Wonderful.
24:30And 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 this. To do that, we need to do the CLI, so the command line interface. But basically, Clubcode will coach you through all the steps that you need to do.
24:43So we're gonna 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 Claude.
24:50Wonderful. So now it is officially complete. So we can test the ad and create a fake account.
24:54So 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 part, a little hacky, you do command shift and r, and it'll hard reset the page.
25:05Also interesting, I love this little graphic, by the way. You just need to make sure you always enter the code. Hey.
25:09Publish this to GitHub so you always get the latest version. Great. So now let's actually go ahead and test it.
25:13Let's click on upgrade to 10 pounds a month and see how this works. It should boot me out and send me directly to Stripe. Cool.
25:18So now it's opening up, and it's giving me in Dirhams because it knows I'm in the beautiful Dubai. So we're gonna give it some fake information. Let's go ahead and do that.
25:24By the way, you wanna test, just do 424242 and it works. Give it a random name on a card.
25:29It'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.
25:36You can see it's a sandbox at the top, which is fantastic. It's an art processing. We've got our logo.
25:40Highly recommend that you have an image. Definitely elevates it somewhat. Wonderful.
25:44And then it says, hey, you're now on pro. Your subscription is active. Enjoy unlimited access, which is great.
25:49But what we need now I 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 Clue Code. I basically said that I paid for the upgrade.
25:57It wasn't reflected in the dashboard. Just make sure that we're saving that to super base and that all works functionally correct. And this is just a kind of fine tuning you need to do to get this Stripe integration up and running and it's already found the issue.
26:08CTAAnd 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 wanna create gorgeous three d 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 here.
— full transcript
§ 05 · For Joe
The fastest path from idea to deployed product skips the design phase entirely.
WHAT TO LEARN
When a tool generates design from images rather than code, it escapes the visual ceiling of HTML — and that gap is where non-coders finally get a seat at the professional product table.
- Starting with competitor reference screenshots is faster than prompting from a blank canvas: feed the AI three visuals and it learns your aesthetic target in seconds.
- Design decisions made in an image generator are not final — they are directional signals you hand to a coding agent, which can then exceed the original mockup.
- Typography selection carries more visual weight than any other single decision; choosing a font family is choosing a personality for the entire product.
- Naming the color psychology out loud before committing gives you a defensible rationale when presenting to clients.
- AI coding agents can retrieve API credentials, find product IDs, and write integration code from a single prompt — the barrier to connecting payments is the decision to start, not technical knowledge.
- Supabase Edge Functions eliminate the need for a standalone backend for webhook handling; the same session that builds the frontend can deploy serverless functions.
- Sandbox testing with dummy card numbers before switching to live API keys is the minimum responsible step for any payment integration.
- Deploying to Vercel via a GitHub push means every future iteration ships automatically — the infrastructure work is done once.
