# Extract Design System

> Skill that extracts colors, typography and spacing from a design

- Category: Agent skills (`skills`)
- Official: no confirmed official link
- Wunderlust: https://wunderlust.xyz/r/extract-design-system
- Image: https://wunderlust.xyz/media/extract-design-system-poster.jpg
- Video preview: https://wunderlust.xyz/media/extract-design-system.webm
- Added: 2026-11-05

## What it is

Agent workflow that extracts a design's visual characteristics (colors, typography, spacing).

## What it’s for

To turn a site or reference into tokens an agent can reuse when building interfaces.

## Benefits

- Extracts colors, typography and spacing from a reference

## Caveats

- Official address not confirmed

## Similar on Wunderlust

- [Designlang](https://wunderlust.xyz/r/designlang.md): Extracts colors and typography from a website into a visual system
- [Design.md Chrome](https://wunderlust.xyz/r/design-md-chrome.md): A Chrome extension that extracts a site's design into DESIGN.md or SKILL.md
- [unslop](https://wunderlust.xyz/r/unslop.md): Skill that detects “AI-generated” UI and redesigns it in passes
- [Interface Skills](https://wunderlust.xyz/r/interface-skills.md): Jakub Krehel's set of 14 skills for building and reviewing interfaces
- [Image To Code](https://wunderlust.xyz/r/image-to-code.md): Skill that converts a reference image into an interface
- [Apple Design Skill](https://wunderlust.xyz/r/apple-design-skill.md): Agent skill with Apple-style interface design guidelines