design engineering / AI workflow
Widget Code Refactoring
An AI-powered guided workflow for refactoring widgets into a component library for 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
Figma Designs
- →Figma Make designs and export capabilities
Workflow Design (with Engineers and Product)
- →Diagrammed the conversion flow
- →Designed step-by-step guide for the AI IDE assistant to execute
- →Mapped handoff into the CI/CD pipeline
Documentation
- →Authored a lab guide for the migration process
- →Final playback 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
What had been a hand-coded conversion for every widget became a guided, repeatable process. The client’s IT team adopted the framework, with projected savings of ~7,980 engineering hours annually (3.8 FTE).
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. Also designed mock widgets for demonstration in Figma Make to generate React code.
Assessing the Architecture
Reviewed the existing React component library against the new micro-UI architecture standards to define migration requirements.
Defining the Steps
Mapped the flow that the AI IDE assistant would take, and created prompts for users accordingly.
Documentation
Authored a lab guide detailing the full migration process, from prompting the AI assistant through to CI/CD pipeline integration, making each conversion repeatable and executable by any developer on the team.
