# 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 tokens, CSS variables, Figma tokens (Tokens Studio), an AI prompt or an AGENTS.md file for coding agents. Since v3 it runs in Chrome's side panel, audits text contrast against WCAG 2.1 and can recolor the live page. All analysis runs 100% locally in the browser; nothing is ever sent to a server.

Key facts: 5.0 rating with 130+ users on the Chrome Web Store · current version 3.0.0 (side panel, WCAG contrast audit, live theme editing, AI export) · 9 export formats in total · free plan with 5 of them (JSON tokens, CSS variables, tailwind.config.js, Figma tokens, AI prompt), 3 sites/day, 5 snapshots, contrast score and live color editing · PRO at €9.99 one-time (lifetime, no subscription) adds shadcn/ui, Tailwind v4, standard Style Dictionary v3 and AGENTS.md exports, the full contrast report with fixes, real dark mode, the Design DNA card and unlimited snapshots · payments via Polar, license key by email, no account required · interface in English and French.

Last updated: 2026-09-04 · Design Snap v3.0.0

## 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 Chrome side panel, the element inspector, the WCAG contrast audit and live theme editing on the real page.
- [Export formats](https://designsnap.dev/#exports): real code samples of all nine exports — JSON tokens, CSS variables, tailwind.config.js, Figma Tokens Studio and the AI prompt on the free plan, plus PRO's shadcn/ui globals.css, Tailwind v4 @theme, standard Style Dictionary v3 tokens ({ value, type }) and AGENTS.md for coding agents.
- [How it works](https://designsnap.dev/#how-it-works): extract a website's design tokens in 3 steps — install, open the side panel (toolbar icon, Ctrl+Shift+D or right-click) and extract, then 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.

## Guides & comparisons

- [What are design tokens?](https://designsnap.dev/design-tokens/): the definition (a named value storing one design decision), the primitive/semantic/component layers, the same token expressed as a CSS custom property, a Tailwind theme key and a Style Dictionary token, and how to extract tokens from a website that never published any.
- [Best design token extractors in 2026](https://designsnap.dev/best-design-token-extractors/): Design Snap, Chrome DevTools, CSS Peeper, VisBug, ColorZilla and WhatFont compared on coverage, aggregation, export formats and privacy — written by the developer of Design Snap, with the bias stated and the cases where the other tools win marked in the table.
- [CSS Peeper alternative](https://designsnap.dev/css-peeper-alternative/): head-to-head with CSS Peeper, including the two cases where CSS Peeper remains the better choice (asset download, quick glance).
- [Design Snap vs Chrome DevTools vs CSS Peeper](https://designsnap.dev/compare/): the three-way comparison, with guidance on when to use each.

## 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.

## What users say

Design Snap is rated 5.0 out of 5 on the Chrome Web Store. Verified reviews, quoted without their authors' names:

- "Super useful extension for designers and developers. It makes extracting colors, fonts, CSS styles, and media incredibly quick and easy. The export options are especially helpful, and I love that everything works locally with no tracking." — verified Chrome Web Store review, 12 July 2026.
- "Design Snap makes extracting colors, typography, shadows, and tokens effortless, saving designers and developers valuable time on every project daily." — verified Chrome Web Store review, 3 July 2026.
- "As a developer, this extension lets me draw inspiration from the best sites out there. Approved." — verified Chrome Web Store review, 18 May 2026, translated from French.
- [Reviews section](https://designsnap.dev/#reviews): the same reviews on the landing page, with the link to every review on the Chrome Web Store.

## Pricing

- [Pricing section](https://designsnap.dev/#pricing): two plans only — Free €0 · PRO Lifetime €9.99, a single payment, no subscription, all future updates included.
- [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, and the permission list (activeTab, scripting, storage, sidePanel, tabs, contextMenus) with the reason for each.

## Support

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

## French version

The whole site exists in French, page for page. Every English URL has a French equivalent under `/fr/`.

- [Design Snap (French landing page)](https://designsnap.dev/fr/): the full product page in French — features, exports, how it works, pricing, FAQ.
- [Générateur de thème Tailwind](https://designsnap.dev/fr/tailwind-theme-generator/): générer un tailwind.config.js ou un bloc @theme Tailwind v4 depuis les couleurs, polices, radius et ombres réels de n'importe quel site.
- [Générateur de thème shadcn/ui](https://designsnap.dev/fr/shadcn-theme-generator/): mapper la palette d'un site sur les rôles sémantiques shadcn/ui, avec les blocs clair et sombre pour globals.css.
- [Export Style Dictionary](https://designsnap.dev/fr/style-dictionary-export/): exporter les design tokens d'un site au format standard Style Dictionary v3 ({ value, type }), prêt pour un pipeline de build.
- [Extraire les variables CSS](https://designsnap.dev/fr/extract-css-variables/): lister toutes les custom properties déclarées sur :root d'un site, avec valeurs calculées et swatches.
- [Extracteur de palette de couleurs](https://designsnap.dev/fr/color-palette-extractor/): obtenir les couleurs d'un site classées par usage réel, avec les hex exacts issus des styles calculés.
- [Qu'est-ce qu'un design token ?](https://designsnap.dev/fr/design-tokens/) : la définition, les couches primitive/sémantique/composant, et comment extraire les tokens d'un site qui n'en publie pas.
- [Meilleurs extracteurs de design tokens en 2026](https://designsnap.dev/fr/best-design-token-extractors/) : six outils comparés sur la couverture, l'agrégation, les exports et la confidentialité.
- [Alternative à CSS Peeper](https://designsnap.dev/fr/css-peeper-alternative/) : face-à-face avec CSS Peeper, y compris là où CSS Peeper reste meilleur.
- [Design Snap vs Chrome DevTools vs CSS Peeper](https://designsnap.dev/fr/compare/): comparatif honnête et conseils sur l'outil à choisir selon le cas.
- [Politique de confidentialité](https://designsnap.dev/fr/privacy/): aucune collecte de données, analyse 100 % locale.
- [Contact](https://designsnap.dev/fr/contact/): support et questions sur la licence PRO.