Colophon
How this site is built.
Tools, workflow, and the parts that went wrong, for people who want to check the work. This site is itself the demo: built PRD-first with Claude Code, using the same patterns it teaches.
- PRD first
- The site started as a PRD, not a repo. Every phase was specced as an executable document before code existed, then handed to Claude Code to build against. The full writeup is at PRD as executable spec. The short version: the spec is the deliverable, and the code is its output.
- Plan mode and subagents
- Most changes here go through Claude Code plan mode: read the codebase, write the plan, review it, then execute. Exploration and code review run as separate subagents with fresh context, so the implementing session doesn't grade its own homework. The operating patterns are documented in the Claude Code Operational Patterns playbook, which this repo also follows.
- Streaming vs structured output
- The labs stream plain text instead of structured JSON. That was a measured decision, not a default: the cost and latency comparison lives at structured output cost comparison, and the pattern that keeps labs working without an API key is at cached example fallback. Every lab page now also shows its own system prompt and per-run token cost, because a site that preaches glass boxes should be one.
- The stack
- Next.js 16 App Router, TypeScript strict, Tailwind v4, MDX content collections, Vercel AI SDK v6, Claude Sonnet 4.5 and Haiku 4.5 through the Anthropic API, deployed on Vercel. No database. Rate limiting is in-memory per function instance, which is exactly as sturdy as it sounds and fine for what this is.
- The operating manual is public
- The CLAUDE.md that steers the agent building this site lives in the repo, alongside the PRD and the strategy doc. Or skip the reading and ask the codebase yourself: there's an agent that explores this site's own source with the tool calls on screen.