frontend-audit

Verify pixel-perfect design mockups by dropping design PNGs into a folder, running the local website, and invoking the audit command to compare live renderings against design goals. It uses image differencing, computed style checks, and pixel sampling to detect visual drift.

Detect CSS style discrepancies automatically through computed style checks and region-based pixel sampling. The tool analyzes differences between live website renderings and design mockups, then assists in automating adjustments to CSS or Tailwind styles for exact visual matches.

Perform visual verification for responsive web design by comparing live website screenshots to design goals. The tool detects visual drift, missing elements, and style discrepancies using image differencing and structural analysis to enforce style consistency across browsers.

This design validation tool works without external dependencies, requiring only local design PNG files and a running local website instance. You invoke it directly within Claude Code to start the verification process and analyze structural and visual differences.

Start visual design verification by placing your design PNG files into the design folder, running your website locally, and invoking the audit command. It compares live screenshots to the mockups to confirm all visual elements match before deployment.