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
不支持
页:
[1]