Pixel Linter

Pixel Linter is a visual QA assistant for websites. It helps designers, product managers, QA engineers, and frontend developers inspect live UI implementations and detect design-system inconsistencies — without requiring DevTools knowledge or site integration. HOW IT WORKS 1. Click the Pixel Linter icon and enter Inspect Mode 2. The extension scans visible elements and infers the page's likely design system (fonts, spacing, colors, radii) 3. Hover any element to see a smart inspection panel showing typography, colors, spacing, and shape details 4. Elements with inconsistencies get suggestion markers — amber 💡 for design suggestions, red ❗ for layout issues 5. Click a marker or element to lock the panel for closer review WHAT IT DETECTS • Uncommon font sizes, weights, or families compared to the page's dominant patterns • Spacing values that don't align with the page's spacing scale • Border radius inconsistencies • Low color contrast that may affect readability • Interactive elements that are too small for comfortable clicking • Layout breaks: horizontal overflow, text clipping, viewport overflow, overlapping elements KEY FEATURES • Smart design system inference — no configuration needed • Figma-style suggestion markers with hover tooltips • Shadow DOM isolation — never interferes with the inspected page • SPA support with automatic re-analysis on route changes • Click-to-lock inspection for detailed review • Compact mode and toggleable suggestions BUILT FOR • Pre-launch QA on staging sites • Design review and implementation verification • Regression checks after UI changes • Self-review by frontend developers Pixel Linter runs entirely in your browser. No data is sent anywhere — all analysis happens locally.