01
Leanpreneur Community Workshop

Build a Website
with Claude

From messy notes to a live, published site. No code. No templates. No monthly fees. You own everything.

02
Where It Begins

It Starts with Messy Notes

Every website project begins the same way. You have scattered context, not a brief.

Recorded Conversations

Barbara described her business across several calls. Raw, unstructured, full of gold. The conversation draws out things you would never think to write down.

Shared Documents

Business plans, service lists, credential summaries. Scattered across emails and files. Not organised, but full of useful detail.

Back-and-Forth Chat

The Q&A extracts things you cannot get from a one-way description. Questions surface what matters. The back-and-forth is the real brief.

Your Own Knowledge

Years of expertise that sits in your head, not on a page. A structured conversation with Claude draws it out and turns it into content.

03
The Process

From Context to Brief

The conversation is the product. Back-and-forth draws out things you would never write in a document.

01
Gather everything
Meeting recordings, documents, notes, LinkedIn profile. Dump it all in. Messy is fine.
02
Load as reference files
Give Claude the context. Projects, knowledge files, conversation history. The more it knows, the better it builds.
03
Brief through conversation
Don't write a spec. Talk to Claude. The back-and-forth refines what you actually need, not what you think you need.
04
What We Use

The Tech Stack

Simple, modern, free. Everything you need for a professional brochure site.

The Framework

Astro + Tailwind
  • Astro generates fast, static HTML
  • Tailwind handles the styling
  • No server needed, no database
  • Claude knows both extremely well
  • Perfect for brochure sites

Your Insurance Layer

GitHub
  • Every version of your site is saved
  • If you lose AI access, code is safe
  • Free for public or private repos
  • The backup and the source of truth
  • Vercel reads from here to publish

One-Click Publishing

Vercel
  • Connect your GitHub repo once
  • Every change auto-deploys
  • Free tier handles most sites
  • Custom domain is one settings change
  • SSL/HTTPS included automatically

Total running cost: domain name only (~£10/year). Everything else is free.

05
Framework Explained

What is Astro + Tailwind?

Astro is the tool that turns your content into a website. Tailwind is what makes it look good. Neither requires you to know how to code.

Astro

A modern website framework that generates fast, static HTML pages. No server running in the background, no database to maintain. It takes your content and produces clean web pages that load quickly and cost nothing to host. Claude builds with Astro natively.

Tailwind CSS

A styling system that gives you control over how things look, without writing traditional CSS. Spacing, colours, fonts, responsive layouts. Claude uses it fluently, so you can say "make the heading bigger" and it knows exactly what to change.

What About Alternatives?

Next.js - more powerful, but more complex. Overkill for a brochure site. Better for apps and dynamic content.

Hugo / Jekyll - similar static approach, but less modern. Claude works better with Astro.

WordPress - the old standard. Needs hosting, plugins, security updates, ongoing maintenance. A whole job in itself.

Squarespace / Wix - easy, but you are renting. Monthly fees, limited control, cannot customise deeply, locked into their ecosystem.

We chose Astro + Tailwind because it is simple, Claude is excellent with it, and it produces sites that are fast, free to host, and fully yours.

06
Publishing Explained

What is Vercel?

Vercel is the service that takes your website files and puts them on the internet. Think of it as the bridge between your code and a live URL.

  • You connect it to your GitHub repo once
  • Every time you push a change to GitHub, Vercel automatically rebuilds and publishes your site
  • Your site gets a free URL immediately (yoursite.vercel.app)
  • Adding a custom domain (yourname.co.uk) is one settings change
  • SSL/HTTPS security is included automatically
  • The free tier is generous, handles far more traffic than most small businesses will ever see
  • No server to manage, no software to install, no IT department needed

The Workflow

1. You tell Claude what to change in Cowork

2. Claude updates the files

3. You push to GitHub (one command or one click)

4. Vercel detects the change automatically

5. Your live site updates in under 60 seconds

Alternatives exist (Netlify, Cloudflare Pages, GitHub Pages) but Vercel is the smoothest experience and Claude knows it best.

07
Why This Matters

GitHub: Your Insurance Layer

Think of GitHub as a secure filing cabinet for every version of your website, ever.

1

AI goes down? You still have your code.

Every file is stored independently of Claude, Cowork, or any AI tool.

2

Every change is tracked.

You can see exactly what changed, when, and roll back if needed.

3

It is the bridge to publishing.

Vercel reads from GitHub. Push a change, your site updates automatically.

safeguard-assured

src/pages/index.astro
src/pages/about.astro
src/pages/services.astro
src/pages/sectors.astro
src/pages/contact.astro
src/components/Header.astro
src/components/Footer.astro
src/styles/global.css

08
How It Works

The Build Process

You describe what you want. Claude builds it. You refine through conversation.

1

Brief it

Describe the business, the audience, what pages you need, what action visitors should take.

2

Claude builds

It generates the full site structure, pages, navigation, styling, and content.

3

Review and refine

"Make the hero bolder." "Add a credentials section." "Change the colour." Plain English.

4

Push and publish

Files go to GitHub. Vercel auto-deploys. Live in under a minute.

For Barbara, we went from a blank screen to a five-page professional site in a single Cowork session. The back-and-forth conversation meant the site reflected her business, not a generic template.

09
What Works

What Works Really Well

Natural Language Changes

"Add a testimonial section." "Move the CTA above the fold." You do not need to know what HTML or CSS means.

Idea to Published in Minutes

Change your mind about something? Tell Claude, push to GitHub, live in 60 seconds. No developer, no ticket, no waiting.

You Own Everything

The code is yours. The hosting is yours. No subscription lock-in. No platform that can change its pricing or shut down.

It Improves With Context

The more Claude knows about your business, the better the output. Reference files, conversation history, brand guidelines. It compounds.

10
Being Honest

The Honest Limitations

This is not magic. It is a tool. Knowing the edges makes you better at using it.

Design

Not pixel-perfect

Claude produces clean, professional layouts, but it is not a graphic designer. You will get 80% of the way there. The last 20% takes some work.

Iteration

Back-and-forth is necessary

Your first prompt rarely produces exactly what you want. The iteration is part of the process. 2-3 rounds of refinement is normal.

Control

No visual drag-and-drop

You cannot drag elements around like in Squarespace. You describe what you want and Claude interprets it. Sometimes that interpretation needs correcting.

Setup

Technical steps still exist

DNS settings, Google Search Console, Analytics setup. These are manual. Claude in Chrome can help guide you through them, but they are not one-click.

11
Improving Quality

Making the Design Better

Claude's default output is functional, not beautiful. Here is how to push it further.

Out of the box

  • Generic colour choices
  • Basic typography
  • Layouts that work but do not stand out
  • Responsive, but not refined
  • Good enough for launch

With a front-end design skill

  • Brand-consistent colours and fonts
  • Better spacing and visual hierarchy
  • Design patterns that feel intentional
  • Reusable style system across pages
  • Moves you from 80% to 95%

Try it yourself: Anthropic publish a free front-end design skill you can install in Claude Code or Cowork. It teaches Claude modern design patterns, spacing, and typography. View on GitHub

12
What Claude Cannot Do For You

You Still Need to Provide Imagery

Claude builds the structure and the content, but it cannot generate or source your photos. Here is what you need to know.

Photos and Headshots

You provide, Claude places

Team photos, headshots, product images. Claude will tell you exactly where to put them in your project folder, and what dimensions and format it needs (typically .jpg or .webp, specific pixel sizes per location).

Placeholder System

Build first, add images later

Claude uses placeholder images while building. You can review the full layout and structure before sourcing any photos. Swap placeholders for real images when you are ready.

The AI Headshot Hack

PhotoAI by Levels.io

No professional headshot? PhotoAI generates realistic professional photos from a few selfies. Upload casual photos, get polished headshots back. Useful when you need something fast without booking a photographer.

Tip: When Claude builds your site, it will tell you the exact file path, dimensions, and format for each image. For Barbara's site, that meant dropping files into src/assets/ with specific names Claude had already referenced in the code.

13
Getting Discoverable

The Technical Hookups

Your site is live, but there are setup steps to make it properly discoverable.

DNS

Custom domain

Point your domain to Vercel. A few settings in your domain registrar. Claude can guide you step by step.

Indexing

Google Search Console

Verify ownership, submit your sitemap. This is how Google finds and indexes your pages.

Tracking

Google Analytics

Add tracking so you can see who visits, where they come from, and what they look at.

Discoverability

Sitemap submission

Astro generates a sitemap automatically. Submit it to Search Console so Google crawls your site properly.

Claude in Chrome can see what is on your screen and guide you through each of these steps. It is not one-click, but it is not hard either.

14
Ownership Transfer

Handing Over the Site

Barbara walks away with a site she owns and can update herself.

1

Set up Claude

Barbara needs a Claude account with Cowork mode. This is her tool for making changes going forward.

2

Transfer the GitHub repo

Add Barbara as a collaborator or transfer ownership. She now has the source code.

3

Transfer the Vercel project

Add her to the Vercel team or transfer the project. She controls deployment.

4

Show the update cycle

Open Cowork, describe what to change, push to GitHub, site updates. That is the whole workflow.

15
What Becomes Possible

Where This Goes Next

A brochure site is the starting point. Here is what becomes possible.

Custom Tooling

This week I had an asset management firm enquire about a Sprint. I built a decision-tree tool into my services page before sending the proposal. Custom functionality, not just content.

Content to Published

Write a blog post, case study, or landing page in Claude. Push to GitHub. Live on your site in under a minute. No CMS, no formatting fights, no copy-paste. The fastest path from idea to published.

Newsletter Integration

Connect with Beehiiv or similar. Your site becomes the hub, your newsletter becomes distribution. The content flywheel.

Proven at Scale

I rebuilt Find a Training Provider (FATP) this exact way. A full marketplace site, rebuilt with Astro, managed through Claude, deployed on Vercel. The same approach works for a five-page brochure or a complex platform.

Quick Updates

Tweak a service page before a meeting. Add a case study after a project. Update your pricing. All in natural language, live in minutes. No developer, no ticket, no waiting.

Grow the Structure

Blog section, landing pages for specific verticals, lead magnets, booking integrations. Start simple, add as you need it.

16
Leanpreneur Community

Get a simple site up.
Then grow from there.

You do not need a perfect site. You need a live one. One you own, one you can change, and one that works for your business today.

Questions?