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.

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.

Click-through mode

Keep the overlay visible while still interacting with the underlying app or webpage.

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 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, and reset transforms when moving between unrelated screens.