UI Consistency Checker

About

UI Consistency Checker

Building a web application is one thing. Making sure it actually looks the way it's supposed to — across every page, every component, every state — is something else entirely. That gap between intention and reality is where UI Consistency Checker lives.

This extension was built out of a very real frustration: you define a design system, you document your components, and then six months later you open a page and the buttons are slightly the wrong shade of blue, the spacing is off by four pixels, and nobody noticed because nobody had a reliable way to check. Manual inspection doesn't scale. Code reviews catch logic, not visual drift. And pixel-comparison screenshot tools tell you something changed, but not what or why.

UI Consistency Checker takes a different approach. You describe what your components are supposed to look like — their CSS properties, their states, their pseudo-elements — and the extension reads the actual computed styles of every matching element on the live page and compares them directly. Not screenshots. Not approximations. The real values the browser is using, normalized and measured against your specification.

The comparison engine handles the things that usually make CSS checking unreliable. Colors get normalized so that rgba(0, 83, 142, 1) and #00538e are recognized as the same value. Shorthand properties like margin and border get expanded before comparison so a mismatch in margin-top doesn't get hidden inside a combined value. Units get converted — rem, em, vw, vh all resolve to pixels relative to the actual viewport. There's a half-pixel tolerance for floating-point rendering differences that would otherwise generate false failures. CSS custom properties resolve to their computed values. Pseudo-elements like before and after get checked too, not just the element itself.

When you run a check, you see exactly how many elements passed and how many failed, broken down property by property. You don't just get told something is wrong — you get told what the value is, what it should be, and where the gap is. If you want to fix it without touching your source code immediately, the auto-fix feature generates and injects corrective CSS directly into the page so you can see what the corrected version looks like in context.

The component library is fully yours. You define components through the extension interface, give them a name, write or paste their expected HTML structure and CSS, and save them. You can build out an entire design system library over time and export it as a JSON file to share with teammates or carry across projects. Importing existing specifications works the same way.

Beyond the core checking, there's a grid overlay for alignment verification, context menu integration so you can right-click any element and inspect it on demand, and support for multi-state checking across hover, focus, active, and disabled states. The extension runs entirely in your browser — nothing leaves your machine, no data is sent anywhere, no account required.

It is most useful for teams maintaining a design system across a large codebase, QA engineers doing visual validation before releases, and developers who want to catch style drift early rather than during design review. But it works just as well for a solo developer who simply wants to know, with confidence, that what shipped matches what was designed.