Почему сайты инструментов для разработчиков проваливают проверку дизайна: 16 сайтов, 40 чеков

Что произошло

Разработчики создают инструменты, которые обещают делать интерфейсы лучше. Но собственные сайты этих инструментов проваливают объективную проверку из 40 пунктов. Мы прогнали через неё 16 сайтов — от хостинга до CSS-фреймворков. Вышло хуже, чем у дизайн-наград.

Методология — 40 детерминированных проверок: дизайн-токены, шрифты, анимация, доступность, производительность. Каждый пункт можно воспроизвести: свойство есть или нет. Никаких нейросетей и вкусовщины.

Результаты: ни одного C

Ни один сайт не набрал 70 баллов. Лучший — Netlify с 64.6 (D). Девять из шестнадцати получили F. В предыдущей выборке из 30 обычных сайтов доля F была 40%, здесь — 56%.

Для справки: FWA и Pentagram (дизайн-студии) получили по 41.1 балла, CSS Design Awards — 37.9. Bun и tokens.studio оказались в том же диапазоне, что и сайты дизайн-наград, которые мы критиковали раньше.

Провал №1: tokens.studio — инструмент токенов с тремя токенами

tokens.studio — продукт для управления дизайн-токенами. Его маркетинговый сайт набрал 39.1 балла — это ниже, чем у CSS Design Awards. Проверка нашла на странице всего 3 CSS-переменных. Для сравнения: Supabase — 581, Netlify — 515.

Плюс — горизонтальное переполнение на 1080px, нет :focus-visible, нет prefers-reduced-motion и вообще нет токенов длительности. Компания, которая продаёт токены, не использует их на собственном сайте.

Провал №2: v0.dev — единственный реальный провал Core Web Vitals

ИИ-генератор сайтов от Vercel получил 63.0 (D). Но главная находка — LCP 4216 мс при пороге 2500 мс. Это единственный сайт из всех 46 проверенных, где Core Web Vitals действительно провален. Остальные либо прошли, либо не измерялись.

Инструмент, который генерирует сайты, сам не может пройти собственный тест скорости.

Провал №3: Framer — инструмент для анимации без доступности анимации

На framer.com нет ни одного prefers-reduced-motion. Пользователь с отключённой анимацией в ОС получит ту же самую анимацию, что и все. Для компании, которая продаёт motion-возможности, это структурная ирония.

Провал №4: Bun — быстрый рантайм с медленными доками

Документация Bun набрала 42.0. На 720px и 860px она переполняется по горизонтали — приходится скроллить. И там нет ни одного :focus-visible: клавиатурный пользователь не видит, где находится.

Пять общих проблем

14 из 16 сайтов используют px для не-root шрифтов вместо rem. Это ломает масштабирование текста в браузере.

9 из 16 используют transition:all. Из-за этого анимируются лишние свойства — например, display или height — и возникают рывки.

У 14 из 16 нет font-synthesis: none. Браузер синтезирует жирные и курсивные начертания, которых нет в шрифте, и типографика деградирует.

13 из 16 не задают text-decoration-skip-ink: auto. Подчёркивания перечёркивают буквы с нижними выносными элементами — г, р, у.

11 из 16 не используют tabular-nums. Цифры в таблицах и статистиках прыгают, когда меняется ширина глифов.

Это не субъективные придирки, а детерминированные проверки. Вы можете запустить их сами.

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

Команда для проверки: npx designesy-score@latest https://your-site.com. Методика открыта, чек-лист опубликован, GitHub Action может гейтить CI по тем же 40 проверкам.

Если ваш сайт наберёт меньше 50 — вы в компании дизайн-наград и доков JS-рантаймов. Если больше 70 — вы в топ-15% веба. Если 100 — вы одни такие.

Вывод

Инструменты для разработчиков должны быть эталоном. Они учат, как делать качественные интерфейсы, но собственные сайты показывают обратное. Хорошая новость: все проверки детерминированные, их можно автоматизировать и исправить. Плохая — почти никто этого не делает.