CLI извлекает дизайн-систему сайта, git-репозитория или локальной кодовой базы в файлы, которые Claude Code использует для создания UI в том же стиле.
2,4 тыс.250TypeScriptБез лицензииОбновлён 6 месяцев назад
Manavarya09/design-extract
CLI открывает любой сайт в headless-браузере и извлекает его дизайн-систему в виде токенов DTCG, конфига Tailwind, переменных Figma и других форматов.
Open source альтернатива:Figma
- Звёзды
- 4,261
- Форки
- 371
- Открытые issues
- 25
- Последний коммит
- 12 дней назад
Что это?
designlang открывает URL в headless Chromium через Playwright и считывает вычисленные стили и разметку из текущего DOM. Одной командой можно создать набор файлов с цветами, типографикой, отступами, тенями, радиусами, CSS-переменными, токенами анимации и обнаруженными компонентами. Среди выходных форматов — токены W3C DTCG, тема Tailwind, тема shadcn/ui и переменные Figma для светлого и тёмного режимов.
Помимо извлечения токенов, инструмент может обходить сайт на четырёх адаптивных брейкпоинтах, фиксировать изменения при наведении, фокусе и активации, оценивать контраст текста и фона по WCAG и сравнивать согласованность нескольких страниц. В него также входят проверки на отклонения и линтинг для CI, визуальное сравнение и режим для всего сайта, который объединяет страницы в одну каноническую систему.
Инструмент можно запускать как MCP-сервер для агентов вроде Claude Code, Cursor и Windsurf. Также доступны плагин для Claude Code, расширение Chrome и установка на базе Node.js через npm-пакет. Генераторы для платформ поддерживают iOS SwiftUI, Android Compose, Flutter и WordPress.
Ключевые возможности
- 01Извлекает цвета, типографику, отступы, тени, радиусы и CSS-переменные с открытой страницы.
- 02Создаёт токены W3C DTCG, конфиг Tailwind, тему shadcn/ui и переменные Figma.
- 03Фиксирует адаптивное поведение на четырёх брейкпоинтах, а также состояния при наведении, фокусе и активации.
- 04Оценивает контраст текста и фона по WCAG.
- 05Работает как MCP-сервер для Claude Code, Cursor и Windsurf.
- 06Генерирует токены для iOS, Android, Flutter и WordPress.
Сценарии использования
- Создать отправную дизайн-систему, повторяющую внешний вид сайта конкурента или сайта-образца.
- Сгенерировать темы Tailwind или shadcn/ui на основе существующего сайта.
- Передавать извлечённые токены AI-агентам для написания кода, чтобы сгенерированный интерфейс соответствовал нужному визуальному стилю.
- Сравнивать сайт с файлом токенов в CI и выявлять отклонения в дизайне.
Быстрый старт
- 1
Установите CLI глобально
npm i -g designlang - 2
Установите браузер Chromium один раз
designlang install-browser - 3
Извлеките дизайн-систему сайта
npx designlang https://stripe.com
Что важно знать
- Перед первым использованием необходимо скачать браузер Chromium в headless-режиме.
- Некоторые расширенные функции (site, fidelity, dna) имеют версии и могут быстро меняться.
Темы
Частые вопросы
- Что такое design-extract?
- CLI открывает любой сайт в headless-браузере и извлекает его дизайн-систему в виде токенов DTCG, конфига Tailwind, переменных Figma и других форматов. designlang открывает URL в headless Chromium через Playwright и считывает вычисленные стили и разметку из текущего DOM. Одной командой можно создать набор файлов с цветами, типографикой, отступами, тенями, радиусами, CSS-переменными, токенами анимации и обнаруженными компонентами. Среди выходных форматов — токены W3C DTCG, тема Tailwind, тема shadcn/ui и переменные Figma для светлого и тёмного режимов.
- design-extract можно использовать бесплатно? Какая у него лицензия?
- design-extract распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
- design-extract всё ещё поддерживается?
- Активно поддерживается. Последний коммит в design-extract — 8 окт. 2026 г..
- Для чего можно использовать design-extract?
- Создать отправную дизайн-систему, повторяющую внешний вид сайта конкурента или сайта-образца. Сгенерировать темы Tailwind или shadcn/ui на основе существующего сайта. Передавать извлечённые токены AI-агентам для написания кода, чтобы сгенерированный интерфейс соответствовал нужному визуальному стилю. Сравнивать сайт с файлом токенов в CI и выявлять отклонения в дизайне.
- Как установить design-extract?
- Установите CLI глобально: npm i -g designlang Установите браузер Chromium один раз: designlang install-browser Извлеките дизайн-систему сайта: npx designlang https://stripe.com
- Где скачать design-extract?
- Исходный код и инструкции по установке — на GitHub: https://github.com/Manavarya09/design-extract
Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.
Похожие проекты
Анализирует сайты с помощью Playwright и экспортирует их дизайн-систему в виде конфига Tailwind v4, React-компонентов, дизайн-токенов или отчёта DESIGN.md.
815PythonMITОбновлён 2 месяца назад
CLI-инструмент, который одной командой извлекает дизайн-систему сайта — цвета, типографику, отступы, тени и компоненты — и преобразует её в design tokens W3C.
3,7 тыс.327TypeScriptMITОбновлён 9 дней назад
Открытый Python-веб-краулер, который преобразует сайты в чистый Markdown для LLM, извлекает структурированные данные с помощью CSS/LLM и при необходимости предоставляет API.
85,8 тыс.8,9 тыс.PythonApache-2.0Обновлён вчера
Набор навыков для AI-агентов, помогающих создавать более качественные интерфейсы: доступность, компоновка, типографика, цвет, тексты и полировка UI.
8 тыс.307MarkdownMITОбновлён 7 дней назад
Набор инструкций и знаний, который помогает Claude и другим coding agents стать экспертами по UX/UI-дизайну: DTCG-токены, спецификации компонентов, 138 дизайн-систем и 52 объективные проверки.
2,4 тыс.253JavaScriptMITОбновлён 20 часов назад