Почему 60% сайтов получают D или F по дизайн-контракту: разбор 30 реальных проектов

Мы прогнали 30 сайтов через 40 детерминированных проверок дизайн-контракта. Результаты оказались хуже ожиданий: средний балл 62,2, а 60% сайтов получили D или F. Ни один сайт не заработал B. Рассказываем, на чём валятся даже лучшие, и как использовать этот опыт для собственного проекта.

Речь не об эстетике. Проверки не оценивают вкус — они проверяют наличие дизайн-токенов, корректность reduced-motion, состояние :focus-visible. Это инженерная дисциплина, а не «красиво/некрасиво».

Что показывает дизайн-контракт

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

Такой контракт ценен не для рейтинга, а для команды. Он превращает размытое «сделайте красиво» в чек-лист, который можно повесить в CI и не спорить на ревью.

Общие результаты: 60% D и F

Ни одного B — это не случайность. Переход от «токены есть, но в произвольном виде» к «токены соответствуют спецификации» — это пропасть, а не пологий склон. Поэтому все и зависают между C и D.

Худшие измерения: токены и движение

Токены: средний балл 40,8

У 11 из 30 сайтов токены не дотягивают даже до 50 баллов. Типичные проблемы:

• Цвета записаны «голыми» hex-значениями, а не структурированными токенами с типом и составляющими.
• В файле токенов нет указателя на спецификацию — $schema.
• Отступы и радиусы заданы магическими числами, а не именованной шкалой.
• Для тёмной темы нет токенов поверхностей, которые меняются ступенями по яркости.

Это разрыв между заявлениями и практикой: 84% команд говорят, что используют дизайн-токены, но почти никто не использует их в конформном формате. Стабильная версия спецификации W3C DTCG вышла в октябре 2025-го, и экосистема ещё не успела подтянуться.

Движение: средний балл 52,5

Речь про анимации. Тут второй по величине провал: 11 сайтов из 30 ниже 50 баллов.

• Нет корректной обработки prefers-reduced-motion: либо вообще её нет, либо она работает как рубильник, выключающий всю анимацию. Правильный подход — уровни: полностью убрать, смягчить или оставить.
• Нет токенов easing: 15 разных cubic-bezier вместо шкалы из четырёх значений.
• Анимируют width, height, top, left вместо transform и opacity. Это нагрузка на основной поток и типичная причина дропа кадров.
• Нет шкалы длительности: каждая анимация с собственным магическим числом.

Эталонный подход — у Apple: их HIG описывает тиры reduced-motion. Только один сайт в выборке делает это правильно.

Interaction: самый частый фейл

12 сайтов из 30 проваливают интерактивность ниже 50. Среди ошибок:

• Сброс :focus без замены — самый распространённый паттерн недоступности.
• Нет :focus-visible — фокус с клавиатуры и мыши выглядит одинаково.
• Нет реакции на нажатие — например, scale(0.97) для кнопок.

Всё это лечится за вечер, но почему-то игнорируется даже в крупных продуктах.

Топ и дно: показательные примеры

Обратите внимание: маркетинговые сайты обгоняют дизайн-системы. Vercel (маркетинг) набрал 73,6, а Geist (их же дизайн-система) — 50,3. Разрыв в 23 балла. Маркетинг оптимизирует визуальный блеск, дизайн-система — стабильность API. Контракт вознаграждает первое.

Практический чек-лист: как не получить F

На основе частых ошибок из выборки — минимальный набор действий для любого сайта:

1. Переведите цвета, отступы, радиусы и шрифты в именованные токены. Каждый токен должен содержать тип и структуру, а файл — объявлять $schema.
2. Создайте шкалу длительности и easing. Четырёх значений достаточно.
3. Используйте transform и opacity для анимаций. Width и height — под запретом.
4. Внедрите три уровня reduced-motion: полное удаление, смягчение, сохранение. Ориентир — спецификация Apple HIG.
5. Не убирайте :focus без замены. Добавьте :focus-visible и явные стили для клавиатурной навигации.
6. Добавьте реакцию на нажатие для интерактивных элементов — хотя бы лёгкий scale.

Как проверить свой сайт

Загнать свой URL через те же проверки можно бесплатно и без регистрации. Для разовой проверки подойдёт CLI или MCP-сервер, для постоянного контроля — GitHub Action, который запускает те же 40 проверок в CI. Методология и контракт открыты — можно посмотреть, какие именно проверки входят в оценку.

Вывод

Главный урок из 30 сайтов: «выглядит хорошо» и «устроен системно» — это разные вещи. Сайты, которые получают награды за дизайн, проваливают детерминированную проверку, потому что у них нет структуры. А структура — это то, что делает дизайн поддерживаемым, доступным и дешёвым в развитии.

Начните с токенов и reduced-motion. Это два самых больших провала в выборке. Не нужно делать всё сразу: достаточно превратить магические числа в именованную шкалу и добавить правильную обработку prefers-reduced-motion — и вы уже обгоните большинство сайтов с «красивым» дизайном.