AI повторил скриншот, но интерфейс неудобен: как принимать UI
Проверяйте не только совпадение изображения, но и сценарии взаимодействия. Статичный скриншот не показывает клавиатурную навигацию, длинные значения, загрузку и ошибки формы.
Где появляется ошибка
Агент аккуратно воспроизвёл карточку заказа по макету с коротким именем. На реальных данных длинное название товара перекрывает кнопку, а сообщение об ошибке сдвигает форму за пределы экрана. На исходном скриншоте этих состояний нет. Требование «как на картинке» оставляет агенту слишком много предположений о том, что произойдёт после первого действия пользователя.
Рабочее решение
Составьте таблицу состояний: начальная загрузка, заполнение, валидация, отправка, ошибка и успех. Дайте короткий и длинный набор данных. Сначала проверьте основной пользовательский путь, затем визуальное соответствие. Зафиксируйте поддерживаемые размеры экрана и поведение при увеличении масштаба. Если реализация расходится с макетом ради доступности или существующего компонента, это решение нужно объяснить и согласовать, а не скрывать за похожим кадром.
Контрольные случаи
| Проверка | Ожидаемое поведение |
|---|---|
| Длинное название и узкий экран | Кнопка остаётся доступной, важные данные можно прочитать, горизонтальный скролл не возникает случайно. |
| Отправка пустой формы с клавиатуры | Ошибка понятна и связана с полем; пользователь может продолжить исправление без мыши. |
| Ответ сервера задержан и затем завершился отказом | Состояние загрузки заканчивается, повторная отправка имеет предсказуемое поведение. |
Если макет показывает только успешное состояние, заранее договоритесь, кто принимает остальные состояния формы. В противном случае агент может самостоятельно придумать поведение, которое противоречит существующим сценариям продукта.
Визуальные проверки зависят от шрифтов, браузера и данных. Сохраняйте условия снимка, чтобы отличать реальную регрессию от различий окружения; один удачный кадр не является приёмкой всей страницы.
При разработке интерфейсов с агентом полезно соединять постановку задачи, проверку поведения и визуальное ревью. В платном курсе Vibecoding: Claude Code, Codex, Cursor и agentic development можно продолжить изучение соответствующего инженерного направления. Перед покупкой сравните программу и открытые материалы со своей задачей.
Документация для проверки технических деталей: Практики Claude Code.
Следующий шаг: AI-разработка: разборы ошибок, изменений и проверки кода. По смежным вопросам: AI-агент меняет слишком много файлов: как сузить diff, AI исправил тест вместо бага: как заметить подмену.
