The short version
Extract Design
By Manav Arya
Pull the colors, fonts, and full design style from any website in one go.
Component Spec
By JR Brugger (Design Workflow)
Write complete design system specs covering variants, states, accessibility, and usage.
What each one does
Extract Design
- Extracts the color palette with exact color codes and the font families a site uses
- Captures spacing, shadows, rounded corners, layouts, and common components
- Scores the site's color contrast against accessibility guidelines
- Creates a visual preview page plus Figma variables and theme files for developers
- Compares the design of two websites side by side
Component Spec
- Generates structured component specifications with anatomy breakdowns, variants, and props
- Documents all component states (hover, focus, disabled, loading, error) with clear descriptions
- Includes accessibility requirements like ARIA roles, keyboard navigation, and screen reader support
- Provides usage guidelines with do/don't examples and content rules
- Covers behavior details like interactions, animations, and responsive breakpoints
When to pick each one
Reach for Extract Design when…
- You want to know exactly which colors and fonts a website uses
- You're studying a competitor's or inspiration site's visual style
- You need to hand a site's design system to a designer in Figma or to a developer
Reach for Component Spec when…
- You're building a design system and need to document components thoroughly
- Your team needs shared specs so designers and developers stay aligned
- You're onboarding someone and want clear component documentation to reference
- You need to ensure accessibility is baked into every component from the start
Quick facts
| Extract Design | Component Spec | |
|---|---|---|
| Made by | Manav Arya | JR Brugger (Design Workflow) |
| Category | Design & Creative | Design & Creative |
| Source | View ↗ | View ↗ |
| Detail page | Open | Open |