# Dembrandt

Pulls colours, type, spacing and components off a live page and hands them to your agent as design tokens. Useful when you need to copy a style into your own project.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 3821
- Author: dembrandt
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/dembrandt/dembrandt
- Updated: 2026-10-22
- HTML: https://affpapa.org/en/nevibecode/mcp/dembrandt

## What it does

The server opens a page in Chromium through `playwright-core`, reads computed styles from the DOM and turns them into tokens: colours with semantic roles, typography, spacing scales, radii, shadows, motion, components, breakpoints. From there the agent can export them as W3C DTCG, a shadcn/ui theme, Tailwind v4 `@theme` CSS, `DESIGN.md` or raw JSON.

Drift checking is the other half. The `--compare <baseline>` flag diffs the current run against a saved baseline and exits with code 1 when tokens moved. The same gate runs in CI as the GitHub Action `dembrandt/dembrandt@v0.39.2` with `url` and `baseline` inputs.

Before the first run you need Node.js 18+ and a separate `dembrandt install-browser` step — the package only fetches Chromium when you call it. Skip that and the run dies with `browser engine not available`. Pages behind a login are reachable with `--cookie`, `--cookie-file` or `--login`.

## Requirements
- Needs: Node.js (commands run via npx)
- Works with: Playwright

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add dembrandt -- npx -y dembrandt
```

### Codex

**Platform CLI**
```bash
codex mcp add dembrandt -- npx -y dembrandt
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "dembrandt": {
            "command": "npx",
            "args": [
                "-y",
                "dembrandt"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "dembrandt": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "dembrandt"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add dembrandt npx -y dembrandt
```

## When to use it
- lift a colour palette and font stack off a competitor page
- build a shadcn/ui theme from a live prototype
- check WCAG 2.1 contrast on real DOM pairs
- catch token drift between a preview deploy and the baseline
- export a design system as W3C tokens for Style Dictionary

## Example prompts
- Extract design tokens from `https://example.com` and show me the palette with roles
- Compare the current tokens against `baseline.json` and list what changed
- Build a shadcn/ui theme from this page and save it to a file

## Similar
- [extract-design-system](https://affpapa.org/en/nevibecode/skills/extract-design-system.md) — skill · 130700 installs
- [Next AI Draw.io](https://affpapa.org/en/nevibecode/mcp/next-ai-drawio.md) — MCP server · ★ 36398
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [Agent-Native Assets](https://affpapa.org/en/nevibecode/mcp/agent-native-assets.md) — MCP server · ★ 7506
- [Remove AI Watermarks](https://affpapa.org/en/nevibecode/mcp/remove-ai-watermarks.md) — MCP server · ★ 6114

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md