This content provides a comprehensive guide on effectively utilizing Claude Code, an AI coding agent, in conjunction with the Anti-Gravity IDE to accelerate software development and build high-quality applications. It emphasizes practical application and demystifies advanced features for users of all skill levels.
Mind Map
Cliquer pour agrandir
Cliquez pour explorer la carte mentale interactive complète
Claude Code is the most powerful coding
agent on the planet if you know how to
use [music] it correctly. I use Claude
every single day in my business. I have
thousands of people learn it, but most
people don't leverage its full
capabilities because they massively
overcomplicate things. [music] And in
this video, I'm going to show you
exactly how to master the 95% of Claude
Code that actually matters and how to
use anti-gravity to make building with
Claude Code even easier so you can build
faster to a better quality even if
you've never touched Claude Code before.
And if you don't know who I am, my name
is Jack Roberts. [music] I built and
sold my last tech startup with a 60,000
customers and now I run a profitable AI
automation business using [music] Claude
Code. So, if you haven't already,
grab that coffee and let's dive straight
in. In this video, here's exactly what
you're going to learn. You're going to
learn pricing to help you save you some
money, how to set it up, how to launch,
optimize, and also store your projects.
I'm going to show you hacks for
performance that most people don't
mention. And we're going to cover
prompting, bug fixing skills, and also
MCPs, which stands for model context
protocol. It'll be super easy for you
after this video. And we're going to
cover parallel agents, also to publish
your first site across two levels of
difficulty using Google's number one
coding agent, anti-gravity. And you'll
also get access to these guides for
short codes, starter pack, nine Claude
Code workflows, an executive prompt
dashboard, Claude AI skills, and also
connecting Claude as well. All the links
will be available for you down below in
the description. So, let's start with
how to set Claude Code up. I've also put
timestamps down below and so feel free
to skip around if you never seen them.
Now, there's two ways to use Claude
Code. You can use it for free with an
anti-gravity with limitations or we can
join one of the plans. So, to use Claude
Code on your terminal, you're going to
want to grab the pro plan, which is
around 20-ish dollars per month. Then
what I recommend that you do next is go
over to google.com and actually download
the Claude Code app, which you can
download from this page. I'll put a link
down below and let you use it. Now, the
second piece of software that we're
going to be using here is Google's
anti-gravity. And this is the great
opportunity to explain the difference.
So, Google's anti-gravity is an IDE. It
looks a little bit something like this.
And all it is, it's an environment, an
integrated development environment. That
basically means that we can chat with
Claude Code on the right-hand side or in
the terminal. We can see all of our
files on the left-hand side and we can
publish things. It's just a way better
user interface and it's got some real
cool hacks and features that make it
easier to use Claude Code. And it also
makes installation of Claude Code
really, really easy. So, the first thing
I'd like you to do is go ahead and
download Google's anti-gravity. And just
so you know the power of this, by the
way, if you take for example this app
here, which is connected to my
community, I have coded this within one
day, all with Claude Code. I basically
just said the things I wanted, it would
build it. We've got the stats down here
on the left. We've got pretty much
anything we want in this application.
And I built this within 24 hours. That's
how powerful Claude Code actually is in
terms of what it does. It's super duper
impressive. So, what you're going to do
is come over and download anti-gravity
after you've got your Claude
subscription. But even if you don't,
with the Google account, you can
actually use Claude for free. So, there
are three ways that we can access Claude
within anti-gravity and I'll also show
you the terminal. So, what we can do on
the left-hand side is you can click
here. Now we have access to these
models. You have Gemini 3.1, which is
Google's premier model, and we have
Claude Opus. Now, when we say Claude
Code, really what we're talking about is
the ability for Claude to develop and
create code and do various different
things for us. So, a little bit of
housekeeping and then we can actually
show you how you install it. So, the way
this works, now I know this can look a
little bit overwhelming, but I promise
if you stick with this, it's going to
make perfect sense. So, the left-hand
side, anti-gravity works in a folder
environment. So, what we're going to do
is open a folder here like so and give
it a random name. So, I'm coming down
here to new folder and we'll call this
one Claude Code Together. All right, and
create this new project and click on
open. Now, effectively, we're creating
files within this particular project.
Now, we need to actually go ahead and
install Claude Code on our laptop. So,
we can do that by coming here and say,
"Hey, install Claude Code."
And what this will then go ahead and do
it for us. Now, alternatively, we can
use something called the terminal, which
is this. You can access this by command
plus space and typing in terminal. And
then when you do that, this will open.
Now, this really is code, so there's not
an AI in this. And effectively, what you
can do here is come down and type in,
once you've installed it, Claude. And
then you can actually chat with Claude
in this environment. And you can pick
the folders and it gives you some
different access and functionality. But
it is way easier to use an IDE if you're
getting started. So, if it isn't
installed, anti-gravity will just go
ahead and install all the components
that you need. Now, there are three ways
you can use Claude Code within
anti-gravity. One is here on the
right-hand side. The second one is you
come over here to your extensions on the
left-hand side. Think of these like the
Chrome Store within Google Chrome. And
what we can do is install this one here,
which is great. And we install that. And
once that's installed, what that
basically means is that whenever you
have something open, you can click this
and it's a bit of a nicer user
interface. So, I could say, "Hey there,
what model is this?" Right? And you're
effectively chatting with Claude in the
side here, which is great. And you can
have a little conversation with us and
you can tell us, "Hey, this is going to
be Claude," which is great. The third
place we can use Claude Code within it
is if you come here to the terminal, you
click on new terminal, and then
basically that thing that we just saw is
available here. And all you can do here
is you do forward slash Claude. You say
his name and he appears magically. So,
one cool thing I just want you to
understand right now is that if you use
you are using Claude with an
anti-gravity here and you can actually
use it for free to get started, but
you'll have less limits.
There are some functionalities that are
not available within here. For example,
if you wanted to use Claude Code on your
phone, down here I can do forward slash
remote control.
And now I can actually log in with my
mobile, right? But for example, over
here, you're not able to do that within
the interface. So, there are some
features if you want to use that, we'll
use the terminal. To make it easy, we
can right click on this, come over to
come down to panel position or line
panel and put this on the right-hand
side. I'm ready to rock and roll with
this. And what we could do if we want to
have several Claude's running at the
same time, we just literally click on
this plus button and all of a sudden
this is a new terminal and we just say
Claude and we can have as many as we
want to. So, just to recap at this
stage, we've downloaded anti-gravity,
we've accessed Claude, we know how to
use it in many different ways. And now
you've got that downloaded, now you're
ready to pretty much, if you want to,
start building your first project. Now,
before you can build your very first
app, there's five things that you need
to master about Claude Code and
anti-gravity. And the great news is that
anti-gravity makes this super easy. The
first one is that when we chat with
anti-gravity and Claude Code, and just
for reference, anti-gravity is the jet,
the kind of fighter jet, and Claude Code
is the pilot. For example, we can switch
that pilot out from Claude to Gemini or
a different model if we want to. And as
I said, remember there are two ways you
can use Claude. One is within the
anti-gravity ecosystem. Alternatively,
you can come up here to terminal and
click on new terminal.
And if I just type in Claude, he will
appear. Now, for simplicity's sake,
we're going to focus in on using Claude
Code within the anti-gravity terminal
because that is a lot easier to learn as
a beginning and some of the stuff in the
terminal is a little bit academic. The
only difference is that in the terminal,
it uses less power, so it's less
overhead on your computer and it also
gives you access to some different
features, like I said, like things like
remote control. So, what I'm going to do
as I explain these features is I'm going
to briefly explain how it would work in
the terminal for you, but we're going to
focus in on anti-gravity so you get the
full breadth of understanding. So, first
thing to understand is the mode. So,
whenever you start off any project, what
I found really helpful is you want to
begin either in fast or planning mode,
which is really cool. And also, if you
click Claude Opus here,
you can see you've got a thinking. So,
switch between those two things. And
then if I'm in the terminal, if I do
shift and tab, I can actually switch
between plan mode and normal mode. So, I
would go for plan mode at the beginning
of a project when I want to spar on the
idea. Remember, these are 500 IQ models.
I don't mean technically 500, but the
idea is that it's really good at
executing. We just want to make sure
that it's executing on the right thing.
Now, the next thing that we want to do
is have understand the difference
between global and local rules. So,
think that we're building a project,
maybe we're building a website together,
which we're going to do in a second,
right? There are such such things as
global rules. Now, this is stuff that no
matter what project you run, whether
it's a website or we're building an app
for the government or whatever it is,
these rules apply everywhere. And then
we have local rules, which are just
confined to the project. So, if we're
just building a website, they'll just be
here. So, the way that you set those is
you come up here to these dots and you
come down to customization, okay? And
then you're going to come over here,
you've got rules and you've got
workflows, all right? We're going to
look at rules. And what we're going to
do down here is we're going to add in a
click on this one here or add a brand
new one if you want to. And I've got
some I've got some information here,
okay? So, Jack likes the color blue and
gold, never forget. But more
importantly, I might say, "Hey, whenever
I ask you a question, I want you to
think around corners. I want you to
challenge my thinking. Always think
about the intent behind the question.
Don't be a sicko fan. Always focus on
building gorgeous and beautiful
responsive stuff." So, these exist
within the global ecosystem. So,
whatever project I'm using now to build
with Claude Code, it will know that,
right? So, I come off this for example
and we say, "Yes, we're happy to save
that." And I come back to the agent and
I say, "Hey there, dude, what is my
favorite number and my favorite colors?"
Okay? It should know that information.
So, give that a second. It should say
blue and gold and 87 if it knows that.
Awesome. So, now whatever project I'm
in, it has that in its global memory.
Now, likewise, on the left-hand side,
it's local memory. So, I might say
something like, "For whenever you're
building something in this project,
always make sure that the design is
gorgeous and blah blah blah." So, these
are going to be design specific things
that we're going to include as we go
through the video. And this brings us to
a very important part of coding with
Claude Code and that's what we call
context rot. So, the idea is that these
models have a great context window, a
couple of hundred thousand. It can be a
million if you're using different
features. But, the point is that after
it reaches about 50% of that number, it
starts to hallucinate and the
performance gets worse. So, if you're
using that with an anti-gravity, all
you're going to do is click on brand for
a brand new window and restart the
conversation. The general advice is one
window for one task, then refresh it. If
you want to, you can give it a prompt
that says, "Hey there, I'm going to move
this over to a new window with a fresh
context. Write me a summary document
that explains what we've been doing so I
can take it to the next conversation."
That's what you need to do if you're
with an anti-gravity. If you're using
the terminal with an anti-gravity or
just on your computer, what you can what
Claude will actually do is automatically
refactor its memory once it gets to a
certain point and so you can keep it
within the terminal, but it's always
good practice to open up a brand new
window. Now, this leads us very nicely
onto something called commands. So, if
you're building with the terminal, you
can be really specific. So, what you can
do with the terminal is you can do
forward slash and give it a command. So,
I could say, "Hey, remote control." and
it does it. But, honestly, what's really
cool about anti-gravity if you're not
using a specific feature is you can kind
of just explain it in natural language.
So, for example,
one of the things that you should always
do for every project here is something
called Git initialize. GitHub is a place
where we store documents. It's a We call
it a repo. In other words, a repository.
So, if you think that we're building a
project here, we want those files to
live online somewhere in a very secure
environment so that we can host it and
effectively, we can have websites online
and apps and things like that. So,
that's where the where the files
actually live online. So, what's really
good practice for everything that you
build is to create a repo. So, you can
literally say to anti-gravity here,
like, "Hey, Git init." or in plain
English, "Hey, create a GitHub
repository, please, for this project."
Now, the coolest thing about this is
that if you don't have the right
credentials or connections, anti-gravity
will explain that to you, open up open
up tabs, and help you sign in so you can
literally connect everything. Maybe it's
your first time, but I just say, "Great,
we need to connect it via what we call
the CLI, which is command line
interface." and it will let you connect
that for us automatically. And you can
see, I'm already connected here to It's
Jack, so it'll do that for us straight
away. I'm just to show that as an
example, I said, "Hey, disconnect me so
I can show you how it works." So, it's
got this bash command, Git auth login.
Again, you could enter that into the
terminal or here. So, I'll just say,
"Hey, dude, sounds good. Open up the
GitHub CLI and let me let me sign in."
And this is literally how it works with
all this stuff. And what it means is you
can now chat and use Claude Code with
plain English to pretty much download
anything that you want to, which is
great. So, as you can see now,
anti-gravity is running that command on
the right-hand side. And as you can see,
it says, "Hey, here's your one-time
code." So, we're going to copy this,
make sure it's correct, come back over,
and as you can see, it's now asking us
to connect. So, if you don't have a
GitHub account, just connect that. And
once you click continue and you connect
these two together, you can effectively
do anything. So, we're going to enter in
the code that we got, click continue,
and then now we are fully connected and
we can authorize GitHub. It's worth
calling out, by the way, as well, but
again, you can do this in the terminal,
but anti-gravity can work you through
everything. And on the first document,
I've got these Claude shortcuts that
explain everything that you can do
within Claude Code. So, as you can see,
you've got all these different commands
that you can use within Claude Code. Or,
if you want to know what these are, you
can just speak to anti-gravity in
natural language. Wonderful. So, now
we've learned some of the basics of how
Claude Code with an anti-gravity
functions, what I'm going to use these
to build a beautiful website all within
anti-gravity using Claude Code. Now, to
do this, I always begin all of my
projects with this framework, which is
called the BLAST system master prompt.
Effectively, what it does is a series of
steps that we want the entire model to
go through whenever it's building
anything. Now, the way this begins is it
creates all the different folders for
us, task plan, findings, and Claude.md.
It's then going to go through five
different stages for our build. It's
going to create the blueprint where it
understands everything that we want.
It's then going to look at the links and
how we can interconnect with different
things. It's going to architect the
build to build a minimal viable product
that we can actually use and integrate
with. Then we go on to the S part of the
BLAST framework, which is stylize and
refine the UI. And then we've got the
trigger. And then we've got loads of key
operating principles for that specific
document. So, again, this will be
available for you down below in the
comments. So, feel free to grab this.
What we're going to do is come down here
and I'll copy the whole thing, come over
to anti-gravity, and literally just
paste that into the description, and
then it will initialize, create the
projects for us, and then we can do
something really cool. So, what I
thought would be great to do in this one
is to actually build a website as the
first level of difficulty, then we can
take it to a complete new level
afterwards. So, for example, if I come
over to this website right here,
which is building the world's perfect
website. So, again, I'll put a link for
this for you down below. But, this is a
great, really easy way to get basically
code for your website. So, it'll build
your perfect website. What is the
website for? So, I'll say something
like, "Hey there, this is for a design
agency that is selling websites to help businesses
businesses
capture more customers and turn viewers
into buyers."
Awesome. Then we can come down and pick
what type of business. Let's say we're a
web design agency. Awesome. We can pick
a style. Why don't we go for clean and
modern? We can build our page. So, this
is really cool. So, we've got hero,
social proof, which is good, features,
and footer. I think what would be great
is testimonials. We're definitely going
to want to add and prove. So, let's
bring up testimonials to
here. I think it's going to be great.
And then we probably want a contact form
at the bottom as well, right? And that
just above the bottom. And this whole
thing, by the way, is built on best
practice for websites. It's supposed to
be just a really easy thing to get your
first uh website up and running. And
then, what should our button say?
Apparently, unlock free
website. So, unlocking is supposed to be
really good, by the way. Unlock I've met
with a guy, he had over a 10%
click-through rate on his buttons. He
had the whole thing locked down. He said
unlock was really cool. One of my
clients. And then we've got all this
will be automatically generated for you.
So, what you're going to do is come down
and just copy this prompt. Awesome. Then
we can head over to the wonderful
anti-gravity at the bottom. So, let's go
open up our scenario. Now, as you can
see now, what this is going to do is if
we just come down and check what it's
done. It has, before I initialize the
project memory, create schemas or touch
any code, I need to answer these five.
What is the North Star? What
integrations? What's the source of truth
and delivery pilot? So, let's answer
these questions together. So, first of
all, the North Star is a beautiful,
engaging website based on the below um
the below prompt. Integrations, don't
worry about any integrations for the
moment. It's just going to be a static
website. The source of truth, there'll
be no source of truth at this stage.
Delivery payload is I just want the
website to look great. And behavioral
rules, don't worry about that right now.
I just want it to be a great visual
overview for me to click. We'll add in
all this great stuff when we get to
level two, but for the time being, I
just want to show you exactly how you
get your first project. Then you enter
in the code and then you send that off.
And then what anti-gravity will do, what
Claude Code with an anti-gravity will do,
do,
will go ahead and start to develop out
all the project files for us so we can
actually use and leverage them. Now, as
you can see now, guys, it's actually
created a full task list, which is one
of the really cool features of using
anti-gravity with the Claude Code model.
Remember, it's the exact same model
whether you're using terminal in Claude
Code or in anti-gravity. Same model.
It's just a different vehicle, right?
And in this vehicle, we have certain
visual integrations that we can use and
leverage. And I really like this. So, as
you can see, anti-gravity now has really
simplified this. It's got its
initialization protocol. It's got the
blueprint. It's got the linkages. And
again, it said, "Hey, I'm static site,
no integration." It's got the
architecture with all the different
things. And what we can do in
anti-gravity, if we don't like the look
of something, we can actually drop
comments and give it feedback, like, I
don't know,
"This looks great. Just make sure that
there is a beautiful transition between
all of them that doesn't take the eye,
but that each section has its own space.
White space is a beautiful thing for a
premium website." So, we can leave
little details like this, review the
plan, and do whatever we like to. Come
down. And that's a good little hack I'd
say as well, which is voice typing. I
love it so much, we even created a a
business around it, Glyder. It's
speech-to-text. You can use any platform
that you like, of course. Um the
interesting thing with it, though, is it
will actually help you to get things
done a lot quicker. So, on average, it's
four times faster to say it rather than
typing it. So, not only now, if you
think about it, we're limited by the
speed that we can type, but when we're
speaking, we can just get anything done.
It saves me literally hours a week. You
can do that. There's also a feature here
you can do where you can click and do
various different things. It's not
supported for Opus 4. And then
basically, we'll just let this do the
rest of its work in the background. It
starts building for us and you can see
its progress through its task list in
the middle. And one other cool hack for
you guys is whilst this is working in
the background developing everything
out, what we can do with this is click
up click on open agent manager. And this
is one of the really cool reasons why
anti-gravity is great for Claude Code is
cuz we can have as many of these working
for us in the background at the same
time. So, if you come over here, for
example, you can start a new
conversation. You can select that
project, which I assume would be working
in Claude, which is Claude Code together
here. And I can give it a prompt like,
"Hey, dude, do me a favor. Go ahead
online and find me five of the
highest-rated websites, agencies that
are selling websites to people. And then
I want you to document for me on the
left-hand side some research findings.
So, what do the top five have in common
in terms of website structure, color
palette, CTAs? And put that on a
research document for me on the
left-hand side." So, we can spin up
multiple of these agents to go ahead and
work for us at the same time. Then I
might do another one. As you can see
now, we've got Claude Code together. I
can just keep creating ones here. It's
really, really crazy how this all works.
And as you can see, I've got multiple
files here now. I can start a brand new
conversation. And again, the same thing
if I want to. Claude Code together, come
down here, keep on having the
conversations. If you want to, as well,
you can click on use playground.
Playground is a area not connected to
any file. So, I might just give it my
ideas, like, "Dude, what if How would
you go about this? Or spin up a quick
file that does this." and it'll do that.
And then I can move those files into any
project I want to. But, as you can see
now, I have two different resources
working for me at the exact same time,
which means that the project can go way
faster, which I just think is such a
cool feature. And when that's done, we
just have all the all the files and it's
all working for us in the background,
which is fantastic. And I'd also say one
of the advantages of using Claude with
an anti-gravity is it will it can
natively open up browsers for you. Of
course, you can get this extension
within the terminal, but it's great cuz
it will open up it will take
screenshots. It will analyze it just to
make sure that the visual appeal is
everything that we actually asked it to
be. And as you can see, this is now
fully live and this is one shot. So, I
have not given this a single follow-up
prompt at any point. So, what we can do
is come over and copy this in the local
host. And local host just means that
unlike an online builder like an AI
studio or lovable where it lives online,
this is living on your laptop. The files
are on that's where it's running from.
So, what you do is you grab this, you
head over to a website, and you just
enter this in and it will show you what
the website physically looks like. And
wow, would you look at this? For a one
shot, I'm really freaking impressed. So,
we've got a nice little
design thing there. Websites that turn
visitors into customers. And did you
remember guys, I expressly said my
favorite color is blue and then that's
been reflected nicely. So, we've got
some great stuff here. I'm going to come
down. Trusted by forward thinkers.
Everything you need to go online. And
look, it's on blue and gold just like we
said. So, we've got some different types here.
here.
Loved by businesses like yours. Again,
some good testimonials. Ready to
transform your online presence. And then
we've got this. We can just enter in
enter information, send message, and
then let's build something
extraordinary. Unlock your free website,
which I think is wonderful. And then
we've got everything down at the bottom.
So, you have officially created the very
first website or site or application,
whatever you want to do. Now, to get the
most out of Claude code, there's two
things that we need to master. The first
of which is something called Claude
skills. Which very recently had a
massive update and they are overpowered
in many senses of the word. Effectively,
what they let us to do is create
something that is excellent and automate
any task that we find ourselves doing
more than once. Could be competitive
intelligence, could be creating
graphics, could be vectorizing data, you
name it. And we can turn this into a
skill that we can access whenever we
want to as simple {slash} command. It is
that powerful. So, how on earth do we
get them? Well, we can do this in the
Claude desktop app as well. And I'm
going to show you both just so you're
fully aware of all the areas you can
reach these because Claude skills can be
used in any environment. So, let's come
down to the terminal. Let's create new
terminal and let's summon Claude for a
second, okay? Now, what you're going to
do, I'm going to bring this up and bring
it over so you can get a good look here,
is we're going to use the skill creator
skill. So, if you do {slash} and you
type in skills like so, this will list
all of the available skills that you
have saved in your terminal. So, I've
got six saved in this account here,
right? Which is really cool. So, you can
come down and you can basically select
the ones that you want to. Really,
really cool. The other thing that we can
do, if you do come over here and you
type in skill {hyphen} creator, you can
actually download that or activate it
and it is really, really powerful. So,
what we want to do is download the skill
creator into your environment and you
can just literally take {slash} skill
{hyphen} creator and you can download
that. Now, once you've done that, you
will be able to summon it. And to do
that, I'm just going to pull up this
browser just because
it's got a better UI. So, we double
click in here and then we bring up
Claude. Remember, we must have it
installed. And then let's come over and
have a play around with this. And I
think the best way to leverage Claude
skills is most likely going to be by
building something like a level two
version of a website. And when I show
you this,
it's going to blow your mind. All right.
So, what I'm going to do is {slash} and
we're going to pick the one we want. So,
we want to create a skill. Let's go into
skill creator. And the great thing about
the new Claude skills update is that
there are two types of skill, right? One
is a very specific way of doing things.
So, creating an invoice in our brand
guidelines, right? That's very unique to
me. That might be very unique to you.
That is never going to change. But
there's a second skill where basically
we're getting Claude
to do something better. And the thing is
Claude is improving over time. So, if it
goes from Claude 4.5 to Claude 5, it
might actually be doing a better job
than your skill. The cool thing about
this update is it if Claude 5 the
current Claude model can do it better,
it will delete and remove the skill for
you automatically without touching
anything. So, it's asking us what we'd
like to do. Do we want to create a new
skill from scratch, improve an existing
skill, or evaluate benchmark an existing
skill? So, we want to come ahead and
create a brand new skill. So, we're
going to use a skill for our website.
So, I want the ability to let's say that
I'm working with a client and they're
like, "Dude, I want you to create a
fresh version of a website." Or maybe
we're working with a client who's like,
"I love the designs and the elements of
this website. Could you do me something
similar?" Let's just say that the client
has given us that brief. Well, I want
the ability to find an inspiration from
a website to clone, to recreate the
structure of that website with
completely fresh, beautiful graphics
leveraging Nano Banana 2. Wouldn't that
be really cool if all I had to do is
drop a HTML or some data and it did
that? I think that'd be pretty cool.
So, now it's asking some questions.
Let's create a new skill. To get
started, I need some of your vision.
What should the skill enable Claude to do?
do?
When should it trigger and what is the
expected output? So, here's what I'm
going to say.
I am going to give you, let's say, a
URL. I'm going to give you a file, which
is going to be the HTML extract of a
website. What I would like you to do is
to recreate this entire website for me
verbatim, okay? Then what I want you to
do is recreate all of the images on the
website using Nano Banana 2 so that I
get my own unique images. For the
purposes of this actual experiment,
let's just recreate in a slightly
different version, but I want to mirror
everything. The functionality, the
button clicks, the animations, the
scrolling animations, the whole
structure of the website, but I want you
to recreate it all using Nano Banana 2
and the Kia API, which I'm going to
touch on in a second. So, we're talking
about bringing in an image generation
model model. How cool is that? Well,
I'll show you that in a minute what that
looks like. Then what I'm going to say
is this. Then what I would like you to
do is find five competitors and I would
like you to go ahead and scrape their
website for me. And what I want you to
do is find out best practices. So, what
are the top guys doing? The top
competitors doing? So, you need to
understand the niche of the business.
You may even ask me this question like,
"Hey, what is the niche of the business?
Give me some example of competitors."
Ask me those questions. I will give it
to you. And then you're going to go and
find the website. You're going to scrape
all the information from that website.
And then you're going to use that
information once you've created the
website to improve the text. Let me know
all the things that you need from me.
Beautiful. Okay. So, now once we do
this, we've explained everything that we
want. Now, when I show you this, it's
going to blow your mind because
essentially all we then need to do is
give it the input and then it's going to
be ready. And at the end, what I think
would be really lovely and convenient
for me is to say, "When that's all done,
I would like you to open up for me in
the local host."
Now, local host just means that all the
files is on the laptop and it just opens
it up in a beautiful browser for us to
check out. Now, this is a pretty niche
specific use case, right? But when you
see me building this, you can use this
to build anything you want to. That's
the bottom line is you're basically
conversationally explaining everything
to him. So, look, it's a solid concept
for website cloning, competitive
analysis, and improving skill. Let me
make sure I've got the pieces right.
Then I have a few questions. The user is
going to provide a HTML file or URL.
You're beautiful. They're going to clone
it exactly, layout, animation, scroll
effects. I'm going to recreate all the
images using the Kia API. Beautiful. Ask
the user about their niche and
competitors. Scrape five competitor
websites. Use their insights to improve
the cloned website structure and then
serve it on the local host so they can
see it live.
Bravissimo. So, I'm saying. So, tech
stack for the rebuild. You mentioned Any
Time. Do you want the skill to actually
build an Any Time workflow? So, no.
Okay. No Any Time workflow not required.
What I want you to do is use the Kia
API. And then I also want you to use
Firecrawl. I will give you both of those
Kia API keys. Here we go. Image
recreation on Kia API. Do you want every
image on the site regenerated as a new
image? I'm going to say yes, all new
image, please. Beautiful. And then
competitor scraping. When you say
scrape, do you mean pull the visible
text? I'm going to say for competitor
scraping, I'm just more interested in
the copy, the CTAs, any interesting copy
basically. I just look at it from a copy
lens. What are the best websites in that
niche doing that we can learn from?
And then finally, should I ask the user
for their niche and competitor names
every time or try it to infer it from
the niche? I would say
you can ask me, but give me the option
for you to just go ahead and do it on
what I would call easy mode. Okay,
beautiful. I'm going to send that one
off. And then what we need to do is
basically give it the connectors, right?
The things that we can connect now
within the plugin. Beautiful. So, the
two things that I'm going to be using
now is going to be Kia API. So, this
just lets us access Nano Banana 2 at a
really good price. I'm not affiliated
with these guys in any way. They're just
really cheap. So, you get 5% off. It's
basically 6 cents per image, which is
wonderful on the 2K model, which is
fantastic. And then we've got Firecrawl.
Firecrawl itself, when I come back home
so we can check out what's happening here,
here,
it's essentially lets you check the
websites. It's a really, really cool
brand. And actually what we can do, if I
come over and just show you this for
instance, I can just scrape a webpage.
It'll show me all the ones I've done
previously. So, here for example, I can
scrape the brand of anything. So, on any
event, I can extract all the branding. I
can extract images, favicons. I can
extract colors, anything I want to
include the typography. It's wonderful.
So, what I want to do is come and grab
the API keys. So, let's come down and
grab the API key here, which is on the
left under API key. Wonderful. I'm going
to come down and literally copy this and
head back over to Anti-gravity. And once
we've provided it with that, we come
over to Kia again and grab the API key
from here. I believe that's under what
should be under API keys, right? We can
just literally copy this, which is
fantastic. Now, when it comes to storing
the API keys that we don't need to keep
doing this every single day and the
other skills can leverage it to save us
time. Imagine you and I walk into the
office. One of the things people often
do, and it's been a while since I've
been into the office, is they check the
whiteboard. Well, there's a whiteboard
in your laptop basically. And we call
this one here the Z H S R C. So, the
idea is we can store the environmental
variables on your computer that your
Claude skills can access. And the dot
means they're not visible in the finder.
So, we can basically say to Claude
skills, "Hey there, I want you to store
this in these dot Z H S R C so these
variables are accessible to my skills
and I don't need to keep reentering
them. And we we don't hardcode them
themselves in the skills." The upshot of
this basically means that if we do
something else that needs to use one of
these API keys, it's going to be
available on our computer so we we just
to and use it. So, now we've got the
environmental store, the next thing is
to actually give it a test. So, this is
a website I think is gorgeous. As you
can come up, it does very different
things. We can type things in. And let's
say that architecturally we like the
look of this website, right? And we
wanted to do some things with it. Well,
one of the things we can do is we can
grab the URL, we can come over to this
HTML website extractor over here. And
what we're going to do is simply pop
over, throw it in, and click on view
source. So, every website has a source
code. So, you're going to come over and
let's download this as a for instance.
Again, I'm just showing you an example
of how you can build a skill. In
reality, you could do it for anything
that you want to. So, then I'm going to
come back over to Claude Code and be
like, "Hey there, dude. What I would
like to do is go and grab the last file
that I downloaded, the HTML, bring that
into the project environment, and then
begin the entire process that we
outlined for the skill."
Beautiful. And it'll bring it in and we
can get started. And beautiful, guys.
So, we've got a reference image, which
is pretty close. We've got some
functionality. It needs a little bit of
work. I can come down and you can see
how it's leaned on essentially the whole
website design. But what we don't have
is images. Now, one of the features
about the Nano Banana API is that it
needs basically a URL for the image. So,
to do that, we're going to use something
called ImageBB. So, ImageBB is a website
that you can get an API key from. And
what that allows you to do, if you give
Claude an image, it will actually upload
it to ImageBB and then enable it to
basically send an image to Nano Banana
to replicate it. So, if I have a photo
of me, it would upload it, and then it
could say, "Hey, put Jack in a green
sweater instead of blue." And you can
get that by coming up to the bottom,
clicking on API key, and copying that
API key, and we're going to go back over
to Claude and say, "Hey, I want you to
upload the image URL and use this to
create a better image for everything on
the website." As you can see, it says,
"Good. Now, let me see what the original
images actually look like, then upload
them to ImageBB." Look at this. Now, I
see the style. It's a beautiful Studio
Ghibli cinematic illustrated landscape,
nice sky with a rocket launching,
dramatic clouds, mountains. The photo
has a sunset hilltop with a glowing
portal. It's beautiful. So, basically
now Claude Code can run off, get the
actual image, extract that image, and
then do whatever it wants to with it.
And then just like that, we've got this
website that follows remarkably the
layout. I mean, look at this. All the
images have been completely rebuilt.
There's a few things we want to go back,
but honestly for just like one prompt
and a little bit of direction with the
images, this is really freaking
impressive. Happiness speaks. This is
really cool. All the way down FAQs. Have
a look at this. What is this? What is
this? Come down, and then we've got this
gorgeous, beautiful thing here at the
bottom. So, now we've got the website.
The question is, how do we actually get
this live as a sample project? Well,
we're going to let up Claude Code. We're
going to ask it a simple question. So,
we are going to say along the lines of,
"Hey dude, love the website. Now, what I
would like you to do is to create a
private GitHub repo to initialize one,
and then I'd like you to publish this to
Vercel. I'm going to give you my Vercel
API key, and with that I want you to
store that for me in the terminal
profile so that I can use it in the
future whenever we're building websites
together." Beautiful. Now, when you've
done that, we need to head over to
Vercel. Now, if you don't know, GitHub
is a place where all our code lives, and
Vercel is just a hosting platform. That
means that we can host everything that
we want to. All my websites, my
businesses, it's a great place to host
it. I use it a lot of the time. So,
we're going to come and create a new
token. We'll call this one Claude Code.
The scope can be our full account. Uh
it's fine. Expiration date, I'm just
going to put at 7 days cuz this is just
an example, and then click on create.
And then we come back over to Claude
Code, and then when prompted, we can
provide it with that key to create it
and publish it for us automatically all
within Claude Code. And just like that,
it's now connected. Now, if you haven't
connected your GitHub, what we'll do is
GitHub for you in the command line
interface. The browser will pop up and
it'll give you a code, and all you're
going to do is enter in that code, and
then you'll have them to connect it,
which means that it can create repos,
and then repos, do anything on your own
private account. Then when you've given
it the code, you can see here we've got
the actual GitHub repo, which we can
open up, and also the live site that it
has published for us automatically,
which is crazy. And as you can see, here
is the GitHub repo, which is private,
and then we can actually see the website
open up, and now we've got the website
on a complete new URL. I can scroll down
and the entire thing is uh published,
ready to go. And then we can use the
other skills and all the techniques that
we cover on the channel to add in things
like databases so we can store customers
and send them emails, and pretty much
anything that you'd like to do. And I
want to make the point now that you can
then save this as a skill, and then you
can test it, you keep refining it, and
then when you're happy, you just say,
"Hey Claude, turn this into a skill."
Then once you've done that, whenever you
use Claude Code ever again, either in
the app, which I recommend you download,
and when you do download the app, you're
going to have three options: chat,
co-work, and code. Now, in Claude Code,
you can effectively do code anywhere on
your laptop just like within
antigravity. But what's really cool is
we can summon any of the skills. Like I
could summon a skill that I built
earlier, for example, which was an SEO
strategy. So, I click on SEO strategy, I
hit enter.
And by the way, here's a cool thing.
This is so important. We're running a
competition in the community right now,
which is $500 for one Claude skill.
Well, basically you think of something
really cool, you create it, and we add
it. If it like gets a certain level into
here, so SEO optimizer skills, we've got
things like 3D websites. So, the idea
here is that you build the skills for
everything that you want to automate in
your business, and then whenever you
want to do it, it could be competitive
intelligence, could be anything, and
then you just leverage those skills. So,
you can see, I've now said I want to go
ahead and use my SEO enrichment skill.
Great. Jack, what is it? Is it a single
article page URL? Is it an article to
update? I might say, "Hey, it is a full
website audit." And it will ask you
questions. I built all of this saying,
"This is exactly what I want to do.
These are the questions I want you to
ask. I want to know this, I want to know
that." And then Claude skill will go
through everything. And so, here's the
thing. We want to minimize the amount of
time we have to repeat API keys, and we
also want to make sure that they are
super protected. So, there are two key
interfaces that you're going to want to
use. The first interface is going to be
what we call a connector within Claude.
So, we can connect Claude to all of your
services, your email, your calendar,
your Notion database, anything you want
to. So, any point I might say, "Hey
Claude, check my last email, check my
last and my next appointment, and then
create something in Notion." Claude can
do all of that. But then, if we're going
to have something that runs as code, or
it's going to be an app, or you you're
building something, then we save that to
our terminal profile. And then these are
going to be keys that you can use
whenever you're building inside Claude
Code. And just to show you what that
looks like, if I'm over here and I click
on, let's say, chat, I click on the
plus, and I click on connectors. Right?
Let's go over here, connectors, and here
are the ones that I've already got
activated. I can add in anything. So, I
could click on manage connectors, and
then we can pretty much peruse and grab
anything we want to. And it's so easy to
say, "That's fine, that's fine. Get
meeting details is okay. We'll always
allow. We allow it, but it needs
approval." You can customize all of
these things, which is wonderful. But
look, we're not connected to Canva,
right? We're not connected to Gmail. So,
let's go and connect to Gmail by
clicking on Gmail, click on connect, and
here you go. We this pop-up comes up. We
say this is great, go and continue. And
then once you've selected your email
address, go through and click continue
once more, and now we come back up to
Claude. You can see that it exists now,
which is awesome. So, if I come back
over now and ask it a question like,
"Hey there, dude. What was the last
email that I got? Give me the subject
line, please." All right. Now, I can
basically conversate with Claude Code or
Claude, and it'll do anything that I
want to. And I could build this into
anything. So, if you think of skills,
things you're going to be doing very
regularly, you can now have these
things. So, look. Now, it's checking our
tools. It sees Gmail's available. It's
going to check it and bring it back. And
then this is a email that I got. Now,
the other cool thing we can do, if you
want to go ahead and use the Claude Code
app, is you can schedule tasks, and this
came out literally, I think, in the last
24 hours. All you do is you come up to
schedule over here, which is to this
button right here, and you can basically
create a task that will run on repeat.
So, for example, one thing you might say
to it is, if I come over here and create
a task with you, I could say something
like, yeah, daily code reviews are a
great example, actually. Daily code review,
review,
and then we could say, "Go over all the
code that I created in the last 24
hours, flag anything that you think is
concerning." Okay? Beautiful. And just
say, "Hey, look at the commits that I
pushed to GitHub, look at anything I've
developed, anything that's active, and
do a full comprehensive audit and
overview of it, please."
Fantastic. So, give it a bit more
detail, and then you can pick any of the
folders. So, I might just say my
desktop, or where I'm wherever I'm going
to store all my information. Ask
permissions. I'm going to say bypass
permissions personally, or you can do
plan mode or auto accept edits. Either
one is fine. One thing that must be
true, though, is that you have to have
your laptop open for this. It's what is
required to run this thing. And you can
say run every day at 9:00 a.m., and
click on create task. What this now
means is that if our laptop is open
every day at 9:00 o'clock in the
morning, hopefully we're awake and
kicking by 9:00 a.m., then it's going to
run for us in the background, and it
will check everything. So, anything you
want to do, it could be a morning brief,
like when you get your coffee, like go
and check these websites, do this, do
this. Anything you want to do on a
regular basis, we can now create these
scheduled tasks for. You can also do
this within the co-work feature. And for
example, here, all you do again is come
down to scheduled. As you can see,
you're scheduling your task, and then
this might be something where you're
using your MCP service. Now, with all
this in mind, how does this then fit
into antigravity? Because if I open up
and I press command down, you can see we
have antigravity here. Antigravity
provides a couple of really cool
benefits. Number one is it's a beautiful
visual interface to actually look at
everything we're doing. And if you
yourself want to come in and edit
something, it's very easy to do that. If
you're just using the Claude app, it's
kind of all happening behind the smoke
screen. The other cool thing about
antigravity is what?
Is if you're signing up, obviously you
get free Claude access for a period of
time, free Gemini access for a period of
time. But the probable highlight for me,
where I like using antigravity, is this
agent manager feature. If you click on
agent manager, as you can see here, if I
have this business section, which has
all the information about my company, I
can jump in and be like, "Hey dude, do
me a favor. Create me an invoice for
$25,000 for the UFC, and then just save
it on my desktop." So, every one of your
individual plans here, for example, are
going to folders, are going to have
individual contacts, and the identical
features in antigravity make it easy to
do that. I can have multiple agents
running in parallel. So, you can
obviously save MCPs in antigravity. I
think it's easier to actually have those
connectors now in Claude and probably
just use them to save it to your shell
terminal. And of course, you can save
those if you want to within antigravity
or you can just save them within Claude
and use the connectors if you're going
to go over here and use the Claude
within the antigravity interface. And so
now we've covered the first 95% of using
Claude code within antigravity. The next
thing we need to do is learn how to
build beautiful and stunning websites
and apps which we can do by watching
Cliquez sur n'importe quel texte ou horodatage pour accéder directement à ce moment de la vidéo
Partager :
La plupart des transcriptions sont prêtes en moins de 5 secondes
Copie en un clicPlus de 125 languesRechercher dans le contenuAller aux horodatages
Collez une URL YouTube
Entrez le lien de n'importe quelle vidéo YouTube pour obtenir la transcription complète
Formulaire d'extraction de transcription
La plupart des transcriptions sont prêtes en moins de 5 secondes
Installez notre extension Chrome
Obtenez les transcriptions instantanément sans quitter YouTube. Installez notre extension Chrome et accédez en un clic à la transcription de n'importe quelle vidéo directement depuis la page de lecture.
