← 返回目录

Dembrandt

社区

将任意网站的设计系统在几秒内提取为设计令牌：标志、颜色、字体、边框等。一条命令。

查看安装方法 ↓ 横向对比 GitHub 源仓库 ↗

分类: 开发工具第 38 / 438
Stars: ★ 3.6k 非常热门
传输方式: stdio（本地进程）
运行环境: Node.js 18+
凭据: 可选 API Key
许可证: MIT
最近提交: 3 天前
工具数: 12

66FMRS · C

Dembrandt 是一个功能强大的设计令牌提取工具，通过 MCP 集成，AI 代理可轻松获取网站的设计信息。它支持多种导出格式和 CI 集成，但需注意合规性和资源消耗。总体而言，适合需要自动化设计分析的团队。

最强项 · 文档质量 18/20 最弱项 · 可靠性 7/20

可靠性

7/20

安全与权限

13/20

维护活跃度

14/20

文档质量

18/20

安装易用性

14/20

查看各项评分依据

可靠性 7/20: 仅提供 README，未提供源码、测试、CI 配置或 MCP manifest，无法验证“dembrandt-mcp”能否完成初始化与工具列表握手。README 描述了大量提取工具、退出码与多页抓取，说明设计上有错误处理，但声明属于未受信任证据；依赖（Playwright、浏览器）管理有说明，但缺少可复现的测试或 CI 证据，因此按不确定性下调至 7。
安全与权限 13/20: 未发现红线问题：安装示例中 API key 仅为占位符，没有真实令牌；没有默认的破坏性/支付/远程命令。数据流有披露：提取目标网站，只有传入 --key 才上传快照，可用 DEMBRANDT_API_URL 覆盖；stealth/反检测是可选并提示需授权。扣分原因：源码缺失，无法确认最小权限、cookie/浏览器选项的实际处理与确认机制；认证数据若被误用可能泄露，但无隐蔽收集证据。综合给 13。
维护活跃度 14/20: 仓库未归档，MIT 许可明确，README 显示有版本化发布（v0.26.1）与官方 GitHub Action，功能面持续演进。但所提供材料没有提交历史、发布节奏、依赖更新策略、issue 响应或安全响应渠道；star 数仅作发现信号，不能加分。因此不能确认“持续维护”达到满分，给 14。
文档质量 18/20: 文档分层且覆盖完整：安装、MCP 客户端示例（Claude Code 一行命令与 .mcp.json）、CLI flags 兼容表、DTCG/DESIGN.md/WCAG、CI drift gate、退出码、浏览器不匹配排查、限制与预期用途均有说明。扣分：缺少 MCP manifest、逐工具参数参考，以及 MCP 初始化失败的专门排查证据，未给满分，给 18。
安装易用性 14/20: 安装路径明确：Node.js 18+，npm 全局/npx，Claude Code 的 claude mcp add 与 .mcp.json 片段，浏览器按需安装并匹配 playwright-core，Linux/CI 系统库命令也已给出。静态校准将 setup 上限设为 15，因没有 CI/测试产物证明该流程可执行；浏览器前置安装仍是额外手动步骤，故给 14。

静态评测 · 未实际运行收录于 2026-08-07

查看 FMRS 评分方法 →

选型与风险

能访问什么访问网络控制浏览器

适合谁

前端开发者需要快速分析网站设计系统并提取可复用的令牌。
设计系统团队需要文档化现有站点或跟踪跨版本的设计变更。
使用 MCP 的 AI 代理希望自动获取网站设计信息以辅助开发或审计。

不适合谁

需要完整交互式分析（如悬停效果）的用户，因为目前仅从 CSS 提取部分交互状态。
Canvas/WebGL 渲染的网站，因为它们没有可读取的 DOM。
违反网站服务条款的自动化访问，请确保有授权。

所需权限

网络访问：需要访问目标网站以进行提取。
本地文件系统：保存输出文件（JSON、PDF、DESIGN.md）时需写入权限。
浏览器执行：使用 Playwright 驱动浏览器，需要系统权限。

风险与副作用

目标网站可能禁止自动化访问，违反服务条款可能导致 IP 封禁。
提取的令牌可能包含受版权保护的设计元素，不应未经授权复制品牌资产。
浏览器驱动可能消耗较多资源，在 CI 或受限环境中需要注意配置（如 --no-sandbox）。

安装接入

准备工作

运行环境：Node.js 18+

其他可选配置项（2 个）

DEMBRANDT_API_URL 可选覆盖快照上传端点，默认 https://www.dembrandt.com；仅在配合 --key 使用 App 云同步时需要。

BROWSER_CDP_ENDPOINT 可选连接已运行的 Chromium 的 DevTools 协议端点（如 http://localhost:9222），仅在 --browser chromium 下支持。

确保 Node.js 18+ 已安装。
全局安装 Dembrandt：npm install -g dembrandt，或使用 npx：npx dembrandt <url>。
作为 MCP 服务器，在支持 MCP 的客户端（如 Claude Desktop、Cursor、Windsurf）中添加配置：

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

首次运行可能需要安装浏览器：dembrandt install-browser。

claude_desktop_config.json

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

以 Claude Desktop 为例。其他客户端的配置文件位置或字段可能不同（如 VS Code 使用 servers 字段），可用下方配置生成器转换。

.vscode/mcp.json

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

写入项目的 .vscode/mcp.json（VS Code 使用 servers 字段）。

Terminal

claude mcp add dembrandt -- npx -y --package dembrandt dembrandt-mcp

在终端运行；先把 <…> 占位符换成你自己的值。

生成并校验客户端配置

验证是否装好

在客户端工具列表中应出现 get_design_tokens 等工具；询问"提取 dembrandt.com 的颜色调色板"并收到结构化颜色 tokens 即证明连接成功。

常见排障

如果提示浏览器未安装，运行 `dembrandt install-browser` 安装对应版本。
若遇到 Cloudflare 或其他反爬机制，可尝试 `--browser=firefox` 或 `--stealth`（需授权）。
如果 JavaScript 密集型网站超时，使用 `--slow` 增加等待时间。
在 Docker/CI 中运行，需添加 `--no-sandbox` 参数。
检查 Node.js 版本是否符合要求（>=18）。

试试这样问

连接成功后，可以直接对 AI 助手这样说：

提取 dembrandt.com 的完整设计 tokens
获取 dembrandt.com 的颜色调色板和字体排版
把 dembrandt.com 的 tokens 导出为 W3C DTCG 格式
对比当前提取结果和基线，计算 design drift 分数

工具能力 12

get_design_tokens 只读

提取网站的设计令牌，包括颜色、字体、间距、边框等。

get_color_palette 只读

提取网站的颜色调色板，包括语义色、CSS 变量和渐变。

get_typography 只读

提取网站的字体、字号、字重和字体来源。

get_component_styles 只读

提取按钮、徽章、输入框等组件的样式。

get_surfaces 只读

提取背景、面板等表面样式。

get_spacing 只读

提取间距比例，如 margin 和 padding 的数值。

get_brand_identity 只读

提取品牌标识相关元素，如标志和品牌色。

compute_drift 只读

比较当前提取与基线，计算令牌漂移分数和变更详情。

展开其余 4 个工具

get_findings 只读

返回提取结果中的自动化发现或异常。

export_dtcg 只读

将提取结果导出为 W3C Design Tokens (DTCG) 格式。

generate_design_md 只读

生成符合 Google DESIGN.md 草案的设计系统文档，供 AI 代理阅读。

render_report 只读

生成 HTML 格式的漂移报告或提取报告。

使用场景

设计系统文档化：快速从现有网站提取设计令牌作为文档基础。

品牌审计：分析竞争对手或自有网站的视觉一致性。

设计到代码：将设计令牌导出为 DTCG 格式，用于 Style Dictionary 或设计工具。

持续集成：在 CI 中检测令牌漂移，防止设计退化。

可访问性审计：运行 WCAG 对比度检查，确保符合无障碍标准。

支持客户端

Claude Desktop

Cursor

Windsurf

依据项目文档列出，未经本站实测。

详细介绍

Dembrandt 是一个开源 CLI 和 MCP 服务器，利用 Playwright 渲染网页、读取计算样式和 DOM，自动提取颜色、排版、间距、边框、阴影、动效、组件、断点等设计令牌，并支持导出为 DTCG 标准格式或生成 DESIGN.md。它还提供令牌漂移检测、WCAG 对比度分析、品牌指南 PDF 生成等功能，帮助设计系统文档化、审计和持续集成。