Pixel Linter

About

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.