designlang
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
Средний риск
Средний уровень ставим, когда инструмент запускает код, ходит в сеть или читает файлы проекта. Перед установкой посмотрите, что именно он делает.
Почему такой уровень
- Запускает браузер Playwright и ходит на внешние сайты
- Извлекает и переносит чужие дизайн-решения, что требует внимания к правам на бренд
Установка
В терминале, через SkillFoxx CLI
npx skillfoxx add cli/designlang-design-extractОпределит агенты на машине, проверит риск и зафиксирует версию.
Другие способы установки
Установите утилиту
npm install -g designlangДобавь MCP-сервер: claude mcp add designlang -- npx -y designlang mcp. Или поставь скилл: npx skills add Manavarya09/design-extract. Разовый разбор сайта: npx designlang <url>.
Другие способы из описания автора
npx designlang https://stripe.comРазовый разбор сайта без установки. Есть режимы site, brand, clone и другие.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
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-сервер убирается из конфигурации клиента.
Проверка безопасности
- Запускает браузер Playwright и ходит на внешние сайты
- Извлекает и переносит чужие дизайн-решения, что требует внимания к правам на бренд
Коротко о README
README показывает designlang как инструмент, который читает сайт как разработчик читает таблицу стилей, и выдает целую дизайн-систему. Перечислены команды CLI: разбор одного адреса, анализ всего сайта, оценка соответствия клона оригиналу, генерация брендбука и стартера. Описаны установка через npx и глобально, подключение как скилла для более чем сорока агентов, плагин Claude Code и MCP-сервер. Лицензия MIT, требуется Node.js 20 и выше.
Частые вопросы
Как использовать без установки?
Запустить npx designlang <url>. Пакет скачается на время выполнения и разберет указанный сайт.
В каких форматах отдается результат?
Токены DTCG, конфиг Tailwind, переменные Figma, набор shadcn/ui, а также код под SwiftUI, Compose, Flutter и WordPress и стартер на Next.js.
Похожие
Скиллы 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, композиция компонентов и деплой