Work About Contact open to new roles

Kato × case study

Unifying design and development through a single system

Replacing fragmented UI libraries with a scalable, AI-enabled design system.

ROLEProduct Designer
AI-assisted front-end
SERVICEDesign systems
STACKFigma variables · shadcn/ui
Claude
USED BYDesign, engineering,
and the whole product team
Kato design system
Overview

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.

The problem

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 result: visual inconsistency, increased development overhead, and friction between design and engineering.

The approach

01Consolidating 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.

Unified component set
System consolidation

02AI-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
Why it matters

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.

Prompt to prototype
AI-generated UI

03Foundations & 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.

04Component 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.

05Internal 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.

Component states
Documentation site
Outcome
  • 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
Learnings
  • Design systems only work if they're easy to use and accessible to the whole team
  • The biggest gains come from aligning design and engineering, not just organising components
  • AI can unlock system usage beyond designers, if the foundations are strong