Yoink Design Token Style

Yoink extracts design tokens, colors, typography, CSS variables, spacing, components, and layout styles from any website in one click. Export clean YAML for design systems, UI audits, component libraries, and AI coding assistants like Claude and Cursor.

WHAT YOINK DOES

Point, click, and extract a website’s complete design language:

- Colors - Full palettes with usage frequency, CSS variables, and color relationships
- Typography - Font families, type scales, headings, body text, and line heights
- Spacing & Layout - Grid systems, containers, spacing patterns, and flexbox configurations
- Components - 30+ UI patterns including buttons, forms, cards, navigation, modals, and tooltips with all their variants and states
- Animations - Transitions, durations, and easing functions
- Shadows & Effects - Complete elevation systems from subtle to dramatic
- Responsive Design - Breakpoints and media query patterns

PERFECT FOR

- Developers building UIs that match existing designs
- Designers documenting design systems
- AI-assisted coding (paste the YAML directly into Claude, Cursor, or other AI tools)
- Learning from well-designed websites
- Design system audits and analysis

HOW IT WORKS

1. Navigate to any website
2. Click the Yoink extension icon
3. Click "Scan Page" (toggle component detection as needed)
4. Copy or download the generated YAML
5. Paste into your AI coding assistant to recreate matching UI automatically

PRIVACY FIRST

Yoink processes everything locally in your browser.
No servers. No analytics. No tracking.
What you scan stays on your machine.

OPEN SOURCE

Yoink is fully open source and built transparently.
Review the code, contribute, or adapt it for your workflow.

GET STARTED

Install Yoink and start extracting design systems in seconds.
No account required. No setup needed. Just click and extract.