Build Websites for Clients With Claude Code

What to Collect First

Do not start building immediately. First collect enough information to understand:

- what the business does

- who the customer is

- what the website should achieve

- what pages are needed

- what content already exists

- what information is still missing

- what visual direction the client wants

Example Client: Apex Auto Detailing

For this Guide, we will use a fictional premium car-detailing business:

Business

Apex Auto Detailing

Location

Miami, Florida

Services

Ceramic Coating, Paint Correction, Interior Detailing

Primary Goal

Get more quote requests

Contact

Phone + WhatsApp

Style

Premium, modern, automotive, minimal

NOTE

The example business is fictional. Replace it with real client information when using this workflow professionally.

Collect the Client Brief

For a real client, ask for:

- business name

- logo

- services/products

- service area or location

- contact information

- preferred contact method

- website goal

- existing website if available

- social profiles

- real testimonials if available

- real photos

- examples of websites they like

- required pages

- preferred colors/style

IMPORTANT

Do not invent missing business information. Use placeholders instead.

Plan the Website

Use:

Turn the Client Brief Into a Website Plan

Turns the Apex Auto Detailing client brief into a clear website plan before any building starts: target customer, conversion goal, recommended pages, homepage structure, primary/secondary CTAs, what information is already available vs. still missing vs. safe to placeholder, visual direction, and mobile considerations — without inventing reviews, ratings, business history, certifications, customer numbers, prices, addresses, guarantees, or awards. Finishes with a CLIENT PLAN: READY / NEEDS INFORMATION verdict, separating what's required before building from what can use a temporary placeholder.

I am building a professional website for a client. Before changing or creating anything, review the following client brief. ## Client Brief Business: Apex Auto Detailing Location: Miami, Florida Services: - Ceramic Coating - Paint Correction - Interior Detailing Primary website goal: Generate quote requests. Primary contact methods: - Phone - WhatsApp Desired visual direction: Premium, modern, minimal and automotive. The website should feel suitable for customers willing to pay for professional premium detailing rather than a cheap car wash. ## Your Task Turn this brief into a clear website plan. Identify: - target customer - primary conversion goal - recommended pages - homepage structure - main CTA - secondary CTA - information already available - important information still missing - content that should use placeholders until the client provides it - visual direction - mobile considerations Do not build anything yet. Do not invent: - reviews - ratings - business history - certifications - customer numbers - prices - addresses - guarantees - awards Finish with: CLIENT PLAN: READY / NEEDS INFORMATION If information is missing, separate: Required before building from: Can use a temporary placeholder

Review the Plan

You do not need every tiny detail before starting. But make sure Claude understands:

Who is this for?

What should visitors do?

What makes the business different?

What information must not be invented?

Once the plan makes sense, move to the build.

Keep the First Version Focused

Now ask Claude Code to create the first complete version. The goal is not to produce dozens of pages. For the first client website, keep it focused. For example:

- Home

- Services

- About

- Contact

Provide Real Assets When Available

If the client provides:

- logo

- photos

- brand colors

- copy

- service details

add them to the project before asking Claude to finalize the website.

IMPORTANT

Do not replace real client assets with random AI-generated branding unless the client specifically approves it.

Build the First Complete Version

Use:

Build the First Client Version

Builds the first complete version of the approved Apex Auto Detailing website (Home, Services, About, Contact) as a conversion-focused, premium-automotive-styled site: clear navigation and hero with a real quote CTA, service explanations without invented pricing, only brief-supported 'why choose us' claims, a placeholder-honest gallery, easy quote/call/WhatsApp contact, mobile-first verification, and lightweight performance — no invented business facts, no authentication/database/admin dashboard/payments/booking/unneeded backend unless the project already needs it. Runs the build and tests, commits/pushes/deploys nothing, and finishes with a FIRST CLIENT VERSION: READY / NOT READY verdict plus a summary of pages created, functionality, files changed, and information still needed from the client.

Build the first complete version of the approved client website. Use the existing project and its current framework if one already exists. If this is an empty project, choose a simple modern web stack that is appropriate for a fast professional marketing website. Do not introduce unnecessary complexity. ## Business Apex Auto Detailing ## Primary Goal Generate qualified quote requests. ## Pages Create: - Home - Services - About - Contact ## Homepage Build a conversion-focused homepage containing: ### Navigation Keep navigation simple and clear. Include a visible primary CTA. ### Hero Communicate: - premium automotive detailing - main service value - service location - clear quote CTA Avoid generic phrases such as: Welcome to our website or: We provide high-quality services unless they communicate something genuinely useful. ### Services Highlight: - Ceramic Coating - Paint Correction - Interior Detailing Each service should explain: - what it is - why a customer would want it - clear next action Do not invent prices. ### Why Choose Us Use only claims supported by the client brief. Do not invent: - years in business - customer counts - certifications - awards - ratings ### Gallery Create a professional structure for showcasing real client work. If real photos have not been provided, use clearly replaceable placeholders rather than pretending they are real customer vehicles. ### Contact CTA Make it easy to: - request a quote - call - contact through WhatsApp ### Footer Include useful navigation and available business contact information. ## Design Direction Create a premium automotive visual direction. Prioritize: - strong visual hierarchy - excellent typography - generous spacing - restrained effects - polished cards and sections - strong CTA visibility - professional image presentation Avoid: - generic AI gradients - excessive animations - glowing neon elements - oversized rounded cards everywhere - unnecessary dashboard-style UI - excessive text ## Mobile Treat mobile as a first-class experience. Verify: - navigation - hero - CTAs - service cards - images - forms - WhatsApp action - footer ## Performance Keep the site lightweight. Do not add large libraries for simple effects. Use appropriate image loading and responsive behavior. ## Important Do not invent business facts. Clearly mark information that still needs client confirmation. Do not add: - authentication - database - admin dashboard - payments - booking system - unnecessary backend functionality unless the existing project already requires it. After implementation: - run the production build - run relevant existing tests - check for important runtime errors Do not commit. Do not push. Do not deploy. Finish with: FIRST CLIENT VERSION: READY / NOT READY Then summarize: - pages created - main functionality - files changed - information still needed from the client - build result

Review It Like a Client

Open the website. Do not immediately start polishing tiny details. Ask:

Does it look professional?

Is the business obvious within a few seconds?

Is the main CTA obvious?

Does it feel appropriate for the client's market?

Does mobile work?

Is any fake information visible?

If the first version is solid, move to revisions.

Real Projects Need Revision Rounds

Real client projects rarely end after version one. The client may say:

"I like it, but make the hero more premium."

"Move Ceramic Coating higher."

"Make WhatsApp more visible."

"This section has too much text."

This is where Claude Code can make client work much faster.

Give Claude the Actual Feedback

Do not ask Claude to:

Avoid

Make the website better.

Give it the client's actual feedback. This prevents Claude from unnecessarily redesigning sections the client already approved.

Example Client Feedback

Assume the client sends:

I like the website overall. Please make these changes: 1. Make Ceramic Coating the main service. 2. Make the hero feel more premium. 3. Make WhatsApp easier to find. 4. Shorten the About section. 5. Do not change the rest of the website.

Implement Only the Requested Revisions

Use:

Implement the Client's Revisions

Implements only five specific client-approved revisions (promote Ceramic Coating, make the hero feel more premium, surface WhatsApp as a secondary option, shorten the About section, preserve everything else) without redesigning the site, replacing approved content, adding unneeded dependencies, or inventing business information. Inspects desktop and mobile, verifies navigation/CTAs, runs the build and tests, deploys nothing, and finishes with a CLIENT REVISION: READY / NOT READY verdict plus an exact list of what changed.

The client reviewed the first version and approved the overall direction. Implement only the following requested revisions: 1. Make Ceramic Coating the primary service throughout the homepage. 2. Improve the hero so it feels more premium and automotive without making it visually excessive. 3. Make WhatsApp easier to access as a secondary conversion option. 4. Reduce the amount of copy in the About section while preserving the important information. 5. Preserve all sections and design decisions the client did not ask to change. ## Important Do not redesign the entire website. Do not replace approved content unnecessarily. Do not introduce new dependencies unless genuinely required. Do not invent additional business information. After implementing the revisions: - inspect desktop - inspect mobile - verify navigation and CTAs - run the production build - run relevant existing tests Do not commit. Do not push. Do not deploy. Finish with: CLIENT REVISION: READY / NOT READY Then list exactly what changed.

Continue With Small Revision Rounds

If the client sends another request, repeat the process. For example:

Example: A Small, Single-Item Revision

A worked example of a tightly scoped single-item revision — changing only the hero CTA's text from 'Get a Quote' to 'Request Your Free Quote' while leaving its destination, styling, position, and surrounding section untouched — then rebuilding without committing, pushing, or deploying.

The client wants one final revision. Change the primary hero CTA text from: Get a Quote to: Request Your Free Quote Do not change its destination, styling, position, or surrounding section. Make only this requested change. Run the production build afterward. Do not commit, push, or deploy.

This lets you use Claude Code as a revision assistant, not only a website generator.

Run the Final Delivery Audit

Before delivering the website, perform a separate final audit. Do not ask Claude to redesign it again. The website should now be treated as an approved client project. Use:

Final Pre-Delivery Audit

Runs a final pre-delivery audit of the approved client website — without redesigning it — across content (consistent business/service/location/contact info, no placeholder copy or lorem ipsum, no unsupported claims/fake reviews/ratings/stats, flagging anything still needing client confirmation), navigation (working links, mobile nav), conversion (CTA, tel: links, WhatsApp, forms), responsive design (mobile/tablet/desktop, overflow, broken grids, cropping), accessibility basics, SEO basics, performance, and technical checks (build, tests, console errors) — fixing only genuine delivery-blocking issues. Deploys nothing and finishes with a CLIENT WEBSITE: READY TO DELIVER / NOT READY verdict, listing only remaining issues if not ready.

Perform a final pre-delivery audit of this client website. The design and content direction are approved. Do not redesign the website. Do not add new features. Check the complete website specifically for issues that should be fixed before delivering it to a real client. ## Content Verify: - business name is consistent - services are correct - location information is correct - contact information is consistent - no accidental placeholder copy remains - no lorem ipsum remains - no unsupported claims remain - no fake reviews remain - no fake ratings remain - no fake business statistics remain Flag any information that still requires client confirmation instead of guessing. ## Navigation Verify: - every navigation link works - logo/home link works - mobile navigation works - no dead links exist ## Conversion Verify: - primary CTA works - phone links use the correct tel: format - WhatsApp links work - Contact page works - form works if one exists - success/error states are clear ## Responsive Design Check: - common mobile widths - tablet - desktop Look specifically for: - horizontal overflow - overlapping elements - broken grids - badly wrapping headings - oversized text - buttons extending outside the viewport - poor image cropping - navigation problems ## Accessibility Check important basics: - image alt text where appropriate - form labels - keyboard accessibility - visible focus states - button/link semantics - obvious contrast problems ## SEO Basics Verify: - unique useful page titles - meta descriptions - logical heading structure - canonical configuration where appropriate - favicon/site identity if available - social metadata if already supported ## Performance Look for: - unnecessarily large images - obvious render-blocking issues - unnecessary dependencies - major console errors Do not perform a major architecture rewrite. ## Technical - run the production build - run relevant tests - check for important console/runtime errors Fix only genuine delivery-blocking issues that are safe and clearly within scope. Do not commit. Do not push. Do not deploy. Finish with: CLIENT WEBSITE: READY TO DELIVER / NOT READY If NOT READY, list only the remaining issues requiring attention.

When to Publish

Only publish once:

The client approved the content

Contact details are correct

Real assets are in place

The final audit passes

If you use Hostinger for client websites, you can now deploy the approved project to the client's hosting and connect the final domain.

IMPORTANT

Do not deploy every revision to the live website while the client is still reviewing the project. Keep the working version separate until it is approved.

After Publishing

Open the real domain and test again:

Homepage

Navigation

Mobile menu

Phone

WhatsApp

Forms

Images

HTTPS

Important pages

Do not assume that a successful local build guarantees the deployed version is correct.

What to Hand Off

Before finishing the project, give the client the information they actually need. This may include:

Website URL

Hosting login or ownership transfer

Domain information

Business email information

Form destination

Analytics access if configured

Source/project ownership where agreed

Instructions for requesting future changes

IMPORTANT

Do not keep critical client assets or accounts under your personal ownership unless that arrangement was explicitly agreed.

The Right Way to Think About It

Do not use:

Avoid

Prompt → Website → Send Invoice

Use:

Client Brief → Website Plan → First Version → Client Review → Focused Revisions → Final QA → Publish → Handoff

Claude Code speeds up the implementation. It does not remove the need to understand what the client actually wants.

Where Else This Workflow Works

The same workflow can be used for:

- local business websites

- landing pages

- portfolios

- restaurants

- salons

- contractors

- agencies

- professional services

- personal brands

- small company websites

THE REAL LESSON

You do not need to sell every client the same template. Use the workflow to turn their business, content and goals into a custom website.

Do Not Promise a Specific Price

Do not advertise:

Avoid

"Claude Code websites sell for $10,000."

as if that price is guaranteed. The amount a client pays depends on:

- market

- website complexity

- your portfolio

- client value

- design quality

- copy/content

- revisions

- support

- sales ability

IMPORTANT

Claude Code can reduce the time required to build and revise websites. It does not automatically create customers or determine what your service is worth.

What You Completed

By the end of this Guide, you should have completed a realistic client workflow:

Real Client Brief → Professional Website → Client Revisions → Mobile & Technical QA → Approved Production Build → Published Client Website

And you now have a repeatable process that can be used for future client projects.

The Complete Workflow

Get Client Brief → Plan With Claude Code → Build First Version → Send for Review → Implement Revisions → Final QA → Publish → Deliver