Built by talking to a machine.
Every page, diagram and animation on this site was written by an AI coding agent — Anthropic’s Claude Code — steered in plain English by one human. No frameworks, no build step, no designer, no copywriter. This page shows the receipts: the toolchain, the loop, and the actual prompts.
The toolchain
Claudeexternal
Claude Code
An AI agent that lives in the terminal: it reads the whole repo, edits files, runs commands, drives a browser, and commits — while the human reviews diffs and steers in plain English.
Claude Fable 5 + Opus 4.7
Fable 5 is the Anthropic model behind the work — every commit in the repo is co-signed, so the claim is checkable: git log → Co-Authored-By: Claude Fable 5. A second model, Opus 4.7, ran the automated security reviews.
CLAUDE.md
A rules file the agent re-reads every session: vanilla HTML/CSS/JS only, zero dependencies, must work from file://, accessibility is a gate, every physics fact traced to a source. The agent polices itself against it.
frontend-design
Anthropic’s design-direction skill: it pushes a bold, distinctive look over generic AI styling. Where its instincts collided with this project’s hard rules, the reconciliation was written into CLAUDE.md.
modern-web-guidance
The Chrome team’s best-practice lookup: current platform features, performance budgets, browser-support fallbacks. When it pulled against frontend-design, the conflict was audited rather than ignored.
Playwright
The agent’s hands on a real browser, connected via the Model Context Protocol: load each page, read the console, screenshot diagrams, seek animations to exact frames, emulate reduced-motion and five screen widths.
GitHub Pages
Push to main and the site is live in about a minute. The agent watches the deploy via the GitHub API, then re-checks the live URL with a cold cache before calling it done.
The loop
Every feature on this site went around the same loop. A plain-English prompt becomes a concrete plan; the agent builds it; then — before anything ships — it verifies its own work in a real browser that it drives itself, through Playwright. That step is what changes the economics: nobody had to manually look at the page and report broken layouts or stuck animations back to the agent. It takes its own screenshots and reads them, seeks every animation to exact frames and checks the geometry (the scene-6 neutrons land within 0.1 px of their detector tiles), reads the console, emulates reduced-motion, walks five screen widths, runs the reduction playground end-to-end — then fixes whatever it finds and goes around again, on its own.
So defects caught in the loop never reached a human; review time went on taste and ideas instead of proofreading pixels. Only then does it ship: commit, push, watch the GitHub Pages build, and re-check the live URL with a cold cache. Failures go back around the loop, not into production.
Real prompts, real diffs
Quoted from the session transcripts — spelling tidied, otherwise word-for-word. Each one-liner under a prompt is what actually happened. It began one evening with a change of plan, mid-conversation — an earlier brief was scrapped before a line of code was written:
…focus of the website to talk about neutrons and muons, how ISIS makes use of them, the key concepts, typical phases of an experiment, data reduction … Target audience: people who work at ISIS who don’t come from a physics background, like a software engineer.
the whole premise repointed in one message; six pages designed, written and built through the evening — followed by authoritative source links to check them against
Ensure a software engineer with only high-school level physics understanding can understand the content. Also check the information with authoritative sources for accuracy. Also check the UX. Might be worth using the ultracode workflow if you think you can do these in parallel.
a parallel multi-agent fact-check, plain-language pass and UX audit; the fixes shipped as the initial public release the next morning
Then the polish sessions:
Can you check if the front-end-design skill and the google-web-design skill conflict with each other
a plugin audit: overlap and tension points mapped, verdict written into CLAUDE.md as a design-direction section
I want to explore the top 5 places where motion or effects will add value … do an adversarial review for each one you find — reasons not to do — then only prioritize
six candidates killed with written reasons; the four survivors built: traveling waves, panel cues, plot tweens
I’m not keen on page-scroll-based animations — happy to switch to a different, more straightforward method
the whole story page rebuilt from scroll-scrubbing to time-based loops; an entire browser-fallback subsystem deleted
The bar chart underneath it, can that be animated as well … you will need to show significantly more neutrons to align with the counts of each bar
30 generated neutrons per pulse; the histogram builds one visible step per hit, left to right in arrival order
Scene 02 — the machine — I see two red circles
a one-line fix, verified in the browser, live a few minutes later
Two of these are full reversals — the premise pivot before a line was written, and the scroll-animation U-turn mid-project. Neither was patched around: the agent re-planned, rewrote the motion system, deleted the dead code, and updated its own rules file so the old approach couldn’t creep back.
Guardrails
A written constitution. CLAUDE.md sets hard rules the agent checks its own work against — architecture (“no dependencies, no build step”), an accessibility bar (keyboard paths, labels on every diagram, reduced-motion must leave a fully readable static page — true of every animation on this site, including the ones here), and a verification checklist run before every push.
Facts trace to sources. Physics claims trace to isis.stfc.ac.uk or the Mantid docs, and schematic models carry a “simplified” footnote. That bar applied even to decoration: the time-of-flight race stamps are real numbers from λ×v = 3956, and the detector-histogram animation only shipped once each bar grew by exactly one step per neutron hit.
A second model reviewed for security. Changes were handed to a separate reviewer — Claude Opus 4.7 — with one job: find vulnerabilities in the diff. Its review sessions sit alongside the build transcripts.
And a human in the loop. Every diff was reviewed; every push was an explicit human decision. The agent proposes, verifies and argues — the human decides.
±0.01 Åthe data page’s playground demo uses synthetic data with a known right answer — before each release the agent re-runs it end-to-end, and its curve fit must land this close to that truth
0 errorsconsole requirement, every page, file:// and http, before any push
By the numbers
< 24 hfrom the first prompt to the live public site
15commits at last count, each co-signed by the model
≈5,000lines of hand-rolled HTML, CSS and JS
0dependencies — fonts are the only external
7pages, including this one
Counts taken when this page was written; the git history is the live source of truth. This page was itself written by the agent it describes — every claim on it traces to that repo or to the build conversation.