Lab

This site, rebuilt with AI

Replacing a $26/month Squarespace site with a hand-built Astro site, produced with Claude Code and Codex as the crew.

The site's 404 page: an empty diner, with the line No one's serving eggs, pancakes, or this page.
Status Live
Started June 2026
Role Producer, creative director, and builder
Stack Astro · Cloudflare Workers · Cloudflare R2 · Claude Code · Codex CLI · Whisper (MLX) · yt-dlp · ffmpeg

The brief

I was paying $26 a month for a Squarespace portfolio that got about 35 visits a month. The goal: own the site outright, make it fast, and make it something I could keep building on — with AI doing the heavy lifting and me producing.

The result is a static Astro site served by a Cloudflare Worker, videos on Cloudflare R2, and a contact form on Formspree. Running cost: the domain.

How the work actually runs

I work the way I’d run any production: one source of truth, clear handoffs, and nothing ships without sign-off.

  • One instruction file for every agent. Project rules live in AGENTS.md, shared by Claude Code and Codex, so whichever model picks up the work gets the same brief. When an agent gets something wrong, the fix goes into the brief — not into an argument in the chat.
  • A running task list. Every repo has a TODO.md that the agent keeps current, and a custom skill rolls them up into one board across all my projects.
  • I approve every deploy. There’s no auto-deploy from git. The agent builds and checks the work; I decide when it goes live.

The research pipeline behind the Lab

Before planning this section, I had Claude study 38 reels I’d saved about AI — every word and every frame:

  1. Pulled the full list from my saved folder in the browser.
  2. Downloaded each reel with yt-dlp.
  3. Transcribed the audio locally with Whisper on Apple Silicon (nothing left my machine).
  4. Cut each video into contact sheets, one frame every two seconds, so on-screen text and demos were captured.
  5. Split the reels across four parallel subagents, each writing a structured note per reel: the hook, what’s said, what’s on screen, a credibility check.
  6. Synthesized the notes into the plan you’re looking at.

The biggest lesson from that research shaped this page: people who understand AI trust builds that show their pipeline, not ones that only show results.

What broke

  • Infinite scroll fooled the first pass. Scripted scrolling only surfaced 12 of the 38 reels; Instagram needed real scroll-wheel events.
  • A batch transcription quietly overwrote itself. Whisper’s command-line tool wrote every transcript to the first file’s name. A subagent caught the mismatch because the words didn’t match the frames — exactly why the frames were in the pipeline.
  • A find-and-replace broke the brief. Swapping “Claude” for “Codex” across the instruction file also rewrote model IDs, file paths and URLs. The rule is now written into the brief itself.
  • Fonts were a privacy problem. Loading them from Google’s servers is a GDPR risk in Europe, so they’re now hosted on this site.

Small touches

The 404 page is an empty diner — generated with Codex’s image tool, upscaled 4× with Real-ESRGAN so it holds up full-screen, because I love a diner and nobody should be serving pancakes at a dead link.

Build log

  1. Search and AI-answer-engine pass (self-hosted fonts, structured data, llms.txt, privacy page) and the diner 404. Launched the Lab.
  2. Studied 38 saved AI reels — local Whisper transcripts, frame-by-frame contact sheets, four parallel subagents — to plan the site's AI side.
  3. Hyundai Drive case study added; moved hosting to a Cloudflare Worker with manual, approved deploys.
  4. First version of the Astro site built with Claude Code, replacing Squarespace.

← All Lab projects