CSS DNA — Inspect CSS & Extract Design Tokens EN
CSS DNA · EEdge MV3
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).
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).
CSS DNA — Inspect CSS & Extract Design Tokens 是做什么的
CSS DNA — Inspect CSS & Extract Design Tokens 是一款面向 Edge 的实用工具类扩展，主要用来解决浏览器里某类具体的小问题。官方对它的介绍是：Inspect any element's CSS and extract a site's colors, fonts & design tokens — export to Tailwind, CSS, JSON, Figma & more.在微软 Edge 加载项商店上，它当前版本 4.6.3，评分 5（1 人评价），约 33 名用户。
适合什么人用
从功能定位看，CSS DNA — Inspect CSS & Extract Design Tokens 更适合想补上浏览器原生缺失功能的用户。如果你平时只是偶尔遇到相关需求，用浏览器自带功能也能凑合；但如果这件事每天都发生，装一个专门处理它的扩展通常比手动操作省事得多。
怎么安装 CSS DNA — Inspect CSS & Extract Design Tokens
- 打开微软 Edge 加载项商店上的官方页面；
- 点「添加到浏览器」并确认权限提示；
- 装好后在扩展列表里固定图标，方便随时开关。
本站只做索引与介绍，安装包来自官方商店。如果商店页面提示当前地区不可用，说明该扩展未在你所在区域上架。
常见问题
CSS DNA — Inspect CSS & Extract Design Tokens 是免费的吗？
CSS DNA — Inspect CSS & Extract Design Tokens 在微软 Edge 加载项商店免费提供下载。它是浏览器扩展，装上就能直接用，不需要注册账号。
CSS DNA — Inspect CSS & Extract Design Tokens 安全吗？
它只申请了 0 项权限，范围比较克制，没有申请「读取所有网站数据」这种大权限。
CSS DNA — Inspect CSS & Extract Design Tokens 支持哪些浏览器？
当前收录的版本来自微软 Edge 加载项商店，适用于 Edge。同一个扩展在其他商店可能有对应版本，但功能与版本号不一定相同。
怎么卸载 CSS DNA — Inspect CSS & Extract Design Tokens？
在扩展管理页找到 CSS DNA — Inspect CSS & Extract Design Tokens，点移除即可。它在本地保存的设置会一起清掉，不会残留数据。
权限清单 来自 manifest.json 原文
接口权限 4
activeTabalarmsscriptingstorage