## Design System

Extract patterns from live products

Product Designer

Analyzes any live product or codebase and extracts its design system — colors, typography, spacing, components, and tokens — into a structured, reusable format.

### How it works

1. **Point at a product**  
   Share a URL or codebase. The agent analyzes the visual language, component patterns, and design tokens in use.

2. **Extract the system**  
   The agent identifies colors, typography scales, spacing systems, component variants, and naming conventions.

3. **Get structured output**  
   Receive a documented design system with tokens, component inventory, and usage guidelines ready for your team.

### Why use Design System

- **Instant audit**  
  Get a complete picture of any product's design language in minutes instead of days of manual cataloging.

- **Pattern discovery**  
  Surface inconsistencies and undocumented patterns that have drifted from the intended system.

- **Reusable tokens**  
  Output includes structured design tokens you can import directly into your tools and codebase.

- **Cross-product learning**  
  Extract systems from products you admire and use them as a foundation for your own design language.

### When to use Design System

- **Design system bootstrap**  
  Your product has grown organically and you need to formalize the implicit design system.  
  Extract the design system from our production app. Document every color, type scale, and spacing value in use.

- **Competitor system analysis**  
  You want to understand the design language of a product you admire.  
  Extract the design system from Linear's public interface. Focus on their color system and component patterns.

- **Consistency audit**  
  You suspect your product has drifted from its design system and want to quantify the gap.  
  Compare our documented design tokens against what is actually rendered in production and flag discrepancies.

### See Design System in action

See how Design System extracts structured patterns from any live product.