When you first open Google Antigravity, it looks intimidating. There are panels you don’t recognise, keyboard shortcuts you’ve never heard of, and a general sense that you might break something if you press the wrong button.
You won’t. And by the end of this guide — mirroring the tutorial above — you’ll have built three professional websites from scratch and deployed one of them to a live URL. Without looking at a single line of code.
Before Anything Else: How to Reset the Editor
The first thing worth knowing isn’t a feature — it’s a safety net.
Antigravity is highly customisable. You can move panels, change colour themes, rearrange the entire layout. This is useful, but it also means you can end up in a state where things look wrong and you don’t know how you got there.
The fix is always the same. Open the Command Palette with ⌘ Shift P (Mac) or Ctrl Shift P (Windows), type preferences, and select Open User Settings (JSON). You’ll see a JSON file containing every customisation you’ve made. Delete the contents, save, and the editor resets completely.
That’s it. No damage done.
Colour Themes
While you have the Command Palette open, it’s worth picking a colour theme before you do anything else. Use ⌘ Shift P → Color Theme to browse the built-in options.
The colour choices aren’t decorative. Different token colours — green for comments, blue for keywords — train your eye to scan code faster. If you’re new to development environments, a high-contrast dark theme makes the structure of a file much easier to read at a glance.
Tokyo Night is a good starting point if you want a recommendation.
The Agent Manager: Where the Real Work Happens
When you open Antigravity, the interface presents you with a standard file explorer. Ignore it — at least to begin with. The place to go first is the Agent Manager, accessible via the button in the top-right corner.
The Agent Manager is what makes Antigravity different. It lets you run multiple AI agents across multiple projects simultaneously. Not tab-switching. Genuine parallel execution — each agent independently working on its own codebase while you watch.
To start a project:
- Click the + icon in the Agent Manager
- Create a new folder where you’d normally save code projects
- Give it a name (e.g.
antigravity-tutorial-01) - Start a New Conversation inside that workspace
Planning Mode vs. Fast Mode
Before you send your first prompt, you’ll notice a toggle for Planning and Fast mode.
Planning Mode instructs the agent to produce an implementation plan before it writes any code. That plan is saved as a markdown document inside the tool, and — critically — you can add inline comments to it before the agent proceeds.
This is the most important thing to understand about the workflow. A planning pass writes one file. A code pass writes dozens. Steering the agent at the planning stage means you’re committing to a direction before you’re committed to a codebase.
In the tutorial, this looked like leaving two comments on the plan:
- Be specific with the site sections you will build
- Use Astro, not Vite
The agent updated the plan based on those comments, then built accordingly.
Fast Mode skips the planning step entirely. It takes your prompt and executes immediately — useful for detailed, well-considered prompts where you already know what you want. In the tutorial, a second and third project were kicked off in Fast Mode while the first was still planning.
Running Three Agents in Parallel
This is where the Agent Manager earns its name.
In the tutorial, three separate projects were running simultaneously — each with a different prompt, each producing a different website. One in Planning Mode, two in Fast Mode. While the agents were working, there was time to explore other parts of the interface.
The results: three distinct, production-quality websites, all built within fifteen minutes. No two looked the same. Each had working navigation, generated imagery, testimonials, and conversion-oriented copy. None of them looked “AI-generated” in the way that phrase is often used.
The practical takeaway: you can use the agent’s working time. Queue up work across multiple projects, and you’re multiplying your output without multiplying your effort.
The Playground
Sometimes you don’t want a full project. You just want to think something through with an AI — draft some copy, test an idea, produce a single file.
The Playground is a lightweight workspace for exactly this. It behaves like a browser-based chatbot (think ChatGPT or Gemini), but with one meaningful difference: it has access to your file system.
That means instead of getting a wall of text back, you can tell it to save your response to a markdown file — and it will. You can then comment on that file to iterate, rather than sending a new message and getting a new wall of text.
If the work turns out to be worth keeping, a single button promotes the Playground into a permanent workspace. If not, delete the conversation and the files disappear with it.
The Playground is good for staying in flow. You can test ideas and draft content without leaving Antigravity and losing your context.
The Changes Panel
When using Planning Mode, the Changes Panel (top-right, toggle changes) gives you a full audit trail of everything the agent has done:
- Implementation plan — the architectural overview
- Task list — a breakdown of completed and remaining work
- Walkthrough — screenshots and notes documenting each change
- Files changed — a diff-style view of what was added or modified
This is the kind of documentation a senior engineer produces before a significant feature. Antigravity produces it as a side-effect of working this way.
Deploying to the Web with Cloudflare
Once the agent finishes building, you need to deploy. Here’s the fastest path.
Step 1: Build the static files
Open the terminal inside Antigravity with ⌘ J (Mac) or Ctrl J (Windows), or navigate to Terminal → New Terminal. Run:
npm run buildThis compiles your site into a folder (for Astro projects, that’s dist/). You can find the exact output directory by opening package.json — either via the file explorer, or with ⌘ P → package.json.
Step 2: Create a Cloudflare Pages project
Cloudflare Pages is free to use. Once you have an account:
- Navigate to Workers & Pages in the Cloudflare dashboard
- Select Pages (not Workers — Pages is for static sites)
- Choose Upload assets
- Give the project a name
- Drag your
dist/folder into the upload area - Click Deploy site
Within seconds, Cloudflare provides a live .pages.dev URL.
Step 3 (optional): Automate future deployments
Drag-and-drop works for a first deploy, but it’s manual. For ongoing work, connect Cloudflare Pages to your GitHub repository. Every push to main triggers an automatic rebuild and redeploy — no manual upload required.
Step 4 (optional): Add a custom domain
If you’ve registered a domain through Cloudflare (or transferred one there), navigate to Workers & Pages → your project → Custom Domains and add it. Cloudflare handles the DNS configuration automatically.
Going Deeper: The Code Editor View
The Agent Manager handles most of the work, but there are times when you’ll want to look at the actual files — to review a specific change, understand a decision the agent made, or make a small manual edit.
Click on any workspace in the Agent Manager, then select Open Editor (top-right). This switches to a traditional code editor view, with the file explorer on the left and the agent panel still accessible on the right.
From here, you can also:
- Accept or reject changes the agent has staged
- Initialise a Git repository
- Publish directly to GitHub
What This Actually Demonstrates
The tutorial builds three professional websites in under twenty minutes. That’s the headline. But the deeper point is about what wasn’t needed: no design software, no manual HTML, no configuration files written by hand, no previous coding experience.
The interface that looks intimidating on first open is, in practice, something you spend very little time inside. The Agent Manager is where the work happens. Planning Mode is how you direct it. The Changes Panel is how you review it. The terminal is how you ship it.
Once you understand those four things, the rest follows.
Questions about the workflow or stuck on a specific step? Drop them in the comments — I check them regularly.