Yoink - Design Token & Style Extractor

Description

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 & SEO