VET Generator

Produce two VET images that share the same semantic colour scheme, then diff them.

The Core Problem

VET assigns colours to elements based on their absolute DOM depth from document.body. Two pages with the same visual structure but different DOM nesting depths will produce completely different colour schemes — making a pixel diff useless.

Example: On a reference page, a game card div sits at DOM depth 7 (→ purple). On the dev page, the same visual card is wrapped in extra provider/layout components and ends up at depth 14 (→ cyan by VET's logic). The diff would show "purple vs cyan" as a difference, masking the real layout changes.

The solution: run VET on the standard page only to establish the colour scheme, then inject a custom overlay on the dev page that manually assigns the same colours to semantically equivalent elements.