Extract design tokens from any website

Yes. The free plan includes one-click extraction of colors, typography, radii, shadows and CSS variables, the element inspector, live color editing, a WCAG contrast score, 5 export formats (CSS variables, tailwind.config.js, JSON tokens, Figma tokens and the AI prompt), 3 sites/day and 5 saved snapshots. PRO (€9.99 once, lifetime) adds the shadcn/ui, Tailwind v4 and Style Dictionary v3 exports, the AGENTS.md export, the full contrast report with suggested fixes, real dark-mode extraction, the Design DNA card and unlimited snapshots.

Design Snap reads the computed styles of the page in your active tab, entirely inside your browser. It ranks colors by how often they are actually used, keeps only custom font families, deduplicates border-radii and box-shadows, and lists every CSS custom property declared on :root. One click, about a second.

No. All analysis happens 100% locally in your browser. The only network calls the extension can make are to Google Fonts (to render the theme preview with real typefaces) and to polar.sh (to validate a PRO license key). It never transmits the pages you visit, their content or your browsing history. No analytics, no third-party libraries. Read the full privacy policy.

Nine formats. Free: CSS variables (:root block), a tailwind.config.js theme object, JSON tokens, Figma tokens (Tokens Studio JSON) and an AI prompt — a markdown block you paste into Claude, ChatGPT, v0 or Cursor. PRO adds shadcn/ui semantic variables ready for globals.css, a Tailwind v4 @theme block, a standard Style Dictionary v3 export ({ value, type } tokens for color, dimension, fontFamily, fontWeight, boxShadow and composite typography), and an AGENTS.md file to drop at the root of a repository so a coding agent reads your design system at every session. Every export is generated ready to paste into your project.

PRO adds the shadcn/ui, Tailwind v4 and standard Style Dictionary v3 exports, the AGENTS.md export for coding agents, the full WCAG contrast report with a suggested fix for every failing pair, the export of a live theme edit as a CSS patch, the site's real dark mode extracted automatically (or a coherent generated one if the site has none), the downloadable Design DNA card, and unlimited snapshots. The license key arrives by email after purchase and can be activated or deactivated per device — no account required.

You pay €9.99 once and keep every PRO feature, including future updates, forever. Your key arrives by email right after checkout through Polar and can be moved between devices at any time.

It works on any regular web page Chrome allows extensions to read: production sites, staging environments and localhost. Browser-internal pages (chrome://) and the Chrome Web Store itself are restricted by Chrome for every extension.

DevTools shows the styles of one element at a time. Design Snap analyzes the whole page at once and returns an organized design system: colors ranked by usage, deduplicated typography, radii and shadows, every :root CSS variable and a WCAG contrast audit of the text on the page — already formatted as Tailwind config, shadcn/ui theme, Style Dictionary tokens, Figma tokens or a prompt for an AI agent. It sits in Chrome's side panel, so it stays open while you browse.

No account, ever. The free version installs and works immediately. PRO uses a license key sent by email after purchase; snapshots and the key are stored locally in your browser with chrome.storage.local.

Yes. Design Snap turns an extraction into AI context in two shapes. The AI prompt, free, is a markdown block listing the semantic color roles and where each one is used, the typography, radius, shadow and spacing scales, a ready-to-paste CSS block and explicit rules (bg-primary, never bg-[#2563eb]) — you paste it into Claude, ChatGPT, v0 or Cursor. The AGENTS.md export, PRO, is a file you drop at the root of a repository so Claude Code or Cursor reads your design system at every session, including an Out of scope section that tells the agent what it must not invent. Values completed by a fallback are marked as such, so an agent never mistakes a default for a brand color.

Yes. Design Snap measures the real contrast of the text on the page against WCAG 2.1 (AA 4.5:1, or 3:1 for large text; AAA 7:1). Translucent backgrounds and semi-transparent text are composited before measurement, so the ratio is the one actually rendered, and text sitting on an image or a gradient is reported as skipped rather than guessed. The free plan shows the score and the three worst failures; PRO shows the full list, each with a suggested fix that only moves lightness — your hue and saturation stay untouched.

Since version 3.0.0, Design Snap opens in Chrome's side panel. It stays open while you browse, switch tabs and scroll, so you can inspect a page with its tokens next to it. Open it from the toolbar icon, with Ctrl+Shift+D (⌘⇧D on macOS), or by right-clicking anywhere on a page and choosing Extract the design tokens of this page.

Yes. With PRO, Design Snap maps the extracted palette to shadcn/ui semantic roles — background, foreground, primary, secondary, muted, border and more — and outputs a block ready for globals.css, plus a Tailwind v4 @theme equivalent, each with a real or generated dark variant.