Вертикальный срез — маленький, но сквозной кусок продукта. В нашем примере это не просто «сверстать форму», а пройти путь: выбрать услугу → ввести контакт → отправить данные в тестовый обработчик → получить реальное состояние успеха или ошибки.
Полезно понимать четыре слоя, которые AI-инструмент может менять: HTML описывает элементы страницы, CSS — их расположение и внешний вид, JavaScript в браузере — интерактивность, сервер/backend — проверку и хранение данных. Секреты нельзя прятать в клиентский JavaScript: пользователь может получить код страницы.
Почему начинаем со сквозного сценария
Если сначала строить много страниц, дизайн-систему и все интеграции по отдельности, поздно обнаружится, что форма не отправляется или пользователь не понимает, что произошло. Один сквозной сценарий рано показывает стыки между интерфейсом, данными и логикой.
Сделайте по одному шагу за раз
- Покажите форму на странице. Проверьте заголовок, поля и кнопку на ширине телефона.
- Добавьте локальную проверку формы. Пустое имя и пустой контакт должны остановить отправку и подсказать, что исправить.
- Подключите тестовую функцию отправки. На этом этапе можно использовать mock, который возвращает успех или одну из ошибок.
- Покажите три состояния: идёт отправка, запрос принят, сервер не ответил.
- Запустите сценарий вручную и сравните с критериями из первого модуля.
- Зафиксируйте версию. Сохраните или commit только после проверки.
Просите агента вносить один слой за раз и не менять уже принятые части. После каждого шага посмотрите экран и diff. Скриншот показывает внешний вид, но не доказывает, что данные действительно отправляются.
Пример карточки ошибки
| Событие | Что делать интерфейсу | Что не делать |
|---|---|---|
| Поле обязательно, но пустое | Показать, какое поле заполнить | Отправлять запрос и очищать форму |
| Запрос выполняется | Заблокировать повторное нажатие, показать статус | Создавать несколько одинаковых заявок |
| Запрос успешен | Показать подтверждение и очистить форму по выбранному правилу | Показывать вымышленный «успех» до ответа |
| Сервер вернул ошибку | Сохранить введённое и дать повторить | Показать внутренний stack trace |
Практика
- Ведите журнал реализации: шаг → изменённые файлы → результат проверки.
- Соберите только один путь из брифа.
- Проверьте его в трёх состояниях и на настольной/мобильной ширине.
- Попросите второго человека выполнить путь без ваших подсказок.
- Запишите один обнаруженный дефект и исправьте его отдельной маленькой задачей.
Артефакт: работающий vertical slice и журнал изменений. Критерий готовности — пользователь проходит путь и получает правдивое подтверждение результата.
Самопроверка
- Система получает и возвращает реальный результат или пока имитирует его?
- Понятно ли, что видит пользователь во время загрузки и при сбое?
- Можно ли отменить последнее изменение?