Design Snap

About

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.