Hiring a web developer to build a business website can cost anywhere from $3,000 to $15,000. Using a website builder like Wix or Squarespace gets you partway there, but you hit a ceiling fast when you need something custom. What if you could describe exactly what you want and have an AI actually build it for you, writing real code, handling the files, and preparing it for launch? That is exactly what Claude Code lets you do.
I have watched business owners use Claude Code to build landing pages, portfolio sites, and service websites in a single afternoon. No developer needed. No technical background required. Just clear instructions and a willingness to work through the process step by step.
This guide walks you through the full 8-stage process: from blank screen to a live, published website.
What Is Claude Code?
Claude Code is an AI coding agent built by Anthropic. Unlike a regular chatbot where you get code suggestions you have to copy and paste yourself, Claude Code actually works inside your files. It reads your project, writes and edits code directly, runs commands, and can even test what it builds.
Think of it as a developer who sits at your desk and does the work. You describe what you want in plain English. Claude Code figures out how to build it.
You can use Claude Code three ways:
- Desktop App: A visual interface you download and install (easiest for beginners)
- Terminal (CLI): A command-line tool for more control
- IDE extensions: Works inside VS Code or JetBrains if you already use those editors
For this guide, I will focus on the Desktop App since it is the most accessible for non-developers.
If you want to see what else Claude Code can do beyond websites, check out How to Use Claude Code for Data Analysis Without Writing Any Code.
What You Need Before You Start
Before writing your first prompt, set up these four things:
- A Claude account: Sign up at claude.ai. Claude Code is available on the Pro plan ($20/month) and the Max plan. The free plan does not include Claude Code.
- Claude Code Desktop App: Download it from claude.ai/code and install it on your computer.
- A project folder: Create an empty folder on your desktop called something like
my-website. This is where Claude Code will build everything. - Your website brief: Before touching any tool, write down: what your business does, who your audience is, what pages you need, and what action you want visitors to take.
That last step is the most important one. Claude Code writes code based on your instructions. The clearer your instructions, the better your website.
The 8-Stage Process to Build a Website with Claude Code
Stage 1: Write Your Project Brief
Open a plain text document and write out your website brief. This does not need to be technical. It just needs to answer:
- What is the business or project?
- Who is it for?
- What pages do you need (Home, About, Services, Contact)?
- What is the main action visitors should take (book a call, buy a product, sign up)?
- What tone or style do you want (professional, friendly, bold)?
Example brief for a cleaning business:
Project Brief Business: Sparkle Clean Co., a residential and commercial cleaning service in Lagos Audience: Homeowners and small business owners who want reliable cleaners Pages: Home, Services, About Us, Contact Main CTA: Book a free quote Style: Clean, professional, trustworthy. Use blue and white colors.
Keep this brief somewhere handy. You will paste it into Claude Code in Stage 2.
Stage 2: Set Up Your Project in Claude Code
Open the Claude Code Desktop App and point it at your empty project folder (the one you created earlier). Claude Code will use this folder as its workspace, reading and writing files there.
Start the conversation with a setup prompt like this:
I am building a business website from scratch. I do not know how to code. Please help me build a clean, professional website using HTML, CSS, and a bit of JavaScript. Here is my project brief:
[paste your brief here]
Start by creating the project structure: folders and the main files I will need. Explain what you create so I understand what each file does.
Claude Code will create the file structure for you, typically something like an index.html for the homepage, a styles.css file for design, and a js folder for any interactive elements. It will explain each file in plain English.
Stage 3: Build the Homepage
With your structure in place, ask Claude Code to build the homepage:
Build the homepage (index.html) based on my project brief. Include:
- A hero section with my business name, a one-line tagline, and a "Get a Free Quote" button
- A section listing my three main services with short descriptions
- A brief "Why choose us" section with three to four trust points
- A footer with my business name, a phone number placeholder, and navigation links
Use clean, modern design. Make it mobile-friendly.
Claude Code will write the full HTML and CSS. You can open the index.html file in your browser at any time to see how it looks.
If something does not look right, describe it plainly: "The hero section text is too small. Make the headline larger and the button more prominent."
Stage 4: Add Inner Pages
Once the homepage looks right, build the other pages one at a time:
Now build the Services page (services.html). Use the same header and footer as the homepage. List the following services with a name, short description, and price range for each: [list your services here]
Repeat this for the About page and Contact page. For the Contact page, you can ask Claude Code to add a working contact form that sends emails using a free service like Formspree or Netlify Forms.
If you are planning to add a live chat or AI chatbot to your site after launch, How to Build a Claude AI Chatbot for Your Website covers the full process.
Stage 5: Style and Refine the Design
This is where you make the website look like yours. You can reference real design examples to guide Claude Code:
I want the website to feel modern and clean, similar to the style of Stripe's website. Make the typography larger, increase whitespace between sections, and use a blue accent color (#1a56db) for buttons and highlights.
You do not need to know CSS to do this. Describe what you want in visual terms and Claude Code translates it into code.
Some useful style instructions:
- "Make all headings bolder and slightly larger"
- "Add a subtle shadow to the service cards"
- "Make the background of the hero section a soft gradient from white to light blue"
- "Increase padding on all sections so the page breathes more"
Stage 6: Add Interactive Elements
Once the design feels right, add functionality. Common things business owners want:
Smooth scrolling navigation
Add smooth scrolling to all navigation links so clicking them glides to the right section on the page.
An image gallery or portfolio section
Add a simple portfolio grid to the homepage showing six project images. Use placeholder images for now. I will replace them later.
A Google Maps embed
Add a Google Maps embed on the Contact page showing my business location. The address is: [your address].
Testimonials slider
Add a testimonials section with three customer quotes. Make them display in a simple slider that auto-advances every five seconds.
For more advanced features like interactive tools or calculators, you can also use Claude Artifacts to build standalone interactive widgets that you can embed into any page.
Stage 7: Test and Fix Bugs
Before launching, check the site across devices and ask Claude Code to fix anything that looks off:
I tested the site on mobile and the navigation menu is not visible. The hero image is also too tall on phone screens. Please fix both issues.
Walk through each page on your phone and on a desktop browser. Note anything that looks wrong and describe it to Claude Code. This back-and-forth is normal. Even professional developers go through multiple rounds of revisions.
Also ask Claude Code to run a final check:
Review all pages and check for: broken links, missing alt text on images, any placeholder content I forgot to replace, and any slow-loading elements.
Stage 8: Deploy and Launch
Once the site looks exactly the way you want, it is time to publish it. The easiest free options for hosting are:
Vercel: Drag and drop your project folder into Vercel and get a live URL in under two minutes. Free plan is generous for small business sites.
Netlify: Similar to Vercel. Also free. Includes a simple form-handling feature so your contact form works without any extra setup.
GitHub Pages: Free hosting directly from a GitHub repository. Ask Claude Code to help you push your project to GitHub if you go this route.
Ask Claude Code to guide you through the deployment step too:
I want to publish this site on Vercel. Walk me through how to do that step by step. I have never done this before.
It will explain the exact steps in plain language.
A Real Example: How This Works in Practice
One of my students built a three-page portfolio site for her photography business using this exact process. She had never touched code before. Here is how her 8-stage session played out:
- Stage 1 (15 minutes): Wrote her brief, listing her specialty (wedding and portrait photography), her target clients (couples and families), and her style preference (elegant, dark-themed, lots of whitespace).
- Stages 2 to 4 (45 minutes): Claude Code built the project structure, homepage, gallery page, and contact page.
- Stages 5 to 6 (30 minutes): Refined typography, added a lightbox image viewer, and connected a contact form to Formspree.
- Stage 7 (20 minutes): Fixed a mobile layout issue on the gallery page.
- Stage 8 (10 minutes): Deployed to Netlify with her custom domain.
Total time: about two hours. Total cost: $20 for a Claude Pro subscription and $12/year for the domain.
Tips for Better Results with Claude Code
A few things I have learned from watching people go through this process:
- One change at a time: Do not ask for five changes in one prompt. Ask for one, check the result, then ask for the next. This keeps mistakes small and easy to fix.
- Describe what you see, not what you want Claude to do: Instead of "change the CSS margin property," say "the hero text is too close to the top of the screen. Add more space above it."
- Use a CLAUDE.md file: Claude Code reads a special file called
CLAUDE.mdat the start of every session. Write your project brief and style preferences in this file so Claude Code remembers your context every time you open the project. Ask Claude Code to create this file for you. - Ask for explanations: If Claude Code writes something you do not understand, ask it to explain. "What does this CSS do?" is a perfectly valid question. You will learn as you build.
What Happens When You Get Stuck
Claude Code is not perfect. Sometimes it writes code that breaks something. When this happens:
- Describe exactly what broke and what you were trying to do.
- Ask Claude Code to undo the last change and try a different approach.
- If the page looks completely broken, ask: "Please restore the page to how it looked before the last change."
What I love about Claude Code for this kind of project is that it removes the fear of making mistakes. You are not writing code yourself, so there is nothing to memorize. Every mistake is just a prompt away from being fixed.
Next Steps
Building a website with Claude Code is just the beginning. Once your site is live, you can use Claude Code to:
- Add a blog and write your first post
- Build a simple booking or order form
- Create a members-only section
- Connect your site to a payment processor
The same tool that built your website can maintain and grow it.
If you want to take the project further, How to Use Claude Code for Data Analysis shows how to use Claude Code to analyze visitor data and make smarter decisions about your site.
Download the free Website Builder AI Pack below. It includes the 8-stage prompt kit with copy-paste prompts for every stage, a project brief template, and a pre-launch checklist so nothing gets missed.