Item logo image for Yoink - Design Token & Style Extractor

Yoink - Design Token & Style Extractor

Featured
5.0(

1 rating

)
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 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 2 (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.2
  • Updated
    August 5, 2026
  • Offered by
    andersmyrmel
  • Size
    760KiB
  • Languages
    English (United States)
  • Developer
    Email
    support@storeinspect.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

Manage extensions and learn how they're being used in your organization
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

DESIGN.md Inspector

5.0

Auto-generate DESIGN.md and SKILL.md from any page's design system and use it with Claude, Codex and Cursor.

Design Analyzer - Extract Design Elements

0.0

Extract colors, fonts, spacing, shadows & effects from any website. Export to CSS, JSON, Figma, Sketch. One-click design analysis.

uiClone

5.0

Clone any website's design system - Extract colors, fonts, components and export to Markdown or JSON to feed your AI assistant.

Design System Extractor

0.0

Extract a complete design system from any website — colors, typography, spacing, shadows, and more

Pluck

1.0

Select any DOM element and copy it as a structured LLM prompt or Figma component

Peek - Design & Asset Toolkit

4.7

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

Snable: UI Inspector & CSS Scanner

4.6

Analyze any web page that catches your eye! Get a detailed overview of colors, fonts, and visual elements for design inspiration.

DesignAssets - Extract Any Website's Design

5.0

Extract colors, fonts, images, SVGs, and CSS from any website. Build design systems in seconds.

VisualDNA – Design System Extractor

5.0

Extract the complete visual design system of any site. Get colors, typography, components, and generate AI-ready prompts instantly.

Components.lol

5.0

Extract design tokens from any website

StyleKit.io

5.0

Instantly generate complete design system documentation from any website. Extract colors, typography, logo, favicons, and more.

Customizer

5.0

Add custom CSS to one or many sites

DESIGN.md Inspector

5.0

Auto-generate DESIGN.md and SKILL.md from any page's design system and use it with Claude, Codex and Cursor.

Design Analyzer - Extract Design Elements

0.0

Extract colors, fonts, spacing, shadows & effects from any website. Export to CSS, JSON, Figma, Sketch. One-click design analysis.

uiClone

5.0

Clone any website's design system - Extract colors, fonts, components and export to Markdown or JSON to feed your AI assistant.

Design System Extractor

0.0

Extract a complete design system from any website — colors, typography, spacing, shadows, and more

Pluck

1.0

Select any DOM element and copy it as a structured LLM prompt or Figma component

Peek - Design & Asset Toolkit

4.7

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

Snable: UI Inspector & CSS Scanner

4.6

Analyze any web page that catches your eye! Get a detailed overview of colors, fonts, and visual elements for design inspiration.

DesignAssets - Extract Any Website's Design

5.0

Extract colors, fonts, images, SVGs, and CSS from any website. Build design systems in seconds.

Google apps