A few months ago I needed a personal brand website. Not a template with my name slapped on it — a properly designed, multi-page site with a visual identity, a content structure that would hold up as I added to it, and copy that actually sounded like me rather than a LinkedIn summary written under duress.

I got three quotes from agencies and freelancers. The range was $2,800 to $4,500, with timelines of four to eight weeks, and the inevitable rider: “copy and images are the client’s responsibility.” So I would be paying $4,000 for someone to build a structure, and still writing all the content myself.

I decided to try doing the whole thing with AI instead. Not because I was certain it would work — I had no coding background whatsoever — but because the worst case was a few hours wasted and the best case was a fully built site for the cost of a domain name. It worked. Better than I expected, faster than I expected, and the site I ended up with was more distinctly mine than any agency product would have been.

This is the complete account. Every tool, every prompt style, every mistake, and the exact workflow anyone can replicate.

Agency Route
$4,000
Design + development + project management. Copy and images still on you. 4–8 week timeline. Revisions billed at hourly rate. Ongoing maintenance contract at $150/month.

AI Stack Route
$10
Domain name only. Hosting: free on Netlify. Code: Claude (free tier). Copy + images: ChatGPT (free tier). Structure: Notion (free tier). Built and live in a few focused sessions.

The 4-Tool Stack — What Each One Does

The key to making this work is using the right tool for the right job and not trying to do everything in one place. Each tool in the stack has a specific role — and the roles do not overlap.

The Stack
4 tools · 1 coherent workflow · $10 total

🤖
Claude (Anthropic)
Code & Design System

Free

The architect and builder. Claude writes all the HTML, CSS, and any JavaScript — from scratch, based on plain-language briefs. Give it a visual direction and it produces production-ready code. It also maintains design consistency across pages because you can share previous code in the conversation and ask it to match. No other tool in this stack does what Claude does for code generation.

💬
ChatGPT
Copy + Image Generation

Free / $20

The copywriter and art director. ChatGPT writes the homepage headline, the about section, the professional summary, the page descriptions — all from a brief about who you are and how you want to be positioned. DALL-E generates hero images, profile visuals, and section backgrounds. The combination means you never have to buy stock photography or write cold-start copy from a blank page.

📋
Notion
Structure & Brief

Free

The project brain. Notion holds the site map, the page-by-page content brief, the design decisions, the copy drafts, and the revision notes — all in one place before a single line of code gets written. This is the step most people skip and then regret. Going from a structured Notion brief to Claude produces dramatically better output than going from a vague idea to Claude directly.

🚀
Netlify
Hosting & Deployment

Free

The publisher. Drag your folder of HTML files onto Netlify’s dashboard and your site is live in under two minutes — on a real URL, with SSL, mobile-responsive, and globally fast. No server configuration, no FTP, no WordPress admin. Netlify also gives you a free subdomain instantly, so you can share a working version before you even connect your custom domain.

Phase 1: Build the Brief in Notion Before Touching Any AI

This is the most important step and the most skipped one. The quality of what Claude and ChatGPT produce is almost entirely determined by the quality of the brief you give them. A vague brief produces a generic output. A structured brief produces something that feels specifically yours.

The Notion brief took about two hours to build — and it saved at least ten hours of revision cycles afterwards. Here is exactly what went into it:

The Notion Brief Structure
What to build in Notion before you open Claude or ChatGPT
Site map with page list and purpose. Homepage (first impression + CTA), Professional page (work, credentials, freelance packages), Blog hub (content streams), Individual post templates. One sentence per page describing exactly what it needs to do and for whom. This becomes the brief for every Claude conversation.

Visual identity decisions — written out explicitly. Font pairing (Playfair Display for headings, DM Sans for body), colour palette with hex codes (cream paper background #f5f2ed, deep ink #0d0d0d, terracotta accent #b85c38), tone (editorial, warm, confident). When these live in Notion, you paste them into every Claude prompt and the design stays consistent across sessions without explanation.

Positioning statement and tone of voice. Three sentences on who you are, who the site is for, and what it should feel like. ChatGPT uses this to write copy. Claude uses this to choose visual weight and spacing. Notion keeps it stable so neither tool drifts away from it across sessions.

Section-by-section content brief for each page. For the homepage: hero headline idea, what the hero sub-text should communicate, what the first scroll section covers, what the CTA should be. Not the final copy — just the direction. ChatGPT turns this into copy. Claude turns this into layout.

Inspiration references. Three to five sites with a note on what specifically to borrow from each — not the overall aesthetic, but specific elements. “Lenny’s Newsletter nav structure.” “Derek Sivers’ content density.” “The editorial spacing from this magazine site.” These become direct Claude prompt ingredients.

Phase 2: Copy and Images From ChatGPT — Before the Code

Most people build the site first and write the copy later. This is the wrong order and it shows — the copy ends up sized to fit the layout rather than the layout being sized to fit the copy. Do the copy first, even in rough form, so Claude knows what it is building around.

1
Hero Section Copy — the hardest 30 words on the site
ChatGPT

The hero headline is the one piece of copy that determines whether someone scrolls or leaves. It is also the hardest to write yourself because you are too close to it. ChatGPT, given a detailed positioning brief, produces five or six options in seconds — and one of them is usually either exactly right or one edit away from being right.

I am building a personal brand website. I am a marketing and operations professional who scales businesses and closes complex situations — not a narrow specialist. My audience is senior marketers, founders, and companies looking for someone who can own a whole problem, not just a channel. Write 5 hero headline options that communicate this positioning in under 12 words each. Tone: confident, direct, editorial — not corporate or aggressive.
Five options generated. The one used: “I scale businesses. I close situations. I connect the dots nobody else is looking for.” Took three edits to personalise the phrasing — the structure was right from the first output.

2
About & Professional Summary — in your voice, not a template
ChatGPT

The about section is where most personal brand sites fail — they either read like a CV or like a motivational poster. The fix is giving ChatGPT enough personal context that it cannot produce a generic output even if it tried.

Write a 120-word professional about section for my website. Context: I have worked across demand generation, budget planning, marketplace strategy, and cross-functional project management. I have an MSc from EDHEC Business School in France and have worked across India and Europe. My personal philosophy is “Enjoy, Explore, Evolve.” I want this to sound like a person, not a job description — specific, direct, and slightly unconventional. Do not use the words “passionate,” “dynamic,” or “results-driven.”
A draft that was 80% final copy on the first pass. Main edit: one paragraph was too formal. Replaced with a sentence from my own notes that ChatGPT had not seen.

3
Hero Image & Visuals — no stock photography needed
ChatGPT (DALL-E)

The site needed a visual language that matched the editorial, warm-but-sophisticated tone of the design. Stock photography either looks corporate or looks like every other personal brand site in the category. AI-generated images, prompted correctly, can produce visuals that are genuinely distinct.

Generate a hero background image for a personal brand website with an editorial, warm aesthetic. Colour palette: warm cream, deep charcoal, and terracotta accents. Style: minimal, textured, slightly analog — think high-end magazine rather than tech startup. No people, no text, no clichéd business imagery. Abstract or architectural shapes preferred. Aspect ratio 16:9.
Generated six variants. Two were usable as-is. One became the homepage background with a slight opacity overlay applied in CSS. Total cost: $0. Equivalent from a stock photography site with the same visual distinctiveness: difficult to find at any price.

Phase 3: Build the Code With Claude — Session by Session

With the Notion brief complete and the copy and images ready, the Claude sessions become remarkably efficient. You are not asking Claude to invent the site — you are asking it to build a specific, well-defined thing. That distinction changes everything about output quality.

4
Session 1 — Homepage: establish the design system
Claude

The homepage session does two things simultaneously: it builds the homepage and it establishes the design system — the CSS variables, the font stack, the spacing rules — that every subsequent page will inherit. Get this right and all future sessions are fast. Get it wrong and you spend every subsequent session fixing inconsistencies.

Build a homepage in a single HTML file. Fonts: Playfair Display (headings, serif, editorial feel), DM Sans (body, clean), DM Mono (labels and metadata). Colours: background #f5f2ed (warm paper), text #0d0d0d, accent #b85c38 (terracotta). Use CSS variables for all colours so I can adjust them globally. The page needs: a fixed nav with my name and links, a full-height hero with the headline [X] and subtext [Y], a brief about section, a work/services section, and a footer. Keep the spacing generous and the layout clean — editorial magazine aesthetic, not startup landing page.
Complete single-file HTML with all CSS inline, CSS variables defined, Google Fonts loaded, responsive at mobile breakpoints. Took one revision pass to adjust the hero spacing and change one section’s background colour. The CSS variable system meant that one change propagated across the whole file instantly.

5
Session 2 — Additional Pages: inherit, do not rebuild
Claude

For every page after the homepage, the prompt starts by sharing the homepage CSS variables and design system, then asking for the new page to match it. This is the most important workflow detail — Claude maintains design consistency across sessions when you explicitly hand it the context.

Here is my homepage CSS [paste CSS variables and key styles]. Build a blog hub page that uses the exact same design system — same fonts, same colours, same nav, same footer. The blog page needs four content stream sections: Articles, Work Stories, Podcast, and AI Use Cases. Each section should have a number, a title, a short description, and a “Read more” link. Same editorial feel as the homepage.
Blog hub page built in one session, visually indistinguishable from the homepage in terms of design language. No additional CSS variables needed — full inheritance from the system established in session one.

6
Revisions: describe what is wrong, not how to fix it
Claude

The most common mistake when revising Claude-generated code: describing the fix instead of the problem. “Change the padding on line 47 to 2rem” produces a narrow fix. “The hero section feels too cramped on mobile — the headline and subtext are too close together and the CTA button is hard to tap” produces a better, broader solution. Describe what you see and feel, not what you think the code should say.

Average revisions per page: 2–3 rounds. Each round addressed 3–5 visual issues at once. The total number of back-and-forth messages to go from first draft to final page was between 6 and 10 per page — far less than the revision cycle with a human developer who needs context repeated across emails.

Phase 4: Deploy on Netlify — Under 5 Minutes

This is the step people assume is complicated. It is not. Netlify’s drag-and-drop deploy is genuinely as simple as it sounds — you drag a folder of HTML files onto a browser window and the site is live on a public URL in about 90 seconds. No account setup complexity, no credit card for the free tier, no configuration.

The only step that requires any attention is connecting your custom domain — which involves updating two DNS records with your domain registrar. Netlify gives you the exact values to enter, and the propagation takes between 10 minutes and a few hours. The site runs at full speed on Netlify’s global CDN from day one with no performance configuration required.

Total Cost
$10
Domain only. Everything else free tier.

Build Sessions
5–6
Homepage, blog hub, professional page, article templates, revisions

Pages Built
8+
Homepage, blog hub, 4 article pages, professional page, about

Agency Alternative
$4K
Lowest quote received for equivalent scope, 4–8 week timeline

AI Stack vs Agency — The Honest Comparison

Head to Head
What you get with each route

What you need
Agency
AI Stack

Visual design
Custom designed by professional
Claude + your direction
Comparable output
Copywriting
Usually excluded — your responsibility
ChatGPT from your brief
AI stack advantage
Images / visuals
Stock photography budget extra
DALL-E generation included
AI stack advantage
Timeline to live site
4–8 weeks with revision rounds
A few focused sessions
AI stack advantage
Future updates
Hourly rate or maintenance contract
New Claude session, same design system
AI stack advantage
Complex custom functionality
Included in scope
Claude can handle most things
Depends on complexity
You need zero technical knowledge
True — fully hands off
Mostly true — minimal file management
Small learning curve

The one honest caveat: If you need a complex e-commerce build, a custom CMS with multiple contributors, or deep third-party integrations, an agency is still the right call. The AI stack wins decisively for personal brand sites, portfolio sites, landing pages, and content-driven sites — which covers the majority of what professionals and solopreneurs actually need.

Who This Works For — and Who It Does Not

Fit Check
Be honest with yourself before starting
This works well for

Professionals building a personal brand site or portfolio

Consultants, coaches, and freelancers who need a credible web presence fast

Marketers, operators, and business people who want to own their online identity

Anyone who has been quoted more than $1,500 for a site they could describe in one paragraph

People who want to update their site themselves without depending on a developer every time

Reconsider if you need

A full e-commerce store with product management, payments, and inventory

A site that multiple non-technical team members need to update through a CMS

Complex membership, subscription, or gating functionality

Deep integration with enterprise systems that require custom API work

A project where you genuinely cannot allocate any time to the process yourself

The shift this workflow represents is not primarily about cost — though the cost difference is significant. It is about control. An agency builds your site and hands you a product. The AI stack builds you a site that is entirely yours — you understand every decision in it, you can change anything at any time, and the design system means every future page you add is automatically consistent with everything that came before.

“The agency builds you a house and hands you the keys. The AI stack teaches you how to build — and every room you add afterwards takes a fraction of the time.”

This use case is also available as
Same content, different formats

📝 This Article
💼 LinkedIn Post
🎙️ Podcast Episode

Build Yours
Want to build your own site using this exact stack?
Book a 15-minute call. I will walk you through the Notion brief structure, the prompt workflow, and the Netlify deployment in real time — so you leave with everything you need to start your own build the same day.

💼
Follow for more on marketing, business & strategy
I write about what it actually takes to build a real point of view — no recycled tips, no engagement-bait contrarianism.
Follow on LinkedIn →
🤖
Want AI actually working in your marketing?
Book a free 15-minute call and we'll map one AI workflow you can put to work in your marketing this week — no fluff, real tools.
Book an AI Workflow Call →
📖
Read next: How I Built a Bottoms-Up Budget Model in 40 Minutes Using Claude
A task that used to take two to three days of stakeholder back-and-forth, multiple spreadsheet versions, and a graveyard of revision emails — done…
Read the Essay →