/extract

interface-design extract

Extract design patterns from existing code to create a system.

Usage

/extract          # Extract from common UI paths
/extract <path>   # Extract from specific directory

What to Extract

Scan UI files (tsx, jsx, vue, svelte) for:

1. Repeated spacing values

   Found: 4px (12x), 8px (23x), 12px (18x), 16px (31x), 24px (8x)
   → Suggests: Base 4px, Scale: 4, 8, 12, 16, 24
   

2. Repeated radius values

   Found: 6px (28x), 8px (5x)
   → Suggests: Radius scale: 6px, 8px
   

3. Button patterns

   Found 8 buttons:
   - Height: 36px (7/8), 40px (1/8)
   - Padding: 12px 16px (6/8), 16px (2/8)
   → Suggests: Button pattern: 36px h, 12px 16px padding
   

4. Card patterns

   Found 12 cards:
   - Border: 1px solid (10/12), none (2/12)
   - Padding: 16px (9/12), 20px (3/12)
   → Suggests: Card pattern: 1px border, 16px padding
   

5. Depth strategy

   box-shadow found: 2x
   border found: 34x
   → Suggests: Borders-only depth
   

Then prompt:

Extracted patterns:

Spacing:
  Base: 4px
  Scale: 4, 8, 12, 16, 24, 32

Depth: Borders-only (34 borders, 2 shadows)

Patterns:
  Button: 36px h, 12px 16px pad, 6px radius
  Card: 1px border, 16px pad

Create .interface-design/system.md with these? (y/n/customize)

Implementation

1. Glob for UI files
2. Parse for repeated values
3. Identify common patterns
4. Suggest system based on frequency
5. Offer to create system.md
6. Let user customize before saving