AwesomeREA.org

工具

Dembrandt 网站设计系统提取工具

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

使用条件与局限

  • 审阅时的版本为 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. README.md GitHub · dembrandt/dembrandt · 修订 4deb835
  2. README.md#L199-L214 GitHub · dembrandt/dembrandt · 修订 4deb835
  3. docs/usage.md GitHub · dembrandt/dembrandt · 修订 4deb835
  4. docs/mcp.md GitHub · dembrandt/dembrandt · 修订 4deb835
  5. package.json GitHub · dembrandt/dembrandt · 修订 4deb835
  6. SECURITY.md GitHub · dembrandt/dembrandt · 修订 4deb835
  7. LICENSE GitHub · dembrandt/dembrandt · 修订 4deb835
  8. https://github.com/dembrandt/dembrandt/releases/tag/v0.39.2
  9. https://www.npmjs.com/package/dembrandt/v/0.39.2