Skip to main content

Design-quality toolchain

The automation that keeps the human design check to one hour: machines catch every mechanical design defect in CI, so the human reviews judgement — does the journey make sense, is the copy honest, is the domain right — not whether a button is the wrong blue. At agent UI volume this is the only arithmetic that works; without it the design specialist becomes the pipeline's bottleneck.

The toolchain​

  • axe-core / Pa11y — WCAG regression scanning. Every PR touching UI runs automated WCAG 2.2 AA checks against the changed screens and states; any regression blocks. New screens must scan clean before first merge, so there is no accessibility debt to burn down later (accessibility standard).
  • stylelint / ESLint — token and component conformance. Rules reject raw hex/px and magic numbers (tokens are the only styling source — design system), imports of components outside the design-system package, and style overrides on library components. This is the design context pack's rules made enforceable — the agent is told the rule and the pipeline proves it followed it.
  • Playwright — visual-regression baselines. Screenshot baselines per key screen and state (default, error, empty, loading — the screen spec state matrix). Unintended pixel drift fails the build; an intended change updates the baseline in the same PR, where the reviewer sees before/after side by side.

Wiring​

  • All three run in the CI/CD pipeline and block the merge gate exactly as test failures do — design conformance is not advisory.
  • Configs ship in the project scaffold, so every new RAPID product starts enforced; they are versioned with the design-system release, so a token rename and its lint rule land together.
  • Baseline updates are a reviewed diff, never an auto-approve — a visual baseline that updates itself checks nothing.

What stays human​

Automation covers roughly a third to a half of WCAG criteria at best — the toolchain removes regressions and conformance drift, not the need for the manual keyboard + screen-reader charter per key journey (accessibility standard) or the design crit's judgement axes (insurance UX heuristics). The one-hour human gate at Design Review exists because the mechanical layer is machine-checked; drop the automation and the hour is fiction.

Standards referenced: WCAG 2.2 AA, WAI-ARIA APG.