Design & UX · master area
Visual Regression Baseline
Named Storybook states captured as screenshot baselines. The pipeline stage that catches silent design drift before the user does.
Owners: Designer, QA Phase it lives in: How We Build (Volume IV) The corpus principle this enacts: The pipeline catches a different chain level at each stage.
Where it lives in the chain
- How We Build · The Pipeline — visual regression is a stage in the seven-stage chain of catches
- How We Build · Testing · QA craft — the discipline this belongs to
How to do this
- Related craft — Storybook — the baseline source
- Related craft — Regression Testing — the broader discipline
- Practice — baseline update is a PR; never a silent overwrite. The diff is read by Designer + QA before approval.
What good output looks like
Every Storybook story is captured as a baseline screenshot. The pipeline diffs the PR's render against the baseline. A pixel-level diff that exceeds threshold blocks the PR. The PR author cannot approve the diff themselves — Designer or QA reviews the visual change and either approves the new baseline (intentional change) or rejects it (regression).
The baseline is the silent-drift detector. A button that shifts 2px every release is not seen by the user once; it is seen by them every day, and the polish degrades by inches. Visual regression is what keeps the design system honest over time — without it, the system describes the past while the codebase quietly drifts forward.
Related crafts
- Storybook — the catalogue captured
- Design System — what's being protected
- Regression Testing — the broader pipeline discipline