How do you catch visual regressions when restyling?

I’m restyling a live app screen by screen, with Claude Code doing the edits. My test suite has 262 tests and all of them pass, but none of them check how a page looks. So a change to shared styles could break a screen and nothing would tell me.

Before each change, I have the agent screenshot every screen I’m not supposed to touch, using a fake signed-in session and mocked API responses so no real data is involved. After the change, it captures them again and compares them pixel by pixel. Anything that differs has to be explained.

That caught something I would never have seen. 34 screens matched exactly. One modal didn’t: 1,334 of about 215,000 pixels were different. To my eye, before and after looked identical. The cause was that my first version moved the page into a new wrapper, and the old container had been quietly centering the modal’s heading. The new one didn’t. No test would have complained.

It also showed that a modal kept outside the new wrapper still changed colour, because my theme variables are set on the whole page, not just the wrapper. I had to re-scope the old colours around the modal.

Tests check behaviour. Screenshots check appearance. I needed both.

How do you guard against unintended visual changes on a small project? Playwright snapshots, a hosted tool, or something lighter?