Apr 28, 2026 · Free Guide

Design, Build, and Deploy a Real Website in One Sitting

Most "AI website builders" hand you a screenshot pretending to be a website. Buttons that don't click. Forms that don't submit. A demo, not a product. The combo below fixes that — Stitch for design, Claude Code for engineering, Vercel for deployment. Three tools, one live URL at the end.

The problem with AI-generated websites

You prompt some AI tool, get a beautiful design, then realize nothing actually works. The buttons go nowhere. The forms don't submit. The "Sign Up" flow ends at slide one. You've got a screenshot, not software.

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

What is Google Stitch

Stitch is Google's AI UI design tool. You describe what you want, it generates the screens. Think Figma-quality designs from a prompt — landing pages, dashboards, mobile apps, full multi-screen flows. 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, deploys to production. Not autocomplete — 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. Bad at engineering. Claude Code is great at engineering. 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 1 OF 3

Install Claude Code

One command:

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. If you don't have Node.js: install it from nodejs.org first.

SETUP 2 OF 3

Connect Stitch to Claude Code

Get a Google API key first: go to aistudio.google.com/apikeyand click "Create API Key." Free tier works.

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

claude mcp add stitch \ --transport http \ --url "https://stitch.googleapis.com/mcp" \ --header "X-Goog-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 3 OF 3

Install Vercel CLI

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

npm install -g vercel vercel login

vercel login 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

STEP A
Design in Stitch
Go to stitch.withgoogle.com. Be specific in your prompt: vibe, colors, fonts, what each screen does. "Modern SaaS landing page with dark mode, orange accent, pricing section, testimonials" beats "make me a website."
STEP B
Hand it to Claude Code with the verification prompt
Open Claude Code in your project folder. Paste in the design (or pull it via the Stitch MCP) along with the verification prompt below.
STEP C
Claude Code builds, tests, deploys
It writes the code, starts a dev server, clicks every button itself, and only calls it done once everything actually works.
STEP D
Live URL
Vercel returns a public URL. Share it. Done.
THE PROMPT

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:

Take the Stitch output and make it a fully working app — not just a static design. Before you tell me it's done, you must prove it works: 1. Wire up every interactive element. Every button, link, form, dropdown, modal, tab, toggle, and input must do something real. No dead clicks. No href="#". No onClick stubs. If a feature is shown in the design, it must function. 2. Build the full user flow, not just one screen. If the design implies navigation (login → dashboard → settings), all routes must exist and connect. State must persist where it should (auth, form data, cart, etc.). 3. Add real data handling. Forms submit and validate. Lists load and filter. Search actually searches. If a backend isn't set up, use realistic mock data + working local state — never lorem ipsum placeholders in production paths. 4. Test it yourself before declaring done. Start the dev server and use a browser automation tool to: - Click every button on every page - Submit every form with valid AND invalid input - Navigate every route - Test on mobile viewport (resize to 375px) - Check the console for errors and network tab for failed requests - Take a screenshot of each major screen 5. Report results as a checklist. For each interactive element: ✅ works / ❌ broken (with the actual error). Don't claim "fully working" if anything in the checklist failed — fix it first, re-test, then report. 6. If you cannot test something (e.g. requires real Stripe key, real API), say so explicitly. Do NOT silently skip and call it done. 7. Once everything passes, deploy to Vercel by running `vercel --prod` and give me the live URL. Rule: "It compiles" ≠ "it works." "It looks right" ≠ "it works." Only browser-verified interaction = working.

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

  • Be specific with Stitch."Cinematic dark hero with Fraunces serif headline, rust accent #C15F3C, monospace details" gets you 10x better output than "modern landing page."
  • Always use the verification prompt.Stitch designs are static by default. Without rule 4, Claude Code will sometimes stop at "looks right" without clicking anything.
  • Vercel free tier is fine.Real production traffic, custom domains, auto-deploys — all free. Don't pay until you actually need to.
  • Iterate fast.If something breaks after deploy, just tell Claude Code what you saw: "the contact form returns a 500 on submit." It'll find it and fix it.
  • Don't skip the testing step to save time.That's how you ship broken sites. The whole point of this workflow is the AI does the QA so you don't ship something embarrassing.

All Resources

Google StitchWhere you generate the design
→
Google AI StudioGet your free API key here
→
Claude CodeThe AI engineer that builds + tests + deploys
→
VercelFree hosting for your live site
→

The Next Step

Guides show you what. AI Builders shows you how.

Inside the community, I walk through every build live — including the stuff that doesn't make it into guides. Regular people (not developers) figuring out AI together, shipping real projects, asking me anything. No fluff, no theory, just the actual work.

Join AI Builders→

skool.com/ten-fold