# 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: 5.0 rating with 800+ users on the Chrome Web Store · current version 2.0.1 · free plan with 4 export formats, 3 sites/day and 1 snapshot · PRO at €3.99/month, €19.99/year or €49 lifetime adds shadcn/ui, Tailwind v4 and a standard Style Dictionary v3 export · 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, Tailwind v4 @theme and standard Style Dictionary v3 tokens ({ value, type }).
- [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.
- [Style Dictionary export](https://designsnap.dev/style-dictionary-export/): export any site's design tokens in the standard Style Dictionary v3 schema ({ value, type } for color, dimension, fontFamily, fontWeight, boxShadow, typography), ready for a Style Dictionary build pipeline.
- [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 €3.99 · PRO Yearly €19.99 (~7 months free) · Lifetime €49 one-time.
- [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.