Что это такое?
CLI-инструмент, который анализирует любой сайт и выгружает его дизайн-систему в готовых для использования форматах.
Проект / JavaScript
Manavarya09/design-extract: Designlang — извлекает дизайн-систему любого сайта одним кликом
Получите полную дизайн-систему любого сайта — цвета, типографику, отступы, тени и даже структуру вёрстки — одной командой в терминале.
Designlang — это CLI-инструмент на Node.js, который реверс-инжинирит дизайн-систему любого сайта. В отличие от простых экстракторов цветов, он анализирует структуру вёрстки, адаптивность, доступность и генерирует готовые к использованию дизайн-токены в...
Для кого это
Для фронтенд-разработчиков, дизайнеров и продуктовых команд, которые хотят анализировать или копировать дизайн-решения с других сайтов.
Проблема / задача
Когда нужно проанализировать дизайн конкурента или перенести стили с одного проекта на другой, приходится вручную выковыривать цвета из CSS, измерять отступы и разбираться с типографикой. Это долго, нудно и легко ошибиться.
Как это работает
Designlang — это CLI-инструмент на Node.js, который реверс-инжинирит дизайн-систему любого сайта. В отличие от простых экстракторов цветов, он анализирует структуру вёрстки, адаптивность, доступность и генерирует готовые к использованию дизайн-токены в стандартных форматах. Есть версия как npm-пакет, Chrome-расширение и плагин для AI-агентов (Claude Code, Cursor).
Что видно по README
Designlang — это CLI-инструмент на Node.js, который реверс-инжинирит дизайн-систему любого сайта. В отличие от простых экстракторов цветов, он анализирует структуру вёрстки, адаптивность, доступность и генерирует готовые к использованию дизайн-токены в стандартных форматах. Есть версия как npm-пакет, Chrome-расширение и плагин для AI-агентов (Claude Code, Cursor).
Ключевые возможности
Технологии
Темы и ключи
Интересный факт
Проект генерирует специальный markdown-файл, оптимизированный для загрузки в LLM — можно скормить его ChatGPT или Claude и попросить «воссоздать этот дизайн с нуля».
С чего начать
- Установите Node.js 20+
- Выполните команду: npx designlang https://example.com
- Получите 8 файлов с дизайн-токенами в текущей папке
Оценка GitRadar
Удобство
9/10
Свежесть
8/10
Перспектива
8/10
Монетизация
6/10
Общая оценка
8/10
Вердикт GitRadar
Определённо стоит попробовать, если вы работаете с дизайн-системами. Это самый продвинутый инструмент в своей нише, который решает реальную боль анализа чужих интерфейсов. Даже если не нужны все 8 форматов вывода, визуальный HTML-отчёт с палитрами и типографикой уже полезен.
Наблюдения по обновлениям
Проект активно развивается (версия 7.2.0), есть Chrome-расширение, поддержка AI-агентов через MCP. Репозиторий обновляется, issues реагируют.
Что мы проверили
Карточка собрана по данным GitHub, README и структуре репозитория. Это не официальная документация проекта.
- Исходный репозиторий
- https://github.com/Manavarya09/design-extract
- Лицензия
- MIT
- Создан на GitHub
- 15 апреля 2026 г.
- Последнее обновление репо
- 15 апреля 2026 г.
- Последняя проверка GitRadar
- 15 апреля 2026 г.
- Изученные файлы
- website/README.md, src/index.js, package.json, src/mcp/server.js, README.md, chrome-extension/README.md
FAQ
Для кого подходит?
Для фронтенд-разработчиков, дизайнеров, продуктовых команд и всех, кто изучает или копирует дизайн-решения.
Источники
Нужна помощь с Manavarya09/design-extract?
Если проект подходит под ваш сценарий, можем помочь с установкой, интеграцией, доработкой или аккуратным форком под вашу инфраструктуру.