Шесть проверок AI-интерфейса перед показом заказчику: чеклист из реальных ошибок
Основной чат
Чат для вайбкодеров: новости, гайды, поиск исполнителей, маркетплейс и разбор реальных кейсов.
Проверка 1. Состояния интерфейса
AI генерирует то состояние которое ты описал. Обычно это заполненный экран с реальными данными и успешным результатом. Всё остальное он придумывает или пропускает.
Перед показом пройди каждый экран по четырём состояниям:
Empty state. Что видит пользователь до того как добавил хоть что-то? Пустая таблица без объяснений — это не empty state, это растерянность. Должно быть: иллюстрация или иконка, объяснение что здесь будет, действие которое нужно сделать. Особенно критично на главном экране и в списках.
Loading state. AI-приложения работают медленнее обычных — LLM-запрос занимает 2–8 секунд. Спиннер за это время сигнализирует ноль: пользователь не понимает работает ли система или зависла. Правильный паттерн: skeleton-экран который показывает где появится контент, или стриминг ответа токен за токеном.
Error state. «Что-то пошло не так» — самая бесполезная фраза в интерфейсе. AI генерирует её по умолчанию. Нужно: что именно пошло не так, почему это вероятно случилось, что пользователь может сделать прямо сейчас.
Success state. Подтверждение что действие выполнено. Кажется очевидным — но AI часто пропускает или генерирует его слишком тихим: маленький текст вместо заметного тоста, отсутствие анимации перехода.
☐ Empty state: есть иллюстрация + объяснение + действие
☐ Loading state: не просто спиннер — skeleton или стриминг
☐ Error state: конкретная причина + конкретное действие
☐ Success state: заметное подтверждение что всё прошлоПромпт для Codex / Claude Code:
Проверь все экраны проекта на наличие четырёх состояний интерфейса.
Для каждого компонента который показывает данные (список, таблица, карточки,
дашборд) проверь:
1. Empty state — если данных нет, что показывается?
Должно быть: иконка или иллюстрация + текст что здесь будет + CTA-кнопка.
Просто пустое место или "Нет данных" — недостаточно.
2. Loading state — если данные грузятся, что показывается?
Должен быть skeleton-loader повторяющий структуру контента.
Один спиннер посередине экрана — заменить.
3. Error state — если запрос упал, что показывается?
Должно быть: конкретное сообщение + кнопка "Попробовать снова".
Текст "Что-то пошло не так" — заменить на конкретику.
4. Success state — после успешного действия (создание, сохранение, отправка)
есть ли заметное подтверждение? Toast, баннер или анимация — не просто
обновление страницы без сигнала.
Выведи список: какие компоненты покрыты всеми четырьмя состояниями,
каким чего не хватает. Для недостающих сгенерируй код.Проверка 2. Консистентность компонентов
AI в разных частях сессии или разных промптах генерирует компоненты независимо друг от друга. Кнопка «Сохранить» на первом экране и кнопка «Отправить» на втором — это часто два разных компонента с разным padding, разным радиусом, иногда разным шрифтом. Визуально разница небольшая, но заказчик это чувствует даже если не называет словами.
Что проверять:
Кнопки. Один ли размер у Primary Button на всех экранах? Одинаковый ли hover-стейт? Если есть иконка — она всегда слева или всегда справа?
Типографика. Сколько размеров шрифта используется? AI легко генерирует шесть разных кеглей там где нужно три. Проверь H1, H2, body, caption — они должны быть одинаковыми везде.
Отступы. Самое частое расхождение. Padding внутри карточек, gap между секциями, margin у заголовков — AI берёт их произвольно если нет явных токенов. Пройди экраны и проверь что одинаковые элементы имеют одинаковые отступы.
Иконки. Смешение библиотек убивает консистентность быстрее всего. Outline и filled в одном интерфейсе, разные stroke-width — немедленно бросается в глаза.
☐ Все Primary Button одинакового размера и стиля
☐ Не больше 3-4 уровней типографики
☐ Одинаковые элементы — одинаковые отступы
☐ Одна иконочная библиотека, один стильПромпт для Codex / Claude Code:
Проведи аудит консистентности компонентов во всём проекте.
1. Кнопки — найди все варианты кнопок в кодовой базе.
Сравни padding, border-radius, font-size, font-weight, высоту.
Если Primary Button встречается в нескольких вариантах — перечисли расхождения
и приведи к единому компоненту.
2. Типографика — найди все уникальные значения font-size в проекте
(включая inline-стили и Tailwind-классы).
Если уровней больше 4 — выведи список избыточных и предложи к чему их свести.
3. Отступы — найди padding и gap у карточек, списков, секций.
Выяви где одинаковые элементы используют разные значения.
Предложи унифицированную систему отступов через CSS-переменные или Tailwind.
4. Иконки — найди все используемые иконочные библиотеки.
Если их больше одной — перечисли конфликты и предложи миграцию к одной.
Выведи отчёт: что консистентно, что расходится, конкретные файлы и строки.Проверка 3. Реальный контент
AI использует placeholder-контент: «Lorem ipsum», «Иван Иванов», «Название продукта», числа вроде «1 234 567». На реальных данных интерфейс выглядит иначе.
Длинный текст. Вставь в карточку заголовок на 80 символов вместо 20. Что происходит? Обрезается с многоточием, переносится, ломает layout? Это нужно знать до показа.
Короткий текст. Имя «Ли» вместо «Александр Петрович Воронцов» — как выглядит аватар, как выровнен текст рядом?
Большие числа. «10 000 000» вместо «42» — помещается ли в ячейку таблицы, не ломает ли выравнивание?
Пустые поля. Что показывает карточка пользователя у которого не заполнено фото, должность и телефон? AI обычно не рендерит этот кейс.
Быстрый способ проверить: открой каждый список и таблицу, подставь три варианта — минимальные данные, обычные данные, экстремально длинные данные.
☐ Заголовки и названия проверены на длинный текст
☐ Числа проверены на большие значения
☐ Карточки проверены на частично заполненные данные
☐ Аватары и изображения — поведение при отсутствии файлаПромпт для Codex / Claude Code:
Проверь устойчивость интерфейса к реальному контенту.
Для каждого из сценариев найди уязвимые компоненты и исправь:
1. Длинный текст — найди все места где отображается текст из данных
(названия, описания, имена пользователей, заголовки карточек).
Добавь overflow: hidden + text-overflow: ellipsis там где текст
должен обрезаться, или word-break: break-word там где должен переноситься.
Нигде не должно быть горизонтального overflow из-за длинного текста.
2. Большие числа — найди все числовые значения в UI (цены, счётчики, метрики).
Проверь что значения типа "10 000 000" или "99 999" не ломают layout ячеек.
Добавь форматирование через Intl.NumberFormat где нужно.
3. Отсутствующие данные — найди все места где отображается аватар или фото.
Добавь fallback: инициалы пользователя или дефолтную иконку если src пустой
или возвращает ошибку 404.
4. Частично заполненные карточки — найди компоненты которые показывают
опциональные поля (должность, телефон, теги). Убедись что при отсутствии
данных элемент либо скрывается, либо показывает корректный placeholder,
а не пустое место которое ломает вёрстку.Проверка 4. Мобильный экран
AI генерирует под тот экран который видит чаще всего в обучающих данных — десктоп 1440px или ноутбук 1280px. Мобильная версия либо отсутствует, либо сделана механически: колонки схлопнулись в одну, но отступы, размеры шрифта и интерактивные зоны остались десктопными.
Что проверять на 375px (iPhone SE — самый узкий из популярных):
Touch-зоны. Минимальный размер интерактивного элемента — 44×44px по Apple HIG и 48×48dp по Material Design. AI генерирует кнопки меньше. Иконки без подписей, ссылки в тексте, чекбоксы — всё это нужно проверить.
Горизонтальный скролл. Таблицы, длинные строки, фиксированные ширины — на мобиле создают горизонтальный скролл которого не должно быть. Открой в DevTools на 375px и проверь что страница не шире вьюпорта.
Клавиатура. Если на экране есть форма — что происходит когда всплывает мобильная клавиатура? Она перекрывает кнопку «Отправить»?
Навигация. Боттом-бар или хамбургер? AI часто оставляет десктопный хедер на мобиле — это неудобно и выглядит незаконченно.
☐ Открыт в DevTools на 375px — нет горизонтального скролла
☐ Все кнопки и ссылки минимум 44px по высоте
☐ Форма проверена с открытой клавиатурой
☐ Навигация адаптирована под мобиль, не просто сжатаПромпт для Codex / Claude Code:
Проведи мобильный аудит проекта. Проверь и исправь:
1. Горизонтальный overflow — найди все элементы с фиксированной шириной
в пикселях которые могут выйти за пределы экрана 375px.
Замени px-ширины на max-width + w-full где нужно.
Добавь overflow-x: hidden на body если не стоит.
2. Touch-зоны — найди все интерактивные элементы: кнопки, ссылки, иконки-кнопки,
чекбоксы, radio. Для каждого проверь что min-height и min-width ≥ 44px.
Если элемент визуально меньше — добавь padding чтобы увеличить touch-зону
не меняя визуальный размер.
3. Формы и клавиатура — найди все формы с полями ввода.
Добавь padding-bottom на контейнер формы равный высоте мобильной клавиатуры
(~300px) чтобы кнопка Submit была видна при открытой клавиатуре.
Или используй CSS env(keyboard-inset-height) если поддерживается.
4. Навигация на мобиле — проверь нет ли хедера с горизонтальным меню
который отображается на 375px. Если есть — добавь bottom navigation bar
или hamburger menu для мобильного breakpoint (< 768px).Проверка 5. Логика переходов
AI генерирует экраны — но не всегда генерирует связи между ними. На показе заказчик нажимает кнопку и... ничего. Или попадает на экран который не соответствует контексту. Или кнопка «Назад» возвращает не туда.
Пройди основной флоу от начала до конца как пользователь. Не как дизайнер который знает структуру — как человек который видит это впервые.
Что проверять:
Каждый CTA ведёт куда должен. Кнопка «Создать» открывает форму создания, а не список. Кнопка «Подробнее» открывает детальную страницу нужного элемента, а не первого в списке.
Модалки и дроверы закрываются правильно. Крестик, клик вне области, кнопка «Отмена» — все три варианта должны работать. AI часто реализует только один.
Состояние сохраняется при навигации. Заполнил форму, перешёл на другой экран, вернулся — данные на месте или форма сброшена? Если сброшена — это должно быть явным.
Деструктивные действия имеют подтверждение. «Удалить», «Отменить заказ», «Очистить всё» — должен быть confirm-диалог. AI иногда пропускает его.
☐ Пройден полный основной сценарий без застреваний
☐ Все модалки закрываются тремя способами
☐ Деструктивные действия требуют подтверждения
☐ Кнопка «Назад» возвращает в логичное местоПромпт для Codex / Claude Code:
Проверь логику навигации и переходов в проекте.
1. Модалки и дроверы — найди все компоненты Modal, Dialog, Drawer, Sheet.
Каждый должен закрываться тремя способами:
— кнопка крестика или Cancel
— клик по оверлею за пределами компонента
— клавиша Escape
Добавь недостающие обработчики.
2. Деструктивные действия — найди все кнопки и функции с семантикой удаления,
отмены или необратимого изменения: delete, remove, clear, reset, cancel.
Каждое такое действие должно показывать confirm-диалог перед выполнением.
Добавь где отсутствует.
3. Навигация назад — найди все кнопки "Назад", Back, стрелку назад.
Проверь что router.back() или navigate(-1) ведёт в логичное место,
а не на несуществующий роут. Где нужно — замени на явный navigate('/нужный-путь').
4. Состояние форм — найди формы где пользователь вводит данные.
При навигации со страницы с незасохранёнными данными должен быть
предупреждающий диалог "Изменения не сохранены". Реализуй через
beforeUnload или unsaved changes guard.Проверка 6. Первое впечатление без контекста
Последняя проверка и самая важная. Ты смотришь на интерфейс с контекстом — ты знаешь что это за продукт, кто им пользуется, какую задачу решает каждый экран. Заказчик на показе видит это впервые.
Попроси кого-нибудь кто не участвовал в проекте открыть главный экран и за 30 секунд ответить на три вопроса:
- Что это за продукт?
- Что здесь можно сделать?
- Что нужно сделать первым?
Если хотя бы на один из вопросов нет ответа — иерархия или онбординг не работают.
Если некого попросить — пройди сам, но честно: закрой файл, открой его через час, смотри на главный экран не дольше 10 секунд.
☐ Назначение продукта понятно без объяснений
☐ Главное действие визуально выделено
☐ На экране нет элементов которые непонятно зачем нужны
☐ Новый пользователь знает что делать первымПромпт для Codex / Claude Code:
Проверь первый экран который видит новый пользователь (обычно /dashboard
или / после логина). Оцени по трём критериям и исправь проблемы:
1. Иерархия — есть ли один явный визуальный акцент на экране?
Если взгляд не знает куда идти или есть несколько одинаково ярких элементов —
понизь визуальный вес второстепенных через уменьшение font-size,
снижение контраста цвета или уменьшение размера.
2. Главный CTA — есть ли одна кнопка или действие которое явно выделяется
среди остальных? Она должна быть самым контрастным интерактивным элементом
на экране. Если таких кнопок несколько одного веса — сделай одну Primary,
остальные Secondary или Ghost.
3. Лишние элементы — найди элементы на главном экране которые не помогают
пользователю понять продукт или начать работу в первые 30 секунд.
Перечисли их и предложи: убрать, перенести в меню или показывать позже
(после первого действия пользователя).Итоговый чеклист
Шесть проверок, 24 пункта. На всё уходит 30–40 минут — гораздо меньше чем переделывать после показа.
Состояния
☐ Empty state с объяснением и действием
☐ Loading state — skeleton или стриминг, не спиннер
☐ Error state с конкретной причиной и действием
☐ Success state с заметным подтверждением
Консистентность
☐ Кнопки одного стиля на всех экранах
☐ Не больше 3-4 уровней типографики
☐ Одинаковые отступы у одинаковых элементов
☐ Одна иконочная библиотека
Реальный контент
☐ Длинные заголовки не ломают layout
☐ Большие числа помещаются в ячейки
☐ Карточки с частично заполненными данными выглядят нормально
☐ Отсутствующие изображения обработаны
Мобиль
☐ Нет горизонтального скролла на 375px
☐ Все интерактивные элементы минимум 44px
☐ Форма работает с открытой клавиатурой
☐ Навигация адаптирована под мобиль
Переходы
☐ Основной сценарий пройден без застреваний
☐ Модалки закрываются тремя способами
☐ Деструктивные действия требуют подтверждения
☐ Кнопка «Назад» ведёт в логичное место
Первое впечатление
☐ Назначение понятно без объяснений
☐ Главное действие выделено визуально
☐ Новый пользователь знает что делать первым
☐ Нет лишних элементов без понятной цели
