Onionskin — Pixel Perfect Overlay: compare design to live page

Description

Design QA overlay. Drop a Figma or Sketch export on any live page, switch to difference view, and align until it goes black. Put your design file on top of the running page and see exactly where the build drifted. DIFFERENCE VIEW Most overlay tools hand you a transparency slider and let you squint. Onionskin also gives you a difference blend: wherever the design and the build agree, the screen goes black. Nudge until it's black and you're aligned. No eyeballing. NO LIMITS ON THE BASICS Unlimited layers. Scaling is free. No ads in the panel. The things you need in order to do design QA are not a paid tier. BUILT FOR PIXEL WORK Every value has four levels of precision. Drag the slider for rough placement, drag the label to scrub, type the exact number, or scroll the wheel over the row. Arrow keys nudge 1px, Shift multiplies by 10, Alt divides it by 10 where decimals matter. Scale accepts 101.4%, which is what you need when you're matching a 2x export. Hold Alt and drag anywhere on the page to move the layer directly. WHEN IT WILL NOT LINE UP A design drawn on a 1440 canvas never matches a 1280 window at 100%, and a screenshot taken on a retina display is twice the size it looks. Onionskin tells you: a line under the controls reads out the design width, your window width, and the width it is actually drawing at, and turns amber when they disagree. Fit width fixes it in one click. STAYS OUT OF THE WAY The panel never swallows clicks meant for the page underneath it. Layer positions are remembered per URL, so reloading doesn't cost you the alignment. Overlays either scroll with the page or stay fixed to the viewport, your choice. ASKS FOR ALMOST NOTHING No host permissions. Onionskin can only touch a page after you click the toolbar icon, and only that one tab. It makes zero network requests — no fetch, no analytics, no remote code. Your design files are read in the browser and stored locally. They never leave your machine. HOW TO USE IT Click the toolbar icon or press Alt+O. Drop in a PNG, paste from the clipboard, or pick a file. Set the blend to Difference, then nudge until the screen goes dark.

Details & SEO