In a team of 4 FE engineers and another product designer, I initiated the project by running research to identify current process bottlenecks and led the strategy to evolve the first version of the GROPYUS design system. I identified improvements, managed stakeholder communication, and guided the migration process. I delievered a fully-fledged Figma UI kit and collaborated with FE engineers to deliver a DLSv2 component library. I identified suitable coding genAI tools and documented a strategy on how to use it.
Process optimization & new ways of working with a composable, agentic-ready design system
DLSv2 (Design Language System version 2) is the evolution of the first design system at GROPYUS, with a mission to reflect GROPYUS brand & UX principles across products, while improving time-to-design, time-to-develop, design-to-dev handover, design system maturity, composability, and enabling compatibility with coding genAI tools (for faster prototyping and 'with-code' design handovers).
Impact
35% reduction in UI design time
30% increased software engineering efficiency
1-to-1 reflection of design-to-implementation
2x faster prototyping for user testing and demos
AI-native PM–design–engineering collaboration
With-code design handover
System actively used across 6+ products
Full system adoption within 2 weeks of release
I documented the complete DLSv1 component delivery lifecycle in close collaboration with both designers and frontend engineers. The goal was to map the whole component-creation process - decisions on what is a part of a design system, scoping, designing, and implementing, as well as to identify inconsistencies and time-drain, and where collaboration falls apart.
I facilitated targeted discussions/ interviews with core stakeholders - designers, frontend engineers, and product managers, as direct customers and contributors of the DLS. Their input helped uncover specific friction points across the delivery process. Furthermore, by regularly sharing progress, validating observations, and gathering feedback as new insights emerged, I kept the process transparent and inclusive.
We decided to adopt a default shadcn/ui library as a starting point, applying our brand, UX principles, and neccessary adjustments, in order to streamline design-to-development time and maturing the system. This allows our short-staffed teams to shift focus towards crafting overarching digital experiences rather than focusing on defining and implementing micro-interactions of individual web components.
We set up a composable design system following Atomic Design Methodology, where DLSv2 mainly defines basic 'atoms.' Since GROPYUS has many different products, bigger patterns made for specific products are carefully checked if they can be used across others. This keeps our main design system light, adding only parts that are evaluated as 'cross-product reusable'.
Our strategic choice to build DLSv2 upon shadcn/ui unlocks a powerful synergy with coding genAI tools. Since many of these tools are trained to generate frontend code using shadcn/ui as a foundational library, and since at GROPYUS we build frontends as next.js apps, feeding our defined GROPYUS token values and styles in Tailwind CSS format allows us to leverage AI capabilities to our distinct advantage.
This design system-level symbiosis enables a new way of working between product management, design, and engineering. In an AI-native setup, i.e. with Claude Code, functional code prototypes are created much earlier, directly within the codebase and based on the defined design system. In some cases, PM can use Claude Code to prototype instead of write PRDs, designer enhances the prototype, enables it for user testing, refines based on findings and prepares it as ready-for development with code, which devs use to integrate it into production.
We leveraged an extensive community-built shadcn Figma UI kit, applying variables and tokens for colors, typography, and numericals, based on Tailwind CSS naming convention. Our engineering team built a component library where Figma UI kit and the component library are in full sync.
We initially choose v0.app as the AI tool for product management & design workflow, but later moved to Claude Code as the adoption of the tool grew across teams. We created 'skills' and markdown as guidance for Claude to understand our stack and access neccessary resources & documentation, enabling a streamlined output when generating prototypes & UI.
We officially launched DLSv2 in May 2025, where we presented our new design system at a key GROPYUS product and tech event. This immediately generated strong interest, leading to numerous product managers exploring DLSv2 integration and seeking support from our small team.
PM and design are actively using gen AI tools to create UIs for user testing and customer demos, and due to the rigid structure of the design system, we achived high level of consistency for AI outputs. Some of the high-fidelity prototypes were later used as handover for development, showcasing our efficient prototyping and even code-handover capabilities.
