一条命令提取设计令牌: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/dembrandt想快速复用某个网站的设计风格?传统做法是手动扒颜色、量字号、抄圆角,半天才够。Dembrandt 把这件事压缩成一条命令:输入任意网址,几秒内就能拿到徽标、颜色、排版、边框等一整套设计令牌。下面带你从零跑通第一个提取流程。一分钟速览:Dembrandt 能做什么颜色:语义色、色板、CSS 变量、渐变,附使用频率与置信度排版:字体族、字号、字重,自动把相似样式归组间距与边框:margin/padding 比例、圆角、线宽、线型组件:按钮、输入框、徽章等元素的背景/前景/状态样式导出:终端直接查看,也可存 JSON、导出 W3C DTCG 格式对接 Style Dictionary30秒完成环境自检与部署唯一硬性要求:Node.js 18。主路径是全局安装,一条命令搞定:npm install -g dembrandt装完后还要拉取一次浏览器引擎,因为工具通过playwright-core驱动 Chromium,而 npm 包本身不带浏览器二进制,跳过这步会报browser engine not available:dembrandt install-browser不想装?也可以直接用npx dembrandt url,浏览器步骤同样只跑一次,缓存在 Playwright 共享目录里。首跑实战:一条命令出结果挑一个你熟悉的网站,这里用宝马官网做演示:dembrandt bmw.de默认结果直接打印在终端:色板、字号阶梯、徽标描述依次列出。想看原始数据?加--save-output,JSON 会落到output/目录,文件名带时间戳,方便反复对比。看懂结果:各类设计令牌是什么颜色:不只是有哪些色值,还标注了每个色值在页面中的出现位置和置信度。拿到后可以直接映射成你项目里的 CSS 变量或主题色排版:字体族、字号、字重被合并成层级(如 h1/body/caption),对照着就能复刻对方的文字阶梯徽标与边框:徽标尺寸、位置;圆角、边框宽度的取值分布,决定整体方还是圆的气质间距:提取出 margin/padding 的倍数关系,多数站点其实是 4px 或 8px 网格一句话原理:Dembrandt 用 Playwright 渲染页面,从 DOM 里读计算样式,再按置信度过滤和归组,所以你看到的是被验证过的值,而不是 CSS 源码里的死值。完整参数表在docs/usage.md,核心提取逻辑位于lib/extractors/目录。进阶场景:容器、重JS网站与深色模式Docker/CI 里跑不动—— 容器内 Chromium 沙箱受限,加--no-sandbox:dembrandt bmw.de --no-sandbox重 JS 站点渲染不完整—— 默认等 8 秒加载 4 秒稳定,不够就三倍超时:dembrandt url --slow要深色模式配色—— 不会自动检测,显式传参:dembrandt url --dark-mode想跨多个页面合并结果、提升置信度,--crawl 10值得试试;CI 里拦截设计漂移的思路见docs/ci.md。避坑清单:使用边界与注意事项深色模式不自动检测,漏传--dark-mode拿到的是亮色值hover/focus 状态从 CSS 静态提取,并非真实交互触发,别拿它当行为审计提取的是网站公开的设计信息,多数法域属合理使用,但大规模批量提取前先看看对方服务条款遇到反爬或 Cloudflare 拦截,换 Firefox:dembrandt url --browserfirefox现在轮到你了到这里,你已经掌握了安装、浏览器准备、单站提取和结果解读的全流程。打开终端,敲下dembrandt 你的目标网址,30 秒后就能看到第一份设计令牌。【免费下载链接】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），仅供参考