Documentation

Visual comparison workflow for UI fidelity review

UI Overlay keeps design mocks visible while you inspect a live interface, making it easier to catch spacing, alignment, size, and visual rhythm differences, then record findings as annotations.

Import mocks

Load local PNG, JPG, or design export images and switch between mock states during review.

Transform controls

Adjust opacity, scale, X/Y offsets, fit, centering, and inversion until the mock lines up with the interface.

Annotations

Switch annotation mode on to draw issue boxes, add notes, and export a compact review report.

Recommended review loop

  1. Choose the product screen or webpage you want to validate.
  2. Import the matching design mock image.
  3. Align the mock using scale and offsets.
  4. Lower opacity and scan for mismatches in layout, typography, and spacing.
  5. Enable annotation mode to mark mismatches, then turn it off to regain transform controls.
  6. Use click-through mode when you need to test interactions while keeping the mock visible.

Best practices

Export mocks at the same viewport size as the implementation, use clear file names for multiple states, keep annotations short, and reset transforms when moving between unrelated screens.

Related guides