Как организовать AI-workflow для frontend-проекта

Начинать с контракта

Хорошая задача содержит цель, границы и способ проверки. Для интерфейса нужно указать маршрут, поддерживаемые размеры экрана, состояния, требования accessibility и файлы, которые нельзя менять. Если есть макет или скриншот — приложить его вместе с design tokens.

Цель: добавить карточку статьи на главную.
Границы: только index.html и styles.css.
Состояния: hover, focus-visible, mobile 360px.
Готово, когда: ссылки работают, axe не находит critical issues.

Такой контракт позволяет агенту отличить обязательное от вкусового и даёт понятную точку остановки.

Сначала исследование, потом запись

Перед изменениями агент должен найти существующие паттерны: похожий компонент, токены, тесты и правила маршрутизации. Для крупных задач полезен отдельный plan-этап без права редактирования. План легко проверить за минуту; неудачный патч на десятки файлов — заметно дольше.

После согласования работа идёт маленькими вертикальными срезами. Один компонент, один маршрут, одна проверка. Это уменьшает diff и позволяет быстро заметить неверное направление.

Браузер — часть тестовой системы

Frontend нельзя подтвердить только компиляцией. Агент должен открыть страницу, пройти ключевой сценарий с клавиатуры, проверить консоль, сделать снимок desktop и mobile. Для динамического интерфейса нужны loading, empty, error и long-content состояния.

• Скриншот подтверждает композицию, но не доступность.
• DOM snapshot подтверждает структуру, но не визуальный ритм.
• Автотест подтверждает поведение, но не ощущение интерфейса.

Надёжная проверка сочетает все три сигнала.

Завершение задачи

Перед передачей агент запускает форматирование, typecheck, тесты и сборку, затем суммирует изменения и риски. В отчёте нужны не слова «всё работает», а конкретные команды и результаты. Если часть проверки невозможна, это должно быть сказано прямо.

Человек просматривает diff, открывает основной сценарий и принимает архитектурные решения. После повторяющихся ошибок обновляется AGENTS.md или rule-файл. Так проект постепенно учит любого агента работать по своим правилам.