Dembrandt CLI
CLI, который вытаскивает дизайн-систему любого сайта в токены: цвета, шрифты, отступы, тени за один запуск
- 4 001 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Запускает браузер и ходит на внешние сайты для сбора стилей
- Флаг --stealth обходит часть защит от автоматизации, использовать только на разрешенных сайтах
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add cli/dembrandtОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Запускает браузер и ходит на внешние сайты для сбора стилей
- Флаг --stealth обходит часть защит от автоматизации, использовать только на разрешенных сайтах
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
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 ничего не остается в системе.
Частые вопросы
Можно запускать без глобальной установки?
Да, через 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 при расхождении.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
CLI-инструментыdesignlang
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
Скилл и CLI, которые снимают с публичного сайта цвета, шрифты, отступы, скругления и тени и сохраняют их как токены JSON и CSS
MCP-сервер и скилл для интерфейсов: 31 дизайн-система для shadcn/ui, принципы UI и UX и проверка доступности для кода агента
design.how: 6 скиллов превращают интерфейс приложения в дизайн-систему для агента и четыре готовые системы для shadcn.
45 скиллов по корпоративному UX для агентов: палитры, типографика, формы, доступность WCAG и проверка интерфейса на удобство.
Скилл для интерфейсов без шаблонного ИИ-вида: типографика, цвет, движение, состояния компонентов и критика готового.
Из блога
Коротко о README
README описывает Dembrandt как инструмент для извлечения дизайн-системы сайта одной командой. Установка через npm с отдельным шагом загрузки Chromium. Флаги разделены на группы: экспорт (shadcn, tailwind, dtcg, design-md, html, screenshot), анализ (wcag-контраст, compare для дрифта, экспериментальный ai-режим) и охват (обход по сайтмапу, несколько страниц, мобильный вьюпорт, темная тема). Есть GitHub Action для гейта в CI и набор готовых рецептов на сайте проекта. Лицензия MIT.