Design Overlayer

About

Design Overlayer lets you browse design files from a local folder and overlay them directly on top of web pages for pixel-perfect comparison during development.

Point the extension at your design folder and it automatically organizes projects into subfolders. Files prefixed with "desktop_" or "mobile_" are grouped separately so you can quickly find the right design for the screen you're working on.

Two ways to use your designs:

View mode opens the design in a standalone tab at the correct scale, just like a simple design viewer.

Overlay mode places the design image on top of any web page with an adjustable opacity slider. Drag the slider to blend between the design and your implementation, or press O to instantly toggle the overlay on and off. This makes it easy to spot differences down to the pixel.

The extension supports configurable scale factors (1x to 4x) to match your export resolution. Most design tools export at 2x by default, and the extension divides image dimensions accordingly so the overlay maps 1:1 to your screen.

Key features:
- Browse projects and designs from a local folder
- Automatic desktop/mobile grouping by filename prefix
- Standalone design viewer at correct scale
- Page overlay with opacity slider for pixel-perfect comparison
- Keyboard shortcut (O) to toggle overlay visibility
- Configurable scale factor for different export resolutions
- Moveable controls (pick any corner)
- Remembers your last project between sessions

Built for frontend developers and designers who care about matching designs exactly. No account needed, no data sent anywhere. All file access stays local on your machine.