От быстрого прототипа к production-ready: как системный подход с ИИ-агентом меняет разработку UI
Создание сложного UI-компонента, такого как доступный DatePicker, с помощью ИИ требует не просто генерации кода, а системного подхода с четким циклом проектирования и верификации.
Создание надежного и доступного DatePicker для React с помощью ИИ оказалось сложной задачей. Как пишет Habr, изначальный подход — дать ИИ четкий запрос, получить 80% кода и доработать остальное вручную — ведет к скрытым проблемам. Модель может сгенерировать структуру календаря, ARIA-атрибуты, базовую клавиатурную навигацию и логику работы с датами. Но затем начинаются сложности: фокус становится нестабильным, возникают конфликты обработчиков событий, а для работы со скринридерами нужно тщательное тестирование. Небольшое изменение может сломать весь компонент, и код оказывается неготовым к продакшену.
В предыдущей статье автор описывал опыт создания WCAG-доступного DatePicker’а с помощью Claude. На это ушло три дня. В новом материале сравниваются две методологии. Первый подход — схема 80/20, где основную работу делает ИИ. Второй, системный подход, предполагает использование ИИ-агента в строгом цикле проектирования. Цикл включает создание PRD, декомпозицию задач, установку правил для агента, внешнюю верификацию, написание тестов на Vitest и Playwright, сборку через Vite и проверку типов. Главное правило: агент не переходит к следующему шагу, пока не пройдет текущий. Такой процесс смещает фокус с генерации кода на управление архитектурой и качеством.
Практическая реализация системного подхода дала результаты. В работе над компонентом было создано 9 отдельных задач, для решения которых агент выполнил 4 итерации. Внешний верификатор (другая LLM) проверил 8 файлов, обнаружив 785 проблем. После исправлений код прошел 94 теста. Общий объем сгенерированного кода — 8509 строк, из которых разработчик изменил вручную 804 строки. Было создано 7229 строк кода для тестов, что подчеркивает важность автоматизированной проверки. Ключевое отличие: разработчик перестал быть просто писателем кода, превратившись в архитектора, который контролирует замысел, контракты между компонентами и стоимость будущих изменений.
Этот кейс показывает эволюцию роли ИИ в инженерных процессах — от инструмента для прототипирования до системного участника строгого цикла. Попытка сэкономить время, доверив ИИ 80% работы в случае со сложными компонентами, оборачивается дополнительными затратами на отладку. Напротив, инвестиции в настройку процесса, где ИИ-агент действует по правилам и проходит многоэтапную верификацию, окупаются созданием надежного продукта. Меняется парадигма: ценность разработчика теперь не в скорости написания строк кода, а в способности проектировать системы, формулировать четкие требования и выстраивать процессы, где ИИ становится предсказуемым исполнителем.

