Смотреть урок
Дизайн-система конкурента или клиента — это обычно часы в DevTools и подбор цветов на глаз. Есть скилл для Claude, который делает это автоматически: указываете сайт — получаете готовый файл с токенами и живое превью в браузере.
Что внутри:
🔹 Как Claude достаёт дизайн-систему любого сайта — от URL до готового файла
🔹 Какие токены извлекаются: ~35 цветов, 7 уровней типографики, отступы, скругления
🔹 Что вы получаете: DESIGN и самостоятельный HTML-превью UI-кита
🔹 Где это применимо: разбор конкурентов, онбординг на бренд клиента, сборка токенов с нуля
💡 Не нужно разбирать чужой CSS вручную — Claude сам вытащит все токены из реального кода сайта и соберёт из них рабочую дизайн-систему.
Дизайн-системы почти всегда живут в закрытом виде: в файлах Figmа, в голове ведущего разработчика, в разрозненных заметках. Когда нужно разобрать чужой сайт или разобраться в собственном проекте без документации, приходится вручную лезть в DevTools, вытаскивать цвета из CSS, замерять отступы линейкой и тратить на это часы.
Design MD Extractor — скилл для Claude, который берёт на себя всю эту работу. Достаточно указать URL сайта или название бренда и Claude анализирует живую страницу, вытаскивает из неё все визуальные токены (цвета, типографику, отступы, форму, тени) и собирает из этого готовый файл DESIGN.md, который можно сразу подключать к своему проекту или использовать как основу дизайн-системы.
Скилл работает с любым публично доступным сайтом и не требует настройки — открывать DevTools или вручную копировать CSS-переменные не нужно.
Принцип простой: вы даёте Claude ссылку на сайт, он подключается к нему, читает реальный CSS-код страницы, скачивает используемые на ней ассеты и на основе этого генерирует два файла:
DESIGN.md — структурированный документ дизайн-системы с YAML-разметкой в начале файла и семью текстовыми разделами с описанием.design-preview.html — самостоятельная…