The argument in one line.
Pairing an AI image-generation design tool with an AI coding agent collapses a three-role team into a four-step workflow that a non-coder can execute in one sitting.
Read if. Skip if.
READ IF YOU ARE…
- You want to build and sell client websites but have no design training and limited coding experience.
- You are a freelancer or solo founder looking to produce professional-quality web projects faster without hiring a design team.
- You already use Claude Code for coding tasks and want to improve the visual quality of what you ship.
- You are evaluating whether Google Stitch belongs in your AI toolchain alongside existing coding tools.
SKIP IF…
- You are a senior developer or designer with an established Figma-to-code workflow — this is an introductory pipeline tour.
- You need production-depth coverage of Supabase, Stripe, or Vercel; each is shown at speed with minimal error handling.
The full version, fast.
Google Stitch 2.0 generates visual design concepts from reference screenshots or URLs, unconstrained by HTML, making it faster to prototype aesthetics than any code-first tool. Those image mockups become reference assets for Claude Code, which builds the actual functional React app inside AntiGravity IDE. The DRIP framework structures the session: Design variations in Stitch, Refine the color system and typography, Integrate Supabase auth and Stripe payments via MCP and API keys Claude retrieves automatically, then Publish to Vercel via a single GitHub push. The result is a live authenticated SaaS site that can accept real subscriptions, built by someone with no prior design or coding background.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →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
Lines worth screenshotting.
- AI image generation in Stitch operates outside HTML constraints — it imagines freely, then you work backwards to build what it produced.
- Feeding reference screenshots from competitor sites is faster than prompting from scratch: the AI reverse-engineers visual language, not just layout.
- Typography is the highest-leverage single design decision — one font change shifts an entire brand identity.
- Claude Code can retrieve your Stripe price ID automatically from the API given just the keys — you do not need to manually copy product IDs from the dashboard.
- Supabase Edge Functions replace a separate backend server: Claude Code writes and deploys them in the same coding session.
- Improvement velocity — how fast a tool is improving — matters more than current capability when choosing which AI tools to bet on.
- Exporting from Stitch as a zip makes the design portable: the same zip works in Lovable, AI Studio, or any AI coding environment.
- Stitch MCP integration with Claude Code enables batch creation of branded pages from a single design system, skipping manual export entirely.
- Testing Stripe in sandbox mode with card 4242 4242 4242 4242 validates the entire payment flow before a single real charge.
- Vercel reflects every GitHub commit to the live site automatically — shipping a fix is just a git push once the initial deploy is done.
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.
Terms worth knowing.
- DRIP Framework
- Design, Refine, Integrate, Publish — the four-step workflow shown in this video for going from blank canvas to a deployed web app using Stitch and Claude Code.
- Stitch (Google)
- Google's AI-powered UI design tool that generates visual mockups from text prompts, reference images, or URLs and exports to HTML/CSS, React, Tailwind, or Figma.
- AntiGravity
- Google's AI-native IDE with Claude Code built in as an extension, used here as the coding environment throughout the tutorial.
- Vibe design
- The creator's term for prompt-driven aesthetic direction — describing mood, feel, and visual references rather than precise layout specifications.
- Edge Functions
- Server-side functions that run at the Supabase infrastructure layer, used here to handle Stripe webhook events without provisioning a separate backend server.
- Row Level Security (RLS)
- A Supabase/Postgres feature that restricts each database row to the authenticated user who owns it, preventing one user from accessing another data.
- design.md
- A Stitch export artifact that documents the extracted brand identity — colors, typography, spacing — in a machine-readable format for use in other tools.
- Improvement velocity
- The creator's evaluative metric for AI tools: the rate of capability improvement over time, weighted above current features when deciding what to adopt.
Things they pointed at.
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?”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphoranalogy
00:00Google 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:13And 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:28So 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:41So 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:54And 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 is a wonderful place just full of beautiful, gorgeous designs.
01:44We 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. And the techniques we use, you can apply for essentially anything you'd like.
01:58The other one which is really great is Dribbble. If you go to dribble.com, you can see lots of different ideas and designs that we could leverage.
02:05All 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. So again, 20first.dev is a website we'll come back to later.
02:19But I've got this one here. I think it's really cool. I like the design and the kind of vibe, specifically the typography.
02:24And then I've also grabbed this one here, which is browser.borders. I love the interactivity. I want something that's pulsing and interactive.
02:30So we come basically back over to Stitch. So when we've added them in, let's give it a prompt. Hey there.
02:35I'd like to create for me a cyber security VPN type of website using the images as 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.
02:51Now, one of the reasons why with Stitch, and 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.
03:01Now, 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.
03:15And 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.
03:24Design 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.
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 the actual h one h one tags, please.
09:34And 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.
09:42That'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. So why don't we grab this and come back over to our color palette here?
09:51And then we can actually change what this looks like. So if we double click into it, we've got the seed code. So let's actually just scroll this around till we get one that we think is really nice.
09:59When 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. So I've just added that a little bit.
10:08I think that's fine. They all seem to pretty decent. We'll come off this one here, and that will, of course, update the design that I've been, which is wonderful.
10:14But 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. What I'd like to do is just update this to my color palette blue, which I've just selected, please.
10:25So 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's stitch decide.
10:32Guys, I can't even say what the hell is going on. That's how cool this is. Now, this is not perfect.
10:37This 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. We can bring in different websites, image generation.
10:49This 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?
10:57And the reality is that Google's investing heavily in Stitch. Let's be honest, the future of design is absolutely heading towards AI.
11:04You don't need to know lots of complicated individual tools. We can leverage this in other systems to build something spectacular. One other thing I'll point out here as well, is you see how these are coming up?
11:12This 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. Wonderful.
11:21So 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. Typically speaking, what I find helpful is to have your kind of actual pages up the top, then have everything else down here.
11:34And 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. So now we've created the design and the design systems.
11:43The 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. 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.
12:00So 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. Now, there's two ways we can bring in Stitch.
12:16One 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 create as many as you want to.
12:30I'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. So the way that we do that effectively is we're gonna click on everything we want to export.
12:39So 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. What this enables you to do then, now you got the stitch zip, is put this anywhere you want to.
12:55You 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. So let's open up the zip.
13:02Double click on this guy, and then we've got everything we want. We've got the designer.md, which is all of our credentials, explaining everything, which is fantastic.
13:09Okay? So that's absolutely fine. Click on open.
13:11And again, it just starts to appear. And so what we need to do is open a new folder. It says open up a new folder and create a brand new one.
13:16Again, Stitch is okay, so let's just call it Stitch. And that has basically created the folder that we just downloaded from Stitch itself.
13:23And yes, we trust the authors. And so now we have everything from Stitch on the left hand side. I'm gonna go ahead and start a brand new Claude session.
13:30And 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. I've created a design within Stitch and you'll see all those files on the left hand side.
13:39What 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. And once that's completed, I'd like it to open up for me in a local host.
13:56So 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. So let's broaden our horizons for a second and think with a fresh perspective.
14:08So 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. So I designed this really cool aspect here that has, you know, I think a real core feature piece.
14:23You know, we've got New York. We've got Tokyo. We've got all this different stuff really bringing a design to life.
14:27We come down. We've got the different companies that it's hosted by, so we need to figure out the logos. But I think Netflix is cool.
14:32Apple is cool. Google's decent to add those two logos in there, and then we've got different reviews. And at the bottom, we have the sign up, which we can then connect to our account.
14:39So 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. Here we can find anything.
14:46What I often recommend that you do, you come to components. You get to best of the week. These are the highest upvoted ones that the world loves.
14:52And we can find things and basically extract anything that's gorgeous. Whilst that's loading, let me show you another one real quick.
14:58If 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. It's gorgeous.
15:06And 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 the global interactive thing, is it for instance?
15:15Check this out. So you can interact with this. It's completely three d.
15:18That one's a bit laggy. This one I think is a little bit better. You see this?
15:21You 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.
15:26I think this is a good one. This one's coding. So, yeah, I think this is really cool.
15:30So 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 of whatever it is that we're connecting to.
17:32And 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. We can batch update everything.
17:48But the real superpower here comes with everything that we can now integrate. So for example, we can integrate Stripe, Lemon Squeezy, Paddle. Basically, have the idea, you can create it.
17:57We have authentication, so we can connect to any database, Superbase, Firebase, Clerk, Next Auth. We have our database and back end. Again, the same core four things.
18:05We 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. That's when people sign up.
18:12They 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.
18:18You'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, and then finally, lots of different integrations if we wanna go above and beyond.
18:28But the key is that we can pretty much integrate anything we want to. So let's start with a login and authorization. Hey, though.
18:33What 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 want to store that with row level security.
18:48And 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. You're gonna click on the dots.
18:56You're gonna click on MCP servers. You're gonna click on you're basically gonna search for super base here.
19:01There we go. Come down and click on this guy. And I'm just showing you this as a quick quick hack to find the thing.
19:05It'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.
19:12This is installing it in anti gravity, which is absolutely fine. But you see, super base access token is the only thing I need here. Just click on that, opens up this page, and what you can do is just generate a token basically.
19:20So 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 an example, I'm gonna set it for one day, click on generate token.
19:29Once 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. If 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.
19:49But 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. If you're not connected to GitHub, open this up with the CLI.
20:02If 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, and then we just create a brand new token.
20:13We 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. Now if you don't know, Vercel is the place where we can basically host our websites.
20:23The 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. This lets have websites.
20:31And 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. Great.
20:39So since it's not installed, we can actually do this together, which is amazing. So I'm gonna copy this code here. And then at the top, I'm gonna click on terminal.
20:45Click on new terminal. And then if I just enter in this code here, it will then open up, which is fantastic. Yes.
20:51We're on GitHub. Yes. That's fine.
20:52And then we go for yes. Log in with the web browser. Awesome.
20:55Don'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. We 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.
21:08And 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. Please proceed.
21:18Now it's completed. Allegedly, it's all pushed up now and ready on Versalm. So 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.
21:28We could share this with our clients. We've got lots of cool stuff. They can sign in, which is awesome.
21:32Let's refresh it and put this to the test. Wonderful. So we land on here, which is cool.
21:35And now, basically, we have this website so we can share it with everybody. Let's go ahead and create a brand new account. So we just basically fill up this with some information.
21:41And then once we've done that, we can click on create account and see what happens. Beautiful. We saved that.
21:45And would you believe, now we are in our account, which is fantastic. You can see everything that we've got here. Hey, welcome back, which is decent.
21:51Now the key question is, what happens if I refresh page? Does it remember who I am? So I've done that.
21:56It has. Yeah. Cool.
21:57That's really freaking sweet, actually. So now we know that it's fully connected and individuals are now creating an account. So 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.
22:08Not with Claude. So I've come back over. Let's open a brand new Claude session.
22:11I'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. What I'd like to do next is integrate Stripe into the dashboard.
22:21So 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. 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.
22:35And 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. Now I know the specifics.
22:44With 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.
22:54So 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. Okay.
23:01So 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. So on the left hand side, let's go to product catalog.
23:08Let's click on create a brand new product. Cool. So I've given it a name, really brief description.
23:12Let's add you can add the image if you want to. Really easy. What we're gonna do is come down and make it a 10 pounds per month subscription.
23:17Bold monthly. That's awesome. Click on add products.
23:19Give that a hot second, and that will load. Cool. And now we have a monthly VPN running at 10 pounds a month.
23:23And 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. The first one is a secret key.
23:32So we'll find that on dashboard developers and API. So let's go ahead and check that one out. So if you come down, you won't be to see it.
23:38Let me just exit full screen. And then what we're looking for is the secret key. So what just gonna do is copy that, then come back and share that with Claude.
23:43And then it needs a publishable key, 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.
23:51It'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. If you click on send to sandbox, it'll drop down.
24:02You 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. And core detail is that if you give it those two pieces of information, Claude Co can actually come over and grab the product ID.
24:16Just 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.
24:23I found everything I need. Here's the price ID. It's £10 a month.
24:26Let 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 this.
24:37To 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. So we're gonna click on this one right here, for example.
24:45Now 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. Wonderful.
24:51So now it is officially complete. So we can test the ad and create a fake account. So let's go ahead and do that.
24:55So 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. Also interesting, I love this little graphic, by the way.
25:07You just need to make sure you always enter the code. Hey. Publish this to GitHub so you always get the latest version.
25:11Great. So now let's actually go ahead and test it. Let's click on upgrade to 10 pounds a month and see how this works.
25:15It should boot me out and send me directly to Stripe. Cool. So now it's opening up, and it's giving me in Dirhams because it knows I'm in the beautiful Dubai.
25:22So we're gonna give it some fake information. Let's go ahead and do that. By the way, you wanna test, just do 424242 and it works.
25:28Give it a random name on a card. It's fine. And click on subscribe, and we'll see if this works.
25:32Give 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 at the top, which is fantastic. It's an art processing.
25:39We've got our logo. Highly recommend that you have an image. Definitely elevates it somewhat.
25:43Wonderful. And then it says, hey, you're now on pro. Your subscription is active.
25:47Enjoy unlimited access, which is great. But 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.
25:55I basically said that I paid for the upgrade. It wasn't reflected in the dashboard. Just make sure that we're saving that to super base and that all works functionally correct.
26:02And 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. 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.
26:17Now 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.
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.
Named ideas worth stealing.
00:52acronym
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 forAny AI-assisted web project or client site workflow
10:54concept
Improvement Velocity
Evaluating AI tools by their rate of improvement over time rather than current capabilities alone
Steal forTool selection decisions when the category is moving fast
How they asked for the click.
VERBAL ASK
26:17next-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.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
