Scrunch AI Design System
Scrunch’s product had grown around scattered components, inconsistent screens, and engineering patterns with no shared design reference. I created an interactive design system that brought brand, UI, documentation, and code into one place, giving teams a clearer way to build consistently as the product continues to evolve.
Year
2026
Scope
Product Design + Front End Development
Client
Scrunch AI
Objective
Scrunch needed more than a traditional component library. The product was evolving quickly, but design and engineering were working from different sources, documentation was limited, and one-off components were being created without a shared standard.
The goal was to create a flexible source of truth that could support a fast-moving AI product without locking the team into patterns too early. It needed to improve consistency, reduce repeated decisions, and make both design intent and implementation details easy to understand.
Turning a scattered UI library into a living system teams could search, inspect, and build from.
Approach
I designed the system around the idea that documentation should be something teams could interact with, not just read.
Using Figma, Figma MCP, Claude, and React, I created a fully functional coded prototype that combined brand guidance, voice and tone, design foundations, tokens, UI components, accessibility rules, and code snippets in one searchable experience. The system was split into core brand and product sections, with typeahead search making it easy to move between assets, guidance, and implementation details.
Engineers could inspect the visual behavior, states, and code behind each component, while designers had a flexible library adapted from shadcn for rapid iteration. I also created a prototype component builder that allowed teams to combine existing patterns into new solutions, helping reduce the creation of custom components outside the design process.
The biggest challenge was defining reusable patterns while the product was still changing. I focused on creating enough structure to improve consistency without prematurely standardizing decisions the team still needed room to explore.
Outcome
The system became a shared reference point for design, engineering, and the broader company. It reduced interpretation gaps, improved consistency across features, and made it easier to move from concept to implementation without rebuilding the same decisions each time.
Interactive documentation and coded examples accelerated development, made stakeholder feedback more concrete, and helped design and engineering work from the same understanding of the product. The result was a more coherent interface and a flexible foundation that could continue evolving alongside Scrunch.
