Extract

​

Purpose

• Identify repeated UI patterns worth systematizing
• Find hard-coded values that should become design tokens
• Consolidate inconsistent variations
• Create reusable components from scattered implementations
• Build and maintain a healthy design system

​

Parameters

​

When to Use

• You notice repeated UI patterns across the codebase
• Hard-coded colors, spacing, or typography appear multiple times
• Similar components have inconsistent implementations
• You’re establishing or enriching a design system
• Code duplication is creating maintenance burden
• Inconsistency is affecting user experience

​

Workflow

​

1. Discover

​

Find the Design System

• Component organization and naming conventions
• Design token structure (if any)
• Documentation patterns
• Import/export conventions

​

Identify Patterns

• Repeated components: Similar UI patterns used multiple times (buttons, cards, inputs)
• Hard-coded values: Colors, spacing, typography, shadows that should be tokens
• Inconsistent variations: Multiple implementations of the same concept
• Reusable patterns: Layout, composition, or interaction patterns worth systematizing

​

Assess Value

• Is this used 3+ times, or likely to be reused?
• Would systematizing this improve consistency?
• Is this a general pattern or context-specific?
• What’s the maintenance cost vs benefit?

​

2. Plan Extraction

• Components to extract: Which UI elements become reusable?
• Tokens to create: Which hard-coded values become design tokens?
• Variants to support: What variations does each component need?
• Naming conventions: Names that match existing patterns
• Migration path: How to refactor existing uses

​

3. Extract & Enrich

​

Components

• Clear props API with sensible defaults
• Proper variants for different use cases
• Built-in accessibility (ARIA, keyboard navigation, focus management)
• Documentation and usage examples

// Before: Scattered button implementations
<button className="bg-blue-500 text-white px-4 py-2 rounded">Save</button>
<button className="bg-blue-600 text-white px-3 py-2 rounded-md">Submit</button>

// After: Extracted Button component
<Button variant="primary">Save</Button>
<Button variant="primary">Submit</Button>

​

Design Tokens

• Clear naming (primitive vs semantic)
• Proper hierarchy and organization
• Documentation of when to use each token

/* Before: Hard-coded values */
color: #3b82f6;
padding: 16px;

/* After: Semantic tokens */
color: var(--color-primary);
padding: var(--spacing-4);

​

Patterns

• When to use this pattern
• Code examples
• Variations and combinations

​

4. Migrate

1. Find all instances: Search for the patterns you’ve extracted
2. Replace systematically: Update each use to consume the shared version
3. Test thoroughly: Ensure visual and functional parity
4. Delete dead code: Remove old implementations

​

5. Document

• Add new components to the component library
• Document token usage and values
• Add examples and guidelines
• Update Storybook or component catalog

​

Key Principles

• Extract one-off, context-specific implementations without generalization
• Create components so generic they’re useless
• Extract without considering existing conventions
• Skip proper TypeScript types or prop documentation
• Create tokens for every single value (tokens should have semantic meaning)

​

Usage Examples

​

Example 1: Extract Button Variants

/extract buttons

1. Find all button implementations across the codebase
2. Identify common patterns and variants
3. Create a unified Button component with proper variants
4. Replace all existing buttons with the new component
5. Document usage in the design system

​

Example 2: Extract Color Tokens

/extract colors

1. Find all hard-coded color values
2. Group similar colors and identify semantic usage
3. Create color token system (primitive + semantic)
4. Replace hard-coded values with tokens
5. Document color usage guidelines

​

Example 3: General Extraction

/extract

1. Analyzes entire codebase for duplication and patterns
2. Identifies highest-value extraction opportunities
3. Prioritizes by impact (frequency × inconsistency)
4. Systematically extracts and consolidates

​

Design System Growth

​

Extraction Criteria

​

Philosophy

• Identify patterns as they emerge
• Enrich them thoughtfully
• Maintain them consistently