Dembrandt
Extract any website’s design system into tokens in seconds: logo, colors, typography, borders & more. One command.
What is Dembrandt?
Dembrandt is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to extract any website’s design system into tokens in seconds: logo, colors, typography, borders & more. one command.
Extract any website’s design system into tokens in seconds: logo, colors, typography, borders & more. One command.
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Extract any website’s design system into tokens in seconds:
Use Cases
Maintainer
Works with
Installation
NPM
npx -y dembrandtManual Installation
npx -y dembrandtConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Dembrandt
Dembrandt is a design system extraction tool and MCP server that analyzes any public website and extracts its complete visual design language — colors, typography, spacing, borders, component styles, and brand identity — into structured design tokens in seconds using a single command. It exposes seven MCP tools that AI coding agents can call to retrieve these tokens programmatically, enabling automated design-to-code workflows where an agent builds UI components that match an existing brand without manual design archaeology. Front-end developers and design engineers use Dembrandt to replicate or audit design systems, generate DESIGN.md documentation, and feed accurate tokens into AI-assisted component generation.
Prerequisites
- Node.js 18+ installed on your system
- npx available (bundled with Node.js)
- An MCP client such as Claude Desktop or Claude Code
- Public internet access to fetch the target website's CSS and assets
Try Dembrandt from the command line
Run Dembrandt on any website URL without installing it globally. It fetches the site's CSS and assets, then prints extracted design tokens to stdout.
npx dembrandt example.comInstall globally for repeated use
For frequent use, install Dembrandt globally so you can run it directly without npx prefix.
npm install -g dembrandt
dembrandt example.comAdd Dembrandt as an MCP server via Claude Code
Register the Dembrandt MCP server using the Claude Code CLI. This makes all seven design token tools available inside Claude Code sessions.
claude mcp add --transport stdio dembrandt -- npx -y --package dembrandt dembrandt-mcpConfigure in .mcp.json or claude_desktop_config.json
For Claude Desktop or project-level configuration, add the Dembrandt server definition to your MCP config file.
{
"mcpServers": {
"dembrandt": {
"command": "npx",
"args": ["-y", "--package", "dembrandt", "dembrandt-mcp"]
}
}
}Use the seven MCP tools in your AI sessions
Once connected, your AI model can call any of the seven Dembrandt tools: get_design_tokens, get_color_palette, get_typography, get_component_styles, get_surfaces, get_spacing, and get_brand_identity — all taking a target URL as input.
Dembrandt Examples
Client configuration
Claude Desktop configuration for the Dembrandt MCP server. No API keys or environment variables required.
{
"mcpServers": {
"dembrandt": {
"command": "npx",
"args": ["-y", "--package", "dembrandt", "dembrandt-mcp"]
}
}
}Prompts to try
Example requests to make once Dembrandt is connected to your AI client.
- "Extract the full color palette from stripe.com and show me all the hex values"
- "Get the typography system from linear.app including font families and size scales"
- "Check accessibility contrast ratios on the color palette from dembrandt.com"
- "Extract the design tokens from notion.so and generate a DESIGN.md file I can add to my project"
- "Get the spacing scale and component styles from vercel.com"Troubleshooting Dembrandt
Extraction returns empty or incomplete results for a site
Some sites load CSS dynamically via JavaScript. Dembrandt fetches static CSS, so sites relying entirely on CSS-in-JS at runtime may return limited tokens. Try targeting a specific public CSS file URL directly.
npx command fails with 'package not found' error
Ensure you are using the exact package and binary names: 'npx -y --package dembrandt dembrandt-mcp' for the MCP server, or 'npx dembrandt <url>' for the CLI. The binary name differs from the package name.
Claude Code MCP tool shows as unavailable after running mcp add
Restart Claude Code after running the 'claude mcp add' command. The server list is read at startup. Run 'claude mcp list' to verify the server was registered correctly.
Frequently Asked Questions about Dembrandt
What is Dembrandt?
Dembrandt is a Model Context Protocol (MCP) server that extract any website’s design system into tokens in seconds: logo, colors, typography, borders & more. one command. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Dembrandt?
Install via npm with the command: npx -y dembrandt. Then add the server configuration to your AI client's JSON config file (e.g., claude_desktop_config.json or .cursor/mcp.json).
Which AI clients work with Dembrandt?
Dembrandt works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Dembrandt free to use?
Yes, Dembrandt is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
Dembrandt Alternatives — Similar Developer Tools Servers
Looking for alternatives to Dembrandt? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Dembrandt in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Dembrandt?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.