MSAD/MSID
AI-powered migration of over 700 legacy HTML pages to a modern StorybookJS-based UI in just two weeks.
Visit websiteMSAD/MSID had more than 700 HTML pages that needed to move from an outdated design to a modern one. Done by hand, that's a large team and more than six months of work. We finished this project in about two weeks.
The Problem
A migration this size is more than swapping styles. Every legacy page has its own content structure, layout and components, and each one has to map accurately onto the new design system without breaking the content. Migrating manually will take too much time. The repetition is enormous and consistency is hard to hold.
How it Worked
We built an AI agentic workflow for the job. It reads each legacy page, works out its content and component structure, finds the closest matching components in the new StorybookJS design system, and rebuilds the page to the new standard.
- Claude Skills carry the reusable migration instructions; Claude Agents do the page-by-page analysis, transformation and validation.
- Custom mapping scripts give the agents hard rules for translating old components into new ones.
- Automated checks flag formatting and mapping problems, so every page is reviewed and validated before it joins the new site.
- Prompts were tuned continuously for better accuracy, unusual layouts handled, fewer tokens spent.This approach allowed the migration process to remain consistent across hundreds of pages while significantly reducing repetitive manual development work.
Results
All 700-plus pages landed on the new design with the components applied consistently, in roughly a tenth of the usual time. And the workflow is reusable, so the next large migration starts warm.
Technologies
- Claude Code
- StorybookJS