Dembrandt

Dembrandt.

用一条命令提取任意网站的设计系统，并在 CI 中强制执行。

徽标、颜色、字体排版、间距、边框、阴影、动效、组件。几秒钟内获取 W3C 设计令牌。

安装

npm install -g dembrandt
dembrandt install-browser        # one-time: fetches the matching Chromium
dembrandt dembrandt.com

必须执行浏览器安装步骤。dembrandt 通过 playwright-core 驱动 Chromium，而 playwright-core 不包含浏览器二进制文件，因此全新安装后没有可启动的浏览器，直到你运行安装命令。跳过这一步会报错：browser engine not available。

也可以使用 npx，无需安装：npx dembrandt dembrandt.com。这里同样需要执行浏览器安装步骤：先运行 npx dembrandt install-browser。浏览器会安装到共享的 Playwright 缓存中，因此无论采用哪种方式，只需安装一次。

需要 Node.js 18+

也可以将 MCP 服务直接安装到编辑器中，让 Agent 来运行：

你将获得

• 颜色（语义角色及每项选择的依据、精选调色板、检测到的所有颜色、CSS 变量、渐变）
• 字体排版（字体、字号、字重、来源、字体文件 URL）
• 间距（外边距/内边距比例）
• 边框（圆角、宽度、样式、颜色）
• 阴影
• 动效（时长比例、缓动曲线、各类组件的悬停模式）
• 组件（按钮、徽标、输入框、链接）
• 断点
• 图标和框架

Playwright 会渲染页面，dembrandt 会从 DOM 中读取计算后的样式，分析颜色用法和置信度，对相似字体排版进行分组，检测间距模式，并返回设计令牌。

标志

dembrandt dembrandt.com --shadcn        # shadcn/ui theme, observed slots only
dembrandt dembrandt.com --dtcg          # W3C design tokens, for Style Dictionary or Tokens Studio
dembrandt dembrandt.com --wcag          # WCAG 2.1 contrast on real DOM pairs

默认仅输出格式化的终端内容。以下列出所有标志；详细参考见 docs/usage.md。

导出

标志	输出内容
--dtcg	W3C 设计令牌（DTCG）
--design-md	面向 AI Agent 的 DESIGN.md
--tailwind [path]	Tailwind v4 @theme CSS
--shadcn [path]	shadcn/ui 主题，仅包含检测到的插槽
--html [path]	独立的 HTML 报告
--brand-guide	品牌指南 PDF
--json-only	将原始 JSON 输出到 stdout
--save-output	将 JSON 保存到 output/<domain>/
--screenshot <path>	视口截图
--color-format <f>	颜色表示法：hex、rgb、oklch、lch、source
--raw-colors	同时包含预筛选前的颜色

分析

标志	输出内容
--wcag	真实 DOM 元素对的对比度等级
--compare <baseline>	漂移门禁；令牌发生变化时退出码为 1
--tokens <file>	根据 W3C 设计令牌文件检查渲染后的颜色、圆角和字号；可重复指定多个文件
--max-off-token <n>	与 --tokens 搭配：渲染值中超过 N 个与任何令牌都不匹配时，退出码为 1
--tokens-report <path>	与 --tokens 搭配：生成 Markdown 摘要，为每个不匹配令牌的值列出最接近的令牌，可用于 Wiki
--annotations <github|azure>	为漂移和不匹配令牌的值添加 CI 注释；默认从运行器检测
--approve	接受当前运行结果作为新的基线
--ai	ML 品牌主色预测（实验性）

覆盖范围

标志	输出内容
--crawl [n]	合并 N 个页面，并计算跨页面置信度
--sitemap	从 sitemap.xml 发现页面
--dark-mode	深色主题的令牌
--mobile	移动端视口
--slow	对大型网站使用 3 倍超时
--browser <type>	chromium 或 firefox；通过 env 使用 CDP
--no-sandbox	用于 Docker 和 CI

访问

标志	输出内容
--cookie <string>	访问需要会话的页面
--cookie-file <path>	JSON Cookie、Playwright storageState（包括 localStorage 和 --save-storage-state 添加的 sessionStorage 区块），或 Netscape cookies.txt
--basic-auth <user:pass>	为浏览器上下文设置 HTTP Basic 身份验证
--login	打开可见浏览器以登录；准备就绪后按 Enter，然后提取（仅限交互式终端）
--save-storage-state <path>	与 --login 搭配，将已登录会话（Cookie、localStorage、sessionStorage）保存到文件；之后可通过 --cookie-file 重用，也可在 CI 中使用
--header <string>	添加额外请求标头，可重复指定多个
--no-headed-fallback	导航失败时不打开可见浏览器；用于批处理
--user-agent <string>	自定义 user agent
--locale <string>	指纹使用的区域设置
--timezone <string>	指纹使用的时区
--accept-language <s>	Accept-Language 标头
--screen-size <WxH>	报告的屏幕分辨率
--stealth	防检测；仅限授权用途
--key <string>	将运行结果同步到你的账户

在 CI 中捕获设计漂移

提取预览部署，与已提交的基线进行比较；令牌发生变化时，使任务失败：

- uses: dembrandt/[email protected]
  with:
    url: https://preview.example.com
    baseline: .dembrandt/baseline.json

此 Action 可在 GitHub Marketplace 获取，并会在 PR 中为发生漂移的令牌添加注释。在其他任何运行器上，门禁仅通过退出码和 JSON 提供结果：dembrandt URL --compare baseline.json --json-only 在发生漂移时退出码为 1，并输出每个令牌的 changes[]。Action 输入、跨平台门禁和退出码表见 docs/ci.md。

示例方案

复制命令，粘贴提示词，即可获得结果。支持竞品对标、WCAG 审计、推送 Figma 令牌，以及构建 Agentic 设计系统。可按角色筛选，详见 dembrandt.com/recipes；基础内容见 docs/recipes.md。

AI Agent 集成（MCP）

在 Claude Code、Cursor、Windsurf 或任何兼容 MCP 的客户端中将 Dembrandt 用作工具。让你的 Agent“从 dembrandt.com 提取配色方案”，它就会自动调用 Dembrandt。

各客户端的配置方法、环境变量和完整工具列表：docs/mcp.md 和 dembrandt.com/mcp。

claude mcp add --transport stdio dembrandt -- npx -y dembrandt mcp

该服务已列入 MCP Registry，名称为 io.github.dembrandt/dembrandt，因此，能够读取注册表的客户端可以通过名称安装它。

或者将其添加到项目的 .mcp.json：

{
  "mcpServers": {
    "dembrandt": {
      "command": "npx",
      "args": ["-y", "dembrandt", "mcp"]
    }
  }
}

可用工具包括 get_design_tokens、get_color_palette、get_typography、get_component_styles、get_surfaces、get_spacing 和 get_brand_identity，以及纯分析工具（compute_drift、get_findings、export_dtcg、generate_design_md、render_report）和作业控制工具。

提取工具接受 slow、mobile、darkMode、wcag、cookie、cookieFile、basicAuth 和 header（用于需要身份验证的页面）、userAgent 以及 noSandbox（用于 Docker 和大多数 CI 容器）。交互式 --login 仅限 CLI 使用。将 pages 设为大于 1 的值，即可抓取并合并多个页面；与单个页面相比，这会生成明显更完善的令牌集。paths 用于明确指定页面，sitemap 则通过 sitemap.xml 发现页面。

提取完成后会返回一个 job_id。使用 get_job_status 轮询作业状态，然后将同一个 id 传给纯分析工具，而不是将提取结果作为参数传入：

get_design_tokens(url: "example.com", pages: 5)  ->  job_id
get_job_status(job_id)                           ->  tokens
get_findings(job_id)                             ->  contrast and consistency issues
export_dtcg(job_id)                              ->  W3C design tokens

搭配 dembrandt-skills 使用，可为你的 Agent 增添基于提取令牌的 UX 智能：层级结构、无障碍性、交互状态，以及完整的 6 阶段设计流程编排器。

npx skills add dembrandt/dembrandt-skills

Dembrandt 应用（Beta）

加载提取结果、跟踪令牌变化并比较快照。dembrandt.com/app

• 通过 CI 自动跟踪变化。 在 dembrandt.com/app/api-keys 生成 API 密钥，然后向 CLI 传入 --key。每次运行都会向你的账户上传一个快照，并根据该域名的上一个快照为其评分。接入 GitHub Actions 或任何 CI 运行器，每次部署都会自动留存记录。
• 固定基线。 将任意快照设为参考基线。之后的每次提取都会自动与其进行评分比较。
• 可视化差异。 查看颜色样本、变更前后的值，以及各类别（颜色、排版、间距、圆角、阴影）的差异分数。
• 快照时间线。 按域名显示比例时间线，可在从数天到数年的任意日期范围内浏览。
• 并排比较。 在同一视图中加载多个提取结果：两个版本、两个网站或两个界面。
• 复制令牌。 直接将值粘贴到 Copilot、Claude 或 Cursor 中。
• 本地使用无需登录。 数据保留在浏览器中。使用 GitHub 登录即可启用云同步。

局限性

• 深色模式需要使用 --dark-mode 标记（不会自动检测）
• 悬停和焦点状态来自对部分元素的实际交互；需要指针路径或计时器的状态无法捕获
• 无法分析使用 Canvas/WebGL 渲染的网站（没有可读取的 DOM）
• JavaScript 密集型网站需要等待水合（初始 8s + 稳定等待 4s）
• 可能会遗漏一些动态加载的内容
• 默认视口为 1920x1080（使用 --mobile 可切换到 390x844 的移动视口）

预期用途

Dembrandt 会读取网站 DOM 中公开可用的 CSS 和计算样式，用于记录、学习以及分析你拥有或获准分析的设计系统。

仅对服务条款允许自动访问的网站或你自己的站点运行 Dembrandt。请勿使用提取的材料复刻第三方品牌标识、徽标或商标。请遵守 robots.txt、速率限制和版权规定。

Dembrandt 不托管、再分发或声称拥有任何第三方品牌资源的权利。

赞助商

CLI 基于 MIT 许可，免费使用。赞助资金用于支持强制执行层：已提交的项目级令牌基线、用于 CI/CD 漂移门禁的 --compare 和摄取 API，以及 App 平台（快照历史记录、团队漂移仪表板、向 Slack、Linear 和 GitHub 发送提醒）。

文档

• docs/usage.md：所有标志、多页面提取、浏览器选择、CDP、DTCG、DESIGN.md、Tailwind 主题、WCAG、动效、品牌指南 PDF
• docs/ci.md：GitHub Action、漂移门禁、退出代码
• docs/mcp.md：各客户端的 MCP 服务安装、环境、工具
• docs/recipes.md：可直接复制粘贴的工作流
• docs/FLAGS.md：标志之间的交互、忽略的组合、多页面传递

参与贡献

欢迎提交 Bug、异常网站和拉取请求。

请创建 Issue 或 PR。

@thevangelist

MIT 许可。随你使用。