design engineering / proof of technology
Design-to-Code Migration
An AI-powered migration pipeline that automates the refactoring of React widgets to Angular, scaling a component library to a new micro-UI architecture.
context
Project Overview
The Challenge
The client's current widget refactoring process is labor intensive yet needed for a micro-UI initiative.
The Solution
Designed a repeatable framework for automating widget rebuilding, documented as a step-by-step guide.
my role
What I Owned
Technical Discovery
- →Figma Make designs and export capabilities
Workflow Design (with Engineers)
- →Diagrammed the conversion flow
- →Designed step-by-step guide for the AI IDE to execute
Documentation
- →Authored a lab guide for the migration process
- →Final playback back to client
outcomes
The Repeatable Refactoring Framework
The widget refactoring process is currently very manual, limiting scalability for a growing component library. This repeatable framework automates the process, accelerating conversion timelines while maintaining consistency and quality against enterprise architecture standards.
By demonstrating how tools like IBM Bob can drive refactoring at speed, the team unlocked meaningful time and cost savings, giving the client a faster, more reliable path to modernization enterprise-wide.
Accelerated Widget to Micro-UI Conversion
Developers can now leverage production-ready architectural guidance to accelerate widget modernization across teams.
Independent Deployment and Adaptability to Widget Variations
Micro-UI components can be independently deployed andadjusted without disrupting upstream systems.
methodology
The Process
Client Discovery
Interviewed the client to understand their vision for an enterprise-wide widget library and the challenges of refactoring widgets manually.
Assessing the Architecture
Reviewed the existing React component library against the new micro-UI architecture standards to define migration requirements.
Defining the Steps
Authored a lab guide detailing the full migration process — making it repeatable and executable by others.
Documentation
Transformed sketches to wireframes on Figma, and coordinating with a front-end developer to bring our designs to life.
