Об этом проекте

designlang (репозиторий manavarya09/design-extract, пакет npm designlang) — это open-source CLI под лицензией MIT, требующий Node 20+, который использует headless-браузер для извлечения дизайн-системы с любого живого URL. Он генерирует 17+ файлов в ./design-extract-output, включая markdown на 19 разделов, токены дизайна W3C DTCG (примитивные, семантические и составные), конфигурацию Tailwind, переменные shadcn/ui, Figma Variables JSON, CSS custom properties, типизированные стабы анатомии React-компонентов, токены анимаций, JSON брендового голоса и готовые промпты для v0, Lovable, Cursor и Claude Artifacts. Также создаётся полезная нагрузка MCP-сервера, и инструмент может запускаться как MCP-сервер. Помимо извлечения токенов одной страницы, поддерживается захват layout-системы (сетки, flex, контейнеры, отступы), responsive-сканирование на четырёх брейкпоинтах, фиксация состояний взаимодействия (hover/focus/active), захват runtime-анимаций через document.getAnimations() для определения длительностей, хореографии и stagger, а также scroll-рецепты. Многостраничное сканирование включает reconciliation токенов — общих и route-specific. WCAG 2.1 контрастный аудит с предложениями палитры, карты z-index, детектирование градиентов, дедупликация SVG-иконк, обнаружение font-файлов, классификация image-style, stack fingerprinting, CSS health auditing, семантическая классификация регионов (nav, hero, pricing, testimonials, CTA, footer) и кластеризация переиспользуемых компонентов. Команды: designlang URL — полное извлечение; site — каноническая система сайта и оценка консистентности; grade — HTML-отчёт и SVG-бейдж; battle — сравнительное оценивание; remix — рестайлинг в стилях brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial; pack — упаковка выводов; theme-swap — OKLCH hue rotation вокруг нового primary; brand — руководство из 13 глав; pair — слияние двух дизайн-систем; dna — позиционирование в 30-мерном пространстве признаков; dna-corpus — создание референсного корпуса; fidelity — оценка клонирования с планом исправлений; gallery — статическая галерея; clone — генерация Next.js стартера; apply — запись токенов в detected framework; drift, lint и visual-diff — CI-ready проверки; sync, history, watch и diff — мониторинг и сравнение. Мультиплатформенные эмиттеры добавляют iOS SwiftUI, Android Compose, Flutter и WordPress вывод. Chrome extension (MV3, activeTab) обеспечивает one-click handoff. Устанавливается глобально через npm или как агент skill, поставляется как плагин Claude Code со slash commands. Опциональный --smart classification может использовать Atlas Cloud или ключи OpenAI/Anthropic. README указывает на детерминированную бесплатную работу ядра при извлечении сайтов и что дизайн-скоринг не заменяет недостающие измерения. Это проект для design-system audits, генерации токенов, accessibility review, design-to-code workflows и оценки fidelity клонов.