Vibe Coding

How to Build a Website with AI, Start to Finish

Go from a blank folder to a deployed, responsive website using nothing but plain-English prompts and an AI coding tool.

Beginner9 min read

Browse tools for this See related prompts

What you'll build

In this tutorial you'll build a one-page marketing website using an AI coding tool (Claude Code, Cursor, or any chat-based assistant works) instead of hand-writing every line of HTML and CSS. The goal isn't just to get something on screen — it's to practice the actual loop of vibe coding: describe, generate, run, review, refine.

By the end you'll have a responsive Next.js site with a hero section, a features or menu section, and a contact section, pushed to GitHub and deployed to a live URL. If you haven't read it yet, the /vibe-coding pillar page explains the concepts behind this workflow in more depth.

Step 1: Set up your tools

Install Node.js (18 or later) — most AI-generated web projects assume it's available
Pick one AI coding tool to start with — see /tools for a full comparison of Claude Code, Cursor, and others
Create an empty project folder and open it in your editor or terminal
Have a code editor open (VS Code or Cursor) so you can actually look at what the AI generates, not just trust it blindly

Step 2: Scaffold the project

Don't ask the AI to build a website from nothing — start from a real framework scaffold so you get routing, bundling and a dev server for free. Next.js with Tailwind CSS is the most common target for AI-generated sites because most models have seen enormous amounts of it during training.

terminal

npx create-next-app@latest my-site --typescript --tailwind --app
cd my-site
npm run dev

Step 3: Describe the site in plain language

This is the actual "vibe coding" step. Be specific about content, sections and tone — vague prompts produce generic results. Include real business details, not placeholders, so the output is something you could actually ship.

Prompt

Build the homepage for a one-page marketing site for a local bakery called
"Flour & Salt". Edit app/page.tsx.

Include:
- A hero section with a headline, a one-line description, and a
  "See our menu" button that scrolls to #menu
- A menu section (id="menu") listing 6 items with names and prices
- An about section with a two-paragraph story
- A contact section with an address, phone number, and hours

Use Tailwind CSS. Warm palette (cream, brown, terracotta). Fully responsive,
mobile-first. Keep it to a single page, no external images — use CSS for
any visual accents.

Step 4: Run it and actually look at it

Every AI coding session should end with you looking at the real result, not just the code. Run the dev server and open it in the browser at every size — most first-pass AI layouts break on mobile before they break on desktop.

terminal

npm run dev
# open http://localhost:3000
# resize the browser or open devtools' device toolbar and check mobile widths

Step 5: Iterate with follow-up prompts, don't restart

The efficient way to vibe code is a series of small, targeted follow-ups against the same conversation or session — not a fresh giant prompt every time something's off. Point at exactly what's wrong.

"The hero button doesn't actually scroll to the menu section — fix the anchor link"
"On mobile the menu items overlap — stack them in a single column below 640px"
"Add a subtle border and card background behind each menu item"
"The about section text is too long — tighten it to two short paragraphs"

Step 6: Deploy it

A site that only runs on your machine isn't shipped. Push it to GitHub and deploy — see the dedicated /tutorials/deploy-nextjs-app tutorial for the full walkthrough with environment variables and a custom domain.

Common mistakes beginners make

Writing one giant prompt for the entire site instead of building section by section
Never actually reading the generated code, so small bugs (broken links, missing alt text) ship unnoticed
Skipping the mobile check until after everything else is 'done'
Treating the first output as final instead of iterating — the second and third pass is where AI output actually gets good

Tools

Tools used in this tutorial

Claude Code

A terminal-based agentic coding tool from Anthropic that reads, edits and runs code in your own repository.

Cursor

An AI-native code editor built on VS Code, with deep inline editing, chat, and agent capabilities.

Replit

A cloud development environment with an AI agent that can build and deploy an app from a prompt, entirely in the browser.

Prompts

Prompts to pair with this

website

Build a Next.js marketing website from scratch

A structured prompt for generating a complete multi-section marketing website in Next.js, with responsive layout, accessibility and a clear file structure.

Copy prompt website

Write conversion-focused landing page copy from a product brief

Generates specific, conversion-oriented landing page copy grounded in your actual product details, avoiding generic SaaS-template language.

Copy prompt seo

Audit and optimize a page's on-page SEO

Runs a structured on-page SEO audit of a real page and produces specific, implementable fixes rather than generic SEO advice.

Copy prompt

Projects

Projects to build next

Beginner3-5 hours

Developer Portfolio Website

Build a personal portfolio site with a project showcase, an about page, and a contact form — a great first real project for practicing AI-assisted front-end development.

Next.jsTypeScriptTailwind CSS

Beginner2-4 hours

AI-Powered SaaS Landing Page

Build a fast marketing landing page for a SaaS product with a hero, feature grid, pricing table, and an email capture form wired to a real API route.