My role
Reframing the Design System to Be AI-First.
Jun 2025 — Ongoing
I'm leading a cross-functional initiative, alongside our engineering team, to reimagine our design system. We built a proof of concept to reduce uncertainty, rally leadership, and build confidence around investing in a scalable design system. This new system will enable the Figma Dev Mode MCP Server to read and facilitate rapid, AI-assisted customization. Our focus is on designing for speed, consistency, and alignment across product and engineering teams.
A system meant to accelerate us was holding us back.
During intense three-week sprints, our design system often blocked our squads — one designer, two engineers, and one project manager. The lack of standardized frontend components forced every team to dedicate nearly 33% of their development time to laborious frontend tasks. Each new feature led to trade-off discussions: should we prioritize speed or quality?
Three years earlier, the team decided to create a fully custom design system to maintain design flexibility. However, without a dedicated team or long-term commitment, the system lacked thoughtfully designed interactions, consistency, proper documentation, and alignment with our development practices . Components in Figma rarely matched their behavior in code. AI tools weren't leveraged. Collaboration between design and engineering was burdened by disconnected workflows — Storybook, Zeroheight, Figma, and Slack all told different stories.
Now
Design
Inconsistent patterns, Components missing states
Handoff
Manual specs, missed details, assumptions
Development
Recreating from scratch, interpretation gaps, tech debt
Target Flow
Design
Shared tokens, validated
components
Sync
Shared language, aligned
specifications
Development
Pre-built components, consistent implementation
From misalignment to shared systems — rebuilding not just components, but how we collaborate.
We didn't pitch a solution. We prototyped it.
To move this forward, we chose a pragmatic approach: a focused proof of concept.
We selected Shadcn, a library that worked well with our tech stack and could support future AI capabilities. Starting with one of the most stable components in our system — the button — we tested how it could be reimagined using Shadcn in both design and code.
While we explored this technically, we also advocated strategically. The tipping point came when 5 of 6 squads called out design system gaps in their retrospectives. We saw an opportunity and acted fast: brought leads into the room, shared our findings, and outlined a path forward.
Proof of Concept
What We Needed to Learn
- Can our design workflows adapt to the logic and constraints of the library?
- How would be the migration process from Figma's current DS Lib to Shadcn Lib?
- Will Shadcn support our tech stack with minimal engineering lift?
Tested
Aligned
- Token-based spacing and radius
- Variants mapped to Shadcn logic
- Code and design states fully aligned
- Naming structure mirrors dev implementation
- Accessible by default (native behavior)
Token-based spacing and radiusCross-Functional Buy-In?
Done.
My goal wasn't to redesign alone — it was to move together.
I proposed a shared OKR across design and engineering, ensuring we had dedicated time and accountability on both sides. Engineering buy-in came first. Once we aligned, it was easier to bring product along.
We've purchased Shadcn and, for the first time in Superfiliate's history, we secured two full sprints dedicated to the design system. I'm now leading this effort from the design side — building not just components, but a foundation for faster, more aligned product development.
Design maturity, to me, means making room for better questions. It means knowing when to build fast and when to pause and ask " What's the system we're reinforcing here?"
What We're Solving
Replacing a brittle custom system with a scalable, AI-ready framework
Elevating UX craft without slowing delivery
Aligning Figma and code through Shadcn/UI Component Library
Accessible interface components, proven and tested
Building shared understanding of design/dev workflows
Introducing process rituals to evolve the system alongside feature work
Next Steps
With cross-functional alignment secured, our focus shifts to execution — laying the groundwork for a scalable, AI-first design system that supports both craft and velocity.
Codify the Foundations
Audit and align on the core tokens — color, spacing, typography, and border radius — with shared documentation and engineering validation to ensure clean implementation.
Build the Core
Design, document, and release the foundational components in Figma , with implementation support from engineering. Each one built to scale, not just ship.
Define How We Work
Establish a clear, shared process for evolving the system — with input, visibility, and accountability from all design system contributors.
