Wildberries
AI-assisted interface design for WB Logistics
Turn requirements into working Angular interfaces with AI and a shared design system
I helped turn the WB Logistics design system into a foundation for generating Angular interfaces with AI. The workflow connects business requirements with reusable components, allowing designers to build and review working interfaces before handing code over to frontend developers.
Three logistics designers have used the workflow regularly for around six months, completing several dozen tasks.
My contribution
I was one of the designers who initiated the approach, ran early experiments, and helped introduce it to the team.
Within our shared library of 50+ components, I designed and documented 20+ components and wrote specifications for nearly the entire library. I mapped Figma components to Angular implementations and documented behavior, responsive layouts, loading states, and map interactions.
I also created a UX writing skill based on our B2B editorial guidelines and introduced a YouTrack task template to help managers and analysts provide clearer requirements.
Another designer led the AI repository setup and shared instructions. We developed the workflow together and reviewed each other’s changes.
How the design system supports AI
We connected Figma components, Angular code, design tokens, specifications, and usage rules in a shared repository. This gave AI the context to assemble familiar logistics interfaces, including tables, maps, and cards.
Designers provide requirements or an existing Figma design, review the generated interface, and correct its behavior, layout, and copy. Frontend developers then receive the reviewed Angular code for integration.
Early generation errors revealed gaps in our documentation. We used those failures to refine component rules and shared instructions, while keeping designer review part of every task.
Results
It now supports most recurring tasks covered by existing components and patterns.
The team reports spending less time assembling repetitive screens. Working prototypes also help designers discuss behavior and clarify requirements with stakeholders earlier. Overall time savings and quality improvements have not yet been measured.
Try the file uploader
An interactive example from the WB Logistics design system. Choose your own files or try the samples.
Up to 5 files, 25 MB in total
Try the drawer
Explore sizes, positions and content states from the WB Logistics design system