Google Antigravity Full Tutorial for Beginners: How to Use Google Antigravity
By Mikey Ranks
Summary
Topics Covered
- Self-Healing: When Something Breaks, the AI Fixes Itself
- Vibe Coding: Describe What You Want, Not How to Build It
- The Three-Layer Architecture That Makes AI Build Reliably
- Build Once, Reuse Forever with Skills
- Instructions Determine Output Quality More Than the Tool
Full Transcript
Starting a new project can make you feel a bit stuck sometimes, like you have an idea in your head. But turning that into something that actually works, especially if you're not deep into coding, that can be the hard part.
Google Anti-gravity approaches this differently. You focus on the idea, the
differently. You focus on the idea, the vibe of what you want to build, and then the AI handles the execution, and it's not just generating random code either.
There's a structured system behind it that keeps everything consistent and reliable. What makes it stand out from
reliable. What makes it stand out from most AI tools is how it's built.
Anti-gravity uses a three layer architecture directive orchestration and execution. So, it can handle more
and execution. So, it can handle more complex [music] tasks without falling apart. It also handles a self-healing
apart. It also handles a self-healing system, which [music] means if something breaks during the build, it can detect the issue, it can fix it, and it can keep on going. Now, this video is for anyone who's opened up a blank project
and didn't know where to start or who's tried AI tools before, but only use them for simple props. So the goal here is to move beyond that and actually build something functional so that by the end of this video you are going to create a
real working app sales dashboard for the Fables brand with styling and layout and data all put together. So rather than just explaining the tool we're going to go ahead and walk through building something step by [music] step. And
before we do dive in, if you do want to master Google Anti-gravity in just say 2 hours instead of spending weeks figuring it out all on your own, well, I do have a complete Google Anti-gravity Pro
program and a community with everything that you need. The links in the description down below. But first, let's go ahead and get you started with the basics here. Before you can start
basics here. Before you can start building anything with Google Anti-gravity, you first need to get the platform installed and connected properly. This part is pretty
properly. This part is pretty straightforward, but it matters more than people think because anti-gravity isn't just a normal app. It also needs access to your local workspace so the AI
can create files, organize projects, and run tasks for you. To get started, open up your browser and head to anti-gravity.google/d
anti-gravity.google/d download. And once you're there, just
download. And once you're there, just choose your operating system, download the installer, and then run it like any other standard setup. Now, anti-gravity
is designed to feel lightweight, but it works best with a stable setup. And
since it relies on AI model calls and web-based tools, having a solid internet connection does make a pretty big difference. As long as your computer can
difference. As long as your computer can handle modern browserbased tools, well, you should be fine. Once the
installation is finished, just launch Anti-gravity from your applications folder and you'll see the sign-in screen. So, click sign in and then log
screen. So, click sign in and then log in with your usual Google account. This
links your workspace and gives the platform access to manage your projects.
When you're inside, the layout is simple. On the left here is the file
simple. On the left here is the file explorer where your files and folders live. And then on the right is the agent
live. And then on the right is the agent panel where you interact with the AI, give it instructions, and review what it's doing. So from the start, this
it's doing. So from the start, this isn't just installing an app. It's
setting up a workspace where your ideas can turn into actual projects. Once
anti-gravity is installed, there's one more piece that makes everything more powerful. The Chrome extension, of
powerful. The Chrome extension, of course. Now, this extension basically
course. Now, this extension basically gives the AI eyes and hands inside of the browser. Without it, the AI can
the browser. Without it, the AI can still generate files and code, but with it enabled, they can't interact with web pages. They can observe what's happening
pages. They can observe what's happening and even record sessions for debugging.
This is especially useful when working with websites and testing or scraping data. Instead of relying only on text,
data. Instead of relying only on text, the AI can visually understand what's happening and respond more accurately.
In most cases, the extension installs automatically. To check, open the agent
automatically. To check, open the agent manager and click the Chrome icon at the top right. Now, this launches Chrome
top right. Now, this launches Chrome using the anti-gravity profile. If it's
not installed, the agent will guide you with a setup prompt. Just click setup or install and follow the steps to the official page. So once that's done, make
official page. So once that's done, make sure browser control is enabled. [music]
Go to anti-gravity settings at the bottom right here. Open up advanced settings. Then under the browser tab,
settings. Then under the browser tab, just toggle on enable browser tools.
Now, this is what allows the AI to actually use the extension. And once it is enabled, anti-gravity can now interact with the web. It can test things and help debug visually. And now
that everything is set up, let's go ahead and take a look at the interface.
At first, it might feel a bit unfamiliar, but it is at first because once you understand how things are laid out, it just becomes much easier to navigate. An anti-gravity, you're mainly
navigate. An anti-gravity, you're mainly working between two areas here. The
right side, you have the agent manager, which is where you will spend most of your time. Now, this is where you type
your time. Now, this is where you type your instructions. You talk to the AI,
your instructions. You talk to the AI, and then you watch it plan and execute tasks step by step. Now on the left side you have the editor mode where all of your files live as the AI builds things
for you. This is where you can open up
for you. This is where you can open up those files, review the code, and then make changes if needed. A simple way to think about it is this. The right side is where you tell the AI what to do and
the left side is where you check what it actually did. So now before you start
actually did. So now before you start building, it does also help to understand how everything is organized behind the scenes. So, first up, you have something called a workspace, which
is basically just a folder on your computer that contains everything related to your project. It acts as the main container that the AI can see and work with. And inside that workspace,
work with. And inside that workspace, you have your project, which is the actual thing that you're building. If
you want to switch projects, you can simply just open up a different folder from the top left menu. And when you look at the left panel here, you'll notice it's not just a simple file list.
There are a few sections that make it easier to work with your files. The
project section is your main file explorer. So that's where you'll see all
explorer. So that's where you'll see all of your folders and all of your files.
And as the AI runs, you'll also notice new folders like directives, execution, and temp/ getting created automatically.
Then you have the outline section which gives you a quick overview of whatever file you have currently open. So instead
of scrolling through everything, you can just click on a function or a section and then jump straight to it. So lastly,
here is the timeline section which keeps track of changes made to your file. If
say something breaks or it just doesn't look right, you can just go back, compare the two versions, and even restore a previous state. Going back to the right side here, the conversation panel is really where everything starts
because you type your instructions here at the bottom, and then the AI responds above with its plan and actions. You can
also use the at symbol to reference specific files or skills, which helps the AI understand your project better since it can read directly from your workspace. Before you start building
workspace. Before you start building anything, there is one more thing worth setting up properly, and that's your model and a few key settings. Right
below the conversation panel, you'll find the model dropdown, which is where you choose which AI you want to use. In
most cases, you'll switch between two options. If you want something fast and
options. If you want something fast and reliable for general tasks, then go with Gemini 3.1 Pro. If you're working on more complex layouts or more detailed UI, Claude 4.6 usually does a better
job. After that, it's a good idea to
job. After that, it's a good idea to check your settings so the AI behaves the way that you expect. Head over to the bottom right corner here and open up anti-gravity settings. Then go into
anti-gravity settings. Then go into agent settings. And the first option
agent settings. And the first option you'll see is auto execution, which controls whether the AI runs tasks on its own [music] or it waits for your approval. Now, if you want full
approval. Now, if you want full automation, you can just set it to always proceed. And if you prefer more
always proceed. And if you prefer more control, choose request review. Next is
review policy, which decides how often the AI pauses for feedback before moving forward. And you can keep it flexible or
forward. And you can keep it flexible or more controlled depending on how hands-on you want to be. For more
advanced control, open up advanced settings. And under the agent tab here,
settings. And under the agent tab here, you'll find terminal command auto execution, which allows the AI to run commands like say installing dependencies. It's also important to
dependencies. It's also important to turn on shell integration here so everything runs smoothly. Then under the browser tab, make sure enable browser tools is turned on. This gives the AI
access to web-based tools, which is especially useful for things like scraping data or testing web apps. And
once these are set, you're in a really good position to start building without running into any unnecessary issues. So,
this is where you're going to go through your first real vibe coding experience.
Instead of jumping straight into something complex, no, we're going to start with a simple link in bio page similar to link tree. It's a small project, but it clearly shows how anti-gravity works. From a simple idea
anti-gravity works. From a simple idea to a working app that you can open up locally. To get started, you do need a
locally. To get started, you do need a clean workspace. [music] Anti-gravity
clean workspace. [music] Anti-gravity uses a local folder to store everything it creates, including files like directives and execution. Start by
creating a new folder on your desktop or in your documents, and then name it simple project. Then open the
simple project. Then open the anti-gravity desktop app. In the top left corner here, click file, then open folder, or use the open folder button if your workspace is empty. Select the
simple project folder and click open.
Next, open the agent manager. Here
you'll find it in the upper right corner by clicking open agent manager. And this
is where you'll be giving instructions to the AI. It's basically your main control panel. You can also open it
control panel. You can also open it using the toggle agent icon or the shortcut Ctrl AltB. And once that's open, you can start your first interaction. So in this message box, you
interaction. So in this message box, you can type in, "Hi, I am insert your name here. I want to build a simple personal
here. I want to build a simple personal link in bio page." And with that, just press enter. So, this first prompt tells
press enter. So, this first prompt tells the system what you're trying to build and then allows it to start preparing everything in the background. At this
point, instead of writing code, you're just going to describe what you want.
And that's really the whole idea behind Vibe Coding. So, let's go ahead and type
Vibe Coding. So, let's go ahead and type in this prompt. Create a clean dark theme landing page. Include a circular profile picture placeholder, my name, Kelvin, a short bio, IT specialist, and
three buttons for LinkedIn, GitHub, and portfolio. Use Tailwind CSS for styling.
portfolio. Use Tailwind CSS for styling.
So, the more specific you are here, both in terms of design and tools, the better the result will actually be. After you
send in the prop, you'll notice that the AI doesn't start coding right away.
First, it shows you a plan. And this is where it breaks down what it's going to do, like creating files, adding Tailwind, and setting up the layout.
Take a moment to read through that plan.
If everything looks right, then click the approve or play button. Now, this
step is important because it makes sure that the AI is going in the right direction before it starts building.
Once you approve it, you'll start to see things happening here on the left side.
New files like index.html will appear and the code will start filling in line by line. And this is a system turning
by line. And this is a system turning your prompt into an actual working page.
And when it's done, go to the explorer, right click on index.html, and then click reveal in file explorer. Then open
up that file in your browser. And just
like that, you'll see your page running locally. No manual coding, just a clear
locally. No manual coding, just a clear idea and the right prompt. [music]
Once you've built something simple, it helps to understand how anti-gravity is actually working in the background. The
system uses a three layer structure to separate the goal from the technical execution which helps the AI stay organized instead of getting lost in the code. So for this part, please do
code. So for this part, please do download the provided agents.md file.
Now this is a really well-built threelayer architecture by Nick Save and we're going to use it as our reference and structure. The three layers are
and structure. The three layers are directive, orchestration, and execution.
The directive layer is the highle SOP or standard operating procedure written in markdown. The orchestration layer is the
markdown. The orchestration layer is the AI glue that decides which scripts need to run and in what order. The execution
layer is where the actual work happens through deterministic Python scripts, API calls, and other concrete actions.
So, this structure also supports self-healing, which anti-gravity refers to as the self annealing loop. If a
script fails, the AI can read the error log, fix the issue, and then try again until the task is complete. Another
advantage here is reusability. Once you
have a strong agents.md file and a few custom skills, you can reuse that setup and feature project, so you're not starting from scratch every single time.
To set this up, create a new project folder and give it a name. For example,
say realworld project. [music]
Next, open the downloaded agents.md file
and copy all of its contents. [music]
Then open up your project folder in Google Anti-gravity. Create a new file
Google Anti-gravity. Create a new file named agents.mmd and then paste
named agents.mmd and then paste everything into it. Save the file using Ctrl S. After that, go to the AI
Ctrl S. After that, go to the AI conversation panel and type at symbol agents.mmd instantiate. The instantiate
agents.mmd instantiate. The instantiate
command tells anti-gravity to read the full agents.mmd file and automatically
full agents.mmd file and automatically set up the project files based on the structure inside of it. Once the main structure is in place, the next thing that makes anti-gravity more powerful is
skills. Skills are repeatable processes
skills. Skills are repeatable processes that teach the AI how to handle specific tasks like brand extraction or database management. They save tokens, improve
management. They save tokens, improve consistency, and make the output more reliable. A skill is basically a
reliable. A skill is basically a specialized instruction file, and what makes it powerful is that it gives the AI a predictable set of rules to follow every time. To create one, we're going
every time. To create one, we're going to use the skill creator from Enthropic.
Go to this website here on your screen to check it out and get it for yourself.
On the left sidebar, rightclick skill creator and click download. Set the
download path to your project folder such as realworld project. Then go back to anti-gravity and you should see the downloaded skill creator folder in the
explore tab. Rename skill.md to
explore tab. Rename skill.md to
skill_killcreator.md
so it's easier to reference. With that
file from anthropics repository, you already have a structure now for creating skills without starting from scratch. For a brand extraction skill
scratch. For a brand extraction skill example, go to the right side of anti-gravity and change the model in the conversation panel to claim 4.6. Then
type in at symbol skill_kllcreator.mmd.
I want to create a brand new scale that uses the firecrawl API to scrape a website and pull in any relevant brand data, colors, typography, and fonts. I
also want to make sure we pull in any relevant or interesting images like header or hero images, logos, things like that. and also any information that
like that. and also any information that might be helpful in building a new website like particular styling effects, buttons and things like that. And after
that, do not press enter yet. Go to this website here on your screen. And at the top right side, click the copy page.
Paste everything below the prompt you already wrote, then press enter.
Anti-gravity will now use claw to read the instructions inside skill_kllcreator.mmd
skill_kllcreator.mmd and then create a new skill centered around brand extraction using file crawl. After that, you should see a new
crawl. After that, you should see a new brand extractor folder in the explorer.
Expand it and then rename skill.md to
skill_brand extractor.md so it's easier to reference. Once a skill like brand
to reference. Once a skill like brand extractor is built, you can move it into future project folders and still reference it in the AI conversation whenever you need it. As your projects get more advanced, you'll also start
working with multiple thinking processes or agents at the same time. And this
allows you to handle different parts of an app without everything getting all mixed up together. And you can run multiple agents simultaneously by opening up separate chat threads. And
each agent here can focus on a different feature. So instead of doing everything
feature. So instead of doing everything in one place, you can just divide the work and move faster. And if you're working on multiple projects, you can go ahead and switch between them using the
workspace switcher. This lets you move
workspace switcher. This lets you move between different folders or client projects without losing the context of what the AI was doing in each one. To
keep track of progress during a run, you can use the comment feature in the chat panel. Click add comment to cue
panel. Click add comment to cue instructions. The AI will check this
instructions. The AI will check this inbox of comments whenever it reaches a pause so you can guide it without interrupting the flow. For more complex builds, it also helps to break large
goals into smaller steps and instead of giving one big instruction, just split it into smaller directives. This keeps
the orchestration layer focused and makes the results more accurate. So for
this project, we're going to create a dashboard for Mr. Beast's Fastables chocolate website. And the goal is to
chocolate website. And the goal is to build a dashboard for tracking chocolate sales while also pulling in the style, the design, and overall feel of festivals.com. This project brings
festivals.com. This project brings together a few important pieces in one workflow. Brand scraping, external APIs,
workflow. Brand scraping, external APIs, and modern UI design. By the end, you're going to have a functional dashboard that looks aligned with the Fastables brand. So, to start, we need to pull in
brand. So, to start, we need to pull in brand information. Go to this website
brand information. Go to this website here on your screen. And on the left sidebar, rightclick brand guidelines and click download. For the download path,
click download. For the download path, choose your project folder. For example,
realworld project. Then go back to anti-gravity and you should see the downloaded brand guidelines folder in the explorer tab. Expand that folder and then rename skill.md to skill_brandg
guidelines.mmd. So again, it's easier to
guidelines.mmd. So again, it's easier to reference. After that, go to the AI
reference. After that, go to the AI conversation panel again and type update at symbol skill_brandguidelines.mmd
with the extracted information. Add any
new info that was extracted as well. So
what this does is take the information we extracted earlier using firecrawl and integrates it into skill_brandguidelines.fd.
skill_brandguidelines.fd.
Press enter and wait for it to finish updating. Next, we'll move into the
updating. Next, we'll move into the external API part which in this case is fire crawl. After that, go to the AI
fire crawl. After that, go to the AI conversation panel and type in at symbolskill_brandextractor.mmd
symbolskill_brandextractor.mmd and this website here on your screen update at symbolskill_brandguidelines.
MD. So this prompt is supposed to extract information from the feasible site and then update the brand guidelines file. But at this point we'll
guidelines file. But at this point we'll run into an error because the fire crawl API has not been connected yet. So then
the next step is setting that up. In the
AI conversation panel, type create av file for me to store my API keys. And
this should create av file which you'll see in the explorer here on the left sidebar. Then go to this website on your
sidebar. Then go to this website on your screen, create a new API key, and then give it a name. for example, realworld project. Then copy that key, go back to
project. Then copy that key, go back to anti-gravity, paste it into the env file and save it using command S or control S. And once that's done, go back to the
S. And once that's done, go back to the AI conversation panel and type I've added my key to the DNV file. Please
proceed with the brand extraction. And
at that point, with the fire crawl API connected, the extraction should continue and then finish properly. Once
the brand data is ready, the next part is the interface. So, to help anti-gravity create a more polished design, we're going to go ahead and set up the front-end design scale from
Anthropic, go to this website here on your screen again, and on the left sidebar, rightclick front-end design, and click download. Set the download path to your project folder again. Then,
return to anti-gravity. Then, you should be able to see the downloaded front-end design folder in the explorer tab.
Expand it and rename skill.md to
skill_frontenddesign.md.
And with that in place, everything is ready for the dashboard build itself.
Then go to the AI conversation panel and type prioritize the information in the brand data folder. Use
atfastables_com_brand_guidelines.mmd
and the images. Also use the best practices and at symbolskill_frontendesign.mmd.
symbolskill_frontendesign.mmd.
I want to create a clean modern dashboard focusing on the feastables brand to track sales of the feastables chocolate. Just create some fake sales
chocolate. Just create some fake sales data for now so that we can test this out. Make sure the entire dashboard fits
out. Make sure the entire dashboard fits on a single page and that there is a way for me to open this locally. Then go
ahead and press enter and wait for the AI to finish creating the web app. Once
it's done, go to the explorer tab here on the left sidebar. Rightclick
Feastables dashboard.html and then select reveal in file explorer.
Then open Feastables.html in your browser. And at that point, you should see a sales dashboard that feels heavily inspired by the Fastables website. And the nice part here is this
website. And the nice part here is this whole thing was created without doing any manual coding at all. For apps that need to store information over time, anti-gravity can also set up a local
database. And this is useful for things
database. And this is useful for things like user data, sales records, or anything else that needs persistence instead of just sitting in the front end. To set up a database for this
end. To set up a database for this project, just go back to the AI conversation panel and type set up a local SQL light database to store the sales data for the dashboard. The AI
should then create a DB file inside your workspace. And once it finishes, you
workspace. And once it finishes, you should see a file named sales.db in your explorer. After that, the next step is
explorer. After that, the next step is adding CRUD operations. Now, CRUD stands for create, read, update, and delete, which are the core actions used to manage database records. In the AI
conversation panel, again, instruct the agent to write execution scripts to create, read, update, and delete records from the sales table. The agent will then generate layer 3 Python scripts for
those database actions. In the explorer under the execution folder, you should see the new py [music] files appear. And
once the database is working, you can connect it to the interface. To do that, use this prompt. [music] Add a search bar to the dashboard UI that queries the SQL light database for specific
chocolate bars. And when that's done,
chocolate bars. And when that's done, just open up feasible dashboard.html again, and you should see a search bar in the middle of the page. So the last part is testing the connection. Ask the
AI to run a test script to verify that the database connection is secure and data is being saved correctly. And if
everything works, you should see a database integrity and security test showing pass along with the test suite complete. Now that confirms the database
complete. Now that confirms the database connection is secure and that the data is being saved correctly. So, at some point you'll probably notice that sometimes the AI gets it exactly right and other times it's a bit off. Most of
the time that doesn't come down to the tool. It just comes down to how the
tool. It just comes down to how the instructions are written. Small changes
in how you phrase things can make a big difference in the output. And the
quality of what anti-gravity builds really does depend on how clear your instructions are. The more context you
instructions are. The more context you give, the better the results. For
example, instead of saying something vague like build a site, it's much better to say something like build a sales dashboard for Mr. be using the extracted branding data in the brand
data forward slashfolder. And that extra detail helps the AI understand exactly what you're trying to achieve. It also
helps to be specific about the tools you want to use. Mentioning things like Tailwind CSS or SQLite. Make sure the AI uses the right text stack instead of guessing. And if you're explaining
guessing. And if you're explaining something more complex, you can also use voice input. Just click the microphone
voice input. Just click the microphone icon here in the chat bar and speak your instructions. This usually gives more
instructions. This usually gives more context and vibe compared to typing everything out. Before the AI starts
everything out. Before the AI starts building, it will show you a list of steps or a plan. Take a moment to read through it. If something looks off, you
through it. If something looks off, you can click add comments and adjust the plan before execution. This helps avoid unnecessary errors or wasted steps. As
you start building more complex projects, you'll run into errors, and that's completely normal. Anti-gravity
is designed to handle this through its three layer system where errors are treated as part of the process. And if
something does fail, the first place to check is the terminal output at the bottom panel here. This shows error messages and logs. The AI will usually read this on its own and suggest a fix,
but it still helps to understand what's happening. You can also use the browser
happening. You can also use the browser recording feature for debugging.
Activate the extension, click record, and then go through the action that's failing. The AI will then analyze that
failing. The AI will then analyze that recording and then use it to fix issues in the UI. If the AI gets stuck or starts looping, you can step in and just click the stop button in the chat and give a clearer or more specific prompt
to guide it back on track. One common
issue is forgetting to save important files like or agents.md. If those are not saved, the AI won't be able to read them. So, it's a good habit to press CRS
them. So, it's a good habit to press CRS regularly to make sure everything is up to date. Once you've built something
to date. Once you've built something that works, the next step is making sure it's actually usable beyond just a demo.
Right? A lot of projects look fine at first, but if the code isn't clean or organized, it does become harder to maintain or improve later. To start,
it's a good habit to review the code the AI generates. Open the files in the
AI generates. Open the files in the editor and check if things are structured properly. Look for simple
structured properly. Look for simple things like clear naming, organized sections, and modular code instead of everything being placed in just one file. It also helps to add proper
file. It also helps to add proper documentation. You can prompt the agent
documentation. You can prompt the agent with generate a comprehensive readme.md
file explaining how to set up and run this dashboard locally. And doing this makes it much easier for you or anyone else to understand how the project works and how to run it. For saving your
progress, you can integrate version control using GitHub. Open the built-in terminal and run commands like get init and get push to store your project in a remote repository. This gives you backup
remote repository. This gives you backup version history and a way to collaborate if needed. Finally, if you want to
if needed. Finally, if you want to prepare your project for actual use, you can ask the AI to optimize it. So, for
example, prompted to optimize the assets and minify the CSSJS files. And this
will help you reduce file sizes and improve loading speed, which makes a big difference for real users. So, at this point, you've seen the whole process now from setting things up to building
something that actually works like a real product. And that said, the tool is
real product. And that said, the tool is only as good as how you use it. The more
specific you are, and the more you experiment and guide it when needed, the better your results will be. And from
here, the best thing you can do is start applying this to your own ideas. So, you
already have the workflow, and now it's just about building on it. I want to thank you for sticking all the way through to the end of the video and investing your time with me today. I'll
see you at the next one.
Loading video analysis...