design-engineer:extract

Extract design patterns from existing code to create a system.md file.

design-engineer 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 .design-engineer/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