Visual QA

Visual QA is the final structured checkpoint that verifies the staged product matches the four-layer Figma file down to tokens, components, patterns, and annotated intent. The designer loads the staging build next to the source file and executes a mechanical audit instead of a vibes-based scroll. Every color, spacing value, radius, shadow, and typography scale must resolve to its semantic token from Figma Variables. Every button, input, and card must use the exact variant defined in the component library including hover, active, disabled, and loading states. Every hero, feature grid, or navigation pattern gets tested at mobile, tablet, and desktop breakpoints to confirm the responsive behavior documented in Figma. Page-level annotations about conversion paths and hierarchy guide trade-off decisions when real constraints appear in code. With Figma MCP feeding files directly to Claude Code or Cursor the audit also confirms the agent respected Code Connect mappings instead of inventing its own values. A proper session takes 30 to 90 minutes yet prevents weeks of later rework and the slow erosion that makes products feel incoherent six months after launch. It turns handoff from translation into verification.

Visual QA is not a casual sign-off where someone says it looks close enough. It is not usability testing, accessibility checks, or functional bug hunting. It is not the designer reopening Figma to iterate on the comp now that they see it live. It is not a meeting where stakeholders argue about whether the blue feels right. Any version that relies on gut feel or taste instead of the token taxonomy and component spec is theater. Most teams half-ass this step with a Slack thumbs-up then act shocked when the deployed product drifts 20 percent from the original vision. Without the mechanical rigor the four-layer system becomes expensive decoration that engineering ignores the moment deadlines bite.

Take the Ramp team in Q3 2025 rebuilding their expense reporting dashboard. After wiring Figma MCP to Claude Code the generated components looked solid until visual QA revealed the data table used border/weak instead of the border/subtle token on dense rows. The mismatch made rows harder to scan in light mode. Because everything traced to semantic tokens the designer pointed at the exact variable name, the team updated the Code Connect mapping, regenerated the component, and fixed it in 22 minutes. The Vercel dashboard team faced a similar issue in early 2026 on their new deployment status cards. Visual QA caught that the success state ignored the surface/raised token and fell back to a hardcoded background causing it to disappear for users in certain system themes. A third case hit Cursor while dogfooding their own AI editor. The settings panel pattern shipped with typography that scaled wrong at tablet sizes because the Figma responsive variant never connected to the proper type token. Each time the structured audit gave the team shared language so fixes happened at the system level instead of one-off patches. These sessions become faster and sharper after the third run. Teams that treat visual QA as non-optional ship tighter UIs. Teams that skip it ship beautiful comps that turn into gruyere within a quarter.

Run visual QA on every handoff that reaches staging especially after MCP agents generate code or after token library updates. It belongs after the component-first review checkpoint and before customers see the work. Use it without exception on checkout flows, onboarding sequences, pricing tables, or any surface where inconsistency tanks conversion or trust. Pair it with Percy or Chromatic to catch blatant breaks automatically then follow with human review for motion feel, type harmony, and annotated intent. Do not run it on throwaway prototypes, internal admin tools where speed beats pixel fidelity, or marketing landing pages rebuilt every month outside the design system. Never treat it as the first defense. If tokens were never enforced and components lack full variants then visual QA becomes whack-a-mole with no winning strategy. The teams winning in 2026 run it as the predictable final click in a predictable system instead of a heroic cleanup after chaos.

Visual QA is how serious teams make sure their pixel-perfect comps survive contact with real engineering.