How to vibe code a website, start to shipped

To vibe code a website, you pick an AI coding tool, describe the site you want in plain language, iterate on what comes back until it looks and works right, and then deploy it to a real domain. The whole path can take an afternoon. Here's each step, including the parts most guides skip, like how to change things without breaking what already works.

Step 1: Pick your tool

For a first website, the honest recommendation depends on one question: do you want the result on your machine or in the browser?

• In the browser: Replit builds, runs, and hosts the site in one place. Nothing to install, and “put it live” is a button. Best if this is your first time.
• On your machine: Cursor (an AI-native code editor) or Claude Code (an agent that runs in your terminal) give you real files you own, which matters once the site becomes a business.

There's no wrong answer: the workflow below is the same everywhere. If you want the full comparison, read Best vibe coding tools in 2026.

Step 2: Write the first prompt like a brief, not a wish

The single biggest quality lever is the first prompt. “Make me a website” produces a generic template. A brief produces something usable. Cover four things: who the site is for, what it needs to do, what pages it has, and what it should feel like.

Build a website for my dog-walking business in Austin.

Pages: home, services + prices, about me, contact form.
Look: warm and simple. Big friendly type, lots of photos,
no corporate stock-photo energy.
The contact form should email me at hello@example.com.
Most visitors will be on their phones.

Notice what that prompt doesn't contain: any technology choices. Let the tool pick its defaults. They're good, and every technology opinion you add is a chance to talk it into something worse.

Step 3: Iterate in one-change steps

The first version will be 70% right. The failure mode now is the kitchen-sink follow-up: “make the header sticky, change the colors, add testimonials, and fix the mobile menu.” Four changes in one prompt means when something breaks, you don't know which change broke it. One change per prompt. Look at the result. Then the next change.

Two habits keep iteration from becoming demolition. First, be concrete about location: “the blue button under the pricing table,” not “the button.” Second, say what should not change: “add a testimonials section under services: don't touch anything else.” AI agents are eager renovators; fences keep them in the room you sent them to.

Step 4: The pre-ship check

Before the site goes live, walk through it once as a stranger. Every page on a phone. Every link. Submit the contact form and confirm the email arrives. Then ask the agent directly: “Review this site for anything broken, any placeholder text left in, and any security problem. List what you find before fixing anything.” Asking for the list first matters. It makes problems visible instead of silently half-fixed.

If the site has a form, a login, or takes payments, do a real security pass. AI-generated code is notorious for leaking secret keys and skipping input checks. How to check AI-generated code before you ship it covers exactly what to look for.

Step 5: Ship it

• On Replit: click Deploy. Your site gets a live URL; connect a custom domain in the deployment settings.
• From Cursor or Claude Code: ask the agent to “deploy this site to Vercel” (or Netlify, or Cloudflare). It will walk you through the one-time account setup, and future deploys become a single command.
• Domain: buy it at any registrar, point it at your host: the agent can give you the exact steps for your setup. Total cost is usually about $12 a year for the domain; hosting for a simple site is free on every platform above.

One more thing before you call it done: being live is not the same as being findable. Vibe-coded sites have a specific set of problems that keep them out of Google. We wrote up the fixes in Why doesn't my vibe-coded website show up on Google?.