Design Token Extractor
概述
Design Token Extractor 是一款尖端的浏览器扩展程序,旨在简化从任何网站提取设计令牌(例如调色板和版式样式)的过程,只需单击一下即可。对于需要快速分析、审核或从 Web 界面汲取灵感的设计师、开发人员和产品团队来说,它是必不可少的工具。通过提供对网页底层样式元素的即时访问,此扩展简化了工作流程,有助于设计系统创建、品牌一致性检查和 UI 样式文档。
该扩展程序通过复杂的页内扫描技术运行,该技术会仔细检查活动网页的 CSS 和 DOM 结构。它对各种 UI 组件中使用的颜色进行识别和分类,包括背景、文本、边框和强调色。颜色被智能地分为主要、次要、强调、背景和文本等类别,以创建清晰且有组织的调色板。版式提取同样全面,涵盖字体系列、大小、粗细、行高、字母间距以及示例文本片段,以便于参考或导出。
Design Token Extractor 提供了一个多功能且用户友好的界面,可作为弹出窗口和侧面板使用,使用户能够根据其工作空间设置选择自己喜欢的显示模式。该界面支持跨专用于颜色、字体、导出选项和用户指南的不同选项卡进行导航。它具有多达十种语言的多语言支持,可满足全球受众的需求,确保在不同环境中的可访问性和可用性。
该扩展程序的突出功能之一是字体检查器,激活后,用户可以将鼠标悬停在网页元素上,通过工具提示立即查看字体详细信息。同样,其先进的颜色提取引擎采用聚类算法,消除冗余颜色并生成简洁的调色板,包括与 Tailwind 兼容的颜色代码,从而与现代 CSS 框架无缝集成。
导出功能强大且灵活,允许用户以广泛使用的格式下载提取的令牌,例如 JSON、CSS、Tailwind 以及其他适合合并到设计系统、前端代码库或设计文档中的格式。其他生产力工具包括剪贴板导出和可加速日常任务的一键式自动提取功能。
隐私是此扩展设计中最重要的考虑因素。所有分析均在用户浏览器本地执行,不会收集或存储任何个人或浏览数据。权限是极简的,仅限于扫描活动选项卡和启用剪贴板操作,从而确保安全意识的足迹。
无论您是要增强品牌的视觉形象、构建全面的设计系统,还是进行 UI 审核,Design Token Extractor 都可以让您快速轻松地获得可操作的、像素完美的见解,从而提高生产力和设计精度。
主要特点:
- 从任何网站自动提取完整的调色板和版式标记。
- 高级颜色聚类和分类为主要组、强调组、背景组和文本组。
- 实时字体检查器,带有悬停工具提示,显示详细的排版信息。
- 以多种流行格式导出设计令牌,包括 JSON、CSS 和 Tailwind。
- 多语言界面支持多达 10 种语言,可在全球范围内访问。
- 灵活的界面模式:弹出窗口或侧面板,以适应各种工作流程。
- 剪贴板导出和一键自动提取功能可实现高效的令牌收集。
运作原理:
1. 从浏览器的扩展商店安装 Design Token Extractor。
2. 在浏览任何网站时,将扩展程序作为弹出窗口或侧面板打开。
3. 从界面下拉菜单中选择您的首选语言。
4. 单击“提取颜色”对网页的调色板进行分析和聚类。
5. 单击“扫描字体”以识别并列出网站上使用的所有版式标记。
6. 启用“字体检查器”模式,通过将鼠标悬停在页面元素上动态显示字体详细信息。
7. 通过复制到剪贴板或以您选择的文件格式下载来导出收集的令牌。
隐私: - 不收集个人数据。
Design Token Extractor 1.1.0.crx
.crx
1.1.0
支持
Design Token Extractor 1.1.0.zip
.zip
1.1.0
不支持
页:
[1]