How to run design QA on a live website

Why screenshots make design QA slow

The usual loop is a screenshot, a red arrow and a note like "this looks off". The developer then has to open DevTools, find the element and guess what "off" means. Every round trip repeats that work.

Reviewing on the live page removes the guessing. You look at the real element, read its real values, and point at the exact thing that needs to change.

A design QA pass with Pixel Poke

1. Open the page you want to review: staging, a preview deploy or production. Press Alt+Shift+D or click the Pixel Poke toolbar icon.
2. Click an element. The panel shows its typography, colors, spacing and layout as they are actually rendered.
3. Hold Alt and hover other elements to measure the distance between them. This is the fastest way to catch spacing that drifted from the grid.
4. Preview the page at real device widths, from a 375px phone to a 1440px desktop, and look at the same component at each size.
5. Check component states. Pixel Poke reads hover, focus, pressed, disabled, loading and error styles from the site’s CSS, so you can review each one without trying to trigger it by hand.
6. When something is wrong, tune it in place until it looks right, or pin a comment to the element for the developer.

What to hand back

A design QA note is only useful if a developer can act on it. Pixel Poke lets you copy your changes as clean CSS, one rule for each changed element, or as written handoff instructions you can paste into a ticket. Comments stay pinned to the elements they describe.

Nothing you do during the review touches the site. Changes live only in your tab, and a reload brings the page back to its original state.