Walkthroughs

From a direction to a build.

Each walkthrough shows the same five steps: the input, the direction that was chosen, what the compiled brief insisted on, which builder consumed it, and what the drift check caught afterwards. They are deliberately different from each other — and from this site's own look.

Straight answer: these are reproducible walkthroughs authored in-house, not customer case studies. Permissioned customer work will be published here with names, screenshots and revision history as soon as it exists — until then this page will not pretend otherwise.

Quiet Swiss — B2B analytics dashboard

Input: Goal: an internal analytics dashboard. Audience: operations analysts. Feeling words: precise, quiet, unfussy.
Direction chosen: Neutral near-monochrome palette with a single functional accent, grotesque type at a tight modular scale, dense 4px rhythm, hairline borders instead of shadow, motion under 150ms.
What the brief insisted on: Tokens plus explicit anti-rules: no gradient headers, no card shadows, no rounded-2xl, no purple, no hero image — data first, chrome last.
Builder: Compiled for the Lovable dialect (Tailwind tokens + component rules).
Drift check: Screenshot check flagged reintroduced card shadows and an oversized heading scale; the repair brief named both, with the exact token values to restore.

Warm editorial — independent food publication

Input: Goal: a recipe publication. Audience: home cooks. Feeling words: warm, generous, printed.
Direction chosen: Ochre and clay palette on paper-tinted surfaces, high-contrast serif display against a plain humanist body, wide breathing room, asymmetric editorial grid, no card grid.
What the brief insisted on: Layout intent borrowed from a reference screen (structure only), visual intent kept from the studio — recorded separately in the brief so the builder cannot confuse them.
Builder: Compiled for the v0 dialect and exported as a token package.
Drift check: Check flagged a symmetrical three-card grid replacing the editorial rhythm — corrected by re-stating the grid rule as an anti-rule.

Utilitarian dense — logistics console

Input: Goal: a shipment console. Audience: dispatchers on a shared monitor. Feeling words: blunt, legible, fast.
Direction chosen: Cool grey palette, mono numerals, zero radius, table-first composition, no motion beyond focus states, contrast targeted well past AA.
What the brief insisted on: Multi-surface preview validated the same direction on a form, a table and a mobile viewport before any code was generated.
Builder: Compiled for the Cursor dialect (rules file + tokens.css).
Drift check: Check flagged decorative iconography and animated row transitions; both removed.

Run your own Read a full sample brief Why not just prompt the builder?