As we continue migrating our decades-old ASPX software to a modern Angular platform at AssetWorks, one of the biggest challenges is modernizing the interface while keeping it intuitive for users who have relied on the old screens for years.
I know our layout patterns like the back of my hand. Two years ago, we standardized our responsive layouts in Figma to accommodate everything from a 320px mobile view up to a 2000px+ ultra-wide monitor. However, as I am now the sole UX designer on this side of the company, all of that foundational layout knowledge essentially just lived in my head.
Every time I built a new UI sandbox, I found myself writing long, stream-of-consciousness prompts to help my AI assistant map legacy screens to our modern Storybook components.
Recently, I’ve dedicated my Friday mornings to building more holistic Claude skills, and I decided it was time to extract this knowledge from my brain and teach the AI how to do the puzzle itself.
Building the "Legacy to Layout" Skill
I trained a dedicated Claude skill specifically on our repeatable design layout patterns and our Storybook component library.
Now, my workflow has completely transformed. I no longer write massive planning prompts. Instead, I simply:
- Take a quick screenshot of the legacy page.
- Tell Claude what software module we are working in.
- Run the legacy-to-layout skill.
The Results
The execution is incredibly fast. The skill takes about 10 minutes to run, and the initial output is usually 85% to 90% of the way there. From there, I spend about an hour doing the manual UX work—making minor tweaks, adjusting the spacing, and refining the user flow.
The Automated Pipeline
What makes this so powerful is how it feeds into the rest of my AI ecosystem. Once I finish my manual tweaks, I trigger my comprehensive audit skill. It reviews the code against:
- Coding and product web standards
- My newly added UX styling guidelines
- Storybook component implementation rules
- WCAG accessibility guidelines
- The original ticket requirements
After I triage any issues and Claude fixes them, I run my automated video skill to generate the final Playwright demo video for the development team.
Every week, I am more impressed by how chaining these localized AI skills together can completely streamline frontend UI architecture. It frees me up to focus on actual user experience rather than repetitive translation tasks.
#UXDesign #Frontend #AI #Claude #Angular #Storybook #WorkflowAutomation #AssetWorks