CSS DNA — Inspect CSS & Extract Design Tokens 作成者: CSS DNA

CSS DNA is the fastest way to inspect CSS and steal a website's design system — the right way.

Stop digging through DevTools. Click any element to instantly copy clean, minimal CSS. Then scan the whole page to pull
its entire design language: every color, font, type size, shadow, gradient, and border-radius — ranked by how often it's
used.

Export in one click to the format you work in:
• Tailwind config — drop a site's palette + fonts straight into tailwind.config.js
• CSS variables — a ready-to-paste :root { --color-… } block
• JSON design tokens — for design systems and Style Dictionary
• SCSS variables & Figma tokens

✨ Features
• Click-to-copy CSS for any element (minimal or full) — walk the DOM with arrow keys
• Eyedropper + WCAG 2 and APCA (WCAG 3) contrast checking
• One-click design-system extraction: colors, fonts, type scale, spacing, radii, shadows, gradients, CSS variables,
breakpoints, @font-face, motion
• AI / DESIGN.md export — the whole design system as an agent-ready brief for Claude, Cursor & Copilot
• OKLCH tonal scales, near-duplicate color detection, contrast grid & palette PNG export
• CSS health audit — 0–100 score for specificity, !important, duplicates, orphaned variables & consistency
• CSS stats & specificity graph; pseudo-state capture (:hover/:focus/::before…)
• Copy any element as Tailwind classes or a JSX style object — and the full component
• Accessibility audit + SEO checker — scored checklists with copyable reports
• 100% local — no account needed, no data leaves your browser

Free forever: element CSS copy, eyedropper, and full design-system preview.
Pro (subscription): token exports (Tailwind / CSS vars / JSON / SCSS / Figma), audits & downloads.

Perfect for front-end developers, design engineers, and designers who want to learn from, rebuild, or audit any website's
styling in seconds.

— No tracking. No ads. No analytics. Minimal permissions (only the tab you're on).