Воруй как художник

# Воруй как художник

Сложность: низкая

Ты открываешь DevTools, вкладка Styles. Ищешь основной цвет - вот он, в :root. Шрифт - где-то в body. Отступы - в инспекторе лейаута. Через час у тебя семь HEX-кодов, два значения padding и ощущение, что ты ничего не знаешь о дизайне этого сайта. Ты не дизайнер, ты инженер. Но дизайн-систему понять надо - чтобы повторить интерфейс, проверить консистентность или просто украсть удачное решение.

Dembrandt делает то же самое за 10 секунд. Одной командой.

Что такое Dembrandt

Это CLI-инструмент на Node.js (npm-пакет, текущая версия 0.25.1), который запускает headless Chromium, заходит на любой URL, анализирует DOM и CSS и вытаскивает оттуда полноценную дизайн-систему. Не просто цвета - а всю токенную структуру: палитру, типографику, spacing, тени, радиусы, состояния кнопок, брейкпойнты, анимации, градиенты, иконки.

Автор - Dietrich Gebert, дизайнер с 15-летним стажем, который устал сидеть в DevTools. Инструмент органически вырос до 2.3K звёзд на GitHub и 8.8K установок npm в месяц - без платного продвижения, просто потому что решает реальную боль.

Результат можно получить в четырёх форматах:

JSON - для скриптов, пайпов и автоматизации
DESIGN.md - структурированный документ, который читают AI-агенты (Claude Code, Cursor, Copilot)
W3C DTCG - стандартный формат Design Tokens Community Group, совместимый с любым дизайн-инструментом
PDF brand guide - готовый документ для клиента или стейкхолдера

Установка

Всё что нужно - Node.js и 5 минут:

npm i -g dembrandt
dembrandt install-browser

Первая команда ставит CLI глобально. Вторая - скачивает Chromium для Playwright (~190 МБ, делается один раз). После этого dembrandt готов к работе.

В Docker/CI не забудь флаг --no-sandbox - без него Chromium не запустится в контейнере.

Базовое использование

Самый простой сценарий - взять сайт и посмотреть что внутри:

dembrandt https://dembrandt.com

CLI запускает браузер, renders страницу (включая SPA - ждёт hydration и скроллит для ленивой загрузки), и выводит интерактивный отчёт: цвета с визуальными образцами, шрифты с размерами, spacing, тени. Всё что нужно чтобы понять дизайн-систему сайта.

Если нужно только сырые данные:

dembrandt --json-only https://example.com > tokens.json

JSON содержит полную структуру: meta, colors, typography, spacing, borders, shadows, buttons, breakpoints, motion, gradients, icons. Каждое значение с контекстом - где найдено, какой селектор, какой медиа-запрос.

Флаги и сценарии

Инструмент - не просто парсер. Это полноценный тулкит для работы с дизайн-системами. Вот основные флаги:

Форматы вывода:

--json-only - чистый JSON в stdout, для скриптов и пайпов
--design-md - генерирует DESIGN.md (спецификация Google для AI-агентов)
--dtcg - экспорт в W3C Design Tokens Community Group формат
--brand-guide - PDF brand guide
--html [path] - самодостаточный HTML-отчёт с визуализацией токенов
--save-output - сохраняет JSON локально в output/<domain>/<timestamp>/

Анализ:

--wcag - матрица контрастов Web Content Accessibility Guidelines между всеми цветами палитры. Показывает какие комбинации проходят AA/AAA, какие нет
--compare baseline.json - сравнивает текущее извлечение с эталонным JSON. Возвращает exit code 1 если есть расхождения. Это ключевая фича для CI/CD
--ai - использует ML-модель для определения primary-цвета бренда (экспериментальный)

Обход страниц:

--crawl N - автоматически находит и обходит до N страниц через DOM-ссылки
--sitemap - использует sitemap.xml для discovery страниц (можно комбинировать с --crawl для лимита)
Можно явно перечислить пути: dembrandt https://site.com /pricing /docs /about

Viewport и темы:

--dark-mode - извлекает цвета тёмной темы
--mobile - эмулирует мобильный viewport
--screen-size 1920x1080 - свой размер экрана

Авторизация и антидетект:

--cookie "session=abc; token=xyz" - для страниц за логином
--header "Authorization: Bearer ..." - кастомные HTTP-заголовки
--stealth - антидетект: navigator spoofing, human mouse simulation, рандомизация фингерпринта
--slow - тройные таймауты для медленных сайтов

Дрифт-детекция в CI/CD

Это главный инженерный сценарий. Дизайн-система дрифтует незаметно: кто-то поправил padding в компоненте, дизайнер обновил цвет в Figma а разработчик не заметил, тёмная тема уехала. Через месяц у тебя два разных продукта под одним брендом.

Dembrandt решает это как линтер:

# Первый раз - фиксируем baseline
dembrandt --json-only --save-output https://your-app.com
cp output/your-app.com/latest/tokens.json baseline.json

# В CI после каждого деплоя:
dembrandt --compare baseline.json https://your-app.com
# exit 1 = дрифт, пайплайн красный

Baselining - это снапшот дизайн-системы в конкретный момент. После каждого релиза ты сравниваешь текущее состояние с эталоном. Есть изменения - CI падает и показывает diff: какие цвета изменились, какие шрифты уехали, где поменялись отступы.

Можно пойти дальше и использовать Dembrandt App (облачный сервис): передаёшь --key DEMBRANDT_API_KEY, и каждый запуск автоматически синхронизируется с аккаунтом. App показывает историю снапшотов, drift score по категориям (цвета, типографика, spacing, радиусы, тени) и визуальный diff - не просто числа, а образцы цветов и шрифтов.

Для тех кто хочет визуальный отчёт в CI-артефактах:

dembrandt --compare baseline.json --html drift-report.html https://your-app.com

Интеграция с AI-агентами

Dembrandt специально заточен под AI-native workflow. У проекта есть:

dembrandt-skills - 40+ навыков для AI-агентов, покрывающих полный UX-пайплайн. Установка:

npx skills add dembrandt/dembrandt-skills --all

Навыки включают: extract-design (извлечение токенов), wcag-accessibility (доступность), visual-emphasis-and-hierarchy (визуальная иерархия), button-states, generate-ui-from-brand и ещё 35+ навыков от цветовых палитр до motion-дизайна.

MCP-сервер - позволяет AI-агенту (Claude Code, Cursor, Copilot) напрямую вызывать извлечение токенов без выхода в терминал.

DESIGN.md - флаг --design-md генерирует документ по спецификации Google, который AI-агенты читают автоматически. Положил в корень репозитория - и каждый AI-тул знает дизайн-систему проекта.

Как мы встроили Dembrandt в Hermes Agent

Процесс оказался тривиальным. После npm i -g dembrandt и dembrandt install-browser мы создали навык для Hermes - файл SKILL.md в категории creative, который описывает все флаги, сценарии и подводные камни.

Навык построен по стандартной структуре Hermes: таблица флагов для быстрой справки, процедурный раздел с готовыми командами под каждый сценарий, секция pitfalls с реальными граблями. От базового извлечения до дрифт-детекции в CI и WCAG-аудита.

Навык загружается автоматически при любом запросе пользователя про дизайн-токены. Достаточно сказать "сними токены с site.com" или "сравни дизайн с baseline" - Hermes сам вызывает CLI с правильными флагами и интерпретирует результат. Никакой магии - просто структурированная обёртка над проверенным инструментом.

Сам навык прошёл ревью через Codex (OpenAI Codex CLI): проверка соответствия флагов актуальной версии CLI, дополнение недостающих сценариев, верификация pitfalls. Это стандартный пайплайн в нашей команде: навык → Codex-ревью → боевое использование.

Файл навыка лежит в ~/.hermes/skills/creative/dembrandt/SKILL.md. Если вы пользуетесь Hermes Agent - навык можно установить, скопировав SKILL.md в ~/.hermes/skills/creative/dembrandt/ (или создать свой по образцу - структура описана выше).

Реальные сценарии использования

Вот что мы реально делаем с Dembrandt:

Аудит конкурентов. dembrandt --json-only по трём конкурентам → быстрый diff палитр и типографики. Видно кто на каком контрасте играет, какой шрифт использует, какие отступы в карточках.

Проверка консистентности. dembrandt --crawl 10 по сайту → сравниваем токены между страницами. Часто лендинг и админка живут в разных дизайн-системах, хотя должны быть в одной.

WCAG-аудит. dembrandt --wcag → матрица контрастов. Сразу видно какие цветовые пары не проходят AA и какой текст на каком фоне нечитаем.

База для AI-вёрстки. dembrandt --design-md → файл в корень репозитория → Claude Code или Cursor автоматически использует его при генерации UI. Никаких "сделай примерно как у них" - агент знает точные токены.

Pre-commit хук. dembrandt --compare baseline.json в Git hook → запрещает мёрджить изменения которые ломают дизайн-систему.

Что дальше

Dembrandt эволюционирует от инструмента извлечения в полноценный design-engineering pipeline. В roadmap: тон голоса (Tone of Voice) - извлечение стиля текстов с сайта, улучшенная работа с SPA, сравнение по компонентам а не только по токенам.

Но уже сейчас это один из тех редких инструментов, которые делают ровно одну вещь и делают её правильно. Не нужно быть дизайнером чтобы украсть дизайн-систему. Достаточно одной команды.

Ссылки

Репозиторий: https://github.com/DietrichGebert/dembrandt
Сайт: https://dembrandt.com
Навыки: npx skills add dembrandt/dembrandt-skills --all
Hermes Agent навык: ~/.hermes/skills/creative/dembrandt/SKILL.md
MCP-сервер: https://dembrandt.com (раздел MCP)

- - - - - - - - - -

Подписывайся: @hermesagentru