💡 Усі матеріали, обговорення та новини, що стосуються Front-end, зібрані в одному місці. Запрошуємо приєднатися до Front-end спільноти!
Привіт, DOU!
Сьогодні хочу поділитися open-source інструментом, який я розробив для власних потреб і який, сподіваюся, стане корисним для інших фронтенд-розробників.
Проблематика
Після здачі проекту клієнту все здається гармонійним і структурованим. Проте з часом, при перегляді сайту на великому моніторі, можна виявити такі недоліки:
- Кнопки мають чотири різних значення border-radius,
- Заголовки використовують шість різних розмірів шрифту без єдиної системи,
- Присутні мінімум п’ять відтінків сірого, які майже, але не зовсім однакові.
Типові інструменти, як лінтери чи Lighthouse, не фіксують цих проблем. Аналіз коду під час Code review також не допомагає, оскільки ці відхилення проявляються у computed styles, а не безпосередньо в вихідному коді.
Це явище отримало назву design drift — зміщення в дизайні, яке залишається непомітним, доки не стає очевидним.
Функції design-auditor
Даний інструмент відкриває ваш URL у справжньому браузері за допомогою Playwright, збирає computed styles кожного елемента і перевіряє їх відповідність правилам вашої дизайн-системи.
Виконати перевірку можна швидко командою:
npx design-auditor yoursite.com
Без потреби у конфігурації та інсталяції — лише одна команда.
Що аналізує design-auditor
Типографіка:
- Кількість реально використовуваних font-family (оптимально не більше трьох);
- Виконання modular scale у розмірах шрифтів;
- Узгодженість параметра line-height;
- Наявність baseline grid або відсутність системи.
Кольори:
- Кількість унікальних кольорів на сторінці;
- Кластеризація схожих кольорів на основі delta-E (CIE76);
- Виявлення майже однакових кольорів, наприклад
#f0f6fcі#f6f8fa; - Контрастність за стандартом WCAG AA для тексту та фону;
- Використання кольорів через CSS-змінні або у жорстко закодованому вигляді.
Відступи (Spacing):
- Дотримання сітки з кроком 4px чи 8px;
- Виявлення "магічних чисел", таких як 13px, 17px, 22px.
Компоненти:
- Розмір touch targets (не менше ніж 44×44px згідно з WCAG 2.5.5);
- Варіації внутрішніх відступів (padding) у кнопок — чи відповідають вони стандартним sm/md/lg, чи існує 11 різних розмірів;
- Консистентність border-radius та організація z-index.
Чому саме реальний браузер
На відміну від статичного аналізу CSS-файлів, design-auditor використовує Playwright для запуску getComputedStyle() безпосередньо на активній сторінці.
Це дозволяє зафіксувати:
- Стилі, які додаються JavaScript під час рантайму;
- CSS custom properties, розв’язані у реальні значення;
- Стилі, що підключені з сторонніх ресурсів.
Інструмент відображає саме те, що бачить кінцевий користувач, а не тільки те, що прописано у вихідному коді.
Для кого стане корисним цей інструмент
- Фрілансери та агенції, які прагнуть забезпечити якість дизайну;
- QA-спеціалісти перед здачею проекту клієнту;
- Фронтенд-розробники в командах з непослідовним впровадженням дизайн-системи;
- Кожен, хто прийняв чужий кодбейс і бажає розібратися у "формі" його CSS.
Особливо ефективно працює з лендінгами та маркетинговими сайтами — публічними проектами, де дизайн-консистентність має ключове значення, але автоматизовані засоби контролю здебільшого відсутні.
Як спробувати
Запустіть команду:
npx design-auditor yoursite.com
Щоб перевірити тільки кольори та типографіку, використовуйте:
npx design-auditor yoursite.com –only colors,typography
Для локального девелоперського сервера:
npx design-auditor localhost:3000 –local
Вимоги: Node.js версії 18 і вище.
Джерело коду та деталі за посиланнями:
- GitHub: github.com/…ashaSchool/design-auditor
- NPM: www.npmjs.com/package/design-auditor
Запрошуються відгуки щодо роботи інструменту! Які дизайн-помилки у вашому code review виявити найскладніше?