How I build with AI

Overview

This site is built by a small team of AI agents, all running in Claude Code: Roger, a PM, and three specialists — Atlas (full-stack), Iris (UX/UI) and Pulse (motion). I watch the team from a dashboard and step in directly when a call needs making.

The split is deliberate. I set direction and make the decisions. The agents prototype, build and verify, and each report comes back with evidence — a passing build, screenshots at desktop and phone width, measurements — rather than “done”. Nothing reaches production until I approve the merge.

How the team works

Roger turns my direction into tasks, orders them, and keeps the team’s status in one file that only he edits. Each specialist owns a slice of the code: Atlas the Cloudflare functions, data and deploy tooling; Iris the styles, components and page markup; Pulse the case-study motion.

Because several agents edit the same repository at once, each builds in its own git worktree on its own branch. Nothing is pushed without my approval, and nothing is force-pushed. When a task names a written recipe, the agent follows it and stops to ask if it doesn’t fit.

Audit, then fixes

The first real task was a UX/UI audit of the whole site, delivered as nine prioritised findings with screenshots. Two of those findings were wrong, and the agent said so: a keyboard focus ring it had reported missing was there all along, cropped out of its own screenshot, and a “dead space” finding had been measured in a browser window far wider than the 1440px it claimed. Both were corrected in the report before any fix was scheduled.

The accessibility fixes shipped as one branch:

• A darker accent for text and links (#c94414, 4.86:1 on white); the brighter brand orange stays for borders, fills and the wordmark.
• Secondary text moved from #999 (2.85:1) to #737373 (4.74:1).
• A sitewide keyboard focus ring, 44px touch targets, unambiguous dates (“21 Jun” rather than “21/06”), and a 404 page that links onward.

After deployment, contrast failures on the home page went from 22 to 0. Two small calls stayed mine: the wordmark keeps the brand orange, since logos are exempt from the contrast rule, and case-study covers got a proper mat when the first, subtler frame didn’t solve the problem.

The /work page

A single index of every case study, with a Work entry in the navigation. It was built on its own branch and rebased onto the accessibility fixes so it uses the new link colour from day one.

Live ETH pricing

The hire page prices time in USD and shows an ETH estimate. That estimate now comes from a Cloudflare Pages Function that asks Alchemy for the rate and caches it for five minutes. If the function fails or has no key, the page keeps a build-time snapshot, so a broken rate is never an outage. The swap from snapshot to live value is styled not to move the layout — 0px shift measured from 300 to 1600px wide — with a brief update cue that switches off for people who prefer reduced motion. It’s built and previewed, and goes to production once I’ve set the production API key.

Motion pipeline

Case-study clips are real recordings of the live products, captured in a clean, logged-out browser, not generated footage. For walkthroughs, Pulse generated empty device plates — a laptop on a desk and a studio monitor, each with a flat green screen — and composited the real recording into the screen. Two plates cost 16 generation credits; I picked the laptop, and the second walkthrough reused it.

The hardest bug was one Atlas found. On phones, the clips would stall. It looked like a script race, but the cause was the encoding: screen recordings produce full-range video, and Chrome’s hardware decoder failed on it whenever two or more clips played at once. All 16 video files were re-encoded to limited range, a check that every clip must pass before it ships now sits in the motion spec, and the page falls back to the MP4 version if a clip still fails to decode. The clips wait on my visual sign-off.

The merge plan

With four branches open at once, Atlas dry-ran the merge before anything touched main: every branch trial-merged in a throwaway clone, in order. The result was zero conflicts, a combined build that passed with the same npm version Cloudflare uses, and a smoke test of seven pages at 1440 and 375. The plan listed the problems git can’t see — like a new colour token one branch needed before another had merged — and the decisions only I could make: secrets, force-pushes, and whether review screenshots belong in the repository (they don’t). I approved it, and the branches are shipping one production deploy at a time.

What it demonstrates

After 15 years in web design, the part of the job I care most about is the part I kept: deciding what matters, what good looks like, and what ships. The agents give me the capacity of a small team for the prototyping, building and checking — and because every claim comes back with evidence, I can move fast without taking their word for it.