Visual checks

A visual check is an outcome like any other: you write what the screen should look like, and the agent checks it on the live product. Use it where a functional outcome can't see the problem: a collapsed layout, a missing navigation bar, a dark-mode screen that never switched.

Write the look as an outcome

Say what a person would see, in words specific enough to check:

• The pricing page shows three plan cards side by side, with Team marked Recommended.
• In dark mode, the settings screen has a dark background and light text.
• The order confirmation shows the product image, the price and a green Paid badge.

The step's result comes from the agent's own look at the screen and its Final check, like every other step.

Compare against a design

To check a screen against a design, attach the design as an image file:

1. Export the frame or screenshot as PNG, JPG or WebP, and add it to the project's Files in Settings.
2. On the step, click + Attach → File and pick it.
3. Write the outcome so it names what must match, such as "The order summary matches the attached design: the same sections, in the same order, with the total at the bottom".

The agent can compare a fresh screenshot of the product with the attached image. The comparison is evidence for the step, shown under its Step Actions; it never decides the result on its own.

Keep a screenshot

Every step keeps a screenshot of its end state. To keep a named screenshot of the outcome, for example for a release review, click + Attach → Evidence → Keep a screenshot. It appears with the step in the run's evidence.

Tips

• Check one region, not a whole page. A whole page with timestamps, counters or feeds differs on every run.
• Name the differences that matter. "The navigation bar is missing" is a defect; a one-pixel shift isn't.
• Steps that came from older visual checks keep their design link as an attached value named "Figma design" or "Design reference". The agent reads the link as text, so replace it with an image file for a real comparison.