Awesome Reviewers

Verification · Intent and spec conformance

Design conformance

Compares the rendered UI with the design it implements and reports layout, spacing, colour and copy differences.

Sub-techniques

  • Design-to-render comparison V1055.001

    Diff a screenshot against the exported design frame.

  • Annotated screenshots V1055.002

    Mark the differing regions so the fix is obvious.

How to build it

  1. Export frames at the same viewport the test renders.
  2. Compare with a tolerance and mask dynamic content.
  3. Annotate differing regions on the screenshot.

Signals in a repository

  • Design links in tickets or PRs, and exported frames in the repository.