What happens if I don't have an existing design system?

The skill will search for common UI directories first; if none are found, it will ask for your permission and preferred structure before creating a new design system.

Will it automatically delete my old code?

As part of the migration step, the skill identifies existing instances, replaces them with the new components, and removes dead code once functional parity is confirmed.

Can this skill handle multiple frontend frameworks?

It is designed to analyze patterns based on your existing code conventions, making it adaptable to various frameworks like React, Vue, or Svelte.

Does it support accessibility?

Yes, when extracting and enriching components, the skill is programmed to build in ARIA attributes, keyboard navigation, and proper focus management.

Design System Extractor

Name: Design System Extractor
Author: devadalberto

bydevadalberto

0•

Design Tools

Identifies and consolidates reusable UI components and design tokens into a centralized design system to improve frontend consistency.

The Design System Extractor skill helps developers manage UI technical debt by scanning codebases for repeated patterns, hard-coded values, and inconsistent implementations. It facilitates the systematic migration of scattered UI code into a structured design system, creating accessible, well-documented components and semantic design tokens. This skill is particularly valuable during project refactoring or when scaling a frontend architecture that has grown organically without a formal component library.

Key Features

01Automates the migration of legacy code to use newly consolidated components

02Creates accessible, production-ready components with TypeScript support

03Identifies duplicated UI patterns and hard-coded CSS values across the codebase

040 GitHub stars

05Generates semantic design tokens for colors, spacing, and typography

06Provides usage documentation and implementation guidelines for extracted patterns

Use Cases

01Transitioning from hard-coded styling to a semantic, token-based design system

02Standardizing inconsistent button, input, and layout variants across multiple features

03Refactoring an organically grown web application into a centralized UI library

Key Features

01Automates the migration of legacy code to use newly consolidated components

02Creates accessible, production-ready components with TypeScript support

03Identifies duplicated UI patterns and hard-coded CSS values across the codebase

040 GitHub stars

05Generates semantic design tokens for colors, spacing, and typography

06Provides usage documentation and implementation guidelines for extracted patterns

Use Cases

01Transitioning from hard-coded styling to a semantic, token-based design system

02Standardizing inconsistent button, input, and layout variants across multiple features

03Refactoring an organically grown web application into a centralized UI library