Извлечение стайл-гайда сайта

Стайл-гайд описывает визуальный язык бренда — цвета, типографику, отступы, паттерны компонентов и иконографику. Он держит облик единым на всех страницах, продуктах и в работе разных команд. Сняв стайл-гайд с существующего сайта, вы быстро поймёте его дизайн-систему, повторите нужный вид или найдёте расхождения перед редизайном.

В отличие от статических парсеров HTML, наш экстрактор открывает страницу в настоящем headless Chromium и полностью её отрисовывает. После этого он читает вычисленные стили — итоговые значения CSS, когда уже применились все таблицы стилей, JavaScript, CSS-in-JS и анимации. То есть вы получаете те цвета и шрифты, которые видит посетитель, а не только то, что лежит в исходных файлах.

Скопируйте блок CSS-переменных и вставьте его в глобальный файл стилей проекта внутрь :root. Дальше обращайтесь к переменным где угодно через var(--color-primary). Для Tailwind CSS v4 эти переменные можно напрямую подставить в конфигурацию темы и получить совпадающую систему токенов.

Да, это один из основных сценариев. Снимите цвета и типографику сайта, затем через конвертер получите значения OKLCH или HSL, удобные для CSS-переменных. Проверьте пары цветов в проверке контрастности. Извлечённые семейства и размеры шрифтов станут основой типографической шкалы, а по кнопкам видно, какие используются скругления, отступы и насыщенность.

Да — разбор общедоступных сайтов ради дизайн-исследования и конкурентного анализа это обычная отраслевая практика. Вы можете снять палитру, выбор шрифтов и паттерны компонентов с любого публичного сайта, чтобы понять, куда движутся решения в вашей нише. Делайте на основе этого свою работу: извлечение — это материал для исследования, а не шаблон для копирования.

Часть сайтов закрывается от автоматических браузеров (Cloudflare, reCAPTCHA, блокировки по IP). Другим нужна авторизация, чтобы показать настоящий интерфейс. Одностраничные приложения с тяжёлым JavaScript могут не успеть отрисоваться за отведённое время. Сайты на CSS-in-JS, подставляющие стили с задержкой, тоже могут отдать не всё. Если не получилось — укажите адрес полностью, с https://, и попробуйте ещё раз чуть позже.

Мы извлекаем семейства шрифтов для заголовков и основного текста вместе с применёнными начертаниями (100–900). Для Google Fonts определяется название шрифта, чтобы вы могли найти ссылку на CDN. Для системных шрифтов показывается весь стек. В разделе типографики также собираются встречающиеся на странице размеры текста — готовая отправная точка для шкалы в вашей дизайн-системе.