javascript

Как AI-копилоты изменили мой рабочий процесс во фронтенде — и где с треском провалились

  • пятница, 27 марта 2026 г. в 00:00:05
https://habr.com/ru/articles/1015256/

Полгода назад я решил провести эксперимент: месяц работать с AI-копилотами на максимум — Cursor, GitHub Copilot и ChatGPT — на реальном продакшн-проекте на React/Next.js. Не ради хайпа, а чтобы честно понять: это действительно ускоряет разработку или я просто трачу время на исправление чужих (нейросетевых) багов?

Спойлер: и то, и другое. Но дьявол, как всегда, в деталях.

Контекст

Я фронтенд-разработчик с пятилетним опытом. Основной стек — React, Next.js, TypeScript, Tailwind. Работаю в продуктовой команде из шести человек, проект — B2B-платформа с дашбордами, сложными формами и интеграцией с десятком внешних API.

До эксперимента мой подход к AI был скептическим: «Ну, автокомплит и автокомплит, ничего нового». Я ошибался — но не так, как думаете.

Где AI реально ускорил работу

Бойлерплейт и рутина: экономия 30–40% времени

Самый ощутимый эффект — генерация повторяющегося кода. Когда тебе нужен очередной CRUD-компонент для новой сущности, ты обычно копируешь предыдущий и правишь. AI делает это быстрее и, что важнее, без «забытого» поля в интерфейсе или пропущенного кейса в валидации.

Типичный пример: мне нужна была форма редактирования профиля компании с 14 полями, включая вложенные объекты (адрес, контакты, реквизиты). Я написал промт:

Создай React-компонент формы редактирования профиля компании.
Поля: name (string, обязательное), inn (string, 10 или 12 цифр), 
address (вложенный объект: city, street, building), 
contacts (массив: {type: 'email' | 'phone', value: string}).
Используй react-hook-form + zod для валидации, Tailwind для стилей.
TypeScript, строгая типизация.

Через 40 секунд я получил рабочий компонент на ~180 строк. Да, пришлось поправить пару моментов: AI использовал z.string().length(10) вместо z.string().regex(/^\d{10}$|^\d{12}$/) для ИНН, и забыл trim() на строковых полях. Но эти правки заняли 5 минут вместо 40 минут написания с нуля.

Написание тестов: из «потом напишу» в «уже готово»

Здесь произошёл самый неожиданный сдвиг. Я из тех, кто всегда «планировал написать тесты позже» — и это «позже» наступало через два спринта, когда контекст уже утерян.

С AI я начал писать тесты прямо в процессе разработки. Не потому что стал дисциплинированнее — просто это перестало быть мучительным. Скармливаешь компонент копилоту, просишь покрыть edge-кейсы, получаешь 15 тестов за минуту. Половину выбрасываешь, половину дорабатываешь — но покрытие растёт.

Конкретный пример: компонент <DataTable> с сортировкой, фильтрацией, пагинацией и виртуальным скроллом. Я бы руками написал 8–10 тестов на основные сценарии. AI сгенерировал 23, из которых 6 оказались бессмысленными (тестировали внутреннюю реализацию), но 4 ловили баги, о которых я бы не подумал: гонку состояний при быстром переключении страниц, некорректную сортировку при пустых значениях в колонке, и сброс скролла при изменении фильтра.

Рефакторинг легаси: «объясни и переделай»

У нас в проекте жил компонент на 600 строк с классовым синтаксисом React — ещё с тех времён, когда его писал предыдущий разработчик. Все боялись его трогать. Я скормил его в Cursor с промтом: «Разбей на отдельные хуки и компоненты, переведи на функциональный синтаксис, сохрани логику».

Результат был не идеален — AI не понял несколько неочевидных бизнес-правил, зашитых в componentDidUpdate. Но он дал хорошую структуру для декомпозиции, которую я потом доработал за полдня вместо запланированных трёх дней.

Где AI с треском провалился

Архитектурные решения: уверенно неправильно

Это главная проблема. AI генерирует код, который выглядит правильным, компилируется, проходит линтер — и при этом архитектурно ужасен.

Пример: я попросил реализовать систему уведомлений. Copilot предложил хранить состояние уведомлений в useState внутри <Layout>, прокидывать через пропсы вниз и вызывать addNotification через callback. Для приложения с тремя страницами — сойдёт. Для нашего проекта с 40+ роутами и вложенной структурой — это prop drilling ад.

Правильный подход (Zustand-стор + провайдер) AI предложил только когда я явно сказал: «Не используй пропсы, используй глобальный стейт-менеджер». То есть я должен был уже знать правильный ответ, чтобы получить его от AI. Это ключевой момент: AI усиливает существующую экспертизу, а не заменяет отсутствующую.

Server Components: галлюцинации уровня «бог»

Next.js App Router с React Server Components — это место, где AI-копилоты в 2025 году стабильно ломались. И я подозреваю, что к началу 2026-го ситуация стала лишь немного лучше.

Типичная ошибка: AI добавлял useState в серверный компонент. Или наоборот — оборачивал в 'use client' компонент, который прекрасно работал на сервере, просто потому что в нём был onClick (который нужно было вынести в дочерний клиентский компонент).

Ещё хуже — советы по data fetching. AI упорно предлагал useEffect + fetch в клиентских компонентах вместо серверного async/await. Когда я спрашивал «почему?», получал уверенное объяснение про «совместимость» и «надёжность». Звучало убедительно. Было неправильно.

Я завёл у себя правило: любой код, связанный с Server Components, AI-копилот может только дополнять, но не проектировать.

Кастомные хуки с запутанной логикой: хуже, чем ничего

Попросил AI написать хук useDebounceSearch, который:

  • дебаунсит ввод на 300мс,

  • отменяет предыдущий запрос при новом вводе,

  • показывает loading-состояние,

  • кеширует последние 5 результатов.

Получил 80 строк с тремя useEffect, двумя useRef и race condition, который проявлялся только при медленном соединении. AI создал AbortController в одном эффекте и пытался использовать его в другом, не учитывая, что React в Strict Mode вызывает эффекты дважды.

Мой ручной вариант на useSyncExternalStore + простой кеш-объект занял 35 строк и работал без багов. Время, потраченное на отладку AI-кода: ~2 часа. Время на написание с нуля: ~40 минут.

Мораль: чем сложнее логика с побочными эффектами, тем бесполезнее копилот.

Устаревшие API и библиотеки-призраки

Это классика, но всё равно неприятно. AI регулярно предлагал:

  • getServerSideProps вместо серверных компонентов в App Router,

  • next/router вместо next/navigation,

  • @next/font вместо встроенного next/font,

  • несуществующие пропсы в библиотеках (однажды уверенно предложил <Dialog onOpenChange={...}> для версии Radix, где этот проп ещё не существовал).

Каждый такой случай — это 10–15 минут на выяснение «почему не работает», проверку документации, откат и написание правильного варианта.

Что я изменил в рабочем процессе

После месяца эксперимента я не отказался от AI, но сильно поменял подход.

Правило трёх категорий. Все задачи я мысленно делю на три группы:

«Зелёные» — отдай AI. Бойлерплейт, типовые компоненты, тесты, утилитарные функции, регулярки, конвертация данных, CSS-раскладки. Здесь AI экономит 30–50% времени.

«Жёлтые» — начни с AI, проверь руками. Рефакторинг, интеграция с API, миграции. AI даёт хорошую стартовую точку, но нужна экспертная доработка.

«Красные» — пиши сам. Архитектура, сложные хуки с эффектами, серверные компоненты, всё, что связано с безопасностью и авторизацией. Здесь AI создаёт иллюзию решения, которая потом обходится дороже.

Промт как документация. Я стал писать промты так, как пишу ТЗ для джуниора: с контекстом, ограничениями и антипаттернами. «Не используй useEffect для получения данных», «Компонент должен быть серверным», «Не более 50 строк». Качество вывода выросло кратно.

Код-ревью стал важнее. Парадокс: с AI-копилотами я стал тратить больше времени на ревью. Раньше я ревьюил код коллег и свой. Теперь ещё и AI-код, который выглядит чисто, проходит линтер — но может содержать тонкие архитектурные ошибки. Мы в команде ввели правило: если в PR есть AI-сгенерированные куски, автор явно помечает их комментарием.

Цифры за месяц

Я не фанат «точных метрик продуктивности» (слишком много переменных), но субъективная картина такая:

  • Скорость написания кода: +25–30% на «зелёных» задачах, примерно так же на «жёлтых», −15–20% на «красных» (из-за времени на отладку AI-кода).

  • Количество тестов: выросло примерно вдвое. Не потому что стал дисциплинированнее — стало менее больно их писать.

  • Количество багов в продакшене: не изменилось. AI-баги заменили мои баги, примерно 1:1.

  • Удовлетворённость работой: выросла. Рутины стало меньше, на интересные задачи остаётся больше времени.

Выводы

AI-копилоты в 2026 году — это не «замена программиста» и не «бесполезная игрушка». Это мощный инструмент с неочевидными ограничениями.

Самый большой риск — не в том, что AI пишет плохой код. А в том, что он пишет правдоподобно выглядящий плохой код. Для джуниора это ловушка: кажется, что всё работает, а через месяц — технический долг, который никто не понимает, потому что его никто не писал.

Для опытного разработчика AI — это честный ускоритель. Но ровно в тех местах, где ты и так знаешь, что делать, и тебе нужно просто это сделать быстрее.

Если вы только начинаете использовать AI в разработке — начните с тестов и бойлерплейта. Не доверяйте ему архитектуру. И заведите привычку спрашивать себя: «Я бы написал этот код сам? Я понимаю каждую строку?» Если нет — удаляйте и пишите руками. Серьёзно.


А какой у вас опыт с AI-копилотами во фронтенде? Где они реально помогают, а где мешают? Интересно сравнить.