Dembrandt — дизайн-система любого сайта в design tokens одной командой

Dembrandt — open-source CLI, который извлекает дизайн-систему любого сайта одной командой и отдаёт её как W3C design tokens: цвета, типографика, отступы, границы, тени, motion и компоненты. На GitHub у проекта 3,3 тыс. звёзд, лицензия — MIT.

Как это работает

Dembrandt запускает страницу в Chromium (через playwright-core), читает вычисленные стили из DOM, анализирует использование цвета и уверенность в нём, группирует похожую типографику и детектирует паттерны отступов. На выходе — набор design tokens.

Установка

Требуется Node.js 18+. Пакет ставится глобально, а Chromium подтягивается отдельной командой:

npm install -g dembrandt
dembrandt install-browser        # one-time: fetches the matching Chromium
dembrandt dembrandt.com

Шаг с браузером обязателен: dembrandt работает через playwright-core, который не поставляет бинарники браузера, — без него запуск падает с browser engine not available. Альтернатива — npx без установки: npx dembrandt install-browser один раз, дальше npx dembrandt dembrandt.com. Браузеры попадают в общий кэш Playwright, так что повторный шаг не нужен.

Основные флаги

dembrandt dembrandt.com --save-output   # Save JSON to output/dembrandt.com/TIMESTAMP.json
dembrandt dembrandt.com --dtcg          # W3C Design Tokens (DTCG) export, for Style Dictionary or Tokens Studio
dembrandt dembrandt.com --design-md     # DESIGN.md for AI agents
dembrandt dembrandt.com --tailwind      # Tailwind v4 @theme CSS, observed values only
dembrandt dembrandt.com --wcag          # WCAG 2.1 contrast, real DOM pairs with AA/AAA grades
dembrandt dembrandt.com --crawl 10      # Merge 10 pages into one output, cross-page confidence boosting
dembrandt dembrandt.com --slow          # 3x timeouts for JavaScript-heavy sites

По умолчанию вывод — форматированный текст в терминал. Полный справочник флагов — в docs/usage.md: мобильная и тёмная темы, выбор браузера и CDP, PDF бренд-гайда, motion-токены, fingerprint-опции.

Ловим дрейф дизайна в CI

Можно извлечь токены preview-деплоя, сравнить с закоммиченным baseline и уронить джобу, если токены уехали:

- uses: dembrandt/dembrandt@v0.31.1
  with:
    url: https://preview.example.com
    baseline: .dembrandt/baseline.json

Action аннотирует PR списком уехавших токенов. На любом другом раннере ворота — это просто код выхода и JSON: dembrandt URL --compare baseline.json --json-only завершается с кодом 1 при дрейфе и печатает changes[] по каждому токену.

AI-агентная интеграция (MCP)

Dembrandt можно использовать как инструмент в Claude Code, Cursor, Windsurf или любом MCP-совместимом клиенте. Достаточно попросить агента «extract the color palette from dembrandt.com» — и он вызовет Dembrandt сам.

claude mcp add --transport stdio dembrandt -- npx -y --package dembrandt dembrandt-mcp

Или добавить в .mcp.json проекта:

{
  "mcpServers": {
    "dembrandt": {
      "command": "npx",
      "args": ["-y", "--package", "dembrandt", "dembrandt-mcp"]
    }
  }
}

Среди доступных инструментов — извлечение (get_design_tokens, get_color_palette, get_typography, get_component_styles, get_surfaces, get_spacing, get_brand_identity), чистый анализ (compute_drift, get_findings, export_dtcg, generate_design_md, render_report) и управление джобами.

Параметры извлечения включают slow, mobile, darkMode, wcag, cookie и header (для страниц за авторизацией), userAgent и noSandbox (для Docker и большинства CI-контейнеров). Значение pages больше 1 включает обход нескольких страниц с объединением результатов — это даёт заметно более полный набор токенов, чем одна страница; paths задаёт их явно, а sitemap обнаруживает по sitemap.xml.

Извлечение возвращает job_id. Его можно опросить через get_job_status, а затем передавать в чистые инструменты вместо повторной передачи результата:

get_design_tokens(url: "example.com", pages: 5)  ->  job_id
get_job_status(job_id)                           ->  tokens
get_findings(job_id)                             ->  contrast and consistency issues
export_dtcg(job_id)                              ->  W3C design tokens

В паре с dembrandt-skills агент получает UX-интеллект поверх извлечённых токенов: иерархию, доступность, состояния взаимодействия и полный оркестратор дизайн-пайплайна из 6 стадий.

npx skills add dembrandt/dembrandt-skills

Dembrandt App (бета)

Веб-приложение для загрузки экстракций, отслеживания дрейфа токенов и сравнения снапшотов:

• Автоматический трекинг дрейфа из CI. API-ключ генерируется в dembrandt.com/app/api-keys, затем передаётся флагом --key. Каждый запуск загружает снапшот в аккаунт и сравнивает его с предыдущим для этого домена. Подключается к GitHub Actions или любому CI — каждый деплой фиксируется автоматически.
• Закрепление baseline. Любой снапшот можно пометить как эталонный — все последующие экстракции автоматически оцениваются относительно него.
• Визуальный diff. Цветовые образцы, значения до/после, дельта-оценки по категориям: цвета, типографика, отступы, радиусы, тени.
• Таймлайн снапшотов. Пропорциональная шкала по домену с возможностью скроллить любой диапазон дат.
• Side-by-side сравнение. Несколько экстракций в одном окне: два релиза, два сайта или две поверхности.
• Копирование токенов. Значения вставляются напрямую в Copilot, Claude или Cursor.
• Без логина для локального использования. Данные остаются в браузере; вход через GitHub включает облачную синхронизацию.

Ограничения

• Тёмная тема — только через флаг --dark-mode (автоматически не определяется)
• Hover/focus-состояния извлекаются из CSS (не полностью интерактивные)
• Canvas/WebGL-сайты не анализируются (нет DOM для чтения)
• Сайты с тяжёлым JavaScript требуют времени на гидрацию (8s начальная + 4s стабилизация)
• Часть динамически подгружаемого контента может быть пропущена
• Стандартный viewport — 1920x1080 (для мобильного — --mobile, 390x844)

Допустимое использование

Dembrandt читает публично доступные CSS и вычисленные стили из DOM сайтов для документации, обучения и анализа дизайн-систем, которыми вы владеете или на анализ которых есть разрешение. Запускать его стоит только против сайтов, чьи Terms of Service разрешают автоматизированный доступ, или против своих собственных. Материалы нельзя использовать для воспроизведения чужих бренд-айдентик, логотипов и товарных знаков; нужно уважать robots.txt, rate limits и авторские права. Dembrandt не хостит, не распространяет и не заявляет прав на чужие бренд-ассеты.

Рецепты и документация

• docs/usage.md — все флаги, мультистраничные экстракции, выбор браузера, CDP, DTCG, DESIGN.md, Tailwind-тема, WCAG, motion, PDF бренд-гайда
• docs/ci.md — GitHub Action, ворота дрейфа, коды выхода
• docs/recipes.md — copy-paste воркфлоу: бенчмаркинг конкурентов, WCAG-аудиты, пуша токенов в Figma, агентная сборка дизайн-систем

CLI бесплатный (MIT), спонсорство финансирует слой принуждения: закоммиченный baseline токенов на уровне проекта, --compare и ingest API для CI/CD-ворот дрейфа, а также App-платформу (история снапшотов, командный drift-дашборд, алерты в Slack, Linear и GitHub).