designlang CLI
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
- 5 058 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Запускает браузер Playwright и ходит на внешние сайты
- Извлекает и переносит чужие дизайн-решения, что требует внимания к правам на бренд
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add cli/designlang-design-extractОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Запускает браузер Playwright и ходит на внешние сайты
- Извлекает и переносит чужие дизайн-решения, что требует внимания к правам на бренд
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
designlang открывает сайт через Playwright и извлекает его дизайн-систему: примитивные, семантические и составные токены в формате DTCG, конфигурацию Tailwind, переменные Figma, набор для shadcn/ui. Есть режим анализа всего сайта с единой канонической системой и оценкой консистентности, аудит доступности и подсказки по контрасту. Результат можно выгрузить в код под iOS SwiftUI, Android Compose, Flutter и WordPress или собрать стартер на Next.js. Инструмент работает как CLI через npx, как скилл для агентов, как плагин Claude Code и как MCP-сервер.
Для кого. Для дизайнеров и фронтенд-разработчиков, которым нужно быстро разобрать дизайн-систему сайта в токены и код.
Подходит, если
- Нужно вытащить токены и палитру с существующего сайта в формат DTCG или конфиг Tailwind
- Нужно проверить консистентность дизайна по всему сайту и оценить доступность
- Хочется дать агенту MCP-доступ к извлеченной дизайн-системе
Не подходит, если
- Нужен оригинальный дизайн с нуля, а не разбор чужого
- Целевой сайт закрыт от автоматического доступа или требует авторизации
Пример запроса к агенту
Разбери дизайн-систему сайта stripe.com и собери токены в формате TailwindОграничения
Нужен Node.js 20 и выше, для полного разбора работает Playwright с браузером. Точность зависит от разметки и стилей конкретного сайта. Копировать чужую дизайн-систему в продукт стоит с учетом прав на бренд и товарные знаки.
Как отключить. Для разовых запусков ничего удалять не нужно, npx не оставляет установки. Глобальный пакет снимается npm rm -g designlang, плагин удаляется через /plugin, MCP-сервер убирается из конфигурации клиента.
Частые вопросы
Как использовать без установки?
Запустить npx designlang <url>. Пакет скачается на время выполнения и разберет указанный сайт.
В каких форматах отдается результат?
Токены DTCG, конфиг Tailwind, переменные Figma, набор shadcn/ui, а также код под SwiftUI, Compose, Flutter и WordPress и стартер на Next.js.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
CLI-инструментыCLI, который вытаскивает дизайн-систему любого сайта в токены: цвета, шрифты, отступы, тени за один запуск
Скилл и CLI, которые снимают с публичного сайта цвета, шрифты, отступы, скругления и тени и сохраняют их как токены JSON и CSS
MCP-сервер и скилл для интерфейсов: 31 дизайн-система для shadcn/ui, принципы UI и UX и проверка доступности для кода агента
Скилл Claude превращает сайты, картинки и файлы Figma в дизайн-систему: Markdown, токены DTCG и промпты для сборки элементов
DESIGN.md от Google Labs
DESIGN.md
Формат DESIGN.md для агентов и CLI: проверка контраста и ссылок, сравнение версий, экспорт токенов в Tailwind и DTCG
Плагин и npx CLI, которые создают DESIGN.md по спецификации google-labs-code/design.md из официальных шаблонов
Из блога
Коротко о README
README показывает designlang как инструмент, который читает сайт как разработчик читает таблицу стилей, и выдает целую дизайн-систему. Перечислены команды CLI: разбор одного адреса, анализ всего сайта, оценка соответствия клона оригиналу, генерация брендбука и стартера. Описаны установка через npx и глобально, подключение как скилла для более чем сорока агентов, плагин Claude Code и MCP-сервер. Лицензия MIT, требуется Node.js 20 и выше.