ds-health

Что считает

• ЦветаСколько уникальных цветов текста и фона встретилось на странице и видны ли CSS-переменные в стилях документа.
• ТипографикаСемейства, кегли и начертания видимого текста — насколько компактна типографическая шкала страницы.
• ОтступыСколько разных значений padding и gap реально отрендерил браузер.
• РадиусСколько ненулевых значений border-radius используется у контейнеров и контролов.

Граница метода: инструмент оценивает сходимость вычисленных стилей (getComputedStyle) на открытой странице. Меньшее число уникальных значений и наличие CSS-переменных — полезная эвристика для первичного аудита вёрстки, но не прямое доказательство качества архитектуры дизайн-системы в исходниках.

Запуск

git clone https://github.com/AndrewAntoshkin/ds-health.git
cd ds-health
npm install
npm start

Открой http://localhost:3000. Если порт занят:

PORT=3002 npm start

Если Playwright не находит браузер:

npx playwright install chromium

Как устроено

Инструмент открывает страницу в Chromium через Playwright. Берёт видимые элементы и читает стили, которые браузер уже применил. Потом отдаёт баллы, сигналы и рекомендации.

URL → Playwright (Chromium) → getComputedStyle() on sampled elements
→ Count unique colors, fonts, spacing, radii
→ Score each category (0–100)
→ Generate executive summary + priorities + recommendations

API

POST /api/analyze

curl -X POST http://localhost:3000/api/analyze \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com"}'

Запрос

Ответ

GET /health

Возвращает { "ok": true } — удобно для проверки, что сервис жив.

Пример страницы, близкой к одной шкале

Результат разбора barvian.me — минималистичный сайт:

{
"elementsSampled": 69,
"textNodesSampled": 41,
"cssVariables": 4,
"textColors": 3,
"backgroundColors": 3,
"fontFamilies": 1,
"fontSizes": 1,
"fontWeights": 2,
"spacingValues": 4,
"radiusValues": 1
}

Executive summary:
"This page looks healthy. 4 CSS variables were
detected, and no major consistency issues stood
out in the sampled page."

Пример раздробленного сайта

Страница с кучей разных значений — обычная история легаси и быстрых прототипов:

Priority issues:
⚠ 14 text colors detected — consider consolidating
⚠ 4 font families in use — reduce to 1–2
⚠ 8 font sizes found — align to a type scale
⚠ No CSS variables detected — consider tokenizing

Recommendations:
→ Audit text colors and create a semantic palette
→ Standardize on 1–2 font families
→ Define a spacing scale (4, 8, 12, 16, 24, 32)
→ Introduce CSS custom properties for tokens

Как читать отчёт

Удобный порядок чтения: сначала балл, потом короткий вывод, потом приоритеты, потом сырые значения.

Шкала