Claude Code + New Stitch 2.0 = UNLIMITED $10,000 Websites
By Jack Roberts
Summary
Topics Covered
- Stitch Loop Enables Autonomous Pages
- Stitch Ideates Researched Designs
- Redesign Generates Visual Blueprints
- Design MD Codifies Style Blueprints
Full Transcript
Imagine if you could combine Claude Code with Google's number one design agent, Stitch. This brand new update lets you
Stitch. This brand new update lets you turn Claude Code into an AI design agent that can research, ideulate, and build beautiful apps and websites without the need to be a design expert, but only if
you know how to do it properly. So, in
this video, I'm going to show you exactly how to combine Stitch with Claw Code and anti-gravity so you can build beautiful designs faster than everybody else and get light years ahead of your competitors. And if you don't know who I
competitors. And if you don't know who I am, my name is Jack Roberts. I'm in the UK right now, but I built and sold my last tech startup with over 60,000 customers. And now I run a very
customers. And now I run a very profitable AI automation business. So if
you haven't already, grab that coffee and let's dive straight in. Now Stitch
is Google's number one design agent. And
when you combine that with Claude Code, you unlock very cool new capabilities.
You can build beautiful websites and wonderful, gorgeous apps. Now, Stitch is all about designing visually. We can
build beautiful websites through prompting through different strategies we come from a channel. But the idea of Stitch is that you can visually see things, edit them and generate them from a visual point of view. There are also so many new features that have just come
out. It is now powered by the world's
out. It is now powered by the world's best design model, Gemini 3.1. It can
find ideas for you. You can basically say to it something like, "Bind me." As
you can see right here, for example, find me the top three websites, the top three coffee websites on the planet. and
then it will design you on based on what they have, their images and exactly everything that's working for them. You
can edit text dynamically. So you you no longer have to say hey do this, do this.
You can within the visual interface edit a text and information there. Now you
can do this within cloud code and also anti-gravity in an unbelievably easy way. Your agent will actually enhance a
way. Your agent will actually enhance a design prompt that you wouldn't normally get just using stitch by itself. You can
build these programmatically. In other
words, as many as you want to for your specific brand guidelines. You can edit screens. You can generate different
screens. You can generate different variations. You can even achieve visual
variations. You can even achieve visual consistency across all of your designs within Stitch. And with anti-gravity, it
within Stitch. And with anti-gravity, it is as simple as a one-click install. And
we also have several new skills with the Google official MCP. We have also a design MD that will scan any project that we build to get a design architecture, a design blueprint that we
can replicate across anything. Of
course, we've got the stitch loop, which allows you essentially to build out multiple screens for your app, your website without you even having to be involved in the entire process. The
stitch loop, if you don't know, is just autonomous multi-page generation. Claude
builds one screen. It almost passes a baton file to itself to go and complete the rest of them. We've got enhanced prompt, which will improve the quality of the prompt for your websites and apps. We've got shading UI that bridges
apps. We've got shading UI that bridges stitch designs into shadow components with the best practices based in. And
then we've got remotion if you want to, you know, walk through video from stitch screens with zooms. Ultimately though, we have a full pipeline from ideation design system build and then deploy. Now
to get the most out of this connection between stitch and claw code and anti-gravity, I'm first going to explain some of the brand new features that exist within stitch. And when we understand that, we can take your
designs, your websites, and your apps to a completely new level. Now, when you come over to stitchwithgoogle.com, our journey begins. Now the first new feature I want to put on your radar cuz
it's very cool is this idea of ideation.
So to do this you're going to come down here to ideulate. Okay so you can click on this. Now of course you can always
on this. Now of course you can always ideate with the model. This just makes it in my view easier and it's a little bit more visual. So I could say something like hey there I'm looking to start my own SAS. What I'd like you to do is do some market research and find
out three SAS companies. Give me three different designs for a SAS pricing page. Again it could be anything. It
page. Again it could be anything. It
could be give me three different ideas for I don't know, you know, what color scheme should I have for my business? My
business is about ABC. So, think of this as a place to throw out your ideas, your questions. If you're thinking, you know,
questions. If you're thinking, you know, I kind of want to design for this thing, but I'm not really sure what it should look like, feel free to spitball and ideate. Direct conversations with models
ideate. Direct conversations with models aren't amazing at this normally. Because
the cool thing about Stitch is it will throw back at you three different designs that you can then pick, select, and go deeper with. Then once you've done that, basically we'll come back with three different options. The
minimalist utility inspired by Stripe notion. And so I'm going to say, "Dude,
notion. And so I'm going to say, "Dude, they all sound great. I would like all three. Please just generate me three
three. Please just generate me three different visuals for me to choose from." And so now we've asked it to
from." And so now we've asked it to proceed. It's come up with three
proceed. It's come up with three different strategies. It's done all the
different strategies. It's done all the research, which is wonderful. You can
come down and take a quick look at everything it said. Typography,
interactions, ROI, calculator. Look at
the level and depth it's got here, guys.
Really, really cool. So, what we're going to do is I'm going to go ahead and say, "Hey, sounds great. I'd like to design um an example for all three of And what we want to do as well is just highlight all of them like so. So all
three are selected. Then click off and send it off. Remember, you might want to wait a few minutes. Well, it goes ahead and and does this. This is more of a think of it as a sniper. You're really
trying to get something decent and some of quality that's been thoroughly researched with a very clear strategy. I
mean, even if you click into this one for example, right? Product overview for designing directions, screens, key workflows, use it as on a plans overview, color palette, typography, all very very cool design tokens. It's gone
into a lot of specifics to help the model gauge to build something really cool. And just like that, based on all
cool. And just like that, based on all the design guidelines, we have three different options. We've got this pink
different options. We've got this pink and black one, which is pretty cool, right? Look at this. We've got all this
right? Look at this. We've got all this information in complete upgrade. That's
cool. Second one here. This is a kind of Times newspaper field. Price to tell to ambition. And this is all based on
ambition. And this is all based on Russo. I think this is really cool. And
Russo. I think this is really cool. And
welcome to professional. Very, very
decent. And then we have this one here, right? Choose a plan. Different options.
right? Choose a plan. Different options.
And you can do essentially whatever you want to. Now, let's say for example that
want to. Now, let's say for example that we like the style of this one, but I want to change some of the text. I can
come down here, click on this, click on modify, click on edit, and I can click on this and say pricing tailored to desire. And I can change the text
desire. And I can change the text directly on anything I want to. What I
can also do here if I wish is I can highlight a page and click on this and say, hey, create me a landing page for this, whatever I want to do. Right?
Really cool. So, now it's in that style.
And this is how stitch works. Obviously,
the idea being that you stitch things together to build out page by page. And
as you can see, what it's done is it's got a when you want to buy it, this pops up. Great. And then a dashboard. So it
up. Great. And then a dashboard. So it
just gives us the ability to edit things in your app, in your website, page by page. So if I like welcome professional,
page. So if I like welcome professional, maybe I'm like, actually, dude, can we have confetti on this page, please? And
let's just give it a little bit more of a warmth to it. So some kind of image and improve the graphic on it here, please. Exactly the same thing, right? I
please. Exactly the same thing, right? I
can kind of pick different things and change it and amend it and design it kind of like basically section by section which you can't do in a standard builder. And as you can see I just want
builder. And as you can see I just want to call out that you can have multiple different queries working at the same time. You don't get kind of logger
time. You don't get kind of logger jammed behind one thing then you're waiting then you go again which I think is a great feature and then we can come back and we can see that it's actually built out built with architectural
precision right so this has gone a little bit too large so we can click on this we can modify it we can edit it we can do various different things. It's
great that we have the ability just to literally edit the text as you want to.
There we go. Okay. So, this is a certain size. You can edit with AI and you could
size. You can edit with AI and you could say if you wanted to something like, "Hey dude, could you just decrease the size of a text so it fits in like no like basically one word, one line, please?" Again, you can make these
please?" Again, you can make these little mini edits as you go about, no problem whatsoever. And again, it's
problem whatsoever. And again, it's built it with the exact same style so you can build out all this sort of stuff, which is awesome. And then
essentially, it'll go ahead and do those individual changes for us. So the idea is that we just pick one of these three styles that we like and we can build out the entire website. But what we can do next with the latest image generation model is literally amazing. Now the next
thing that you can do within stitch which is really important for you to understand is redesign. Now this is fantastic. So if you come down here you
fantastic. So if you come down here you can select redesign. So what this does is leverage the powerful nano banana 2 to make anything we want to. We can find a website we think is cool. Let's say
it's rocket. We can come over drop the URL in. Come over here and grab a
URL in. Come over here and grab a screenshot like so. And then just clipboard this. come back over to Stitch
clipboard this. come back over to Stitch and drop it in. I'm going to say something like, I would like you to redesign this for me, an entire website based on this URL. So, the beautiful image at the top, and then we may want
things on there like testimonials, uh, companies we work with, how it all works together, uh, FAQs, and then a CTA and a beautiful chat interface at the bottom.
Wonderful. Okay. And at this point, you can make any suggestions you want to.
And maybe you didn't grab an existing website, right? Maybe you were on a
website, right? Maybe you were on a website like Dribble and you want to find out existing design inspiration by searching for websites. Wherever the
place is, drop your designs in as many as you want. Come over here and then literally go off and click on redesign.
Now, one of the cool things here about leveraging Nano Banana to do this is we're not asking an AI to build the website. It's literally generating a
website. It's literally generating a gorgeous, beautiful image which has a way better reference point for us to build from than just trying to build up the website with code which should mean that we should get a better quality
output on our first time. Wonderful. And
it's come back now with a mobile design.
So come check this out. Think it type launcher. We've got these different
launcher. We've got these different companies we work with. Describe how it works. Testimonials. Then we've got this
works. Testimonials. Then we've got this chat style interface. I think that is gorgeous. Like that kind of fant, you
gorgeous. Like that kind of fant, you know, that kind of like celestial background. Obviously, some bits we'd
background. Obviously, some bits we'd need to move around a little bit, but think of it as a concept art that kind of captures the essence of what you want to say. Then we've got some FAQs. And
to say. Then we've got some FAQs. And
quick FYI, by the way, you can decide whether you want app or web on the homepage here. I chose app for that one,
homepage here. I chose app for that one, hence why we've got an app type design.
And then I did one for you on desktop.
So, this is the original image. I didn't
ask it to change anything, hence why it's not done anything, but you can see it's recreated this. We have this trusted by innovators, love by builders, which is, I think, a really beautiful touch. Probably bring those logo size
touch. Probably bring those logo size down a little bit. How rocket works. And
then we've got this I think gorgeous FAQ section and then something at the bottom. And if I show you one I did
bottom. And if I show you one I did earlier, think it type at launcher.
Again, really gorgeous. Love these
logos. Love these kind of interactive elements. And also the, you know, the
elements. And also the, you know, the design of this is fantastic. It's
essentially an imagination engine. Now
this is complete. I'll show you exactly how you can take this to a completely new level by using claw code and how easy it is to get it into anti-gravity.
So once we're in anti-gravity, it's super easy. I'll show you this first
super easy. I'll show you this first then how you can get it into cloud code whether you're using VS code or anything you want to all you're going to do is come over here to these dots click on MCP service and if you just type in simply stitch and this is one of the
cool thing about using Google products is how they're sort of all integrated with one another you click on stitch and all you're going to do is click on install like that's it it's asking for an API key we might need that so we're going to click on stitch API key then
once you're on this page guys you're going to come down and click on copy key I should also call by the way that your daily redesign credits you got 15 a day just because it's brand new feature and they just make want to make sure that they're bottling everything up properly,
but you may run into that as you build quite aggressively. So 15 a day is cool.
quite aggressively. So 15 a day is cool.
And then you come back over to anti-gravity and enter your API key in here. But once that's complete, if you
here. But once that's complete, if you come on to a manage servers and then when you click on refresh, you'll see stitch will appear here for you on the left hand side with all the different things that you can do. Now if you were trying to install this on cloud code,
all you would do is on the left hand side, come over to if you like extensions and make sure you've installed this claude code for VS Code like so. Just type in clude and it will
like so. Just type in clude and it will appear. Then we've installed that. We're
appear. Then we've installed that. We're
going to sum it up by clicking double clicking in the central panel and you'll see this orange thing and then it's there. And now essentially we can start
there. And now essentially we can start chatting to claude code to get this installed. And then to add this to
installed. And then to add this to claude code, all you're going to do is enter in this base click code here which is claude mcp ad transport. I'll put
this down below for you in the description. So hit enter with that and
description. So hit enter with that and then it will add it to your claude MCP and then claude can now go ahead and use that. We said that's fine. Then we'll
that. We said that's fine. Then we'll
just need to provide to it the same API key that we did with anti-gravity. And
then you can provide your API key with claude. We'll add it to your
claude. We'll add it to your configuration. And from that point, you
configuration. And from that point, you can chat with it in claude. You can chat with it in anti-gravity or whatever environment that you're using it in. So
what we need to do then is really install these skills for MCP. So we're
going to come over to this GitHub repo here which has got all the really cool things we can do. This is a Google official one. What we're going to do is
official one. What we're going to do is come and grab the code, click on copy, come back over to anti-gravity and claude, and we're going to say, "Hey there, I would like you to add these skills, please." And essentially, it's
skills, please." And essentially, it's going to come down, and then we're going to enter that in right there, and it'll just basically replicate those. Once
again, we can also use a clip code. It
really depends on whichever whichever manner in which you're using the color code. All right, wonderful. So, let's
code. All right, wonderful. So, let's
actually test it that it knows it's got a real thing. So, let's open up right now into a new browser and say, "Hey, dude, could you just tell me what the latest design was that I created in Stitch?" So once we know it gets an
Stitch?" So once we know it gets an answer question, we know it's fully connected. And just like that, it's come
connected. And just like that, it's come back and confirmed that the latest design we have is Rocket AI chat interface with a project ID when it was last updated and everything that works, which is freaking amazing. Now, the
first thing that we want to do is get what we call a design MD. So when you've been in Stitch and you've designed something, you think, Jack, I think this looks gorgeous. Maybe it's this design.
looks gorgeous. Maybe it's this design.
Maybe it's this design over here with this gorgeous, beautiful, whatever the thing is, play around with it. Get
creative. When you've got that, what effectively you want to do now is get the design MD, which is the the blueprint, the design blueprint of this, that we can actually codify the style.
Now, I asked Stitch to turn all of these things here into a landing page for us.
Okay, now these are images. You see, if I modify, I can annotate. What I can do on the canvas is like maybe I want to get rid of these trees. I can just say, hey, you know, remove these trees or I
might want to hire this rocket and I could say something like make this bigger, right? You know, you get the
bigger, right? You know, you get the idea. I get to do whatever I need to
idea. I get to do whatever I need to here, right? I can draw comments. I can
here, right? I can draw comments. I can
even draw further on here. Let's just
come over here and draw this guy up. You
know, it's really cool. You can make all these really cool changes if you want to. So, I can come down here, maybe
to. So, I can come down here, maybe leave a little note as well, shall we?
Here. Just say something like, I know, make bigger. Who doesn't want to make
make bigger. Who doesn't want to make the rocket bigger, right? And if I click on apply, now once you've designed everything to the standard that you like, what you want to basically do is come down and ask it, I would like you to create for me a design. MD based on
those designs. And then what this will
those designs. And then what this will do is call the stitch MCP list of screens, find them. Then it will fetch the HTML code from the main page to extract actual design tokens and also get the project level metadata. And what
this will enable you to do for your clients, for your business, is replicate any of those pages in the exact same style that you would like. So it's all going to be consistent. And then just like that, now we've actually created
now with Claude is this wonderful breakdown. And again, you can do this in
breakdown. And again, you can do this in the anti-gravity chat, you could do this in VS Code, you could do this anywhere.
The point is that we're using the model to go ahead and build the stuff. So
we've got primary project ID and then we've got the visual theme and atmosphere, the color palette, the ROS, all the sort of stuff that we like, which is really cool. So what we can now do is actually ask anti-gravity, ask cla code to go ahead and build us an
additional page. So let's go ahead and
additional page. So let's go ahead and check the page to see what would make sense. Well, what I'm going to do, guys,
sense. Well, what I'm going to do, guys, is actually bring out the Gemini 3 Pro high cuz it's got nano banana native to it. I'm going to say, "Hey, dude. What
it. I'm going to say, "Hey, dude. What
I'd like you to do is redesign the images so that they are a kind of jibli beautiful art style." I think that'd be really great. And then in the same
really great. And then in the same style, what I'd like to do is go ahead and add for me a pricing section on the page and then show me what that web page looks like. Beautiful. So now this is
looks like. Beautiful. So now this is complete and it's all done. Let's see
what it said. It's done. Generated the
new images, added a pricing section. And
if you refresh the browser or open this up, we can see it. So let's grab this HTML and see what she's up to.
Beautiful. So we check it out. We've got
it here. Think it type launcher. We've
got the ask me anything, which is cool.
We've got the frameworks here. Trusted
by these companies, one prompt, the whole app. I love the design of these.
whole app. I love the design of these.
This is gorgeous. Son of people will try it. We've got a templates. Happiness
it. We've got a templates. Happiness
speaks back end. Are you ready? We've
got some different toggles we can play around with here. Sample pricing. It's
added in the pricing section. FAQs. This
is this pretty sweet actually. I quite
like that. And then here we go. Start
building our production ready apps. I
think the highlight really is the visual imagery of this website which I think is just super crisp. And the cool thing is guys, what we can do now once we get that style and design that we really like. We can actually create a brand new
like. We can actually create a brand new chat and say, "Hey, I want the exact same style. I want you to go over and
same style. I want you to go over and create a new stitch book for a SAS company that is selling VPN subscriptions." And if you're wondering
subscriptions." And if you're wondering how I got this page, it's just flipping between open editor and over here to agent manager. That's it. And on the
agent manager. That's it. And on the left hand side, we can see everything to do. So here's the redesigning rocket
do. So here's the redesigning rocket images and creating VPN. Effectively, an
anti-gravity. We can manage multiple of these at the exact same time. And then
if I wanted to publish this on a website, all I would literally do is let's come over to start a conversation.
Going to go over to we're going to go to Stitch, which is where all this stuff is happening. Then I'm just going to say
happening. Then I'm just going to say something like, "Hey there, publish this to GitHub and Versel." And if you don't have a connection to GitHub and Versel, you can basically just say, "Hey,
connect me to the GitHub CLI." And it'll open a brand new page. You enter in your credentials and then Versel is just a website. Basically, it's a website that
website. Basically, it's a website that lets us host a code that lives on GitHub and we can give that code to anti-gravity include and it will walk you through the process and then we can essentially host it up which means when
we give it very simple command it will open up and log in. If you're unsure how to that process I'm going to link up on screen takes like 3 4 minutes. It's dead
straightforward. Now, as you can see guys, it's now also started creating this new thing and look at what it's done here guys. It's given the full prompt based on our exact style. So,
it's got dark modern futuristic aesthetic. Here's all the information
aesthetic. Here's all the information it's given it. Now, Stitch is doing this for us automatically in the background.
We didn't even touch stitch. I just went over to it and you can see this has all been prompted by Claude based on our existing designs, meaning we can spin up as many of the want to as many pages in our existing websites and apps as we
want just by prompting it. And we'll get the same kind of consistency using Stitch. And when I do check out the app,
Stitch. And when I do check out the app, I'm really impressed by the interactivity that it's managed to smash. The coolest thing I think of this
smash. The coolest thing I think of this entire workflow when I come over to Sturge is realistically the ability to build things. like this is the one that
build things. like this is the one that I said, "Hey, rebuild it in this particular style." And it's doing this
particular style." And it's doing this for this VPN thing, which I think is really cool. Now, understanding how to
really cool. Now, understanding how to build beautiful websites is amazing, but it's only one part of a multi-part system for building out systems on websites. Whether you want to sell it or
websites. Whether you want to sell it or scale your own business, connect your CRM.
Loading video analysis...