Review дизайна сайта

Зачем это изучать

Вы сможете принять работу Codex по наблюдаемым критериям: от сценария и иерархии до клавиатуры, узкого экрана и производительности.

Проверено: 23 августа 2026 года.

Откройте страницу в браузере и проверяйте не макет в вакууме, а путь реального пользователя. Скриншот не подтверждает работу формы, focus, длинного текста или маленького экрана.

Быстрый чек-лист

Сценарий и содержание

• [ ] За пять секунд понятно назначение страницы и её главный следующий шаг.
• [ ] CTA описывает результат действия и заметен без прокрутки там, где это оправдано сценарием.
• [ ] В контенте нет выдуманных отзывов, цен, логотипов, обещаний или lorem ipsum, выданных за финальный материал.
• [ ] Проверены длинные заголовки, пустые списки, ошибки и успешное завершение.

Визуальная система

• [ ] Типографика, отступы, радиусы, границы и цвета берутся из токенов или существующих компонентов.
• [ ] На странице один главный CTA; вторичные элементы не спорят с ним.
• [ ] Иконка не является единственным носителем смысла.
• [ ] Hover, active, disabled и focus определены для интерактивных элементов.

Адаптивность

• [ ] Пройдены 320 px, мобильный, 768 px, 1024 px и широкий desktop.
• [ ] Нет горизонтальной прокрутки, перекрытий и обрезанного содержимого.
• [ ] Мобильная навигация, таблицы и формы остаются понятными и управляемыми.
• [ ] Изображения и динамические блоки не вызывают заметный layout shift.

Доступность

• [ ] Полный ключевой путь проходит только клавиатурой.
• [ ] Focus видим, не теряется и не оказывается под sticky-элементом.
• [ ] Семантика заголовков, кнопок, ссылок, полей и диалогов соответствует их назначению.
• [ ] У форм есть подписи, сообщения об ошибках и понятное исправление.
• [ ] Контраст, альтернативы изображений и reduced motion проверены вручную.

Скорость и качество реализации

• [ ] Сначала выполнены штатные lint, тесты и сборка проекта.
• [ ] Измерена лабораторная производительность на мобильном профиле; причины регрессий записаны, если они есть.
• [ ] Не добавлены библиотека, анимация или медиа без обоснованной пользы.
• [ ] Просмотрен diff: нет debug-кода, временных заглушек и случайных правок.

Доказательства

• [ ] Перечислены маршруты, состояния, viewport, browser, theme и locale.
• [ ] Скриншоты или visual diff получены в воспроизводимой среде.
• [ ] Автоматическая accessibility-проверка дополнена ручным проходом.
• [ ] Отделены выполненные проверки, предположения и непроверенные сценарии.

Как давать Codex замечания

Замечание должно связывать наблюдение, риск и ожидаемый результат:

На ширине 320 px кнопка «Оформить» перекрыта нижней панелью.
Из-за этого пользователь не может завершить сценарий с клавиатуры.
Исправь safe-area и отступ панели; проверь 320 px и Tab-навигацию.
Не меняй визуальную иерархию остальных блоков.

Фразы «выглядит странно» допустимы как сигнал для обсуждения, но не являются критерием готовности. Укажите экран, состояние, пользовательскую проблему и ограничения изменения.

Решение о приёмке

Не принимать, если сломан ключевой сценарий, клавиатура, структура формы, адаптивность или контраст. Принять с замечаниями можно только косметические отклонения, если они записаны отдельными задачами и не маскируют доступностный или продуктовый риск.

После review вернитесь к стандарту качества, если проблема повторяется: её следует превратить в правило, токен, компонент или проверку, а не исправлять заново на каждой странице.