Екстрактор стилів сайту
10 / 10Проаналізуйте будь-який сайт і витягніть його повну дизайн-систему — кольори, типографіку, відступи, тіні й стилі компонентів.
Як працює екстрактор стилів сайту
Проаналізуйте будь-який сайт і витягніть його дизайн-систему — кольори, типографіку, відступи й стилі компонентів. Відтворіть стилі з будь-якого URL.
Кольори й токени
Витягніть повну колірну палітру будь-якого сайту — основні, додаткові, текстові й фонові кольори. Подивіться, як вони відповідають CSS-змінним і дизайн-токенам.
Аналіз типографіки
Дізнайтеся, які родини шрифтів, розміри, накреслення й міжрядкові інтервали використовуються. Зрозумійте типографічну шкалу та ієрархію, не перевіряючи елементи по одному.
Відступи й макет
Визначте значення відступів, заокруглення, тіні й патерни макета. Побачте рішення дизайн-системи, що формують візуальний ритм сайту.
Будь-який публічний URL
Введіть URL будь-якого публічного сайту — інструмент сам завантажить і проаналізує його стилі. Працює з будь-яким стеком: статичний HTML, React, WordPress чи будь-який фреймворк.
Часті запитання
Інструмент відкриває сайт у headless-браузері, розбирає всі обчислені стилі й групує їх за категоріями — кольори, типографіка, відступи й тіні. Він витягує фактичні відрендерені значення, а не лише вихідний CSS.
Так, якщо сайт публічно доступний. Інструмент завантажує сторінку й аналізує її відрендерені стилі. Сайти за авторизацією чи в приватних мережах недоступні.
Ні. У вихідному коді видно сирий CSS. Екстрактор стилів аналізує обчислені, відрендерені стилі — фактичні значення, які браузер застосовує після каскаду, успадкування й перевизначень. Ви отримуєте справжню дизайн-систему, а не вихідні файли.
Витягнуті значення — кольори, розміри шрифтів, відступи — це фактичні вимірювання. Їх можна використовувати як орієнтир чи відправну точку. Але копіювання цілої дизайн-системи з чужого сайту може порушувати авторські права чи права на торговельну марку.