CSS DNA — Inspect CSS & Extract Design Tokens

代码木鱼

概述
CSS DNA 是检查 CSS 和窃取网站设计系统的最快方法——正确的方法。

停止通过 DevTools 进行挖掘。单击任何元素即可立即复制干净、简约的 CSS。然后扫描整个页面以提取其整个设计语言：每种颜色、字体、字体大小、阴影、渐变和边框半径 - 按如何排列
经常使用它。

一键导出为您使用的格式：
• Tailwind 配置 — 将网站的调色板 + 字体直接放入 tailwind.config.js
• CSS 变量 — 准备粘贴的 :root { --color-... } 块
• JSON 设计令牌 — 用于设计系统和样式词典
• SCSS 变量和Figma 令牌

✨ 特点
• 单击以复制任何元素（最小或完整）的 CSS — 使用箭头键遍历 DOM
• 吸管 + WCAG 2 和 APCA (WCAG 3) 对比度检查
• 一键设计系统提取：颜色、字体、字体比例、间距、半径、阴影、渐变、CSS 变量、断点、@font-face、运动
• AI / DESIGN.md 导出 — 整个设计系统作为 Claude、Cursor 和 Copilot 的代理就绪简报
• OKLCH 色调比例、近乎重复的颜色检测、对比度网格和调色板 PNG 导出
• CSS 健康审核 — 特异性、!重要、重复、孤立变量和一致性得分为 0–100
• CSS 统计数据和特异性图；伪状态捕获（:hover/:focus/::before...）
• 将任何元素复制为 Tailwind 类或 JSX 样式对象 — 以及完整组件
• 可访问性审核 + SEO 检查器 — 带有可复制报告的评分清单
• 100% 本地 — 无需帐户，数据不会离开您的浏览器

永久免费：元素 CSS 复制、吸管和完整设计系统预览。
Pro（订阅）：令牌导出（Tailwind / CSS vars / JSON / SCSS / Figma）、审核和下载。

非常适合想要在几秒钟内学习、重建或审核任何网站样式的前端开发人员、设计工程师和设计师。

— 没有追踪。没有广告。没有分析。最小权限（仅限您所在的选项卡）。
非常适合想要在几秒钟内学习、重建或审核任何网站样式的前端开发人员、设计工程师和设计师。

— 没有追踪。没有广告。没有分析。最小权限（仅限您所在的选项卡）。

CSS DNA — Inspect CSS & Extract Design Tokens 4.6.3.crx	.crx	4.6.3		支持
CSS DNA — Inspect CSS & Extract Design Tokens 4.6.3.zip	.zip	4.6.3		不支持