适合谁
- 前端开发者需要快速分析网站设计系统并提取可复用的令牌。
- 设计系统团队需要文档化现有站点或跟踪跨版本的设计变更。
- 使用 MCP 的 AI 代理希望自动获取网站设计信息以辅助开发或审计。
D
66FMRS · C
Dembrandt 是一个功能强大的设计令牌提取工具，通过 MCP 集成，AI 代理可轻松获取网站的设计信息。它支持多种导出格式和 CI 集成，但需注意合规性和资源消耗。总体而言，适合需要自动化设计分析的团队。
Dembrandt 是一个开源 CLI 和 MCP 服务器，利用 Playwright 渲染网页、读取计算样式和 DOM，自动提取颜色、排版、间距、边框、阴影、动效、组件、断点等设计令牌，并支持导出为 DTCG 标准格式或生成 DESIGN.md。它还提供令牌漂移检测、WCAG 对比度分析、品牌指南 PDF 生成等功能，帮助设计系统文档化、审计和持续集成。
工具能力
get_design_tokens
提取网站的设计令牌，包括颜色、字体、间距、边框等。
get_color_palette
提取网站的颜色调色板，包括语义色、CSS 变量和渐变。
get_typography
提取网站的字体、字号、字重和字体来源。
get_component_styles
提取按钮、徽章、输入框等组件的样式。
get_surfaces
提取背景、面板等表面样式。
get_spacing
提取间距比例，如 margin 和 padding 的数值。
get_brand_identity
提取品牌标识相关元素，如标志和品牌色。
compute_drift
比较当前提取与基线，计算令牌漂移分数和变更详情。
get_findings
返回提取结果中的自动化发现或异常。
export_dtcg
将提取结果导出为 W3C Design Tokens (DTCG) 格式。
generate_design_md
生成符合 Google DESIGN.md 草案的设计系统文档，供 AI 代理阅读。
render_report
生成 HTML 格式的漂移报告或提取报告。
安装接入
- 确保 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"
]
}
}
}
选型与风险
不适合谁
- 需要完整交互式分析（如悬停效果）的用户，因为目前仅从 CSS 提取部分交互状态。
- Canvas/WebGL 渲染的网站，因为它们没有可读取的 DOM。
- 违反网站服务条款的自动化访问，请确保有授权。
所需权限
- 网络访问：需要访问目标网站以进行提取。
- 本地文件系统：保存输出文件（JSON、PDF、DESIGN.md）时需写入权限。
- 浏览器执行：使用 Playwright 驱动浏览器，需要系统权限。
风险与副作用
- 目标网站可能禁止自动化访问，违反服务条款可能导致 IP 封禁。
- 提取的令牌可能包含受版权保护的设计元素，不应未经授权复制品牌资产。
- 浏览器驱动可能消耗较多资源，在 CI 或受限环境中需要注意配置（如 --no-sandbox）。
常见排障
- 如果提示浏览器未安装，运行 `dembrandt install-browser` 安装对应版本。
- 若遇到 Cloudflare 或其他反爬机制，可尝试 `--browser=firefox` 或 `--stealth`（需授权）。
- 如果 JavaScript 密集型网站超时，使用 `--slow` 增加等待时间。
- 在 Docker/CI 中运行，需添加 `--no-sandbox` 参数。
- 检查 Node.js 版本是否符合要求（>=18）。
使用场景
设计系统文档化：快速从现有网站提取设计令牌作为文档基础。
品牌审计：分析竞争对手或自有网站的视觉一致性。
设计到代码：将设计令牌导出为 DTCG 格式，用于 Style Dictionary 或设计工具。
持续集成：在 CI 中检测令牌漂移，防止设计退化。
可访问性审计：运行 WCAG 对比度检查，确保符合无障碍标准。
支持客户端
Claude Desktop完整支持
Cursor完整支持
Windsurf完整支持