You have an idea for a product. Maybe it's a small SaaS tool, a landing page, an internal dashboard, or an app for your business. You've heard that AI can write code now — but every tutorial assumes you already know what a terminal is.

This one doesn't.

I built a real, live product entirely through natural language. No terminal. No commands. I just described what I wanted, and the AI built it. By the end of this article, you'll understand exactly how that works — and how to do it yourself.

⏱ Time to complete: 2–4 hours for a first project. Future projects take 30 minutes to launch.

The Setup — What You're Working With

Before anything else, understand the tools. They each play a distinct role.


  YOUR IDEA
      │
      ▼
  ┌─────────────────────────────────────────────────────┐
  │  ANTIGRAVITY                                        │
  │  Your build environment. Left panel: Claude Code    │
  │  writes your code in plain English. Right panel:    │
  │  Gemini Flash stages, commits, and pushes to GitHub │
  │  — all from a single sentence.                      │
  └─────────────────────────┬───────────────────────────┘
                            │ pushes your code
                            ▼
  ┌─────────────────────────────────────────────────────┐
  │  GITHUB (github.com)                                │
  │  Your save point. Every version of your project     │
  │  is stored here. Like Google Drive for code.        │
  └─────────────────────────┬───────────────────────────┘
                            │ triggers automatic deployment
                            ▼
  ┌─────────────────────────────────────────────────────┐
  │  VERCEL (vercel.com)                                │
  │  Your publisher. Watches GitHub, builds your        │
  │  product, puts it live on the internet in seconds.  │
  └─────────────────────────┬───────────────────────────┘
                            │
                            ▼
              🌐  yoursite.com  — live on the internet

Antigravity is the key tool here. It's a standalone application built entirely around AI-assisted development. You open it, describe what you want to build, and it handles the rest. There is no terminal. There are no commands to memorise. You just talk to it.

Inside Antigravity, there are two panels:

  • Left panel — Claude Code: Your AI engineer. You describe what you want in plain English. It reads your project files, writes code, fixes bugs, and adds features — in real time, as you watch.
  • Right panel — Gemini Flash: Your git workflow. When you're ready to save and publish, you type push or describe what changed. Gemini Flash stages your changes, writes a commit message, and pushes to GitHub automatically.

That's the whole system. Two panels, one application, no terminal.

Step 1 — Plan Your Product

Spend 20 minutes thinking through what you're building before you open Antigravity. The clearer your plan, the faster Claude Code executes. Open Claude at claude.ai and use this as a starting point:

1

Describe your idea to Claude

I want to build [describe your product].
The user is [who will use it].
The main thing it needs to do is [core action].
Pages I need: [list them].
I want it to look [describe the tone and feel].

Help me define the architecture, list all the pages,
and write a one-paragraph brief I can paste to Claude Code.

Claude will give you a full plan. Read it, ask follow-up questions, and refine it until it feels right. Save the brief — you'll paste it into Antigravity's left panel in Step 3.

2

Accept the Next.js recommendation

For most products, Claude will recommend Next.js. Accept this. It's fast, widely supported, and Vercel — which you'll use to publish — is built by the same team. It just works together without any configuration.

Step 2 — Set Up GitHub and Vercel

You only do this once. After this, Antigravity handles everything.

1

GitHub

Go to github.com and create a free account. Then create a new repository — click the + icon → New repository. Name it clearly (my-tool, my-app, landing-page). Set it to Private for now and click Create repository.

💡 You don't need to install Git or learn any git commands. Antigravity's right panel handles all of that for you.

2

Vercel

Go to vercel.com and click Sign Up → Continue with GitHub. This links both accounts. Once your project lands on GitHub — which happens automatically the first time you push from Antigravity — you'll come back here to connect it and go live.

Step 3 — Open Antigravity and Start Building

Open Antigravity. You'll see two panels — Claude Code on the left, Gemini Flash on the right. Start in the left panel. Paste your brief from Step 1 and tell Claude Code exactly what to build:

Create a new Next.js project called my-app.
Here's what I need: [paste your brief].
Set it up with TypeScript and Tailwind CSS.
Once it's ready, open a preview so I can see it.

Claude Code scaffolds the entire project — creating all the files, setting up configuration, installing dependencies. You'll see it working in real time. When it finishes, a preview opens at localhost:3000 in your browser.

Build by describing, not by coding

Now just talk to it. Describe what you want — in whatever product terms make sense for what you're building:

  • "Add a pricing section with three tiers — free, pro, and enterprise"
  • "Add a contact form with name, email, and message fields"
  • "The dashboard feels cluttered — show only the three most important metrics on the main view"
  • "Add a sign-up flow with email and password, no social login for now"

There's no wrong way to describe what you want. If something doesn't look right, describe what's wrong. Claude Code reads what it already built, understands the context, and fixes it.


  How the build loop works inside Antigravity:

  You describe what you want (left panel)
       │
       ▼
  Claude Code reads your project files
       │
       ▼
  Claude Code writes the code
       │
       ▼
  Preview updates at localhost:3000
       │
       ▼
  You give feedback, then repeat

💡 One thing at a time works best. Ask for one feature, check it, then ask for the next. Building layer by layer produces cleaner results than one large request with many moving parts.

Step 4 — Push to GitHub

When you're happy with a version — or just want to save progress — switch to the right panel (Gemini Flash) and type:

push

Or describe what changed:

Push — added the contact form and updated the navigation colours

Gemini Flash stages your changes, writes a commit message, and pushes everything to your GitHub repository. No commands. No terminal. Just one word or one sentence.


  The push flow:

  You type "push" in the right panel
       │
       ▼
  Gemini Flash stages all changes
       │
       ▼
  Gemini Flash commits with a descriptive message
       │
       ▼
  Gemini Flash pushes to your GitHub repo
       │
       ▼
  Vercel detects the new commit, builds, and deploys (~30 sec)
       │
       ▼
  Your product is live

💡 Push often. Every push is a save point. If Claude Code breaks something while adding a new feature, you can always revert to the last working push — without losing everything.

Step 5 — Connect Vercel and Go Live

1

Import your repository

After your first push, go back to vercel.com. Click Add New → Project. You'll see your GitHub repository listed. Click Import. Vercel detects that it's a Next.js project automatically and configures everything. Click Deploy.

In about 30 seconds, your product is live at a URL like my-app.vercel.app.

2

Every future update is automatic

Every push from Antigravity's right panel triggers a new deployment automatically. You never need to touch Vercel again unless you want to change a setting.

Step 6 — Connect a Custom Domain

Your product works at yourproject.vercel.app but a custom domain makes it look professional. Domains cost around $10–15 per year.

1

Buy a domain

Go to Namecheap or Google Domains. Search for the name you want and purchase it.

2

Point your domain to Vercel

In Vercel, go to Settings → Domains, add your domain. Vercel gives you two DNS records. Go to your registrar's DNS settings and add them:


  Type    Name    Value
  ─────────────────────────────────────────────
  A       @       76.76.21.21
  CNAME   www     cname.vercel-dns.com

DNS propagates in 15 minutes to 48 hours. After that, your product is live at your domain with HTTPS automatically.

The Full Architecture


  ┌──────────────────────────────────────────────────────────────────┐
  │                         ANTIGRAVITY                              │
  │                                                                  │
  │   ┌───────────────────────┐   ┌──────────────────────────────┐  │
  │   │  LEFT PANEL           │   │  RIGHT PANEL                 │  │
  │   │  Claude Code          │   │  Gemini Flash                │  │
  │   │                       │   │                              │  │
  │   │  You describe →       │   │  You type "push" →           │  │
  │   │  AI writes code       │   │  AI stages, commits, pushes  │  │
  │   │  into your files      │   │  to GitHub                   │  │
  │   └──────────┬────────────┘   └──────────────┬───────────────┘  │
  │              │                               │                  │
  │              ▼                               ▼                  │
  │     localhost:3000                    github.com/you/repo       │
  │     (live preview)                    (your code, saved)        │
  └──────────────────────────────────────────────────────────────────┘
                                                 │
                                       webhook trigger
                                                 │
                                                 ▼
  ┌──────────────────────────────────────────────────────────────────┐
  │                           VERCEL                                 │
  │                                                                  │
  │   Detects push → builds → deploys  (~30 seconds)                │
  │   Production URL: yoursite.com                                   │
  └──────────────────────────────────────────────────────────────────┘
                                 │
                                 ▼
                         🌐 yoursite.com
                     Live on the internet

Common Mistakes and How to Avoid Them

Trying to build everything at once

Build in layers. Get the core feature working first. Then add the second screen. Then the edge cases. Ask Claude Code for one thing at a time. Large requests with many dependencies at once produce messier results than building step by step.

Not pushing to GitHub regularly

Push every time something works. Think of pushes like save points in a video game. If Claude Code breaks something while trying to add a new feature, you can always go back to the last working version.

Describing how it should look instead of what it should do

"Make it look like Apple's website" is hard to act on. "Clean white background, large sans-serif heading, single column layout, product image on the right" is actionable. Describe structure and behaviour, not vibes.

Ignoring error messages

When something breaks, copy the exact error from the Claude Code panel and say: "I got this error. Please fix it." Claude Code reads the error, understands what caused it, and fixes the underlying problem. Don't try to interpret errors yourself.

What to Build Next

Once your first project is live, here's what to add to make it genuinely useful:

  • Contact form with email delivery — use Resend (free tier) so form submissions land in your inbox
  • Analytics — add Vercel Analytics so you can see how many people visit and which pages they read
  • Blog or articles section — store article content in a data file, render it dynamically — no CMS needed for a small site
  • Authentication — if you need login, use Clerk — it integrates with Next.js in about 15 minutes
  • Database — for anything that needs to store user data, Neon (Postgres) is available through the Vercel Marketplace with no configuration

The Mindset Shift

Vibe coding is not about learning to code. It's about learning to direct.

You are the product manager, the designer, and the decision-maker. Claude Code is the engineer. Gemini Flash handles deployment. Your job is to be precise about what you want, to test what gets built, and to give clear feedback. The better you get at that, the faster you ship.

The product you build could be anything — a SaaS tool, an internal dashboard, a landing page, a booking system, a side project that's been sitting in a notes app for two years. The process is the same for all of them. Antigravity, GitHub, Vercel, a custom domain.

Start with something small. Get it live. Iterate. The gap between idea and shipped product has never been smaller.