CSS DNA — Inspect CSS & Extract Design Tokens 作者: CSS DNA
Inspect any element's CSS and extract a site's colors, fonts & design tokens — export to Tailwind, CSS, JSON, Figma & more.
擴充套件後設資料
畫面擷圖
關於此擴充套件
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).
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).
由 1 位評論者給出 0 分
權限與資料
更多資訊