# Design Snap

> Design Snap is a free Chrome extension (Manifest V3, zero dependencies) that extracts design tokens — colors, typography, border-radii, shadows and CSS custom properties — from any website and exports them as Tailwind config, shadcn/ui theme, Style Dictionary JSON, CSS variables or Figma tokens (Tokens Studio). All analysis runs 100% locally in the browser; nothing is ever sent to a server.

Key facts: current version 2.0.1 · free plan with 4 export formats and 1 snapshot · PRO at €4.99/month, €39/year or €49 lifetime (first 50 licenses) · payments via Polar, license key by email, no account required · interface in English and French.

## Product

- [Features](https://designsnap.dev/#features): what Design Snap extracts — colors ranked by real usage, custom typography, unique radii and shadows, every :root CSS variable — plus the element inspector and live theme preview.
- [Export formats](https://designsnap.dev/#exports): real code samples of all exports — Style Dictionary JSON, CSS variables, tailwind.config.js, Figma Tokens Studio, and PRO's shadcn/ui globals.css and Tailwind v4 @theme.
- [How it works](https://designsnap.dev/#how-it-works): extract a website's design tokens in 3 steps — install, extract, export.
- [Install from the Chrome Web Store](https://chromewebstore.google.com/detail/design-snap-%E2%80%93-design-toke/eenpmkjgihcopkabmkdjjoagenpdlfon): free, no account, works immediately.

## Tools

- [Tailwind theme generator](https://designsnap.dev/tailwind-theme-generator/): generate a ready-to-paste tailwind.config.js or Tailwind v4 @theme block from any website's real colors, fonts, radii and shadows.
- [shadcn/ui theme generator](https://designsnap.dev/shadcn-theme-generator/): map any site's palette to shadcn/ui semantic roles (background, foreground, primary, muted…) with light and dark blocks for globals.css.
- [Extract CSS variables](https://designsnap.dev/extract-css-variables/): list every CSS custom property declared on :root of any website, with computed values and color swatches.
- [Color palette extractor](https://designsnap.dev/color-palette-extractor/): get any website's colors ranked by real usage with exact hex values from computed styles.
- [Design Snap vs Chrome DevTools vs CSS Peeper](https://designsnap.dev/compare/): honest feature comparison and guidance on when to use each tool.

## Pricing

- [Pricing section](https://designsnap.dev/#pricing): Free €0 · PRO Monthly €4.99 · PRO Yearly €39 (4 months free) · Lifetime €49 one-time (launch offer, first 50 licenses).
- [pricing.md](https://designsnap.dev/pricing.md): all plans in plain markdown — prices in EUR, feature matrix per tier, checkout links.

## Privacy

- [Privacy policy](https://designsnap.dev/privacy/): no data collection, 100% local analysis, only two possible network calls (Google Fonts for the theme preview, polar.sh for license validation), storage via chrome.storage.local.

## Support

- [Contact](https://designsnap.dev/contact/): support and PRO license questions — hudayfa.k.pro@gmail.com, replies usually within 48 hours.

## Optional

- [French version](https://designsnap.dev/fr/): the complete site in French — landing, privacy policy and contact.