# Dembrandt 网站设计系统提取工具

> Node.js 命令行工具，通过 Playwright 驱动 Chromium 或 Firefox 渲染网站，并从 DOM 读取计算样式来提取其设计系统：标志、附带判定依据的颜色角色、字体排版、间距、边框、阴影、动效、断点，以及按钮、输入框等组件样式。结果可导出为 W3C 设计令牌（DTCG）、Tailwind v4 或 shadcn/ui 主题、DESIGN.md、HTML 报告或品牌指南 PDF，还能对页面中实际的前景与背景组合做 WCAG 对比度检查，并在 CI 中与已提交的基线比较、拦截设计漂移。它也能作为 MCP 服务器供智能体客户端调用。

- 类型：工具
- 目标：网站
- 类别：网站分析工具
- 关联：基础工具
- 来源复核于：2026-10-19
- 收录于：2026-10-19
- 原始资源：<https://github.com/dembrandt/dembrandt>
- 一手来源：<https://github.com/dembrandt/dembrandt/blob/4deb8350b134669dc0251af56e028a7250d86914/README.md>
- 目录页面：<https://awesomerea.org/zh/resources/dembrandt/>
- 记录 JSON：<https://awesomerea.org/resources/dembrandt/record.json>
- 英文版：[English](https://awesomerea.org/resources/dembrandt/index.md)

## 使用条件与局限

- 审阅时的版本为 v0.39.2，于 2026-10-11 发布到 GitHub 和 npm；所审阅的 main 分支提交比该版本多十个 README、MCP 注册信息和 Action 元数据方面的提交。SECURITY.md 称项目仍处于 1.0 之前阶段，只为最新的 0.x 版本提供修复。
- 需要 Node.js 18+，并须执行一次 dembrandt install-browser，因为 playwright-core 不附带浏览器；Linux 和 CI 主机还需安装 Playwright 所需的系统库，Docker 或 CI 容器中可能需要 --no-sandbox。实验性的 --ai 品牌主色模型需要可选的 onnxruntime-node 包。MCP 服务器通过 npx dembrandt mcp 启动，另有独立的 GitHub Action 封装漂移门禁。
- 输入是在线 URL，默认以 1920x1080 视口渲染，使用 --mobile 时为 390x844；多页抓取会合并从导航链接或 sitemap.xml（先检查 robots.txt）发现的多个页面。README 列出的限制包括：深色模式需加 --dark-mode，无法分析以 canvas/WebGL 渲染的网站，部分动态加载内容以及悬停或焦点状态可能遗漏，JavaScript 较重的网站需要等待水合完成。需要登录的页面可借助使用者自己的 Cookie 或交互式登录访问。
- 采用 MIT 许可。README 将预期用途限定为分析自己拥有或获准分析的设计系统，且网站条款须允许自动化访问，并要求不得用提取结果复制第三方品牌形象、标志或商标。可选的 --key 参数会把每次运行的快照上传到厂商托管、仍处于测试阶段的 Dembrandt App。

## 一手来源

1. <https://github.com/dembrandt/dembrandt/blob/4deb8350b134669dc0251af56e028a7250d86914/README.md>
2. <https://github.com/dembrandt/dembrandt/blob/4deb8350b134669dc0251af56e028a7250d86914/README.md#L199-L214>
3. <https://github.com/dembrandt/dembrandt/blob/4deb8350b134669dc0251af56e028a7250d86914/docs/usage.md>
4. <https://github.com/dembrandt/dembrandt/blob/4deb8350b134669dc0251af56e028a7250d86914/docs/mcp.md>
5. <https://github.com/dembrandt/dembrandt/blob/4deb8350b134669dc0251af56e028a7250d86914/package.json>
6. <https://github.com/dembrandt/dembrandt/blob/4deb8350b134669dc0251af56e028a7250d86914/SECURITY.md>
7. <https://github.com/dembrandt/dembrandt/blob/4deb8350b134669dc0251af56e028a7250d86914/LICENSE>
8. <https://github.com/dembrandt/dembrandt/releases/tag/v0.39.2>
9. <https://www.npmjs.com/package/dembrandt/v/0.39.2>

## 同分区更多条目：网站

- [shuji 源映射源码恢复工具](https://awesomerea.org/zh/resources/shuji/index.md) · 工具
- [Obfuscator.io 专用反混淆工具](https://awesomerea.org/zh/resources/obfuscator-io-deobfuscator/index.md) · 工具
- [javascript-deobfuscator 通用 JavaScript 反混淆工具](https://awesomerea.org/zh/resources/ben-sb-javascript-deobfuscator/index.md) · 工具
- [mitmproxy2swagger](https://awesomerea.org/zh/resources/mitmproxy2swagger/index.md) · 工具
- [JPEXS Flash 反编译器（FFDec）](https://awesomerea.org/zh/resources/jpexs-decompiler/index.md) · 工具
- [WasmLens：探索性 WebAssembly 检查](https://awesomerea.org/zh/resources/wasmlens/index.md) · 工具

## 关于此条目

说明已依据一手来源复核。
原创说明采用 MIT 许可；外部项目、论文与素材保留各自的权利和许可。