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
- Version1.0.1
- UpdatedNovember 19, 2025
- Offered byandersmyrmel
- Size767KiB
- LanguagesEnglish (United States)
- Developer
Email
support@storeinspect.com - Non-traderThis 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
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
