dembrandt/dembrandt

# Dembrandt. [](https://www.npmjs.com/package/dembrandt) [](https://www.npmjs.com/package/dembrandt) [](https://github.com/dembrandt/dembrandt/blob/main/LICENSE) 在几秒钟内将任何网站的设计系统提取为设计令牌：Logo、颜色、排版、边框等。只需一条命令。  **CLI 输出**  **品牌指南 PDF**  **本地 UI**  ## 安装 全局安装：`npm install -g dembrandt` ``` dembrandt bmw.de ``` 或者不安装直接使用 npx：`npx dembrandt bmw.de` 需要 Node.js 18+ ## 提取内容包含什么？ - 颜色 (语义、色板、CSS 变量) - 排版 (字体、大小、粗细、来源) - 间距 (margin/padding 比例) - 边框 (圆角、宽度、样式、颜色) - 阴影 - 组件 (按钮、徽章、输入框、链接) - 断点 - 图标 & 框架 ## 用法 ``` dembrandt # Basic extraction (terminal display only) dembrandt bmw.de --json-only # Output raw JSON to terminal (no formatted display, no file save) dembrandt bmw.de --save-output # Save JSON to output/bmw.de/YYYY-MM-DDTHH-MM-SS.json dembrandt bmw.de --dtcg # Export in W3C Design Tokens (DTCG) format (auto-saves as .tokens.json) dembrandt bmw.de --dark-mode # Extract colors from dark mode variant dembrandt bmw.de --mobile # Use mobile viewport (390x844, iPhone 12/13/14/15) for responsive analysis dembrandt bmw.de --slow # 3x longer timeouts (24s hydration) for JavaScript-heavy sites dembrandt bmw.de --brand-guide # Generate a brand guide PDF dembrandt bmw.de --no-sandbox # Disable Chromium sandbox (required for Docker/CI) dembrandt bmw.de --browser=firefox # Use Firefox instead of Chromium (better for Cloudflare bypass) ``` 默认：仅格式化终端显示。使用 `--save-output` 将结果持久化为 JSON 文件。如果无头（headless）提取失败，浏览器会自动以可见模式重试。 ### 浏览器选择 默认情况下，dembrandt 使用 Chromium。如果您遇到机器人检测或超时（尤其是在受 Cloudflare 保护的网站上），请尝试 Firefox，它通常更能成功绕过这些保护： ``` # 使用 Firefox 代替 Chromium dembrandt bmw.de --browser=firefox # 与其他 flags 结合 dembrandt bmw.de --browser=firefox --save-output --dtcg ``` **何时使用 Firefox：** - 位于 Cloudflare 或其他机器人检测系统之后的网站 - 高度保护网站上的超时问题 - WSL 环境，因为无头 Chromium 可能会在其中遇到问题 **安装：** Firefox 浏览器会随 `npm install` 自动安装。如果您需要手动安装： ``` npx playwright install firefox ``` ### W3C 设计令牌 (DTCG) 格式 使用 `--dtcg` 以标准化的 [W3C Design Tokens Community Group](https://www.designtokens.org/) 格式导出： ``` dembrandt stripe.com --dtcg # 保存到: output/stripe.com/TIMESTAMP.tokens.json ``` DTCG 格式是一种行业标准的 JSON schema，可被设计工具和令牌转换库（如 [Style Dictionary](https://styledictionary.com)）使用。 ## 本地 UI 在可视化界面中浏览您提取的品牌。 ### 设置 ``` cd local-ui npm install ``` ### 运行 ``` npm start ``` 打开 http://localhost:5173，API 运行在端口 3002。 ### 功能 - 所有提取品牌的可视化网格 - 带有点击复制功能的调色板 - 排版样本 - 间距、阴影、边框圆角可视化 - 按钮和链接组件预览 - 深色/浅色主题切换 - 提取页面上的分区导航链接 —— 通过粘性侧边栏直接跳转到颜色、排版、阴影等 提取通过 CLI (`dembrandt --save-output`) 执行，并自动显示在 UI 中。 ## 使用案例 - 品牌审计 & 竞争分析 - 设计系统文档 - 逆向工程品牌 - 多站点品牌整合 ## 工作原理 使用 Playwright 渲染页面，从 DOM 提取计算样式，分析颜色使用和置信度，对相似排版进行分组，检测间距模式，并返回可操作的设计令牌。 ### 提取流程 1. 浏览器启动 - 使用隐身配置启动浏览器（默认为 Chromium，可选 Firefox） 2. 反检测 - 注入脚本以绕过机器人检测 3. 导航 - 带重试逻辑导航至目标 URL 4. 水合 - 等待 SPA 完全加载（初始 8 秒 + 稳定 4 秒） 5. 内容验证 - 验证页面内容充实（>500 字符） 6. 并行提取 - 并发运行所有提取器以提高速度 7. 分析 - 分析计算样式、DOM 结构和 CSS 变量 8. 评分 - 根据上下文和使用情况分配置信度分数 ### 颜色置信度 - 高 — Logo、品牌元素、主要按钮 - 中 — 交互元素、图标、导航 - 低 — 通用 UI 组件（从显示中过滤掉） - 终端中仅显示高和中置信度的颜色。完整色板在 JSON 中。 ## 限制 - 深色模式需要 --dark-mode 标志（不会自动检测） - 悬停/聚焦状态从 CSS 提取（非完全交互） - 无法分析 Canvas/WebGL 渲染的网站（例如 Tesla、Apple Vision Pro 演示） - 重 JavaScript 网站需要水合时间（初始 8 秒 + 稳定 4 秒） - 某些动态加载的内容可能会被遗漏 - 默认视口为 1920x1080（使用 --mobile 可切换为 390x844 iPhone 视口） ## 道德与法律 Dembrandt 从网站 DOM 中提取公开可用的设计信息（颜色、字体、间距）以供分析。在大多数司法管辖区，用于竞争分析、文档或学习时，这属于合理使用（美国 DMCA § 1201(f)，欧盟软件指令 2009/24/EC）。 法律：分析公开的 HTML/CSS 通常是合法的。不会绕过保护措施或侵犯版权。在大规模提取前请检查网站服务条款。 道德：用于灵感和分析，而非直接复制。尊重服务器（禁止大规模爬取），注明来源，对数据来源保持透明。 ## 贡献 发现了 Bug？奇怪的网站让它崩溃了？Pull requests（即使是一行代码的修改也会让我开心）？ 在 [Issues](https://github.com/dembrandt/dembrandt/issues) 或 PRs 中轰炸我吧。我会回复所有内容。 让我们一起保持光芒。 @thevangelist MIT —— 随你怎么用。

标签：CSS分析, Design Tokens, DTCG, GNU通用公共许可证, MITM代理, Node.js, PDF生成, UI设计, 品牌指南, 品牌识别, 响应式分析, 字体解析, 暗黑模式, 样式抓取, 特征检测, 网站克隆, 网站提取, 自定义脚本, 设计代币, 设计系统, 颜色提取