DesignLang автоматизирует извлечение дизайн-системы с любого сайта одной командой, читая живой DOM через headless-браузер и генерируя более 17 форматов вывода, включая токены и конфиги Tailwind. Интеграция с MCP-сервером позволяет ИИ-агентам эффективно использовать дизайн без перегрузки контекста.
designlang: извлечь дизайн-систему любого сайта одной командой
наведи и нажми на цифру — раскроется глава
полный разбор ролика · 5 глав ↓
Введение и проблема
Ручное извлечение цветов, шрифтов и стилей из живого сайта занимает много времени и быстро устаревает при обновлениях.
Автоматизация процесса позволит сэкономить часы и дни рутинной работы, создав дизайн-систему одной командой.
Решение DesignLang
DesignLang запускает headless-браузер, который получает итоговый рендер страницы с учётом всех динамических изменений и скриптов.
Это позволяет работать с реальными стилями, а не со статикой исходников, что значительно точнее и эффективнее.
Архитектура и процесс извлечения
Playwright запускает браузер и ждёт полной загрузки страницы, затем скрипт собирает свойства до 5000 элементов.
Данные очищаются от дублей, группируются и структурируются, включая адаптивность, состояния hover/focus и сетки.
Форматы вывода и возможности
Более 17 форматов вывода: токены W3, DTCG, Tailwind-конфиги, типизированные React-заглушки и даже анализ голосового стиля кнопок.
Готовые паки промптов для генераторов интерфейсов позволяют быстро создавать UI в стиле оригинала.
Интеграция с MCP и практическое применение
MCP-сервер позволяет ИИ-агентам запрашивать только нужные токены и компоненты, экономя память и повышая точность генерации.
Команды для клонирования дизайна, сравнения токенов в CICD и аудита доступности ускоряют ежедневную работу с интерфейсами.