Unified Intelligence:
Evolving a Design System for AI & Acquisition Integration
I architected a token-driven design system that unified two ad-tech platforms after an acquisition and became the foundation for Madhive’s new AI features. Along the way I moved from designing components to shipping them in code.
Collision Course: When an Acquisition Meets the AI Boom
In 2024, our company went through a major shift when Madhive acquired Frequence. Suddenly, we had two AdTech platforms running side-by-side. They had similar functions but completely different looks and feels. A big question emerged for the design team: how do we unify the branding across these products so they feel like one cohesive family?
Around the same time, the AI boom happened. Leadership decided to shift our focus heavily toward AI features and agentic flows. Because of my strong track record on the reporting team, I was appointed as the lead designer for these new AI features. This was a brand-new product line. I knew that to make these new features a strong selling point, I needed to propose a fresh UI look and carefully consider our branding.
However, we faced a major hurdle from the engineering side: the constant push for speed. With our foundation already split between two platforms, I realized that if we didn’t establish strict constraints through a design system, we would create massive UI risks and scaling issues down the road.
Pragmatism Over Perfection: Architecting a System Built for Reality
I firmly believe that a design system is not a temporary endeavor; it is a continuous effort that must adapt to meet the needs of designers, developers, and users. It is never truly “done.” With this mindset, I approached the new AI features with a big-picture plan.
I started by branching out from our existing design system. I audited all the atom-level components, font styles, and colors, standardizing them in Figma. To accommodate the new product line without the headache of managing multiple design systems, I expanded our color palette to cover everything from functional UI to data visualization, and integrated the company’s marketing messaging.
One of the most critical steps was re-architecting the Kit Design System (v2.0) into a token-driven framework. Instead of following tutorials that teach complex, multi-layered variables, I took a more practical approach. I communicated and negotiated heavily with our engineers, and we aligned on using a single layer of design variables. This made the system much easier to scale into dual themes. The system now enables seamless visual switching between the DSP and MAV platforms using one unified architecture. We also mirrored the entire library in Storybook, complete with comprehensive documentation.
Do we really need to componentize every single new UI element before engineering can start building?
Designing for AI meant introducing a whole new set of components, like “Make it so” buttons, reading cards, and nested lists. For every piece, I asked: Is it following our basic guidelines? Are the use cases and states clearly defined? Is it scalable?
But this revealed a hidden dilemma. If my goal was to strictly control UI quality, the design system could easily become a blocker in our fast-paced development environment. That raised the question above.
The answer was no. I adapted our workflow to ensure we weren’t slowing the team down. I focused on producing high-quality new UI that adhered to the design system’s standards and documented it thoroughly. We let the product move forward. Then, because we didn’t have a dedicated full-time design system team, I set up twice-weekly syncs (Mondays and Fridays) with my fellow designers. We reviewed new designs, opened tickets, and allowed team members to claim components that were worth adding to the core system.
The New Normal: From Designing Components to Shipping Them
It started with live QA sessions with engineering. Soon I was using Claude to generate a component’s code and handing it to engineers for review. Then I began opening the pull requests myself.
I became the first designer on the team to ship in code, with 100+ front-end PRs merged. I build React prototypes with Claude Code, wired to real data and documented in Storybook, so the team reacts to working software instead of static mocks.
As non-designers started generating UI too, I built the design system foundations in Claude Design and wrote Claude skills that let PMs and engineers generate on-brand prototypes. I also added automated design QA at the feature level, so even components that hadn’t been formalized into the system yet kept the same quality. The whole team builds faster, and design quality holds.
More inventive designs, creative solutions, and successful collaborations.
Discover the rest: AI for media sellers, reporting foundations, climate-risk analytics, and the Smithsonian Asian-art collaborations.
