Build. Ship. Impress.

I built my first website with Claude in an afternoon.

It wasn't perfect. The design was a little plain, the layout needed adjusting, and I made every rookie mistake possible - starting without a clear brief, jumping straight into building before thinking, asking Claude to "make it look better" without telling it what better meant.

The second website took half the time and looked twice as good.

The difference wasn't Claude. It was having a process.

This is article 4 in a series on Claude Code. So far we've covered setting up VS Code and GitHub, and publishing your first site with Vercel. If you missed those, start there - this guide assumes you have a working local environment and know how to deploy.

This one is about building websites that actually look good. Not just functional. Good enough to show a client, charge for, or publish under your own name.

By the end, you'll have a repeatable process for building clean websites with Claude Code - and the foundation for offering it as a service if you want to. The next two articles will cover how to present work to clients, handle feedback, and price what you build. But first, you need to be able to build it well.

This is that process. Start to finish, in plain English, with the exact prompts I use at every stage.

What is Claude Code and how does it work for building websites?

Claude Code is a command-line tool from Anthropic that lets you build software - including websites - by describing what you want in plain English. Instead of writing HTML, CSS, and JavaScript yourself, you describe the site you want and Claude writes the code. You review it, request changes, and iterate until it matches your vision.

For non-technical professionals - managers, consultants, executives - it's one of the fastest ways to go from idea to a working website without hiring a developer or learning to code.

1 - Before you build: the brief

The most important step happens before you open VS Code.

Non-technical professionals skip this. They open Claude, type "build me a website about my consulting services," and then spend three hours correcting things that a five-minute conversation would have prevented.

Why this matters: Claude Code is literal. It builds exactly what you describe. A vague brief produces a vague website.

Before every project, fill in this template. Copy it, paste it into a document, answer every line. Then paste the whole thing into Claude as your first message.

PROJECT BRIEF

What is this website for?
[One sentence. Example: A portfolio site for a management consultant specialising in change management.]

Who will visit it?
[Example: Potential clients - HR directors and COOs at mid-market companies.]

What do you want visitors to do?
[Example: Read about my services and send me an enquiry via the contact form.]

How many pages?
[Example: 4 pages - Home, About, Services, Contact.]

What should the design feel like?
[Example: Clean, minimal, professional. Think McKinsey website, not a creative agency.]

Any websites you like the look of?
[Example: domain.com, domain.com - I like the layout and colour scheme.]

What content do I have ready?
[Example: My bio, a list of services, one case study, and a professional photo.]

What must it include?
[Example: Contact form, mobile-friendly design, links to my LinkedIn.]

What must it NOT include?
[Example: No stock photos, no pricing, no blog section.]

Read it back before you send it. If anything is vague, make it specific. Claude will thank you by building the right thing the first time.

2 - How do you start a new Claude Code project?

Claude Code works in two ways. Pick the one that fits how you work.

Option A: The VS Code extension (easier start)
Install the Claude Code extension directly from the VS Code Marketplace. It gives you a dedicated Claude panel inside VS Code - no terminal juggling, inline diffs showing exactly what changed, and keyboard shortcuts for common actions. If you're not a developer by trade, start here.

Option B: The terminal (more control)
Open VS Code, create a new empty folder on your desktop, name it clearly - "ClientName-Website" or "MyPortfolio-2026" works fine. Go to File → Open Folder and select it. Then open the terminal inside VS Code.

Either way, the next step is the same.

Before you paste the brief, create a CLAUDE.md file for this specific project. Ask Claude:

Create a CLAUDE.md file for this project with these preferences:
- Always use clean, minimal design unless told otherwise
- Mobile-first - design for phone screens before desktop
- No stock photo placeholders - use solid colours instead
- Keep code organised and well-commented so changes are easy later
- Ask me before making any changes that affect the overall layout

Now paste your brief. Claude will read both the CLAUDE.md and the brief before writing a single line of code.

That combination - project preferences plus clear brief - is what separates a clean first draft from an hour of corrections.

3 - What is the best process for building a website with Claude Code?

The most reliable method is a three-phase build. Don't ask Claude to build the whole website in one go.

Why three phases work: Claude makes decisions about structure, design, and content simultaneously when given a single large prompt. Separating the phases means you review and approve each layer before the next one is added - which means fewer surprises and faster corrections.

Phase 1: Structure

Ask Claude to build the skeleton first - pages, navigation, layout - with no real design and placeholder text.

Build the structure of this website based on the brief I gave you.
Create all the pages with navigation between them. Use placeholder
text for content. No colours or styling yet - just clean structure
I can review before we move to design.

Review it. Click through every page. Check the navigation works. Make sure the structure makes sense before moving on.

If something looks wrong, use /rewind in the chat to undo changes and try a different direction. This is your safety net - use it freely.

Phase 2: Design

Once the structure is approved, add the visual layer.

Now apply the design. Use the style references from the brief.
Keep it clean and minimal. Use this colour palette: [describe or
paste hex codes]. Apply consistent typography throughout.
Show me the homepage design first before styling the other pages.

Review the homepage. Approve it. Then ask Claude to apply the same design to the remaining pages.

Phase 3: Content

Replace all placeholder text with real content.

Replace all placeholder text with the following content:
[paste your actual text here]

Keep the formatting consistent with the design. Don't change
any layout or styling - only replace the text and images.

Three phases. Three review points. Far fewer surprises at the end.

4 - What Claude Code slash commands do you need to know?

Claude Code has a set of slash commands you'll use constantly while building. These five matter most for a website project.

• /rewind - Undoes your last change and restores the previous version. Use it the moment something breaks instead of trying to talk Claude back to where you were. It's faster and cleaner.
• /compact - Summarises the conversation when sessions get long. Claude has a context limit - on a multi-hour build, hitting /compact keeps it from losing track of what you asked earlier. Run it between phases.
• /model - Switches between Claude models mid-session. For a quick content change, you don't need Opus. Drop down to Sonnet and save your usage for complex build work.
• /cost - Shows what the session has used so far. Useful if you're on API billing and want to keep an eye on spend as the project grows.
• /clear - Starts a fresh context without closing the session entirely. Use it when you're switching from one page to another and want Claude focused only on the new task.

You don't need to memorise all of these before you start. But /rewind and /compact will save you time on your first project.

5 - What types of websites can Claude Code build?

Not every website is the same. Here's what Claude handles easily versus where it will frustrate you.

Easy to build with Claude Code:

• Portfolio sites - one to a few pages, mostly text and images, clean layout
• Landing pages - single goal, clear structure, no complexity
• Brochure sites - 3–8 pages, about/services/contact format, standard business website

Medium difficulty (works with careful prompting):

• Simple contact or booking forms - Claude can build these, but test them thoroughly before going live
• Basic image galleries - works well for small collections, gets messy at scale

Hard (not recommended without developer support):

• E-commerce - payment processing, inventory, and checkout flows are beyond this scope
• Membership or login systems - requires backend infrastructure Claude can sketch but not safely build alone
• Database-connected applications - beyond what this guide covers

If a client asks for something in the Hard category, be honest. Refer them to a developer. It's better than delivering something that breaks.

What is Claude Cowork and is it better than Claude Code for websites?

Cowork is a graphical, no-terminal tool Anthropic launched in early 2026, designed for non-technical users who find VS Code uncomfortable. For building actual websites, Claude Code gives you more control - you can see the files, version them properly, and host them cleanly. This series stays focused on Claude Code for that reason.

6 - How do you control the visual design when building with Claude Code?

Claude's default aesthetic is functional but forgettable. The fix is giving it a clear visual direction before it starts designing. Vague instructions produce vague results.

Clean and minimal:

Design this with a clean, minimal aesthetic. White background,
one accent colour (use #1a1a2e - dark navy), generous white space,
simple sans-serif typography. Think less is more throughout.

Bold and modern:

Design this with a bold, confident aesthetic. Dark background
(#0d0d0d), white text, one strong accent colour (use #ff6b35  - 
burnt orange). Large typography, strong contrast, modern feel.

Warm and professional:

Design this with a warm, approachable professional aesthetic.
Off-white background (#faf8f5), warm grey text, soft terracotta
accent (#c17f5a). Feels human and trustworthy, not corporate.

If you have a website you like the look of, tell Claude directly:

I like the visual style of [website URL]. Use it as inspiration
for the design - similar colour palette, similar typography weight,
similar use of white space. Don't copy it, just use it as a reference.

7 - How do you test a website built with Claude Code before publishing?

Never hand over a website - or publish your own - without running this checklist. Ask Claude to run it first:

Before I review the final version, go through this checklist
and fix anything that fails:

1. Does every navigation link work?
2. Does the contact form send correctly?
3. Is every page fully responsive on mobile screens?
4. Are there any broken images or missing assets?
5. Is the page load time reasonable (no unnecessary large files)?
6. Does it look correct in both light and dark browser modes?

Tell me what you checked and what you fixed.

Then do your own manual check on top of Claude's.

Open the site on your phone. Click every button. Fill in the contact form and see if you receive the email. Open it in a different browser. Ask one other person to click through it cold and tell you if anything confused them.

Ship nothing you haven't tested on a real phone with real fingers.

Your build checklist

• Brief completed before opening VS Code
• New project folder created and opened (or VS Code extension installed)
• CLAUDE.md created with project-specific preferences
• Brief pasted as first Claude message
• Phase 1 (structure) reviewed and approved
• Phase 2 (design) reviewed and approved
• Phase 3 (content) added and reviewed
• /compact run between long phases
• Claude checklist run before final review
• Manual test on mobile completed
• One other person reviewed it cold

That's a website built properly. Not just built.

Frequently asked questions

Do I need to know how to code to use Claude Code?
No. Claude Code is designed for anyone who can describe what they want in plain English. The prompts in this guide require no prior coding knowledge.

How long does it take to build a website with Claude Code?
A clean portfolio or landing page takes 2–4 hours following the three-phase process above. A 4–8 page brochure site typically takes a full day, including testing.

Can I use Claude Code to build websites for clients as a service?
Yes. Many consultants and freelancers offer website builds using Claude Code as part of their services. The brief template in this guide is the key to scoping client projects clearly before work begins.

What is the difference between Claude Code and Claude.ai for building websites?
Claude.ai (the chat interface) can write website code, but you'd need to manually copy, save, and run the files yourself. Claude Code handles the file system directly - it creates, edits, and organises the actual files in your project folder.