Как AI-копилоты изменили мой рабочий процесс во фронтенде — и где с треском провалились
- пятница, 27 марта 2026 г. в 00:00:05
Полгода назад я решил провести эксперимент: месяц работать с AI-копилотами на максимум — Cursor, GitHub Copilot и ChatGPT — на реальном продакшн-проекте на React/Next.js. Не ради хайпа, а чтобы честно понять: это действительно ускоряет разработку или я просто трачу время на исправление чужих (нейросетевых) багов?
Спойлер: и то, и другое. Но дьявол, как всегда, в деталях.
Я фронтенд-разработчик с пятилетним опытом. Основной стек — React, Next.js, TypeScript, Tailwind. Работаю в продуктовой команде из шести человек, проект — B2B-платформа с дашбордами, сложными формами и интеграцией с десятком внешних API.
До эксперимента мой подход к AI был скептическим: «Ну, автокомплит и автокомплит, ничего нового». Я ошибался — но не так, как думаете.
Самый ощутимый эффект — генерация повторяющегося кода. Когда тебе нужен очередной 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 генерирует код, который выглядит правильным, компилируется, проходит линтер — и при этом архитектурно ужасен.
Пример: я попросил реализовать систему уведомлений. Copilot предложил хранить состояние уведомлений в useState внутри <Layout>, прокидывать через пропсы вниз и вызывать addNotification через callback. Для приложения с тремя страницами — сойдёт. Для нашего проекта с 40+ роутами и вложенной структурой — это prop drilling ад.
Правильный подход (Zustand-стор + провайдер) AI предложил только когда я явно сказал: «Не используй пропсы, используй глобальный стейт-менеджер». То есть я должен был уже знать правильный ответ, чтобы получить его от AI. Это ключевой момент: AI усиливает существующую экспертизу, а не заменяет отсутствующую.
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 минут.
Мораль: чем сложнее логика с побочными эффектами, тем бесполезнее копилот.
Это классика, но всё равно неприятно. 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-копилотами во фронтенде? Где они реально помогают, а где мешают? Интересно сравнить.