design-auditor — CLI для аудиту дизайн-консистентності сайту

💡 Усі статті, обговорення, новини про 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

Без конфігу. Без інсталяції. Одна команда.

Що перевіряє

Типографіка
— Скільки font-family реально використовується (рекомендовано ≤ 3)
— Чи розміри шрифтів слідують modular scale
— Консистентність line-height
— є baseline grid чи хаос?

Кольори
— Кількість унікальних кольорів на сторінці
— Кластеризація схожих кольорів через delta-E (CIE76)
— ловить #f0f6fc і #f6f8fa як «фактично однаковий колір»
— WCAG AA контраст для всіх пар текст/фон
— Чи кольори в CSS змінних або захардкоджені

Spacing
— Чи spacing слідує 4px або 8px grid
— Флагує «магічні числа» —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

Локальний dev сервер

npx design-auditor localhost:3000 —local

Node.js 18+

GitHub: pashaschool.github.io/design-auditor
NPM: www.npmjs.com/package/design-auditor

Буду радий фідбеку! А які дизайн-баги найважче зловити у вас в code review?