Retrospective Design System Development with freska.ai

28 May

Context

A fast-growing product team expanded features rapidly without a formal design system. Over time, UI patterns multiplied organically: multiple button styles, inconsistent grids, duplicated components, and ad-hoc tokens. New designers struggled to maintain coherence, and developers often had to guess visual standards.

Challenge

No existing design system or documentation
UI inconsistencies across different product eras
Multiple legacy styles living in both Figma and code
Difficult to reverse-engineer patterns while shipping new features
Heavy manual effort required to extract components and tokens

How Freska AI Helped

Freska AI enabled the team to reconstruct a clean design system retroactively, using automation to extract structure from chaos.

1. UI Extraction from the Live Product

Freska AI scanned the live interface and Storybook to identify repeating visual patterns—buttons, cards, forms, alerts—regardless of naming or styling variations.

2. Automatic Clustering of Components

Using visual similarity and token analysis, Freska AI grouped UI variants into unified component families.
Example: 14 different buttons → 1 structured button component with AI-generated states and variants.

3. Token Discovery & Normalisation

The system mined the product for recurring values:

spacing scales
colour families
typography patterns
border radii
shadow levels

Freska AI proposed a clean token set mapped to each discovered pattern, removing duplication and drift.

4. Generation of a Fresh Design System in Figma

Based on extracted UI patterns, Freska AI auto-generated a structured design system:

core tokens
primitive components
interactive states
responsive rules
semantic naming

Designers received a coherent library, instantly modernised, and aligned to actual product usage.

5. Code Mapping for Developers

Freska AI linked each new Figma component to its code counterpart (or legacy variation), enabling:

developer-ready refactor instructions
proposed PRs to update deprecated components
a clean path toward system-wide adoption

Impact

Design system built 5× faster than manual creation
Reduced legacy component variations by over 70%
Established a consistent visual language grounded in real product usage
Designers and developers aligned around a single, AI-generated source of truth
Accelerated feature delivery with fewer regressions and less rework

Result

Freska AI successfully transformed an unstructured, legacy-heavy product into a fully unified design system—built retrospectively, intelligently, and with minimal manual effort. The product emerged cleaner, more scalable, and easier to evolve.