Item logo image for Yoink - Design Token & Style Extractor

Yoink - Design Token & Style Extractor

Item media 4 (screenshot) for Yoink - Design Token & Style Extractor
Item media 1 (screenshot) for Yoink - Design Token & Style Extractor
Item media 2 (screenshot) for Yoink - Design Token & Style Extractor
Item media 3 (screenshot) for Yoink - Design Token & Style Extractor
Item media 4 (screenshot) for Yoink - Design Token & Style Extractor
Item media 1 (screenshot) for Yoink - Design Token & Style Extractor
Item media 1 (screenshot) for Yoink - Design Token & Style Extractor
Item media 2 (screenshot) for Yoink - Design Token & Style Extractor
Item media 3 (screenshot) for Yoink - Design Token & Style Extractor
Item media 4 (screenshot) for Yoink - Design Token & Style Extractor

Overview

Extract design tokens, colors, fonts, spacing, and styles from any website and export clean YAML for design systems and AI tools.

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.

Details

  • Version
    1.0.1
  • Updated
    November 19, 2025
  • Offered by
    andersmyrmel
  • Size
    767KiB
  • Languages
    English (United States)
  • Developer
    Email
    support@inpageai.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

Related

Find The Font

5.0

Use Find The Font to effortlessly identify and select typefaces. Our font finder and identify font tools boost your design projects.

CSS Pully – Font & Color & Style Inspector

5.0

Font & CSS Detector - CSS Pully extracts colors, fonts, shadows, and styles from any webpage. Perfect for designers & developers.

Desktop - Mobile Responsive Testing Tool

4.6

All-in-one Chrome extension for SEO, UI/UX, responsive design, grammar, and security checks. Optimize websites with a single click.

Dev Tools - Web Dev Tools Suite

5.0

Essential web dev tools: code formatter, minifier, base64 encoder, regex, color picker, JSON syntax validator, QR generator & more.

FontViz: Inspect fonts with ease

5.0

Easily inspect and validate the fonts used on any website or web application

Whats the Font

5.0

Use Whats the Font – a simple typeface recognizer for any site. Check typeface with this font finder and easy font identifier tool.

Peek - Design & Asset Toolkit

4.5

Extract assets, colors, typography & tokens from any site. Export to CSS, SCSS, Tailwind & more. The ultimate dev & design toolkit.

Brand Kit Extractor

5.0

Instantly extracts colors, fonts, logos, social links and images from any website.

Web Helper

5.0

Detects tracking scripts such as Tag Manager, GA4, and FB pixel. Shows images, colors, fonts, and links for SEO and web design.

CSS Extractor Pro - Extract Clean CSS Code & Color Palettes

3.0

Extract clean CSS code from any webpage element & generate complete color palettes. Essential developer tool.

DesignPicker - Color Picker & Font Detector

5.0

A smart developer tool that supports color picking and font detecting, making develop design easier.

Font identifier

4.8

Font identifier - simplifies the process of identify fonts on any webpage with a one-click font finder tool, saving users time.

Find The Font

5.0

Use Find The Font to effortlessly identify and select typefaces. Our font finder and identify font tools boost your design projects.

CSS Pully – Font & Color & Style Inspector

5.0

Font & CSS Detector - CSS Pully extracts colors, fonts, shadows, and styles from any webpage. Perfect for designers & developers.

Desktop - Mobile Responsive Testing Tool

4.6

All-in-one Chrome extension for SEO, UI/UX, responsive design, grammar, and security checks. Optimize websites with a single click.

Dev Tools - Web Dev Tools Suite

5.0

Essential web dev tools: code formatter, minifier, base64 encoder, regex, color picker, JSON syntax validator, QR generator & more.

FontViz: Inspect fonts with ease

5.0

Easily inspect and validate the fonts used on any website or web application

Whats the Font

5.0

Use Whats the Font – a simple typeface recognizer for any site. Check typeface with this font finder and easy font identifier tool.

Peek - Design & Asset Toolkit

4.5

Extract assets, colors, typography & tokens from any site. Export to CSS, SCSS, Tailwind & more. The ultimate dev & design toolkit.

Brand Kit Extractor

5.0

Instantly extracts colors, fonts, logos, social links and images from any website.

Google apps