dembrandt/dembrandt

What it solves

Dembrandt allows developers and designers to automatically extract a website's design system—including colors, typography, spacing, and components—and convert them into standardized design tokens. It also prevents "design drift" by allowing teams to enforce these tokens in CI/CD pipelines, failing builds when the rendered styles of a site deviate from a committed baseline.

How it works

The tool uses Playwright to render a target website and reads the computed styles directly from the DOM. It analyzes color usage, groups typography, and detects spacing patterns to generate design tokens. These tokens can be exported in various formats, such as W3C design tokens (DTCG), Tailwind v4 themes, or shadcn/ui themes. It also includes an MCP server that allows AI agents (like Claude or Cursor) to trigger extractions and analyze design systems automatically.

Who it’s for

• Frontend Developers who need to quickly recreate or document a design system from an existing site.
• UI/UX Designers performing competitor benchmarking or WCAG accessibility audits.
• DevOps/Platform Engineers wanting to ensure visual consistency across deployments via CI drift gates.
• AI Agent Users who want to give their LLM-based coding assistants UX intelligence and the ability to extract brand identities.

Highlights

• Comprehensive Extraction: Captures colors, typography, spacing, borders, shadows, motion, and component styles.
• CI Drift Gate: A GitHub Action that compares current deployments against a baseline and fails the job if tokens move.
• MCP Integration: Native support for Model Context Protocol, enabling AI agents to perform design extractions as tools.
• Multiple Export Formats: Supports W3C design tokens, Tailwind CSS, shadcn/ui, and brand guide PDFs.
• Accessibility Auditing: Built-in WCAG 2.1 contrast checking on real DOM pairs.