用 Dembrandt 从任意网站提取设计系统的设计令牌

用 Dembrandt 从任意网站提取设计系统的设计令牌【免费下载链接】dembrandtExtract any website’s design system into tokens in seconds: logo, colors, typography, borders more. One command.项目地址: https://gitcode.com/gh_mirrors/de/dembrandtDembrandt 是一个面向设计师和开发者的命令行工具。它用 Playwright 打开你给的网址读取页面里的颜色和排版信息在几秒内把整站的设计系统整理成一份可复用的设计令牌清单。你不必逐行翻 CSS只要把网址传进去就能拿到徽标、配色、字体、边框等结构化结果。它解决什么问题接手一个没有设计文档的站点或想复现某个网站的整体风格时靠肉眼抄值很容易漏掉细节主色和辅助色混在一起字号散在各处圆角与间距没有规律。Dembrandt 做的事就是把这些零散的样式信息自动归拢。它统计每个颜色被使用的次数和可信度把相似的字号与字重归到一组再检测反复出现的间距最后输出一份能直接拿去用的令牌。安装 Dembrandt 并准备浏览器Dembrandt 要求 Node.js 18 或更高版本。安装方式有两种。第一种是全局安装装完后可在任意目录调用npm install -g dembrandt第二种是用 npx 直接运行省去安装步骤npx dembrandt bmw.deDembrandt 需要浏览器来渲染页面。如果本地没有可用的浏览器可以手动装一个 Firefoxnpx playwright install firefox一条命令提取设计令牌安装完成后把目标网址作为参数传入即可dembrandt bmw.de命令跑完颜色、排版、徽标等信息会直接打印在终端里方便你快速扫一眼整站基调。把结果保存为 JSON 文件终端输出只适合浏览。要把令牌交给下游工具或留档加上--save-output参数Dembrandt 会把完整结果写成一个 JSON 文件dembrandt bmw.de --save-output拿到这份 JSON 后你就可以在自己的项目里直接引用其中的色值、字号与圆角而不用再回站点上抄一遍。用本地 UI 查看品牌信息Dembrandt 还带一个本地 UI适合在浏览器里逐条核对提取到的徽标、配色与排版。先切到对应目录cd local-ui然后启动本地服务器打开浏览器就能看到该站点整理出的设计细节比纯文本输出更直观。避坑提示Docker 或 CI 环境容器里 Chromium 沙箱可能起不来加上--no-sandbox参数跳过沙箱命令即可正常跑完。深色模式不会自动识别目标是暗色界面时显式加--dark-mode否则拿到的是亮色主题结果。hover 与 focus 状态这些状态从样式表里解析并非真实点击后触发个别动态效果可能有出入。JavaScript 重的站点Dembrandt 默认先等 8 秒完成首次加载再留 4 秒让内容稳定页面逻辑复杂时动态加载的部分可能没渲染完就被读取。法律边界Dembrandt 读的是页面对外暴露的设计信息多数地区视为合理使用批量抓取前最好先核对目标站点的使用条款。把网址换成你要分析的目标跑第一条命令看看输出长什么样。【免费下载链接】dembrandtExtract any website’s design system into tokens in seconds: logo, colors, typography, borders more. One command.项目地址: https://gitcode.com/gh_mirrors/de/dembrandt创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考