一条命令提取任意网站的设计系统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 是一个命令行工具能把任意网站的设计系统在几秒内变成一套完整的设计令牌——你只负责给出网址几秒钟后拿到的是一棵包含徽标、颜色、字体、间距等内容的结果树。无论是想对齐竞品风格、给自家产品补一份设计语言文档还是把现有品牌直接喂给 AI 编程助手都不用再手动打开 DevTools 一个个记数值。 一次提取能拿到什么产出远不止一个色板。一条命令跑完你会拿到颜色语义色、主色板、CSS 变量、渐变每一项都带置信度排版字体族、字号、字重、字体来源和字体文件 URL间距margin/padding 推断出的刻度体系边框与阴影圆角、边框宽度、阴影层级动效动画时长、缓动曲线以及各类组件的 hover 模式组件按钮、输入框、徽章、链接的样式拆解断点与图标系统响应式断点、在用的图标框架第一次跑完你会明白为什么它敢自称一条命令的设计系统提取。 从零到第一次提取前置条件只有一个Node.js 18。装好之后是这样npm install -g dembrandt dembrandt install-browser dembrandt bmw.de这里最容易被忽略的是浏览器这一步。dembrandt 通过 playwright-core 驱动 Chromium而 npm 包里并不自带浏览器二进制跳过install-browser会直接报browser engine not available。浏览器缓存在共享目录里所以一辈子只需跑一次。当然懒人可以跳过全局安装直接npx dembrandt bmw.de——浏览器步骤同理先跑一次npx dembrandt install-browser。默认结果只打印在终端树形结构配彩色置信度标识。想留档就加--save-outputJSON 会落到output/域名/时间戳.json后续任何流水线都能接着用。设计令牌的三种用法最实用的导出格式是 W3C Design TokensDTCGdembrandt dembrandt.com --dtcg生成的.tokens.json可被 Style Dictionary、Tokens Studio 这类工具直接消费等于把你看到的网站变成了可交付的令牌集。另外两个出口也很顺手--tailwind写出一份 Tailwind v4 的themeCSS--design-md生成给 AI Agent 读的 DESIGN.md交给 Claude 或 Cursor让 Agent 按这套品牌语言去写界面。如果团队在意设计一致性Dembrandt 还能当设计漂移门禁用每次预览部署后重新提取与提交进仓库的基线对比令牌一旦变动 CI 直接失败PR 上自动标注漂了哪些值。谁把按钮颜色改了没人发现从此从代码评审事故变成 CI 红标。为什么结果敢标置信度答案藏在核心提取逻辑里Playwright 先渲染页面13 个提取器在 DOM 内并行工作读的是 computed styles 而不是原始 CSS——所以你拿到的是页面上真正生效的值。颜色分析做得最深用感知色差 delta-E 对近似色去重给出现在 logo、品牌区、CTA 上的颜色更高的上下文得分再按高/中/低三级标记置信度。遇到 JavaScript 重的单页应用默认会等 8 秒初始加载加 4 秒稳定期加上--crawl 5合并多个页面还能让跨页反复出现的令牌置信度进一步抬升。项目仍在快速演进路线图 上排着多页面提取、语气分析、更多组件等方向⚠️ 第一次跑之前容易踩的坑暗色模式不会自动检测必须显式加--dark-mode否则只拿到浅色方案。JS 重的站点超时了就加--slow所有等待时间三倍化还不行就换--browserfirefox它对 Cloudflare 一类的防护通常更友好。Docker/CI 环境记得--no-sandbox否则 Chromium 拒绝启动。Canvas/WebGL 站点不在射程内没有 DOM 可读提取结果基本是空的。合规只跑自己的站点或条款允许自动化访问的站点别把提取的材料用来复刻他人商标尊重 robots.txt。完整参数手册 里有全部细节建议在做第一次多页面或移动端提取前花两分钟扫一遍。别再在 DevTools 里一个个量色值了——把网址递进去让这套设计令牌提取工具替你把剩下的活干完。【免费下载链接】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），仅供参考 一条命令提取任意网站的设计系统：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 是一个命令行工具能把任意网站的设计系统在几秒内变成一套完整的设计令牌——你只负责给出网址几秒钟后拿到的是一棵包含徽标、颜色、字体、间距等内容的结果树。无论是想对齐竞品风格、给自家产品补一份设计语言文档还是把现有品牌直接喂给 AI 编程助手都不用再手动打开 DevTools 一个个记数值。 一次提取能拿到什么产出远不止一个色板。一条命令跑完你会拿到颜色语义色、主色板、CSS 变量、渐变每一项都带置信度排版字体族、字号、字重、字体来源和字体文件 URL间距margin/padding 推断出的刻度体系边框与阴影圆角、边框宽度、阴影层级动效动画时长、缓动曲线以及各类组件的 hover 模式组件按钮、输入框、徽章、链接的样式拆解断点与图标系统响应式断点、在用的图标框架第一次跑完你会明白为什么它敢自称一条命令的设计系统提取。 从零到第一次提取前置条件只有一个Node.js 18。装好之后是这样npm install -g dembrandt dembrandt install-browser dembrandt bmw.de这里最容易被忽略的是浏览器这一步。dembrandt 通过 playwright-core 驱动 Chromium而 npm 包里并不自带浏览器二进制跳过install-browser会直接报browser engine not available。浏览器缓存在共享目录里所以一辈子只需跑一次。当然懒人可以跳过全局安装直接npx dembrandt bmw.de——浏览器步骤同理先跑一次npx dembrandt install-browser。默认结果只打印在终端树形结构配彩色置信度标识。想留档就加--save-outputJSON 会落到output/域名/时间戳.json后续任何流水线都能接着用。设计令牌的三种用法最实用的导出格式是 W3C Design TokensDTCGdembrandt dembrandt.com --dtcg生成的.tokens.json可被 Style Dictionary、Tokens Studio 这类工具直接消费等于把你看到的网站变成了可交付的令牌集。另外两个出口也很顺手--tailwind写出一份 Tailwind v4 的themeCSS--design-md生成给 AI Agent 读的 DESIGN.md交给 Claude 或 Cursor让 Agent 按这套品牌语言去写界面。如果团队在意设计一致性Dembrandt 还能当设计漂移门禁用每次预览部署后重新提取与提交进仓库的基线对比令牌一旦变动 CI 直接失败PR 上自动标注漂了哪些值。谁把按钮颜色改了没人发现从此从代码评审事故变成 CI 红标。为什么结果敢标置信度答案藏在核心提取逻辑里Playwright 先渲染页面13 个提取器在 DOM 内并行工作读的是 computed styles 而不是原始 CSS——所以你拿到的是页面上真正生效的值。颜色分析做得最深用感知色差 delta-E 对近似色去重给出现在 logo、品牌区、CTA 上的颜色更高的上下文得分再按高/中/低三级标记置信度。遇到 JavaScript 重的单页应用默认会等 8 秒初始加载加 4 秒稳定期加上--crawl 5合并多个页面还能让跨页反复出现的令牌置信度进一步抬升。项目仍在快速演进路线图 上排着多页面提取、语气分析、更多组件等方向⚠️ 第一次跑之前容易踩的坑暗色模式不会自动检测必须显式加--dark-mode否则只拿到浅色方案。JS 重的站点超时了就加--slow所有等待时间三倍化还不行就换--browserfirefox它对 Cloudflare 一类的防护通常更友好。Docker/CI 环境记得--no-sandbox否则 Chromium 拒绝启动。Canvas/WebGL 站点不在射程内没有 DOM 可读提取结果基本是空的。合规只跑自己的站点或条款允许自动化访问的站点别把提取的材料用来复刻他人商标尊重 robots.txt。完整参数手册 里有全部细节建议在做第一次多页面或移动端提取前花两分钟扫一遍。别再在 DevTools 里一个个量色值了——把网址递进去让这套设计令牌提取工具替你把剩下的活干完。【免费下载链接】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），仅供参考