Design Snap
2 ratings
)Overview
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.
5 out of 52 ratings
Details
- Version1.0.0
- UpdatedMay 13, 2026
- Offered byhudayfa.k.pro
- Size75.37KiB
- LanguagesEnglish
- Developer
Email
hudayfa.k.pro@gmail.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