Build & Launch a Website with Google Antigravity

Google Antigravity

Free to download, with a personal Google account. The free Individual plan has basic weekly rate limits; if you reach them, wait for the weekly reset or upgrade to Google AI Pro. Keep Google Chrome installed so the agent can test your site.

Download Antigravity

https://antigravity.google/download

Hostinger hosting

A compatible Hostinger hosting plan to publish your site through Hostinger Connector in Step 5. Get it now or when you reach Step 5.

Hostinger Hosting

This guide builds a static website, which runs on Hostinger web hosting.

Install Antigravity IDE

Download the installer for your computer and install it. Use Antigravity IDE, not the Antigravity App: Hostinger Connector installs in the IDE.

Download Antigravity

https://antigravity.google/download

Sign In with Google

Open Antigravity IDE and sign in with your personal Google account when it asks.

Open an Empty Project Folder

Create an empty folder for the website, for example in Documents, named after the business. Then open that folder in Antigravity IDE.

Find the Agent

You talk to the agent in the Agent side panel: type your request in its prompt box and press Enter.

The agent writes the code, runs commands and tests the site in Chrome. It asks before important actions — read each request, then approve it.

Send the Build Prompt

Fill in the fields, copy the prompt, and send it in the Agent side panel. The example is a boutique fitness studio with a filterable class schedule.

Build the Website

A premium, responsive business website with one real interactive feature, built as a static site and tested in the browser.

Build a premium one-page website for this business in the current folder. BUSINESS Name: {{BUSINESS_NAME}} Type: {{BUSINESS_TYPE}} City or area: {{LOCATION}} Services: {{SERVICES}} Phone and email: {{CONTACT}} Look and feel: {{STYLE}} SECTIONS A hero with one clear main call to action, services, the interactive feature, why choose us (only real reasons from the details above), the location or service area, contact, and a footer. INTERACTIVE FEATURE {{FEATURE}} It must really work in the browser with plain JavaScript and the data written in the page. No server, database or paid API. DESIGN - Premium and modern: a clear type scale, generous spacing, a restrained palette and readable contrast. - Imagery that fits the business, stored inside the project. Where a real photo is needed, use a tasteful, clearly labelled placeholder. - No generic AI-website look: no neon gradients, glowing effects, glassmorphism or rows of identical cards. IT MUST WORK - A static website in plain HTML, CSS and JavaScript, inside a folder named site, with index.html at its top. No framework, build step, server or login. - Every menu link scrolls to its section, and the phone menu opens and closes. - Every button does something real: a tel: link, a mailto: link, a section link or the interactive feature. No button that does nothing, and no form that pretends to send. - Responsive at 375, 768 and 1440 px wide, with no sideways scrolling. - Accessible: semantic sections, alt text, visible keyboard focus, and controls that work with the keyboard. - Basic SEO: a page title, meta description, Open Graph tags, a favicon and one H1. - Use only the facts above. Never invent reviews, awards, prices or statistics. Mark anything missing as [Confirm: ...]. WHEN YOU FINISH Open the website in the browser, click every link and button, and test the interactive feature. Then give me the local preview address, tell me what you checked, and list every [Confirm: ...] marker, placeholder image and sample data I must replace with real details.

Business name

Northlight Pilates Studio

Type of business

Boutique Pilates and yoga studio

City or area

Denver, Colorado

Main services or classes

Reformer Pilates, mat Pilates, yoga flow, private sessions

Phone and email

(303) 555-0187 · hello@northlightstudio.com

Interactive feature

A weekly class schedule with day and class filters

Look and feel

Warm, calm and premium: sand, olive and soft white

The agent may first show a plan. Read it, then let it continue.

Open the Preview

Open the local preview address the agent gave you in Chrome. Look at it on desktop, then make the window narrow, or use Chrome's phone view, to see the mobile layout.

Polish the Design

Send this prompt once to make the whole site more professional.

Improve the Design

One focused pass over hierarchy, weak spots and the phone layout, without changing your content.

Review the website in the browser as a senior web designer, then improve it. Keep the content, sections and brand. - Strengthen the visual hierarchy so the headline, the main action and the interactive feature read first. - Fix obvious weaknesses: uneven spacing, weak contrast, cramped sections, inconsistent buttons or anything that looks like a generic template. - Make the phone layout excellent: readable text, easy-to-tap buttons, a simple menu and an interactive feature that is easy to use with a thumb. - Keep everything working, including the interactive feature. Show me the result in the browser and list each change in one line.

Want something specific? Ask the agent in plain words, such as "Make the hero photo larger", and check the preview again.

Check the Website Yourself

Use the local preview on desktop and in a phone-sized window.

Every menu link goes to the right section

Every button does something real

The interactive feature works

The desktop and phone layouts look right

Every image loads

The content is real, with no [Confirm: ...] markers or placeholders left

Run the Launch Check

Ask the agent to test what you can't see.

Check the Website Before Launch

The agent tests the running site, the finished site folder and the files, then tells you if it is ready to publish.

Check this website before I publish it. Test the running site; don't just read the code. - Click every link and button, and use the interactive feature, at 375, 768 and 1440 px wide. - Check the browser console for errors and look for missing images or files. - Check that the site folder is complete and works on its own: index.html at its top, and every file it uses inside it. - Make sure there are no secrets, API keys or passwords anywhere, and no links to localhost or other development-only addresses. - Check the basics: page title, meta description, favicon, Open Graph tags, one H1, alt text and visible keyboard focus. - List any [Confirm: ...] marker, placeholder image or sample data still on the page. Do not fill these in yourself, and if any are left, end with NEEDS ATTENTION. Fix only real problems, without changing the design. Then give me a short pass/fail list and end with exactly one line: READY TO PUBLISH or NEEDS ATTENTION

If the agent ends with NEEDS ATTENTION, let it fix the list and run the check again. Continue when it says READY TO PUBLISH.

Get Hostinger Hosting

Your website is ready. Now it needs a home online.

Get Hostinger Hosting

Your site is static, so it runs on Hostinger web hosting. Recommended plan: Unlimited. A Node.js app would need a plan with Node.js support.

USED IN TUTORIAL

Already have Hostinger hosting? Continue below.

Install Hostinger Connector

In Antigravity IDE, open the Extensions panel with Cmd+Shift+X on Mac or Ctrl+Shift+X on Windows.

Search for Hostinger Connector. Click Install on the official Hostinger Connector.

The Connector needs Node.js 18 or newer on your computer. This is only for the Connector, not for your website. If its panel shows Node.js Required, click Install and it sets it up for you. Git is not needed.

Connect Your Hostinger Account

Click the Hostinger icon in the Activity Bar on the left side of the IDE.

Click 1-Click Connect. Sign in to Hostinger in the browser window that opens and approve the access. Back in the IDE, check that the Hostinger panel shows you are connected.

If the agent can't see the Hostinger tools afterwards, quit Antigravity completely and open it again.

Publish the Website

Send this prompt in the Agent side panel. The agent asks which Hostinger website to use, then puts your site live.

Publish the Website to Hostinger

Publish the site folder as a static website on a confirmed Hostinger destination and get the live address.

Publish this website to Hostinger with the Hostinger Connector tools. BEFORE PUBLISHING - Use the Hostinger Connector tools. If they are not available, or I am not connected to Hostinger, stop and tell me how to connect. Never ask for my password, and never write a token or key into any file. - If .hostinger/site.json exists in this project, publish to the website it names. - Otherwise, show me which hosting plans and websites are active on my account and ask me which one to use, or offer to deploy to one of my active plans using a free temporary domain. Never guess. Tell me that publishing replaces everything on that website, and only continue once I have confirmed it. PUBLISH - Publish the approved website exactly as it is. Do not redesign or rewrite anything. - Deploy only the CONTENTS of the site folder, with index.html at the top level, as a static website. Never include project files, secrets or development files. CHECK - Open the live address and check that it shows this website's real content and that the interactive feature works, not a placeholder page. - Check that the address opens over HTTPS. If SSL is not active yet, set it up with the Hostinger tools. - If the deployment fails, check the deployment details, fix the cause in this project, and ask me before publishing again. - Save the website's domain in .hostinger/site.json, so later updates go to the same website. Save only the domain — never a token or a key. When it is live, give me the live address.

Publishing replaces everything on the Hostinger website you choose. Use a new website or a temporary domain, or one you want to replace.

Check the Live Website

Open the live address on your computer and on your phone.

The address opens with a padlock (HTTPS)

It looks the same as your local preview

The links, buttons and interactive feature work

The phone layout works

Connect Your Domain

Optional. Already have a domain? The agent can connect it to the website — add it here and send the prompt.

Connect My Domain

Click Customize Prompt, add your domain, then copy the prompt.

Connect my domain {{DOMAIN}} to the website you just published, using the Hostinger Connector tools. - The website is the one saved in .hostinger/site.json. If that file is missing, or you are not sure which domain I mean, ask me — never guess which website or domain to change. - First check that the domain is in my Hostinger account. If it is not, or the connection needs something only I can do, tell me exactly what to do and wait. - Change only what is needed to point the domain at this website. Do not touch any other domain settings, such as email records. - Make sure the domain opens over HTTPS once the change is active. - If the website's main domain changes, update .hostinger/site.json so later updates still go to this website. When finished, tell me whether the domain is connected, which address to open, and anything I still need to do, such as waiting for the change to take effect everywhere.

Your Domain

e.g. northlightstudio.com

Publish an Update

Describe your change and send this prompt. The agent shows you the change in the local preview first, and publishes only after you reply Publish.

Publish an Update

Click Customize Prompt, describe your change, then copy the prompt.

Update my website in two stages. Stop after stage 1 and wait for my approval. 1. CHANGE AND PREVIEW Make only this change: {{CHANGE}} Keep everything else exactly as it is. Check that the change works on desktop and on phones, with no new console errors, then show me the local preview and stop. Do not publish anything until I reply Publish. 2. PUBLISH — only after I reply Publish - Redeploy my website on Hostinger: the same website as before, saved in .hostinger/site.json. If it is missing, ask me which website to use — never guess. - Deploy only the contents of the site folder as a static website. - Open the live address and check that it shows the change, then give me the live URL.

Your Change

e.g. Add a Saturday 9:00 Reformer class to the schedule

Open the live address when the agent finishes and check that your change is there.