Overview

Set up and build a client website project in Claude Code using a repeatable structure — from gathering materials through go-live. Ensures every client project starts clean, has a proper CLAUDE.md brain file, uses version control, and follows a consistent folder pattern.

Before You Start

Signed service agreement confirming scope, timeline, and deliverables
Client brand guide or brand assets (colors with hex codes, fonts, logo files in SVG preferred)
Client content (copy, photos, videos, testimonials)
2-4 reference websites the client likes for design inspiration
Access to Claude Code (VS Code), GitHub Desktop, Google Drive shared folder
Fireflies for call recording, Node.js (via NVM) installed
Data/spreadsheets if site has dynamic content (neighborhood data, product catalog)
Existing code zip file if client has previous Claude Code project

Steps

Conduct a 45-60 min kickoff call focused on website scope and features, recording with Fireflies to cover go-live date, MVP features (must-have vs nice-to-have), site structure, data sources, design preferences, and client deliverables
If client provides existing code, create folder at ~/Documents/clients/[client-slug]/ and unzip with unzip Archive.zip -x "__MACOSX/*" -x "node_modules/*", or if starting fresh, run npm create vite@latest . -- --template react and install Tailwind with npm install -D tailwindcss postcss autoprefixer
Run npm install in the project folder to install dependencies and recreate node_modules
Review client's brand guide PDF and extract exact hex codes for brand colors, font names with weights and sizes, logo usage rules, and visual guidelines
Create the CLAUDE.md brain file in project root using Nick Saraev's pattern, including Project Overview, Tech Stack, File Structure, Site Structure, Design System with colors and typography tables, Data Architecture, MVP Features, Rules, Brand Voice, Deployment plan, and Design Inspiration
Initialize Git with git init, git add -A, and git commit -m "Initial project setup + CLAUDE.md"
Start dev server with npm run dev and audit current state in browser, taking screenshots and noting what works, what's broken, what doesn't match brand, and what's missing from MVP scope
Open project folder as dedicated workspace in VS Code so Claude Code operates in client context, closing elevaite-brain folder first
Build MVP features using Claude Code with screenshot comparison workflow (Claude builds → screenshots output → compares to reference → fixes mismatches → repeats), committing after each major feature
Conduct client review call via screen share, walking through each page/feature, recording feedback with Fireflies, and distinguishing between bugs, design tweaks, and post-MVP additions
Deploy site to production by pushing to GitHub, connecting to Vercel or Netlify, configuring client's custom domain, and testing live site with SSL on desktop and mobile

Quality Check

CLAUDE.md includes all required sections: project overview, tech stack, design system, MVP features, and rules
Project folder lives at ~/Documents/clients/[client-slug]/, NOT inside elevaite-brain
Dev server runs without errors and site loads in browser
All must-have MVP features are functional in browser
Client has reviewed MVP before deployment
Live site loads on client's domain with SSL certificate
Git repository has commits for major milestones

Common Issues

If npm install fails, delete node_modules and package-lock.json, then retry
If client lacks brand guide, minimum requirement is 2-3 brand colors, preferred fonts, and logo files
For screenshot comparison workflow, match reference exactly in Phase 2 - do not "improve" design until Phase 4
If client doesn't have domain, help them purchase one or use subdomain temporarily
Test responsive behavior on mobile after desktop design is complete

Client Website Build in Claude Code