Visual Regression Guard
Notice unintended visual changes.
Compare a new visual state against a reference you deliberately selected.
Notice unintended visual changes.
After changes that could unintentionally affect appearance.
A functional change can also move a button or alter spacing unexpectedly. Visual comparison helps you inspect differences against an approved image.
Capture a baseline, compare a later render and inspect highlighted differences. Use the same viewport and conditions for meaningful results.
How to get started.
From your first choice to the result. Here is how to use this feature in your own project.
- 01
Capture a reference of the desired state.
- 02
Compare a subsequent version with that image.
- 03
Inspect differences and decide whether they are intended before replacing the reference.
How it could work for you.
Change the footer and check whether the header shifted as an unintended side effect.
How to assess the result
Animations, fonts and changing content can create differences. A pixel match is not proof that every interaction works.
Where to find it.
Project Studio → Visual comparison; Tools → Visual Regression Guard
Available actions depend on your plan, mode and project state. Features that require a task become available within an appropriate conversation.What is saved?
Reference images and comparisons are saved with the project.
What you need to know
Different pixels can be intentional. Matching pixels do not prove that forms, navigation or backend logic work.