dembrandt
Extract any website’s design system into tokens in seconds: logo, colors, typography, borders & more. One command.
Dembrandt is an MCP server that extracts design systems from live websites into structured design tokens. It analyzes colors, typography, spacing, borders, shadows, motion patterns, and components by rendering pages with Playwright and reading computed DOM styles. AI agents can query specific aspects like color palettes, typography scales, or component styles through MCP tools, making it valuable for design system documentation, competitive analysis, and automated accessibility audits. The server returns W3C-compliant design tokens that agents can use to generate documentation, compare designs, or detect visual drift.
Key Features
Use Cases
- 01AI agents extracting competitor design systems for benchmarking and inspiration
- 02Automated accessibility audits by analyzing color contrast across real DOM element pairs
- 03Design system documentation generation from production websites
- 04Visual regression and drift detection in CI/CD pipelines for design consistency
- 05Converting existing websites into Tailwind v4 themes or design token sets
- 06Brand identity analysis extracting logos, color palettes, and typography for design briefs
Related MCP Servers
View moremarkitdown
Python tool for converting files and office documents to Markdown.
firecrawl
The context API to search, scrape, and interact with the web at scale. 🔥
prompts.chat
f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.
langflow
Langflow is a powerful tool for building and deploying AI-powered agents and workflows.
dembrandt — FAQ
What is Dembrandt?+
Dembrandt is an MCP server that extracts design tokens (colors, typography, spacing, components) from live websites by rendering them with Playwright and analyzing computed CSS styles. AI agents can call it to gather design system information from any URL.
How do I install the Dembrandt MCP server?+
Run 'claude mcp add --transport stdio dembrandt -- npx -y --package dembrandt dembrandt-mcp' or add it to your .mcp.json configuration. The first extraction will automatically fetch the required Chromium browser.
Which AI clients work with Dembrandt?+
Dembrandt works with Claude Code, Cursor, Windsurf, and any MCP-compatible AI client that supports the Model Context Protocol.
Do I need API keys to use Dembrandt?+
No API keys are required for basic extraction. Optional API keys from dembrandt.com/app enable cloud snapshot tracking and drift history in the Dembrandt App.
Is Dembrandt free to use?+
Yes, the CLI and MCP server are MIT-licensed and free. Sponsorship unlocks advanced features like cloud drift tracking, team dashboards, and alert integrations.
What are the system prerequisites?+
Dembrandt requires Node.js 18 or later. The browser (Chromium) is fetched automatically on first use via Playwright's shared cache.
How do I install dembrandt?+
Open the source repository on GitHub and follow its README. dembrandt is a mcp server — MCP Agents Market links you directly to the official repo.
Is dembrandt free?+
dembrandt is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.