visual-rosetta
Map a page's visual regions to its DOM, and compare a reference against an implementation.
When a Claude Design handoff doesn’t match your implementation and CSS tweaks keep failing to close the gap, the issue is usually structural: a grid where a flex should be, an extra wrapper, a missing region. visual-rosetta enumerates both pages as region maps — DOM subtrees tagged with their visible bounding boxes — then runs a mechanical comparison that surfaces primitive-level differences (display, grid template, nesting) separate from cosmetic differences (spacing, color).
It has four modes:
- inspect — enumerate one page, see its regions
- capture — gather a reference + implementation pair
- prepare — bundle a package for handoff
- review — consume a package and run a remediation discussion
Built during the Michi work to bridge Claude Design → Claude Code. Used here on Save The Tokens too — the observation report under this epic’s verification folder was authored by this skill.