Dembrandt

Dembrandt pulls the design system out of any website in one command. It covers colours, typography, spacing, borders, shadows, motion, components and breakpoints, and outputs W3C design tokens.

It renders the page with Playwright and reads computed styles from the DOM. Colour output includes the CSS variables it finds. Flags can write a Tailwind v4 @theme block, a shadcn/ui theme or DTCG tokens, or check WCAG 2.1 contrast on real colour pairs on the page.

Run npx dembrandt install-browser once, then npx dembrandt with a site address. For agents, add the MCP server with claude mcp add --transport stdio dembrandt -- npx -y dembrandt mcp. It needs Node.js 18 or newer.