dembrandt/dembrandt

解决的问题

Dembrandt 允许开发者和设计师自动提取网站的设计系统——包括颜色、排版、间距和组件——并将其转换为标准化的设计令牌。它还可以通过在 CI/CD 管道中强制执行这些令牌来防止“设计漂移”，当网站的渲染样式偏离已提交的基线时，构建将失败。

工作原理

该工具使用 Playwright 渲染目标网站，并直接从 DOM 中读取计算后的样式。它分析颜色使用情况，对排版进行分组，并检测间距模式以生成设计令牌。这些令牌可以导出为多种格式，例如 W3C 设计令牌（DTCG）、Tailwind v4 主题或 shadcn/ui 主题。它还包括一个 MCP 服务器，允许 AI 代理（如 Claude 或 Cursor）自动触发提取和分析设计系统。

适用人群

• 前端开发人员：需要从现有网站快速重建或记录设计系统。
• UI/UX 设计师：进行竞争对手基准测试或 WCAG 无障碍审计。
• DevOps/平台工程师：希望通过 CI 漂移门确保跨部署的视觉一致性。
• AI 代理用户：希望为其基于 LLM 的编码助手提供 UX 智能和提取品牌标识的能力。

亮点

• 全面提取：捕获颜色、排版、间距、边框、阴影、动效和组件样式。
• CI 漂移门：一个 GitHub Action，将当前部署与基线进行比较，如果令牌发生变化，则使作业失败。
• MCP 集成：原生支持模型上下文协议，使 AI 代理能够将设计提取作为工具使用。
• 多种导出格式：支持 W3C 设计令牌、Tailwind CSS、shadcn/ui 和品牌指南 PDF。
• 无障碍审计：内置 WCAG 2.1 对比度检查，针对真实 DOM 对。