Dembrandt
CLI, который вытаскивает дизайн-систему любого сайта в токены: цвета, шрифты, отступы, тени за один запуск
Средний риск
Средний уровень ставим, когда инструмент запускает код, ходит в сеть или читает файлы проекта. Перед установкой посмотрите, что именно он делает.
Почему такой уровень
- Запускает браузер и ходит на внешние сайты для сбора стилей
- Флаг --stealth обходит часть защит от автоматизации, использовать только на разрешенных сайтах
Установка
В терминале, через SkillFoxx CLI
npx skillfoxx add cli/dembrandtОпределит агенты на машине, проверит риск и зафиксирует версию.
Другие способы установки
Установите утилиту
npm install -g dembrandtУстанови Dembrandt: npm install -g dembrandt, затем один раз выполни dembrandt install-browser. Запускай командой dembrandt <домен> с нужными флагами, например --design-md для файла под агента или --dtcg для W3C-токенов.
Другие способы из описания автора
npm install -g dembrandt
dembrandt install-browser
dembrandt dembrandt.comШаг install-browser обязателен один раз: dembrandt использует playwright-core без предустановленных браузеров.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Dembrandt открывает страницу через Playwright, читает вычисленные стили DOM и превращает их в структурированные дизайн-токены: цвета с оценкой уверенности, типографику, отступы, радиусы, тени, анимации и компоненты вроде кнопок и полей ввода. Результат можно экспортировать как тему shadcn/ui, Tailwind-конфиг, W3C DTCG-токены, DESIGN.md для агента или HTML-отчет. Отдельный режим сравнивает текущий прогон с сохраненным baseline и завершает процесс с ошибкой, если токены разъехались, что подходит для гейта в CI.
Для кого. Для фронтенд-разработчиков и дизайнеров, которым нужно быстро вытащить или свериться с дизайн-системой стороннего сайта.
Подходит, если
- Нужно быстро понять палитру, шрифты и отступы чужого сайта
- Нужен DESIGN.md или токены, чтобы агент верстал в едином стиле
- Нужно ловить визуальный дрифт в CI, сравнивая прогон с baseline
Не подходит, если
- Сайт защищен от автоматизированного доступа или требует сложной авторизации
- Нужна точная копия верстки, а не набор токенов
Пример запроса к агенту
Вытащи дизайн-токены с сайта example.com и сохрани как DESIGN.mdОграничения
Требует Node.js 18+ и отдельной установки браузера Chromium через dembrandt install-browser, без этого шага команда не запустится. Флаг --stealth предназначен только для авторизованного использования на своих или разрешенных сайтах. ML-предсказание основного цвета бренда помечено как экспериментальное.
Как отключить. Удалите пакет командой npm uninstall -g dembrandt, при использовании через npx ничего не остается в системе.
Проверка безопасности
- Запускает браузер и ходит на внешние сайты для сбора стилей
- Флаг --stealth обходит часть защит от автоматизации, использовать только на разрешенных сайтах
Коротко о README
README описывает Dembrandt как инструмент для извлечения дизайн-системы сайта одной командой. Установка через npm с отдельным шагом загрузки Chromium. Флаги разделены на группы: экспорт (shadcn, tailwind, dtcg, design-md, html, screenshot), анализ (wcag-контраст, compare для дрифта, экспериментальный ai-режим) и охват (обход по сайтмапу, несколько страниц, мобильный вьюпорт, темная тема). Есть GitHub Action для гейта в CI и набор готовых рецептов на сайте проекта. Лицензия MIT.
Частые вопросы
Можно запускать без глобальной установки?
Да, через npx dembrandt example.com, но шаг install-browser все равно нужен один раз: npx dembrandt install-browser.
Как встроить проверку дизайн-дрифта в CI?
Через GitHub Action dembrandt/dembrandt с параметрами url и baseline, или командой dembrandt URL --compare baseline.json --json-only, которая завершится с кодом 1 при расхождении.
Похожие
Скиллы Next.js
Next.js skills
Официальный плагин Claude Code из репозитория Next.js: переход на Cache Components, Partial Prefetching и проверка изменений на живом dev-сервере
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов
Скиллы Vercel для агентов
Agent Skills
Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой