How to Build a Website with Google Stitch and Antigravity
Design a website with AI, pull it into your IDE via MCP, and deploy it live on Vercel. Free tools, no code required.
The pipeline is Screenshot > Generate > Connect > Build > Deploy. Five links, all free tools. You start with a real design from Dribbble so the output doesn't look AI-generated, feed it to Google Stitch to generate a UI, then use MCP to pull the code directly into Antigravity where it becomes a real project you can test and deploy.
Find a design you like
Go to Dribbble and find an aesthetic that fits your project. Take a screenshot. This is what keeps the output from looking like every other AI website.
Generate the UI in Google Stitch
- Open stitch.withgoogle.com and upload your screenshot
- Select Web and tell it what you want to make
- Select 3.1 and send it off
Stitch has daily credit limits that reset at midnight UTC. Get your reference screenshot right before you start generating.
Set up the MCP connection while Stitch generates
While your design is generating, open Antigravity. If you don't have it, download it from antigravity.google. It's free.
- Go to Settings > Customizations
- Search for Stitch MCP in the MCP servers section
- Click + Add to install it
Model Context Protocol lets your AI IDE talk directly to other tools. It connects Antigravity to your Stitch designs so the AI can read and convert them into code automatically, without manual exporting.
Grab your Stitch API key
- Back in Google Stitch, click your profile icon
- Go to Stitch Settings
- Scroll down to the API Key section
- Click Create Key and copy it
Pull the design into your workspace
- In Antigravity, click the + button at the top, open a new folder, and give it a name
- Tell the agent: "I want to use the Google Stitch MCP server and connect it so I can show you a website that I just built out in there"
- It'll ask for your API key. Paste it in.
- Tell it which project to pull (e.g., "It's the Altitude Coffee page")
The agent finds your Stitch project, pulls in the code, and sets up the project files locally.
Test it locally
The agent creates an implementation plan and builds the project. Hit Proceed and let it run. Once it's done, it gives you a localhost link. Click it to see your fully coded website in the browser.
Deploy to Vercel
Tell the agent: "Looks beautiful, let's get it on Vercel." It packages and deploys the project automatically. You get a live .vercel.app URL. Buy your own domain if you want, but the site is live either way.