Dembrandt — MCP-сервер для Claude Code: дизайн-токены с живого сайта
Снимает с любой страницы цвета, шрифты, отступы и компоненты и отдаёт их агенту как дизайн-токены. Пригодится, когда нужно перенести чужой стиль в свой проект.
claude mcp add dembrandt -- npx -y dembrandtЧто делает Dembrandt
Сервер открывает страницу в Chromium через playwright-core, читает вычисленные стили из DOM и собирает из них токены: цвета с ролями, типографику, шкалы отступов, радиусы, тени, анимации, компоненты, брейкпоинты. Дальше агент может выгрузить это в нужный формат — W3C DTCG, тему shadcn/ui, @theme для Tailwind v4, DESIGN.md или JSON.
Отдельная ветка — контроль дрейфа. Есть флаг --compare <baseline>: он сверяет текущий прогон с сохранённой базой и завершается кодом 1, если токены разъехались. То же самое работает в CI через GitHub Action dembrandt/[email protected] с параметрами url и baseline.
Перед первым запуском нужен Node.js 18+ и отдельный шаг dembrandt install-browser — пакет тянет Chromium только по этой команде. Без него прогон падает с ошибкой browser engine not available. Для страниц за логином есть --cookie, --cookie-file и --login.
Какие задачи решает
- снять палитру и шрифты с чужого сайта для своего макета
- собрать тему shadcn/ui из живого прототипа
- проверить контраст пар цветов по WCAG 2.1 прямо в DOM
- поймать изменение токенов между превью-деплоем и базой
- выгрузить дизайн-систему в формат W3C для Style Dictionary
Примеры запросов агенту
- Сними дизайн-токены с
https://example.comи покажи палитру с ролями - Сравни текущие токены с
baseline.jsonи скажи, что изменилось - Собери тему shadcn/ui с этой страницы и сохрани в файл
Как установить Dembrandt
Командой платформы
claude mcp add dembrandt -- npx -y dembrandtКомандой платформы
codex mcp add dembrandt -- npx -y dembrandtФайл настроек
{
"mcpServers": {
"dembrandt": {
"command": "npx",
"args": [
"-y",
"dembrandt"
]
}
}
}Файл настроек
{
"servers": {
"dembrandt": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"dembrandt"
]
}
}
}Командой платформы
gemini mcp add dembrandt npx -y dembrandtПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о Dembrandt
Как установить Dembrandt в Claude Code?
Одной командой: claude mcp add dembrandt -- npx -y dembrandt. После этого сервер доступен агенту в текущем проекте.
Что делает Dembrandt?
Открывает сайт в браузере, читает вычисленные стили и превращает их в дизайн-токены: цвета, типографику, отступы, границы, тени, анимации и компоненты.
Что нужно для запуска?
Node.js 18+ и разовая команда dembrandt install-browser, которая скачивает Chromium. Без неё запуск завершится ошибкой browser engine not available.
