Building PromptAtWork: A PRD-First Build With Claude Code

This site — promptatwork.com — was built the same way one of its own case studies describes: PRD-first, with Claude Code doing the implementation work against a written plan rather than ad hoc requests. The process started with a single PRD document and a phase-wise development plan, split into eight phases: foundation, static core, CMS integration, dynamic backend, AI Lab & content, training platform, hardening, and launch. Each phase became its own living status document — not a static plan written once and forgotten, but one updated with what actually happened: what shipped, what bugs came up, what got deliberately deferred and why. Phase 0 migrated the original Vite site to Next.js (App Router, Turbopack, React 19). Phase 1 rebuilt the design system from scratch — a plum-and-neutral palette pulled from an actual hero photograph rather than a generic template, with a deliberate cyan accent reserved for the AI Lab's more technical zone. Phase 2 wired up Sanity as the content layer: every project, the resume, and work experience became CMS-editable instead of hardcoded. Phase 3 added Supabase for the relational side — Postgres with row-level security as the real access boundary, not a secret API key — and made the Contact form actually store submissions. Phase 4 is where the site stopped being "a portfolio with some AI on it" and became what the PRD calls a living AI Lab: a Tool Explorer, a Prompt Library with real copyable templates, an Experiments log, and an Automation Gallery that renders the Trigger → Input → AI Processing → Decision → Action → Output pipeline for each real workflow. Every fact in those entries — retrieval-relevance numbers, latency figures, architecture — is pulled from already-documented project data rather than invented after the fact, the same discipline this post is trying to follow. The blog you're reading this on is part of that same phase: a real Sanity-backed content type, Supabase-backed reactions and comments (with actual row-level-security-enforced moderation, not just a UI toggle), and — like everything else on this site — built by describing what should exist and then verifying it actually works in a real browser before calling it done.