Why do design system bugs pass code review?

Code reviews check code, not rendered output. A diff shows syntax, naming, and types, but it cannot show whether the button looks correct, whether the spacing matches the design token, or whether a CSS variable change cascaded to other components. Visual verification requires comparing the build against the design spec.

How does AI coding make design system bugs worse?

AI coding tools like Copilot and Cursor approximate design token values from training data rather than reading your tokens.json file. They generate confidently wrong spacing, create phantom button variants that do not exist in the design system, and add generic responsive breakpoints instead of your specified ones. Each AI-generated PR passes review individually, but the cumulative drift compounds.

What is design token drift?

Design token drift occurs when the token values in code diverge from the values defined in the design file (e.g. Figma). This happens when designers update values without syncing to code, when developers hardcode values instead of referencing tokens, or when AI tools approximate token values from training data.

Blog Post

3 Design System Bugs That Survive Every Code Review (And Why AI Makes Them Worse)

Code reviews check code, not rendered output. A clean diff with correct types and good naming cannot reveal that a button has 4px too much padding or that a CSS variable change cascaded to an unrelated component. AI coding tools scale this problem by generating confidently wrong token values and phantom variants. Three categories of bugs exploit this gap every sprint.

1. Token Mismatches

Design systems define spacing-md as 16px. A developer writes padding: 12px instead of referencing the token. Or the token value in code drifted from the Figma source. AI coding tools approximate token values from training data rather than reading your tokens.json file. The diff says looks fine. Production says otherwise.

2. Variant Drift

A developer updates a primary button hover state. The change also affects the ghost variant border opacity through a shared CSS variable. AI does not trace CSS variables through your component tree. Worse, AI-generated components create entirely new variant structures that do not match the Figma component set. Three months of incremental changes and your component library has quietly forked from the design.

3. Responsive Breakage

Components work at 1440px and 375px but break at 768px where the grid shifts. AI coding tools default to desktop-width output and add generic media queries based on common breakpoints, not your breakpoints. Responsive bugs multiply: one broken component at one breakpoint affects every page that uses it.

The Pattern

All three bugs share the same root cause: code review checks code, not rendered output. AI did not create this problem, it scaled it. Design systems solve the vocabulary problem but not the verification problem. Nobody is checking that what got built matches what got designed.

Tools That Close the Gap

Design system health tools (ComponentQA, Tokens Studio, Specify) audit component consistency and sync tokens. Visual comparison tools (OverlayQA, Percy, Chromatic) compare rendered output against design specs. Code quality tools (stylelint-declaration-strict-value, Figma Code Connect) enforce token usage and link Figma components to code.