How to build a website with Claude — from prompt to client handoff

What you need

• Claude Code (terminal, desktop app, or IDE extension) — the agent that will write and edit the files. Claude in the browser works for smaller sites too.
• A browser to review the result after every iteration.
• The client's hosting login — any standard web hosting with FTP or a file manager is enough.

Step 1: Write the content brief before the first prompt

The single biggest quality lever isn't prompt engineering — it's giving the AI real content. Placeholder text produces placeholder design. Before you open Claude, collect:

• Business name, what they do, who their customers are
• The sections the site needs (hero, services, about, testimonials, contact…)
• Actual copy where it exists — or bullet points Claude can expand
• Logo and photos, plus brand colors if any
• One or two reference sites and what specifically you like about them

Step 2: Prompt the first build

A strong first prompt is a brief, not a wish. For example:

"Build a one-page website for [business], a [what they do] in [city]. Sections: hero with headline and CTA, services (3 cards), about with photo, testimonials, contact with a form. Style: [reference/mood]. Requirements: semantic HTML, one CSS file, mobile-first, no frameworks, and fast — aim for strong real-world performance. Use the copy below: …"

The "no frameworks" line matters. Plain HTML/CSS output is portable, fast, easy to host anywhere, and — important for later — easy for a CMS to make editable.

Step 3: Iterate like a designer, not a developer

Open the result in your browser and react to what you see. Effective iteration instructions are concrete and visual:

• "The hero headline is too small on mobile — make it dominate the viewport."
• "Swap the services section to a 3-column grid with icons."
• "The contrast between the text and background fails on the about section — fix it."

Check every breakpoint and click every link before moving on. This visual review is the professional's answer to the "is vibe coding safe?" question — you don't need to read the code, but you do need to inspect the result like it's your name on it. It is.

Step 4: Ask for the technical baseline explicitly

Claude writes clean code by default, but production polish must be requested. One consolidated prompt covers it:

"Now harden the site: unique title and meta description, Open Graph tags, JSON-LD structured data for a local business, compressed and correctly sized images with width/height attributes, a favicon, robots.txt and sitemap.xml, and check color contrast for accessibility."

Step 5: Deploy to the client's own hosting

A vibe-coded site is a folder of files — deployment is copying that folder. Upload via FTP or the host's file manager, point the domain, done. Resist the temptation of platform hosting with monthly fees: on the client's own hosting, the site belongs entirely to them and survives every tool subscription you might cancel later.

Step 6: Make it editable — the handoff

Here's where most Claude-built projects quietly fail. The site is live and beautiful, and three weeks later the client emails: "How do I change the opening hours?" Custom code has no admin area — every text change routes back through you, forever.

Frequently asked questions

Can I build a multi-page website with Claude?

Yes — describe the page structure in the brief ("home, services, about, contact — shared nav and footer") and Claude will generate consistent pages with working links.

How long does it take?

For an experienced designer with a ready brief: a polished one-pager in an afternoon, a five-page site in a day — including review. The bottleneck is content, not code.

Claude vs. Codex vs. Cursor for this workflow?

All three can do it; the workflow is identical. See our tool comparison for where each shines.

What about a redesign of an existing site?

Same workflow with one extra input: give Claude the existing site's content (or URL) and ask it to rebuild the structure with new design. Existing HTML/CSS sites can also be brought into VibeMS afterward, not just new builds.