Pixel Scout

Pixel-perfect toolkit for developers and designers — design overlay, grid system, guides, and measurement tools

🎨 Design Overlay Overlay designs from Figma or uploaded images (PNG, JPG, WebP) on any webpage. Adjust opacity, scale, position, invert colors, and lock settings. 🔗 Figma Integration Connect with your Figma Personal Access Token, browse files, select a frame — the design loads as an overlay. Refresh with one click to pull the latest version. 📐 Grid System Pixel grid with customizable size (4, 8, 10, 16px or any value). Column grid with configurable count, gutter, and margin. Add horizontal and vertical guides at exact positions with live preview. 📏 Measurement Tool Click and drag to measure any distance on the page. See width, height, and diagonal in pixels with visual guides. ⚡ Diff Mode Blink the overlay on and off to instantly spot differences between design and implementation. 💾 Per-URL Sessions Each page remembers its own overlay, position, and settings. Automatically restored when you revisit. All data is stored locally in your browser. No analytics, no tracking, no third-party servers.