Built in public, in two days.
One designer directing taste; Claude Code writing every line. Every decision logged as we went — this page is the readable cut.
The decision log
curated from DECISIONS.mdThree visual directions, one taste call
Claude proposed Ledger (editorial), Instrument (dark technical), and Majlis Modern (MENA gallery) as interactive style tiles. Yitong picked Instrument — then later flipped it to a light, warm monochrome editorial skin, keeping the HUD voice.
Skeleton before beauty
Full IA shipped rough on purpose: discipline-organized home (product / systems / tooling+leadership), five case pages, live from day one on Vercel. Polish was deferred until real reference material arrived.
The signature lab
Four motion personalities — Connected Flow, Trust Settle, Detent, Pulse — prototyped live, first on a money-transfer scenario, then rebuilt on three everyday moments (list, sheet, toast) after Yitong's call: judge motion on the smallest pattern, not the richest scene. Pulse won.
Scroll-jack out, native rail in
v1 work sections pinned the page and mapped vertical scroll to horizontal travel. It demoed well and felt wrong. Replaced with an honest native scroll rail — trackpad, drag, arrows, snap. Lesson logged: layered affordances beat hijacked physics.
Pulse became a primitive
One beat — scale 1→1.02→1, 10% dim, 600ms — defined once and threaded through every pattern. Loading is the beat repeated; errors never breathe. Spring values convert physically to SwiftUI and Compose (response = 2π/√k, ζ = c/2√k).
Show, don't report
After studying how Carbon, Material and Uber Base present motion, the system page was rebuilt: a numerically-simulated spring visualizer, a duration race, live do/don'ts, phone-framed patterns, and an ECG hero — the documentation demonstrates itself.
The stack
Why this page exists: the working method — AI tooling with a human hand on taste — is the same one behind the Claude Code Design Toolkit. This site is the method demonstrating itself.