Every team that's tried migrating a real production app to a new framework; Angular to React, Vue to Svelte, jQuery to anything, or even just upgrading to a new major version with a different component library — hits the same trap. You either end up with a visual and behavioral regression fest (buttons that almost look right, tables that sort differently, modals that pop up instead of sliding in the way users have muscle memory for), or the migration quietly becomes a full redesign, because "while we're in there" is irresistible. Six months later, nobody can explain why the new invoice screen doesn't work like the old one did.
I spent the last few weeks doing this migration for real — several production apps, different ages, different UI libraries, none documented — into one shared design system, with an AI agent handling the reading, cataloguing, and building. What follows is the process that got us through it without losing the thing that actually matters: not the exact CSS, but the definitive look and the behavioral contract users already know.
This isn't a framework-specific guide. The case study happens to involve Angular codebases, but the pipeline — tokens, fingerprinting, clustering, evidence-gated building, three-tier testing — works regardless of what you're migrating from or to. If your app has screens, components, and users who expect things to work a certain way, this applies.
