Design Snap – Design Tokens, Tailwind & shadcn/ui Themes

DESIGN SNAP — Extract, audit and export any site's design system A lightweight tool for designers and front-end developers who want to understand and reuse any site's design tokens, without digging through DevTools. ◧ A SIDE PANEL, NOT A POPUP Design Snap lives in Chrome's side panel: it stays open while you inspect the page, survives tab switches, and keeps the tokens in view while you work. Right click on the page, click the toolbar icon, or press Ctrl+Shift+D (⌘⇧D on macOS). 🎨 THEME TAB One click and Design Snap analyses the page and organises everything into a real theme: colors classified by role (background, foreground, primary, secondary, muted, accent, border, destructive), typography down to font family, size, weight and line height, plus border radius and spacing. All of it shown in a live preview with a button, a card, an input and a badge rendered using the site's actual tokens. 🖌️ LIVE THEME EDITING Change a role color and the page repaints in front of you. Design Snap redefines the site's own CSS variables — exactly the way its author would — which covers shadcn/ui, Tailwind v4 and most modern design systems. The interface tells you how many roles are drivable before your first click, rather than letting you discover what doesn't move. One button returns the page strictly to its original state. 👁️ WCAG CONTRAST AUDIT Design Snap measures the real contrast of every text on the page against its effective background — stacked translucent backgrounds are composited before measuring, because WCAG evaluates the rendered color, not the declared one. Text sitting on an image or a gradient is skipped and counted, never guessed. Every failure is shown with its ratio, its threshold, a preview of the pair in its real colors, and a suggested fix that moves lightness only: your brand color stays your brand color. ☀️🌙 LIGHT & DARK MODE Design Snap detects a site's real dark mode when it has one, or generates one from the light theme when it doesn't, so you can compare both instantly. 🤖 EXPORT TO YOUR AI AGENT Two formats built for assisted development: a prompt to paste into Claude, ChatGPT or v0, and an AGENTS.md file to drop at the root of your repo, re-read every session by Claude Code or Cursor. Measured values are marked apart from fallbacks — an agent that mistakes a fallback for a brand color writes wrong code with confidence. 📦 EXPORT YOUR TOKENS Copy the tokens in the format your project already uses: JSON, CSS variables, Tailwind config, or Figma Tokens Studio to import straight into your files. PRO adds the formats modern setups expect — Tailwind v4's @theme syntax, ready to paste shadcn/ui theme blocks, and the standard Style Dictionary format. Every copy tells you what it delivered, and the last format you used comes back at the top of the list. 🔍 ELEMENT INSPECTOR Hover any element on a page to see its computed styles in a floating panel, then copy a clean CSS block in one click. The panel stays open while you inspect. 🧬 DESIGN DNA CARD Generate a shareable image summarising a site's visual identity: its dominant colors, its fonts and its shape language. 📚 SNAPSHOT LIBRARY Save the tokens of the sites you have analysed and find them again later, even after leaving the page. FREE, NO ACCOUNT 3 sites per day, 5 snapshots, and the whole core of the tool: color roles, typography, spacing, element inspector, live theme editing, contrast score, AI prompt, and the JSON, CSS variables, Tailwind config and Figma exports. No account, no time limit. DESIGN SNAP PRO A single purchase that unlocks unlimited extractions and snapshots, the full contrast audit with its fixes, the AGENTS.md export, the shadcn/ui, Tailwind v4 and Style Dictionary formats, real dark mode, the Design DNA card, and exporting your live-edit patch. €4.99, lifetime, no subscription, updates included. PRIVACY Design Snap runs entirely in your browser. No data is sent to a server — there is no Design Snap server. No account, no analytics, no tracking. The only outbound request validates your PRO license key, and carries only that key.