From Screenshot to Live Product: How to Build Real AI Websites with Stitch, Claude Code, and Vercel

Most AI website builders produce a screenshot pretending to be a website. Buttons don't click. Forms don't submit. The "Sign Up" flow ends at slide one. You get a demo, not a product.

The fix isn't a better design tool. It's splitting the job: one AI designs, another AI engineers, and you make the second one prove it works before calling it done.

This guide covers a three-tool workflow that turns a static design into a live, functional URL: Google Stitch for design, Claude Code for engineering, and Vercel for deployment.

What is Google Stitch

Stitch is Google's AI UI design tool. You describe what you want, and it generates screens — landing pages, dashboards, mobile apps, full multi-screen flows. The output is Figma-quality designs from a prompt. It's free and it's good.

But Stitch outputs designs. Static. Beautiful, but not running anywhere.

What is Claude Code

Claude Code is Anthropic's AI coding agent that runs in your terminal. It reads your files, writes real code, runs commands, tests in a real browser, and deploys to production. It's not autocomplete — it's an actual engineer that ships.

This is the piece that turns the Stitch design into something people can actually use.

Why combine them

Stitch is great at design but bad at engineering. Claude Code is great at engineering but you don't want it making aesthetic decisions from scratch.

Hand Stitch the design problem. Hand Claude Code the build problem. Hand Vercel the deploy problem. Each tool does what it's best at.

Setup: Install Claude Code

First, install Node.js from nodejs.org if you don't have it. Then install Claude Code globally via npm:

npm install -g @anthropic-ai/claude-code

Then run claude in any folder to start it. Sign in with your Anthropic account on first launch. Done.

Setup: Connect Stitch to Claude Code

Get a Google API key first: go to aistudio.google.com/apikey and click "Create API Key." The free tier works.

Then run this in your terminal (replace YOUR_GOOGLE_API_KEY with the key you just made):

claude mcp add stitch --type stdio --command npx --args -y @anthropic-ai/claude-code-mcp-stitch --env GOOGLE_API_KEY=YOUR_GOOGLE_API_KEY

This wires Stitch into Claude Code as an MCP server — meaning Claude Code can pull Stitch designs directly without you copy-pasting.

Setup: Install Vercel CLI

This is the part most people skip. You need Vercel to put your site online. Sign up free at vercel.com if you don't have an account. Then in your terminal:

npm install -g vercel

Then run:

vercel login

This opens your browser to authenticate. Confirm it worked:

vercel whoami

That should print your username. You're done with setup forever — every future deploy is one command.

The workflow

1. Design in Stitch. Describe your project — landing page, dashboard, mobile app, whatever. Generate the screens. Export the design.
2. Build with Claude Code. Paste the Stitch design into Claude Code and run the verification prompt (see below). Claude Code writes the code, runs it locally, tests it, and fixes bugs.
3. Deploy with Vercel. Run vercel --prod in your terminal. Your site is live.

The verification prompt

This is the whole game. Without this, you get a pretty static page. With this, you get a real product. Copy this exactly and paste it after the Stitch design:

Build this design as a fully functional website. Use HTML, CSS, and JavaScript. Run it locally and test it in a browser. Verify:
1. All buttons navigate to the correct pages or trigger the correct actions.
2. All forms submit data and show a success message.
3. All links work and point to valid URLs.
4. The site works on mobile, tablet, and desktop.
5. Fix any bugs you find before showing me the result.

The magic is rule 4 and rule 5. You're forcing Claude Code to test like a real QA person — not just "did it compile" but "did I click the button and did the right thing happen." This single prompt is the difference between a demo and a product.

Pro tips

• Use the MCP connection. Don't manually copy-paste designs. The MCP server keeps Stitch and Claude Code in sync.
• Test on real devices. Claude Code can open a local server. Use your phone to check mobile responsiveness.
• Iterate fast. If something breaks, tell Claude Code to fix it. It can edit files and re-run tests in seconds.
• Keep Vercel credentials handy. Deploying is one command, but you need to be logged in.

Bottom line

This workflow turns AI from a mockup generator into a real development tool. Stitch handles the visual design. Claude Code handles the engineering. Vercel handles deployment. The verification prompt ensures the output is functional, not just pretty. If you've been frustrated by AI websites that look good but don't work, this is the fix.