Kato's design and development workflows were split across multiple UI libraries, leading to inconsistency, duplication, and slower iteration.
The goal was to create a single, unified design system that aligned design and engineering, improved consistency, and enabled faster product development, with AI as a first-class part of how the team designs and builds.
Design and development were fragmented
Two UI libraries in use: MUI and Ant Design
Inconsistent patterns and components across the product
No single source of truth for component states or foundations (colour, spacing, typography)
Designers and engineers working from slightly different interpretations
Slow iteration from duplicated effort and unclear implementation details
THE RESULTvisual inconsistency, increased development overhead, and friction between design and engineering.
Consolidating to a single system
Moved from multiple UI libraries to a single, consistent system based on shadcn/ui: a unified component set, duplication across MUI and Ant Design removed, and alignment between design and implementation ensured.
AI-integrated design workflows
The system's biggest unlock: connecting it to Claude, so the whole product team can design with it, not just designers.
- Connected the design system to Claude: components, variables, and usage rules as context for AI generation
- Enabled every product team member, PMs included, to prompt high-fidelity, on-brand prototypes built from real system components
- Prototypes push into development environments and are validated with real data; AI-generated code directly informs production-ready features
- Removed manual design setup as the bottleneck for exploring and testing ideas
This workflow is how I now operate as both product designer and front-end developer at Kato: the design system keeps AI output consistent, and AI keeps design and build moving at the same speed.
Foundations & token structure
A structured foundation layer in Figma (colour system, typography scale, spacing and layout rules, border radius and component styling) built on variables to ensure consistency, enable easy updates and scaling, and maintain alignment with development.
Component library with full state coverage
A comprehensive component library covering all core UI components with full state definitions (default, hover, active, disabled, error) and clear interaction patterns, supported by an interactive documentation site and visual references for how components behave in context. Designers move faster; engineers implement with confidence.
Internal documentation & accessibility
A working, interactive site showing all foundations and components in one place, with clear guidance on usage and behaviour: a shared reference point across teams. The goal: make the system easy to understand and actually used.
- Consolidated multiple UI systems into a single, scalable design system
- Improved consistency across the product and reduced friction between design and engineering
- Increased speed of prototyping and iteration
- Enabled non-designers to generate system-aligned UI through AI
- Established the foundation for faster product development and experimentation
- 01Design systems only work if they're easy to use and accessible to the whole team
- 02The biggest gains come from aligning design and engineering, not just organising components
- 03AI can unlock system usage beyond designers, if the foundations are strong
Noa
A shared home for a family's tasks, calendar and lists