Design Snap – Design Tokens, Tailwind & shadcn/ui Themes
designsnap.dev · Developer Tools
Media
4 items
Description
Extract design tokens from any website, generate shadcn/ui & Tailwind themes, and inspect any element's CSS. DESIGN SNAP — Extract, preview, and export any website's design system A lightweight tool for designers and front-end developers who want to understand and reuse any website's design tokens — without digging through DevTools. 🎨 THEME TAB One click and Design Snap analyzes the page and organizes everything into a real theme: - Colors classified by role — background, foreground, primary, secondary, muted, accent, border, destructive - Typography — font families, sizes, weights, line-heights - Border radius & spacing — extracted and visually previewed - Live preview — buttons, card, input, and badge rendered with the site's actual tokens ☀️🌙 LIGHT & DARK MODE Design Snap detects a site's real dark mode when available (marked "✓ real"), or generates one from the light theme (marked "* generated") when it doesn't have one. 📦 EXPORT IN 6 FORMATS Copy tokens ready to paste into your project: - JSON — Style Dictionary format - CSS Variables — :root { --token: value } - Tailwind config — tailwind.config.js object - Tailwind v4 — @theme syntax (PRO) - shadcn/ui — :root + .dark blocks (PRO) - Figma Tokens Studio — JSON (global set) 🔍 ELEMENT INSPECTOR Hover any element to see its computed styles in a floating panel — color, background, font, size, border-radius, box-shadow. One click to copy a clean CSS block. Click to pin, Esc to close. 🧬 DESIGN DNA CARD Generate a shareable PNG snapshot of any site's design system — hostname, logo, fonts, radius, and 6 dominant colors. Free for everyone. 📚 SNAPSHOT LIBRARY Save and revisit design tokens from sites you've analyzed (1 free, unlimited with PRO). FREE FOREVER Token extraction, color roles, typography, radius, shadows, CSS variables, JSON/CSS/Tailwind/Figma export, element inspector, and 1 saved snapshot — no account, no time limit. DESIGN SNAP PRO Unlock Tailwind v4 & shadcn/ui export, dark mode toggle, full-resolution Design DNA card, and unlimited snapshots. Plans from €4.99/month. PRIVACY Design Snap works 100% locally, in your browser. No data is ever sent to any server, no account required, no tracking, no analytics.