Skip to content
The Normascope workflow

From a running UI to a report you can trust.

Normascope captures what your users would see, compares it with what you intended, and shows you the difference without asking you to guess.

npx norma-scope init
See every command →

One honest loop

01

Your UI

capture

02

Reference

design · baseline · URL

03

Normascope

align · compare · explain

04

Your decision

fix · accept · investigate

Deterministic scoring first. Optional AI explanation second. Human judgment always.

Start with the question

What should this page be compared with?

Normascope is not tied to one kind of reference. Choose the source that matches the way your team works today.

01

A design

Compare your running UI with a design reference. Use this when the question is: does the build match what we intended?

02

An approved build

Approve a known-good browser capture, then compare future changes against it. This is visual regression testing without a design file.

03

Another environment

Compare a local or staging build with another reachable URL. Both pages are captured at the same dimensions before scoring.

The everyday loop

Four steps from setup to signal

You do the setup once. After that, the normal development loop is a capture, a comparison, and a report you can inspect before the change reaches users.

  1. 01npx norma-scope init

    Set up the project

    Choose what you want to compare and which pages or frames to track. Normascope records the workflow in your project so the next run is repeatable.

  2. 02npx norma-scope doctor

    Check the setup

    Before interpreting a diff, make sure the app, routes, references and capture dimensions are reachable and consistent.

  3. 03npx norma-scope check

    Capture and compare

    Normascope photographs the configured pages, aligns the captures, compares them with the reference, and writes a fresh report.

  4. 04open the report

    Decide what changed

    Review the side-by-side images, aligned score, diff overlay and regions worth looking at. A difference is evidence; you decide whether it was intended.

What the report does

It separates movement from breakage.

A page can look very different because a section moved, even when the elements inside it are still correct. Normascope aligns comparable bands before it scores the real mismatch.

That gives you two useful signals: the unaligned number shows how much the page moved; the aligned number shows how much content genuinely differs.

Normascope report overview showing frames, scores and clean versus flagged results
The report gives every frame a result, a score and a reason to look closer.
Normascope frame report showing reference, build and diff views
For a flagged frame, move from the number to the exact region that changed.
When something differs

The report tells you where to look.

  1. 1

    Look at the overlay. See the changed pixels in context, not as an isolated percentage.

  2. 2

    Check the region. Significant regions group nearby changes into places worth inspecting.

  3. 3

    Decide what it means. Accept an intentional change, fix a regression, or investigate the capture.

Learn how to read the report →
Optional, never in charge

AI can suggest a cause. It never decides the result.

Once you have a comparison, you can ask Normascope to explain a flagged frame. It gives hypotheses to verify; the deterministic visual score remains the source of truth.

AI explanations are guidance, not instructions or guarantees. They may be inaccurate or incomplete. Use, edit, ignore, or discard them as you choose — whether to act is your decision alone. Normascope does not automatically apply them or decide pass/fail, and is not responsible for outcomes from decisions made using them.

Normascope report showing optional AI explanation findings with code pointers
An explanation is a review aid, not an automatic fix.
Normascopenormascope

Start with one page.

You do not need a perfect test suite or a new platform. Point Normascope at one page your team cares about, run the loop, and learn what a trustworthy visual signal feels like.

npx norma-scope init
Normascope Cloudnormascopecloud

When the report needs to outlive your laptop.

Normascope Cloud adds shared links, per-page history and trends when your team is ready for them.

See what it adds
User guide

Need the hand-holding version?

Follow the commands, examples and troubleshooting steps from first setup to CI.

Open the user guide →