Design Snap

Extract design tokens, inspect any element's CSS, and download images & videos — all from one popup.

DESIGN SNAP A lightweight tool for designers and front-end developers who want to understand and reuse any website's design system — without digging through DevTools. EXTRACT DESIGN TOKENS Click "Extract" to instantly analyze the current page and pull: • Colors — top colors ranked by usage frequency, with hex values • Typography — font families, sizes, weights, line-heights • Border radius — unique values with visual preview • Box shadows — unique values with live preview • CSS custom properties — all --variables defined on :root EXPORT IN 4 FORMATS Copy everything in one click, ready to paste into your project: • JSON — Style Dictionary format for design token pipelines • CSS Vars — :root { --token: value } for CSS/SCSS projects • Tailwind — tailwind.config.js object, paste and go • Figma — Tokens Studio JSON (global set) for the Figma Tokens plugin ELEMENT INSPECTOR Hover any element to see its computed styles in a floating panel: • Element selector, color, background, font, size, border-radius, box-shadow • Copy CSS button — copies a clean CSS block for the hovered element • Click to pin an element · Esc to close MEDIA DOWNLOADER Click-to-download any image or video without right-clicking: • Detects <img>, <video>, and CSS background-image • Choose a folder once — saves directly to your disk (File System Access API) • Downloads multiple files in a row without re-selecting the folder • Auto-renames duplicates (image.jpg → image-1.jpg) PRIVACY Design Snap works 100% locally. No data is ever sent to any server. No account, no tracking, no analytics. OPEN SOURCE MIT licensed.