Every prompt from the workshop, in the order you use them, plus the five doc templates. Copy, paste, change the brackets. Print it from your browser for a paper copy.
Claude chat, in a Project for this site. Paste idea.md under it.
Here is idea.md, a rough idea for my personal website. Before you write anything, interview me. Ask at most 5 questions at a time, most important first: audience, the one thing a visitor should do, content I already have, tone, what it must never be, and time I can give it each week.
Keep asking until you could write the concept without guessing. Then rewrite it as concept.md: problem, audience, goals, non-goals, pages, content sources, how I'll know it works. Under 600 words.
02Shape · 0:40
Deep research, one aspect at a time
Claude chat with Research turned on. Re-run any aspect that comes back thin on its own.
Using concept.md, research each aspect separately:
1. 3–5 well-regarded personal sites in my field — what makes each work
2. Design patterns: homepage structure, navigation, project case studies, type and colour systems
3. Frameworks for a content-first site in 2026 — Astro, Next.js, SvelteKit, React + Vite — for someone iterating with an AI coding agent
4. Hosting: Cloudflare vs alternatives — limits, pricing, custom domains
5. SEO, accessibility and performance baselines
Cite every claim with a link. Flag what you could not verify.
03Shape · 0:50
Three documents out
Claude chat, same conversation.
From concept.md and the research, write three files.
1) concept.md, final.
2) technical-decisions.md: one entry per decision — framework, hosting, where content lives (kept apart from code), styling, images, SEO, analytics — with options, pros, cons, choice, and what would make us revisit it.
3) phased-plan.md: Phase 0 setup, Phase 1 the smallest site that can go live, later phases of at most 5 one-line features, each with how to verify it and what is out of scope.
04Shape · 0:57
Cut the plan
Claude chat. Run it once even if the plan already looks short.
Cut phased-plan.md by half. For every feature you remove, say in one line what we lose, and move it to later.md. Phase 1 must stay the smallest site that can go live.
05Shape · 1:00
Content inventory
Claude chat. Then collect everything it lists before any code.
List every piece of content the site in concept.md needs, grouped by page: text, images, links, files. For each, give the format to save it in under content/ (Markdown with frontmatter for prose, JSON for lists, original images in content/images/) and the fields it needs. Write it as INVENTORY.md.
06Build · 1:30
Phase 0: the repo
Claude Code, in a new folder holding docs/ (the three documents) and INVENTORY.md.
Read docs/technical-decisions.md. Do Phase 0: git init on main, scaffold the framework we chose, create content/ from content/INVENTORY.md with my real content (no lorem ipsum), a CLAUDE.md under 30 lines, and CHANGELOG.md. Make sure the build passes, then commit "Phase 0".
07Build · 1:55
The phase prompt
Claude Code, fresh session (/clear), plan mode (Shift+Tab). Change the phase number each time.
Read CLAUDE.md and docs/phased-plan.md. We are doing Phase 1 only.
First make a plan: the files you'll create or change and how you'll verify each feature. Ask me anything unclear before you start.
Keep content in content/ and read it only through src/lib/content. When done: run the build, start the dev server and check every page renders at phone and desktop width, add a line to CHANGELOG.md, tick Phase 1 in the plan, and commit.
08Build · 2:05
Check it looks right
Claude Code, after a phase. /verify and /code-review do much of this too.
Open every page in a browser at 390 px and 1280 px wide and screenshot each. List anything broken, cramped, unreadable or still placeholder. Fix it, then screenshot again and show me before and after.
09Build · 2:10
SEO, performance, accessibility audit
Claude Code. Run now, then monthly.
Audit the site for SEO, performance and accessibility. Build it and run Lighthouse (mobile) on every page. Check each page has a unique title, meta description, canonical URL and a 1200×630 Open Graph image; that sitemap.xml and robots.txt exist; every image has alt text, width and height, a modern format, under 200 KB; contrast and keyboard navigation. Report a table ranked by impact, fix the top items, show before/after scores.
10Ship · 2:20
Push
Claude Code.
Commit this with a clear message and push it to a new branch called phase-2.
11Ship · 2:25
Get ready for Cloudflare
Claude Code, before connecting the repo in the dashboard.
Prepare this site for Cloudflare Workers with static assets: add the Wrangler config that serves the build output, make sure npm run build writes it, and tell me exactly which build command and output folder to enter in the Cloudflare dashboard.
12Ship · 2:30
The build failed on Cloudflare
Claude Code. Paste the whole build log in place of the brackets.
Cloudflare's build failed. Here is the log: [paste]. Find the cause, fix it in the repo, and tell me if I also need to change a setting in the dashboard (Node version, environment variable, build command).
13Iterate · after
Write the lesson down
Claude Code, after anything that broke and got fixed.
Add one line to the Lessons section of CLAUDE.md about what we just learned, so no future session repeats it.
14Iterate · after
Every change from now on
Claude Code — laptop, browser (claude.ai/code) or phone.
Read CLAUDE.md. Add [the change] to [the page]. Keep content in content/. Verify it at phone width, add a line to CHANGELOG.md, and push it to a new branch so I can check the preview URL before merging.
Words in plain English
Every technical word from the workshop, explained without jargon.
Alt text
A short description of an image, read aloud to people who can't see it.
API
A way for one program to ask another for data — here, a website asking eBird for sightings.
Astro
A framework made for content sites: pages ship as plain HTML with almost no JavaScript.
Branch
A safe copy of the project to try a change without touching the live site.
Build
Turning your source files into the finished website files.
Changelog
A dated list of every change to the site.
Claude Code
Claude working directly on the files of your project: it reads them, edits them and runs commands.
CLAUDE.md
A short note in your project that Claude reads at the start of every session — its onboarding doc.
Cloudflare
A company whose servers in 300+ cities show your site to the world — and can hold your domain too.
Commit
A saved checkpoint with a short note saying what changed.
Context
How much of the conversation Claude can keep in mind at once. Long chats crowd it out.
CPU time
How long the server may spend thinking for each visit. The free plan allows 10 milliseconds.
Crawler
A robot that reads websites for a search engine or AI assistant.
Data layer / code layer
What the site says (words, photos, links) versus how it looks and works. Keep them in separate folders.
Deep research
A Claude mode that reads many web pages for several minutes and writes a report with links.
Deploy
Putting the built website on the internet for everyone.
Dev server / localhost
A preview of the site running only on your own laptop.
DNS
The internet's phonebook: it turns a name like yourname.com into the address of a computer.
Domain
Your site's name, like yourname.com.
eBird
A public bird-sighting database run by the Cornell Lab of Ornithology.
Edge
Copies of your site kept in cities around the world, so it loads fast wherever the visitor is.
Environment variable
A setting or secret kept outside the code — like an API key.
Framework
A starter kit with rules for building pages, so you don't start from a blank file. Astro is one.
Frontmatter
A few labelled lines at the top of a Markdown file — title, date, tags.
Git
The tool that records versions of your files. GitHub is a website that stores Git projects online.
GitHub
A website that stores your project and its full history online, and triggers a deploy on every push.
Hook
A rule Claude Code's tool enforces automatically, every time, rather than one Claude may forget.
Host / hosting
The computers that send your site to each visitor — like renting shop space.
JavaScript
Code that runs in the visitor's browser. Less of it usually means a faster page.
JSON / YAML
Plain-text formats for lists of things — like a spreadsheet written as text.
Lighthouse
Google's free report card for a page: speed, accessibility, SEO and best practice, each out of 100.
Markdown
Plain text where # makes a heading and - makes a bullet. Easy for people and AI to read.
Nameservers
Whoever keeps your domain's phonebook entry. Pointing them at Cloudflare lets Cloudflare manage it.
Node.js
The engine that runs website tools on your laptop. You install it once.
Open Graph image
The preview picture shown when your link is shared on WhatsApp, LinkedIn or Slack.
PB
Personal best — your fastest time at a distance.
Plan mode
Claude writes a plan and waits for your OK before it changes any file.
Preview URL
A private test link for one branch, so you can check a change before it goes live.
Pull request
A page asking to merge a branch back in, where the change can be reviewed first.
Push
Upload your saved checkpoints from your laptop to GitHub.
R2
Cloudflare's storage for files such as photos.
Repository (repo)
A project folder that remembers every version of every file — like a Google Doc's version history, for a whole folder.
Schema
The rules a piece of content must follow — for example, every project needs a title.
SEO
Search engine optimisation: helping Google and AI search find and show your pages.
SSL / HTTPS
The padlock in the address bar: traffic between visitor and site is encrypted.
Static assets
Files sent exactly as they are — pages, images, styles — with nothing computed per visit.
Supabase
A hosted database with sign-in built in.
Terminal
A window where you type commands to your computer instead of clicking icons.
vCard
A contact file your phone can save in one tap.
WebP
A modern, smaller image format.
Workers
Cloudflare's service for running sites and small programs on its servers worldwide.
Doc templates
idea.md is yours to write. Claude writes the next three from it; CLAUDE.md goes in the repo root in Phase 0.
md
idea.md
# idea.md
Rough on purpose. Ten minutes, your own words, no AI yet.
**Who is it for?**
(one sentence)
**What should they do when they get there?**
(the one action: hire me, read my writing, get in touch, …)
**Three things it must do**
1.
2.
3.
**What I already have**
(posts, photos, CV, projects, talks, links)
**What it must never be**
(corporate? cluttered? slow? a template everyone recognises?)
**Time I'll honestly give it each week**
md
concept.md
# concept.md
_Written by Claude after interviewing you. Under 600 words._
## Problem
What is missing today, and for whom.
## Audience
Who visits, why, and what they already know about you.
## Goals
- The one action a visitor should take
- …
## Non-goals
What this site will deliberately not do (at least this year).
## Pages
| Page | Job | Content source |
|---|---|---|
| Home | | |
| About | | |
| Work / Projects | | |
| Contact | | |
## Tone and look
Three adjectives, two reference sites, one thing to avoid.
## How I'll know it works
A measurable sign — replies, sign-ups, people who mention it.
md
technical-decisions.md
# technical-decisions.md
One entry per decision. Keep each to the template below.
Revisit an entry when its "revisit when" comes true — not before.
---
## D1 · Framework
- **Options:** Astro · Next.js · SvelteKit · React + Vite
- **Pros / cons:** (from the research, with links)
- **Choice:**
- **Why:**
- **Revisit when:**
## D2 · Hosting
- **Options:** Cloudflare Workers (static assets) · Cloudflare Pages · Vercel · Netlify · GitHub Pages
- **Choice:**
- **Why:**
- **Revisit when:**
## D3 · Where content lives
- **Rule:** content lives in `content/` (Markdown with frontmatter for prose,
JSON/YAML for lists, original images in `content/images/`). Only
`src/lib/content` reads it. Components never contain copy.
- **Revisit when:** someone else needs to edit content without Git → a CMS or
database, by rewriting `src/lib/content` only.
## D4 · Styling
## D5 · Images (sizes, formats, where they're stored)
## D6 · SEO (titles, descriptions, share cards, sitemap)
## D7 · Analytics (or none)
## D8 · Domain and DNS
md
phased-plan.md
# phased-plan.md
Rules: one line per feature · at most five features a phase · every phase ends
deployed · new ideas go to `later.md`, never into the current phase.
## Phase 0 — setup [ ]
- Repo, framework scaffold, `content/` filled from INVENTORY.md, CLAUDE.md, CHANGELOG.md
- **Verify:** `npm run build` passes; first commit on `main`
- **Out of scope:** any design
## Phase 1 — the smallest site that can go live [ ]
- Home
- About
- Work / projects list
- Contact links
- Deployed on Cloudflare
- **Verify:** every page renders at phone and desktop width; live URL opens on my phone
- **Out of scope:**
## Phase 2 — [ ]
-
- **Verify:**
- **Out of scope:**
## Phase 3 — audit [ ]
- SEO, performance and accessibility audit; fix the top items
- Share card on every page
- Custom domain
- **Verify:** Lighthouse ≥ 90 (mobile) on every page
md
CLAUDE.md
# my-site
Personal site. <Framework> → Cloudflare Workers (static assets).
- Content lives in `content/`; only `src/lib/content` reads it.
Never hard-code copy, links or numbers in components.
- Plan: `docs/phased-plan.md`. Work on one phase per session; tick it when done.
- Decisions: `docs/technical-decisions.md`. Don't change one without asking.
- Before any commit: `npm run build` must pass.
- Every change adds a line to `CHANGELOG.md`.
- Every page has a unique title, description and a 1200×630 share image.
## Lessons
<!-- one line per gotcha, the day you find it -->