Dembrandt

Dembrandt 是一个基于命令行的开源工具，能从任意公开网站自动提取完整的设计令牌（Design Tokens）与品牌资产。它由 Playwright 驱动，内置高级反机器人检测机制，确保在主流网站上稳定运行。

只需一行命令，即可获取竞品或目标站点的视觉系统全貌：

npx dembrandt stripe.com

无需安装，几秒内返回结构化数据；也可通过 npm install -g dembrandt 全局安装长期使用。

提取哪些内容？

Dembrandt 会分析真实渲染后的页面，输出以下设计系统要素：

• 品牌标识：自动识别 Logo（<img> 或 <svg>），附带尺寸与原始 URL
• 网站图标：所有 Favicon 变体（ico、png、svg），含尺寸与格式
• 颜色系统：语义化主色、辅助色、完整色板（带置信度评分），支持 hex 与 RGB，优先提取 CSS 变量
• 排版规范：字体族、字号、字重、行高，并自动识别来源（Google Fonts、Adobe Fonts 或自托管）
• 间距尺度：Margin 与 Padding 值，自动判断是否基于 4px/8px 或自定义网格
• 圆角与边框：常用圆角半径、边框宽度/样式/颜色，附使用频率
• 阴影层级：完整的 box-shadow 值，用于还原视觉层次
• UI 组件样式：按钮、输入框、链接等元素的默认与悬停状态
• 响应式断点：从媒体查询中提取屏幕尺寸断点
• 图标系统：检测是否使用 Font Awesome、Material Icons 或内联 SVG
• CSS 框架：识别 Tailwind、Bootstrap、Material-UI、Chakra 等主流框架

所有数据以结构化 JSON 输出，可直接导入设计系统管理工具或用于自动化审计。

为什么这个工具重要？

• 设计师：快速分析竞品设计语言，审计线上品牌一致性，补全文档缺失的生产环境令牌。
• 开发者：在无设计稿情况下重建组件样式，验证实现是否符合规范，或迁移旧项目到新设计系统。
• 产品经理：量化竞品设计演进趋势，评估技术债务，辅助供应商选型。
• 营销与品牌团队：监控第三方渠道品牌使用合规性，为品牌重塑提供数据支持。
• 工程负责人：在并购尽调中快速评估目标产品的前端架构与设计技术债。

技术实现简述

Dembrandt 的提取流程兼顾准确性与抗干扰能力：

1. 以隐身模式启动 Chromium
2. 注入脚本绕过常见机器人检测（如 Cloudflare）
3. 导航至目标 URL，带自动重试机制
4. 等待 SPA 完全渲染（初始 8 秒 + 4 秒稳定期）
5. 校验内容有效性（>500 字符）
6. 并行运行所有提取器，显著提升效率
7. 基于计算样式（computed styles）、DOM 结构与 CSS 变量进行分析
8. 为颜色等关键元素赋予置信度评分（高/中/低）

颜色置信度说明：

• 高：出现在 Logo、主按钮、品牌区域
• 中：用于导航、图标、交互元素
• 低：通用 UI 组件（终端默认隐藏，完整数据见 JSON）

排版分析则采样所有标题（h1–h6）、正文、按钮与链接，按字体特征自动聚类，并追溯字体加载来源。

使用场景示例

• 想了解某 SaaS 产品如何定义“主色”？
  → dembrandt your-saas-competitor.com
• 需要为遗留系统重建设计规范？
  → 提取线上页面，导出 JSON 作为设计系统基准
• 评估一个开源组件库是否真的用 Tailwind？
  → 框架检测模块直接给出答案