Кейс: Вайбкодинг большой коммерческой админки. Взгляд фронтендера Мы не просто «попросили нейронку сделать красиво». Мы загнали её в жесткие рамки. Рассказываю, как мы с командой строили админ-панель через AntiGravity после сгенерированного дизайна в Figma Make. Наша стратегия: Мы не давали ИИ задачу целиком («Сделай админку»). Мы шли итерациями, короткими промптами. Принцип простой: один промпт — одно законченное действие — проверка. 1. Подготовка (До того, как открыли редактор) Мы написали документацию и Skills (интсрукции). Промпты выглядели как чек-лист для джуниора: — UI/верстку трогать запрещено. — Бэкенд не подключаем. — Рефакторинг не делаем. Итог: ИИ не галлюцинировал, не ломал макет и не менял логику по своему желанию. 2. Настройка фундамента (Техническая часть) Мы заставили ИИ настроить контроль качества кода (Tooling): — TypeScript: Включить строгий режим (чтобы не было глупых ошибок). — Prettier: Настроить форматирование. — ESLint: Включить проверку стиля. Каждый этап закрывали тестами: typecheck → build. Если сборка падала — ИИ переделывал сразу. Где ИИ не справился (Честно о минусах) Несмотря на бодрый старт, магии не случилось. Фронтендеру пришлось допиливать руками: 1. Зависимости: ИИ не зафиксировал версии библиотек (пришлось выравнивать, чтобы у всей команды было одинаково). 2. Грязь в коде: Даже после команды «поправь ошибки линтера», остались мелкие предупреждения (пустые заголовки, лишние хелперы). Дочищали сами. 3. Конфиги: Не донастроил окружение до идеала. Главный инсайт: Контекст у нейронки начинает «плыть» уже после 4-го промпта. Она начинает забывать, что было в начале. Агент сам ходил в админку и тестировал сценарии, но наа smoke тестах агент зависал и не продвигался дальше. Вывод Архитектора: Формат «Короткая итерация → Ручная проверка → Следующий шаг» — самый рабочий. ИИ шикарно снимает рутину старта и написания бойлерплейта. Но «релизное качество» (чистота кода, версии, безопасность) — это всё ещё зона ответственности человека. Вайбкодинг ускоряет, но не заменяет инженера.