extract-design

用途

Dembrandt 通过无头 Chromium 浏览器访问任意 URL，遍历多达数千个 DOM 元素，读取计算后的 CSS，返回一套结构化的设计系统，包括颜色、字体排版、间距、圆角、边框、阴影以及交互组件样式。适用于需要获取某个网站真实设计令牌、或希望以此为基础构建主题的场景。

主要能力

提取内容覆盖：

颜色：去重后的调色板（带 high/medium/low 置信度），每条携带 hex、lch、oklch 及派生的 role、onColor、hover；另有不加频率阈值与感知合并的 detected 颜色集合；语义色识别（primary、secondary、background、text、accent）；命名 CSS 自定义属性。
字体排版：每种上下文下的字体族、字号、字重、行高，以及 Google Fonts、Adobe Fonts、可变字体、自托管字体的来源识别。
间距：margin/padding 比例及 rem 换算，判定 4px、8px 或自定义网格。
其他：圆角、边框组合、阴影层级、响应式断点、UI 框架与图标库识别。
组件样式：按钮、输入框、链接、徽章的变体及 hover/active/focus 状态。

输出格式方面，支持终端文本输出、JSON、W3C DTCG 设计令牌格式、DESIGN.md 品牌文档、Tailwind v4 @theme CSS、shadcn/ui 主题和内嵌 HTML 报告。

使用方式

零安装运行（npx 首次运行时获取包）：

npx -y dembrandt https://dembrandt.com

或全局安装一次后直接调用：

npm i -g dembrandt

dembrandt https://dembrandt.com

dembrandt https://dembrandt.com --json-only > dembrandt-tokens.json

dembrandt https://dembrandt.com --dtcg --save-output

dembrandt https://dembrandt.com --design-md

dembrandt https://dembrandt.com --crawl 5

dembrandt https://dembrandt.com --dark-mode

dembrandt https://dembrandt.com --mobile

dembrandt https://dembrandt.com --save-output

dembrandt https://dembrandt.com --tailwind src/app.css

dembrandt https://dembrandt.com --html report.html

dembrandt https://app.example.com --compare baseline.json --html report.html

作为 MCP 服务器接入智能体，在 MCP 配置中添加（npx 首次运行时获取）：

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

MCP 模式下所有提取工具默认异步返回 job_id，需轮询 get_job_status 直到 status 为 "completed"，再调用 get_findings 等分析工具。向任意提取工具传入 sync: true 可阻塞并直接返回结果。提取工具包括 get_design_tokens、get_color_palette、get_typography、get_component_styles、get_surfaces、get_spacing、get_brand_identity、get_motion。纯工具（无浏览器、同步）包括 compute_drift、get_findings、export_dtcg、generate_design_md、render_report、export_tailwind、export_shadcn。作业控制工具：get_job_status、list_jobs、cancel_job。另有三个工具自带输入：validate_dtcg、check_contrast、check_robots。

多页面提取选项包括：pages（1 到 20 页合并为一份令牌集，来源可为 DOM 链接或 sitemap.xml）、paths（显式指定额外路径）、sitemap、header、cookieFile、basicAuth、userAgent、noSandbox。加载失败的页面会被丢弃，合并继续处理其余页面。

适用场景

需要复刻或分析某网站真实设计令牌时。
构建 Tailwind、shadcn/ui 主题或 DTCG 令牌文档时。
生成可供人类和 AI 阅读的 DESIGN.md 品牌文档时。
在 CI 中对比基线、检测设计漂移时（漂移时退出码为 1）。

限制与注意事项

dembrandt <=0.23.0 通过 npx 一行命令启动会失败（McpDepsMissingError），0.23.1 已修复。
npx 会优先运行 PATH 中已有的 dembrandt，可能静默遮蔽最新版本，可用 dembrandt --version 检查。
--tailwind 仅适用于 Tailwind v4，且只输出观测到的值，不生成 50–950 色阶、插值步进或派生的 hover/on-color 变体，需手动扩展。
robots.txt 检查默认仅为提示，不阻止提取；设置 DEMBRANDT_ENFORCE_ROBOTS=1 后，被 disallow 或无法读取 robots.txt 的目标会跳过并以退出码 4 结束。
cookieFile 需要操作者事先用 dembrandt <url> --login --save-storage-state <path> 生成，智能体本身无法登录。
提取作业队列保留完整提取结果一小时。
具体收费、价格与平台信息暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制与注意事项