Почему вайб-кодинг ломается на пятой фиче

Чистый вайб-кодинг неизбежно приводит к потере контроля над проектом уже в районе пятой фичи. Сегодня написание строк кода вручную отходит на второй план, уступая место системному проектированию ИИ-архитектуры и управлению автономными агентами. Этот материал раскрывает полный практический цикл создания масштабируемого мобильного приложения — от настройки промптов и развертывания Expo до интеграции голосового ИИ OpenAI Realtime и автоматического аудита безопасности.

🚀 Эволюция разработки: от «вайб-кодинга» к инженерной дисциплине 0:00

Большинство гениальных идей для мобильных приложений никогда не увидят свет, оставаясь забытыми в заметках смартфонов. Раньше путь от задумки до рабочего прототипа на экране требовал до полугода изнурительной работы, но генеративный ИИ радикально изменил это уравнение: теперь рабочее приложение можно запустить всего за один уикенд. Тем не менее, лавинообразный рост доступности нейросетей породил опасную иллюзию. Популярные видеоуроки демонстрируют создание эффектных проектов за 20 минут, однако при попытке построить реальный коммерческий продукт вся система неизбежно деградирует и рассыпается уже к третьей или пятой фиче.

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

Философия практического вайб-кодинга 1:44

В начале 2026 года один из основателей OpenAI Андрей Карпати ввел в обиход термин «вайб-кодинг» (Vibe Coding), описывающий процесс, когда инженер полностью передает написание кода нейросети, фокусируясь исключительно на формулировании высокоуровневых желаний. Это спровоцировало раскол в индустрии: одни увидели в этом неизбежное будущее, другие — прямую дорогу к созданию «спагетти-кода». На практике чистый вайб-кодинг ослепляет ложной скоростью: первые несколько функций создаются мгновенно, но затем любая попытка исправить локальный баг вызывает каскад калечащих поломок, оставляя разработчика один на один со сложным кодом, который он не способен объяснить.

Чтобы решить эту проблему, была сформулирована концепция практического вайб-кодинга. Она сохраняет темп ИИ-разработки, но накладывает на нее минимально необходимый каркас ограничений. Базовое правило здесь — двигаться строго пошагово, изолированно создавая и верифицируя каждую отдельную фичу до перехода к следующей.

Центральным элементом управления в этой системе выступает специальный конфигурационный файл метаданных agents.md, размещаемый в корне проекта. Современные ИИ-ассистенты вроде Cursor обучены считывать этот файл в первую очередь для извлечения контекста. При отсутствии единого регламента инженеру приходилось бы транслировать описание стека в каждом новом диалоге. Стоит упустить эту деталь, и ИИ заполнит пробелы самостоятельно, из-за чего через пару десятков промптов проект станет похож на лоскутное одеяло. Ранее в разговоре авторы упомянули процесс инициализации чистого проекта и базовое наполнение этого конфигурационного файла, детальный разбор которых вынесен в следующую главу.

Структурирование ИИ-промптов и поведенческих ограничений 8:51

Если глобальный контекст и правила игры фиксируются на уровне проекта, то за реализацию конкретной бизнес-логики отвечает точечный промпт. Главная ошибка разработчиков заключается в отправке размытых запросов в надежде на интуицию нейросети. В результате ИИ выдает код, который выглядит правдоподобно, но ломает смежные модули. Решением является не раздувание объема инструкций, а внедрение строгой четырехчастной структуры промпта.

Каждый эффективный запрос к ИИ-разработчику должен содержать четыре обязательных элемента в строго определенном порядке:

Принудительная ссылка на правила: Первые строки обязаны требовать от ИИ первоочередного прочтения файла правил (agents.md) и его неукоснительного соблюдения. Нейросети не помнят контекст предыдущих сессий по умолчанию, поэтому данная директива возвращает их в рамки установленных стандартов.
Одна изолированная задача: Промпт должен быть строго сфокусирован на одной фиче, одном экране или одной интеграции. Слияние нескольких разнородных задач ради мнимой экономии времени недопустимо.
Поведенческие ограничения (Constraints): Критически важный блок, защищающий работоспособность существующей кодовой базы. Инструкции в духе «сохраняй текущий дизайн интерфейса» или «не раскрывай секретные ключи в коде» выступают в качестве институциональной памяти проекта.
Визуальные или технические референсы: Прикрепление изображений, макетов или скриншотов. Модели значительно точнее считывают пространственное расположение элементов и визуальную иерархию с картинок, нежели из текстовых описаний.

Проектируя ограничения, инженер должен думать не о синтаксисе кода, а о конечном поведении компонента. Например, универсальное ограничение «если логика содержит неопределенность, остановись и задай уточняющий вопрос» пресекает деструктивную самодеятельность нейросети.

Даже при отсутствии визуального слоя (при проектировании баз данных или авторизации) промпт полностью переводится на рельсы описания строгого пользовательского поведения и создания временных тестовых утилит. Ранее в разговоре бегло упоминались интеграция систем аутентификации Clerk, аудио-сервисов Stream и аналитики PostHog, чья нативная архитектура будет подробно разобрана в последующих главах.

Серьезным вызовом для практического вайб-кодинга остается проблема устаревания знаний ИИ, чья обучающая выборка может отставать от релизов на год. В таких условиях нейросеть часто генерирует код с использованием устаревших методов. Эффективный выход — копирование актуальной markdown-документации с сайта вендора и ее прямая вставка в тело промпта после основных инструкций через разделитель. В качестве альтернативы современные инструменты поддерживают установку официальных ИИ-скиллов (agent skills), автоматически снабжающих модель свежими спецификациями API.

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

🚀 Старт разработки: от чистого листа до ИИ-инструкций 25:01

Когда технический стек определен, наступает момент перехода от теории к практике. В современной мобильной разработке 2026 года этот процесс начинается не с написания сотен строк кода, а с правильной настройки окружения, которое будет «общаться» с вашим ИИ-агентом.

Инициализация через Expo CLI и магия Expo Go 25:14

Первый шаг — запуск Metro bundler, который компилирует и раздает код вашего React Native приложения. После выполнения команды инициализации в терминале появляется QR-код и список горячих клавиш: A для Android-эмулятора, I для iOS-симулятора и R для перезагрузки.

Однако самым эффективным способом тестирования остается Expo Go. Это мобильное приложение позволяет видеть результат разработки на реальном устройстве в режиме реального времени.

«Это самый простой способ разработки: вы сканируете QR-код камерой смартфона и получаете мгновенные обновления при каждом сохранении кода без необходимости делать полную сборку приложения».

Для корректной работы важно, чтобы телефон и компьютер находились в одной Wi-Fi сети, а VPN был выключен. Чтобы избавиться от лишнего «мусора», который Expo генерирует по умолчанию, используется команда npm run reset project. Она удаляет демонстрационные файлы, оставляя абсолютно чистый холст. Подтверждением того, что все настроено верно, станет простая надпись «Duolingo clone» в файле app/index.tsx, мгновенно отобразившаяся на экране смартфона.

Файл agents.md: как задать ИИ «личность» разработчика 28:34

Ключевым отличием современной разработки от подходов прошлых лет является создание файла agents.md в корне проекта. Это не просто документация, а глобальный свод инструкций для вашего ИИ-агента. Если обычный ИИ дает общие ответы, то агент, ограниченный правилами этого файла, превращается в узкоспециализированного эксперта.

В agents.md фиксируются четыре критических аспекта:

Роль: Мы определяем ИИ как «Эксперта React Native, ориентированного на практическое обучение». Это заставляет его предлагать чистые решения без избыточной абстракции.
Стек и философия: Список используемых библиотек и правило «Build the smallest useful version first» (создавай сначала минимально полезную версию).
Правила принятия решений: Запрет на установку новых библиотек без явного разрешения пользователя.
Специфические исключения: Например, NativeWind некорректно работает с SafeAreaView через пропс className — это знание, полученное на опыте, вносится в файл один раз, чтобы ИИ больше никогда не совершал эту ошибку.

Ранее в разговоре упоминались концепции «вайб-кодинга», и именно здесь они обретают структуру. Чтобы усилить агента, в 2026 году используются Agent Skills — открытые наборы инструкций для конкретных задач. Через команду npx skills add мы интегрируем навыки для работы с Expo, нативной версткой и CI/CD, что позволяет ИИ-инструментам вроде Claude или Cursor понимать контекст проекта на уровне Senior-разработчика.

Интеграция NativeWind v5: стилизация в стиле Tailwind 37:50

Для стилизации интерфейса в проекте используется NativeWind v5. Это мост, который позволяет использовать привычные утилитарные классы Tailwind CSS в мобильной среде. Даже если версия библиотеки находится в пре-релизе, ментальная модель остается стабильной: те же классы, та же логика, что и в веб-разработке.

Настройка NativeWind — идеальный пример того, как делегировать «грязную работу» ИИ. Вместо ручного редактирования babel.config.js или metro.config.js, мы открываем интегрированное окно агента (Command+Shift+I) и просим его выполнить установку, основываясь на документации.

При работе с агентом важно соблюдать два правила:

Всегда начинать промпт с фразы «Прочитай agents.md и строго следуй ему».
Начинать новую сессию для каждой крупной задачи, чтобы «протухший» контекст не путал модель.

В качестве рабочего инструмента рекомендуется связка Claude 3.5 Sonnet с включенным режимом «Thinking». После того как агент проанализирует структуру проекта и установит зависимости, проверка работоспособности занимает секунды. Достаточно добавить элементу Text класс text-indigo-600, и цвет мгновенно изменится. Это освобождает разработчика от рутины, позволяя сосредоточиться на архитектуре и пользовательском опыте, к разработке которого и приступают далее, внедряя дизайн-систему.

🎨 Внедрение дизайн-системы и первый интерфейс приложения 50:21

Системный подход: глобальные токены и ИИ-архитектура стилей 50:21

Разработка современного мобильного приложения под маркой Lingua переходит на качественно новый этап — создание единого визуального языка. Вместо ручного прописывания стилей для каждого компонента разработчик доверяет ИИ-агенту масштабную задачу: развернуть полноценную дизайн-систему на основе ранее подготовленных текстовых инструкций и изображений. Нейросеть считывает конфигурацию проекта и пошагово внедряет тему оформления во все ключевые файлы.

При развертывании визуального фундамента ИИ-агент автоматически модифицировал и настроил следующие элементы проекта:

globals.css — стал единым источником правды для всей визуальной экосистемы и слоя дизайн-токенов приложения.
Глобальный Layout — обеспечил бесшовную загрузку и системное отображение кастомного шрифта Poppins.
Константы изображений (constants/images) — централизовали экспорт всех медиа-ассетов для удобного повторного использования.
metro.config.js — получил обновленные опции для корректной интеграции компилятора NativeWind.

Особый практический интерес вызывает процесс кастомизации сгенерированных стилей. Изначально нейросеть применила строгую методологию, создав утилиты с длинными префиксами вида typo__h1 для заголовков. Стремясь к максимальной лаконичности кода, автор отправляет ИИ короткий уточняющий промпт с просьбой упростить именование. Нейросеть мгновенно адаптируется и переписывает классы до лаконичного H1. При этом для кастомных цветов приложения — таких как фирменный фиолетовый (lingua purple) или глубокий синий (lingua deep blue) — префикс был сохранен, чтобы разработчик всегда мог легко отличить их в кодовой базе,.

ИИ-агент также предоставляет четкое архитектурное обоснование разделения стилей. JavaScript-константы создаются параллельно CSS-переменным из-за специфики React Native: некоторые нативные компоненты (например, SafeAreaView) нестабильно работают с инлайн-классами NativeWind, поэтому для них безопаснее использовать классические JS-объекты, а не хардкодить строковые значения. Завершив базовую настройку, разработчик через облачную сессию Cloud Code поручает ИИ отправить изменения в новый репозиторий React Native Lingua на GitHub,. Для контроля качества кода к проекту подключается инструмент автоматического ИИ-ревью Code Rabbit, после чего автор вручную создает рабочую ветку development командой git checkout -b.

Экран приветственного онбординга: от промпта до идеального UI 58:20

Переход к уроку по созданию интерфейса стартового экрана (Onboarding UI) наглядно демонстрирует скорость ИИ-разработки. По оценке автора, верстка такого экрана вручную — с точным позиционированием элементов и адаптацией под разные дисплеи — заняла бы у опытного программиста не менее 30 минут. С помощью готовых промптов из папки материалов этот процесс сокращается до считанных мгновений.

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

Запустив генерацию, разработчик получает готовый результат: ИИ регистрирует новый роут в index.tsx, обновляет корневой макет приложения и верстает саму страницу онбординга, бережно обернув ее в SafeAreaView для правильного отображения на любых смартфонах. При первой проверке интерфейса по нажатию клавиши «R» для перезапуска сборщика верстка выглядит отлично, но вскрываются классические нюансы ИИ-генерации.

В процессе тестирования экрана онбординга автор столкнулся с двумя несовершенствами ИИ-верстки, которые потребовали точечного вмешательства:

Проблема с ассетами: ИИ попытался симулировать сложные CSS-облачка для диалогов, поскольку фирменный маскот mask_welcome не содержал их изначально, в отличие от общего дизайн-макета.
Избыточность стилей: Нейросеть перестраховалась и сгенерировала громоздкие конструкции StyleSheet.create для обычных текстовых блоков и картинок, проигнорировав установленный в проекте синтаксис Tailwind.

Процесс доработки превращается в элегантный и быстрый диалог. Сначала автор отправляет скриншот смещенной картинки, и нейросеть аккуратно центрирует маскота по средней линии экрана. Затем следует второе точечное исправление: ИИ просят строго следовать гайдлайнам проекта и использовать StyleSheet исключительно для проблемных нативных компонентов вроде SafeAreaView, переведя остальной текст и изображения на чистый NativeWind. Спустя минуту код становится образцовым: в стилях остается лишь тень, а вся остальная верстка уходит в лаконичные инлайн-классы.

Готовая фича отправляется в Git с коммитом implement the onboarding screen. При создании Pull Request в GitHub свою работу начинает Code Rabbit, который генерирует подробное саммари изменений для команды и выдает критическое замечание: главная кнопка «Get Started» на данный момент является нефункциональной и никуда не ведет. Автор закрывает это замечание, поясняя, что кнопка свяжет онбординг с экранами аутентификации, разработка которых запланирована на следующем этапе.

🔐 Полноценная авторизация через Clerk и локальная архитектура данных 1:15:41

Интеграция системы аутентификации через сервис Clerk 1:15:41

Переход от прототипа к полноценному приложению начинается с замены моковых данных реальной, безопасной системой авторизации. В качестве провайдера аутентификации авторы выбирают сервис Clerk. В панели управления Clerk создается новое мобильное приложение под названием JSM Lingua. Изначально интерфейс предполагает широкую поддержку социальных сетей, однако для MVP-версии разработчики решают ограничиться авторизацией по Email OTP (одноразовым кодам) и через учетную запись Google, убирая лишние кнопки из текущего UI. Все секретные ключи окружения переносятся в изолированный файл .env в корне проекта.

Процесс интеграции существенно ускоряется благодаря использованию ИИ-ассистента и концепции «agent skills». Вместо ручной настройки разработчик устанавливает специализированные навыки для агента через терминал с помощью команды mpx skills add clerk skills, выбирая базовые фичи и вебхуки для синхронизации данных в реальном времени. Агент получает контекст официальной документации Clerk Expo SDK, скопированной напрямую из браузера в формате Markdown. На обработку архитектуры, системных требований и планирование изменений у искусственного интеллекта уходит около 380 секунд размышлений и еще 80 секунд на формирование финального плана внедрения.

В результате работы ИИ-агента структура проекта претерпевает важные изменения:

Корневой компонент (layout) оборачивается в ClerkProvider.
Для безопасного хранения сессий на устройстве настраивается токен-кэш на базе встроенного плагина Expo Secure Store.
Внедряются защищенные роуты (Auth Guards): неавторизованные пользователи автоматически перенаправляются на экран онбординга.

Реализованная система проверяется на практике. При регистрации по Email система Clerk автоматически валидирует сложность пароля, сверяя его по базам утекших в сеть данных, и отправляет на почту шестизначный код верификации (например, 692117). Вход по OTP работает без пароля: пользователь вводит email, запрашивает код и мгновенно попадает в приложение.

При тестировании интеграции с Google возникает ошибка, связанная с отсутствием пакета clerk-expo-oauth-session для реализации SSO-потока. Разработчик передает текст ошибки в окно Claude, и проблема решается менее чем за 10 секунд благодаря установке недостающей зависимости. В завершение настройки через дашборд Clerk активируются Facebook и Apple Auth с поддержкой нативного Face ID на iOS-устройствах. Все изменения фиксируются в Git-репозитории с коммитом implement auth functionality through clerk.

Архитектура локальной типизации обучающего контента 1:27:11

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

ИИ-агент генерирует комплексную систему интерфейсов TypeScript для трех ключевых сущностей: языка (Language), учебного блока (Unit) и урока (Lesson). Архитектура включает в себя типы активности (activity types) — лексические тесты, переводы и задания с множественным выбором. Каждая карточка слова (vocabulary item) строго описывает структуру, содержащую само слово, перевод, транскрипцию для произношения и эмодзи.

На старте создается демонстрационный набор контента для четырех языков: испанского, французского, японского и немецкого. Разработчик вносит важное улучшение в код: вместо стандартных эмодзи-флагов он внедряет CDN-сервис flagcdn.com, формирующий URL изображения на основе кода языка. Для геймификации процесса обучения по аналогии с Duolingo в структуру уроков закладываются цели (lesson goals) и награды в виде очков опыта (XP rewards). Например, первый юнит для испанского языка получает название "Greetings and basics" и привязанные ID уроков.

Когда эти данные связываются с интерфейсом выбора языка, проект проходит автоматическое код-ревью через инструмент Code Rabbit. Ранее в разговоре они касались настройки стилизации интерфейса, и на основе замечаний робота-ревьюера разработчик оперативно вносит финальные правки с помощью ИИ:

Неподдерживаемые на уровне контента корейский и китайский языки временно комментируются в коде.
Статичные стили из старых StyleSheet полностью переводятся на глобальные классы NativeWind для консистентности проекта.

Управление персистентным состоянием через Zustand и AsyncStorage 1:38:56

Разработанный экран выбора языка выполняет свои функции в интерфейсе, но у приложения остается критическая уязвимость: оно не запоминает выбор пользователя. При любой принудительной перезагрузке приложения (которую на симуляторе можно вызвать встряхиванием устройства и нажатием кнопки "Reload") весь локальный стейт полностью сбрасывается. Для решения проблемы персистентности данных авторы внедряют связку Zustand и AsyncStorage.

Zustand выступает в роли легковесной и быстрой библиотеки управления состоянием. Она заменяет собой громоздкий бойлерплейт в стиле Redux и позволяет различным компонентам приложения совместно использовать данные без необходимости бесконечной передачи пропсов (props drilling). Zustand хранит текущее состояние приложения прямо в оперативной памяти устройства.

Для долгосрочного хранения данных используется AsyncStorage — локальное асинхронное хранилище формата «ключ-значение». Оно идеально подходит для сохранения нечувствительных данных, таких как выбранный язык, прогресс пройденных уроков или настройки интерфейса. Разработчик отмечает, что крупнейшие технологические компании, включая WhatsApp, используют аналогичный подход, сохраняя основной массив данных локально на смартфонах пользователей.

Финальная схема автоматизации выглядит следующим образом: Zustand управляет выбранным языком в памяти во время текущей сессии, а плагин персистентности (persist plugin) автоматически синхронизирует этот стейт с AsyncStorage. При следующем холодном запуске приложения Zustand самостоятельно считывает сохраненный ключ из AsyncStorage и восстанавливает языковой контекст, не требуя повторных действий от пользователя.

📱 Создание кастомной навигации и интерфейса главного экрана 1:45:27

Разработка кастомной нижней панели навигации 1:45:27

Настоящий мобильный опыт всегда строится вокруг первичной навигационной структуры, роль которой в разрабатываемом приложении выполняет нижний таб-бар (bottom tab layout). Такой паттерн проектирования интерфейсов обусловлен исключительно эргономикой мобильных устройств: пользователю гораздо удобнее нажимать на элементы в нижней части экрана большим или указательным пальцем, чем тянуться к самому верху дисплея. Навигационная панель распределена между пятью ключевыми экранами системы: главная страница (Home), раздел обучения (Learn), разговорный ИИ-учитель (AI Teacher), чат (Chat) и профиль пользователя (Profile).

Основополагающий принцип продвинутого вайб-кодинга на этом этапе заключается в жесткой изоляции задач. Автор намеренно фокусируется исключительно на маршрутизации, интеграции табов и анимационном поведении, оставляя наполнение экранов на потом. Попытка упаковать навигационную систему, сложные анимации и интерфейсы экранов в рамки единого ИИ-промпта неизбежно делает генерацию кода менее предсказуемой и критически усложняет последующий дебаг.

Перед написанием кода ИИ-агент потратил около 3 минут на комплексное планирование архитектуры и создание пошагового плана. Согласно исходному дизайну, активный таб должен визуализироваться внутри цветного круга, отображая исключительно иконку без подписи, в то время как неактивные элементы сохраняют и иконку, и текстовую метку. Изначально предложенная искусственным интеллектом «пружинящая» (springy) анимация показалась автору несовершенной. По уточняющему запросу ИИ заменил переходы, сделав движение активного круга строго линейным и плавным, что обеспечило более быстрое и естественное ощущение от интерфейса. В процессе кастомизации возникла проблема с пустым белым пространством под навбаром; однако принудительное смещение панели вниз привело к тому, что левый край иконки начал соприкасаться с границей экрана, из-за чего автор предпочел откатить код к предыдущей стабильной версии через историю контекстного окна.

Проектирование и верстка главного экрана 1:51:34

Сформировав стабильный каркас навигации, команда перешла к сборке дашборда домашней страницы, специфика которой заключается в агрегации данных из множества разрозненных источников. Экран объединяет в единый интерфейс контекст авторизации Clerk, выбранный язык из Zustand, а также массив учебного контента для визуализации текущего прогресса и планов на день.

В процессе генерации верстки ИИ-агент продемонстрировал автономность, самостоятельно исправив синтаксическую ошибку импорта: он перенаправил вызов из @clerk/clerk-expo вместо ошибочного пути clerk/clerk-expo. Это произошло благодаря превентивным правилам валидации типов, зафиксированным разработчиками в конфигурационном файле agents.md. Для обслуживания логики дашборда ИИ создал хранилище learningStore на Zustand, инкапсулирующее персистентное tracking-состояние для очков опыта (XP), ежедневных целей и стрика активности.

Поскольку в тестовом профиле был активен французский язык, экран отобразил персонализированное приветствие с именем из Clerk: «Hello JavaScript». Для достижения идеального визуального баланса и плотности контента автор принял решение убрать лишнюю карточку «Next Up», чтобы все значимые блоки гарантированно умещались на одном экране без вертикального скролла. Изначально ИИ применил классический StyleSheet для стилизации элементов, однако зная, что ИИ-ревьюер Code Rabbit обязательно подсветит это как недочет, автор сразу же приказал ИИ перевести компоненты View, Text, Image и TouchableOpacity на утилитарные классы NativeWind/Tailwind, оставив стандартные стили исключительно для безопасной зоны SafeAreaView.

Инспекция кода и исправления от Code Rabbit 1:56:53

После отправки изменений в удаленный репозиторий через Git, команда задействовала ИИ-расширение Code Rabbit для автоматического ревью созданного пулл-реквеста непосредственно в интерфейсе GitHub. Инструмент обнаружил неочевидную, но критическую уязвимость, связанную с жизненным циклом приложения на холодном старте.

Проблема заключалась в том, что логика перенаправления успевала отработать до завершения гидратации асинхронного хранилища Zustand из AsyncStorage. Из-за этого авторизованных пользователей с уже настроенным языком ошибочно отправляло на экран стартового выбора языка. Чтобы изолировать этот баг, ИИ-агент по подсказке ревьюера переписал корневой файл app/index.tsx, заменив участок кода от верхней константы до оператора if и внедрив проверку useLanguageStore.persist.hasHydrated(), что позволило блокировать редирект до полной готовности данных Clerk и Zustand.

Дополнительно Code Rabbit выдал еще несколько важных рекомендаций:

Добавление доступности (accessibility semantics) для корректной работы экранных дикторов и ассистивных технологий.
Внедрение математической защиты от деления на ноль при расчете заполнения индикатора прогресса: если дневная цель (daily goal) по какой-то причине оказывалась равна нулю, вычисление XP-прогресса возвращало значение NaN, ломая интерфейс.

ИИ-агент мгновенно интегрировал исправление прогресс-бара, добавив логическое условие возврата к нулю в случае некорректных вычислений в файле tabs/index. Замечание о возможной потере фиксированной ширины табов при смене ориентации экрана авторы сознательно проигнорировали, поскольку большинство подобных приложений используются исключительно в вертикальном режиме. Завершив сессию правок, команда запушила финальный коммит с исправлением багов и перешла к следующему этапу разработки.

📱 Автоматизированное внедрение продуктовой аналитики через PostHog AI Wizard 2:05:37

Интеллектуальный анализ и планирование аналитической среды 2:05:37

Современная разработка мобильных приложений требует глубокого понимания пользовательского опыта с первых минут запуска. Использование встроенного инструмента PostHog AI Wizard позволяет полностью автоматизировать этот процесс, избавляя разработчика от рутинной настройки метрик вручную. Искусственный интеллект начинает работу с формирования четкого плана исследования доступных событий и свойств, после чего самостоятельно переходит к поиску существующих инсайтов и дашбордов. Главное преимущество такого подхода заключается в том, что система не просто выдает сухой текст, а генерирует полноценные интерактивные дашборды для визуализации данных в реальном времени. На основе первичного запроса ИИ-мастер мгновенно выводит ключевые метрики, такие как количество активных пользователей (Daily Active Users) и уровень удержания (Retention). В ходе демонстрационного анализа PostHog сразу же выявляет критические проблемы проекта: снижение активности аудитории и низкий уровень удержания, вызванный отсутствием идентификации пользователей и пробелами в инструментарии трекинга.

Подключение MCP-сервера для ИИ-агентов 2:07:24

Важным шагом в построении сквозной экосистемы разработки становится интеграция специального MCP-сервера (Model Context Protocol). По завершении первичного анализа ИИ-мастер предлагает установить этот компонент, который позволяет внешним инструментам ИИ-кодинга, таким как Claude, напрямую запрашивать аналитические данные из PostHog. Это открывает принципиально новые возможности для оптимизации продукта: разработчик может напрямую спросить у ИИ-агента, на каком именно экране происходит наибольший отток пользователей, получить точный ответ на основе реальной аналитики и сразу поручить агенту исправить проблемные места интерфейса. Установка выполняется в полуавтоматическом режиме через терминал, где достаточно выбрать используемые редакторы кода и активировать все необходимые аналитические функции.

Автоматизированный захват взаимодействия и внедрение SDK 2:08:05

Мастер PostHog самостоятельно определяет ключевые события интерфейса, которые необходимо отслеживать для качественного продуктового анализа. В автоматическом режиме настраивается трекинг нажатия кнопок запуска онбординга, отправки и завершения регистрационных форм, выбора языковых настроек и переходов по вкладкам навигации. Ранее в разговоре авторы касались разработки интерфейса экрана приветственного онбординга, интеграции системы аутентификации через сервис Clerk и реализации нижней панели навигации приложения, и теперь все эти компоненты бесшовно покрываются аналитикой. В коде приложения изменения затрагивают конфигурацию ИИ-навыков и главный слой разметки, где всё дерево компонентов оборачивается в PostHogProvider. Разработчику остается лишь переключить флаг захвата экранов в значение true, чтобы автоматически логировать имена экранов и их свойства. Для кастомного трекинга, например, при выборе языка, достаточно добавить элементу testID и вызвать метод postog.capture с передачей кода языка. Функция автозахвата во фронтенд-части React Native автоматически регистрирует клики, отправки форм и другие действия пользователя. Дополнительно активируются тепловые карты (heatmaps) и запись сессий (session replays), позволяющая наглядно увидеть, как именно пользователи взаимодействуют с интерфейсом, и оперативно обнаружить скрытые UX-проблемы.

Пост-интеграционный аудит и исправление уязвимостей 2:11:12

После успешного развертывания SDK и фиксации изменений в Git критически важно провести аудит кода. Для этого запускается автоматический обзор через сервис Code Rabbit, охватывающий все 23 измененных файла. В ходе проверки система обнаружила 6 серьезных проблем, включая критическую уязвимость безопасности — случайное попадание файла .env в индекс отслеживания Git. Поскольку простое удаление файла не сотрет его из истории коммитов GitHub, Code Rabbit предлагает правильное решение в виде команды git rm --cached .env с последующим перевыпуском (ротацией) секретных ключей. Также аудит выявил архитектурное противоречие в файле skill.md, где одновременно рекомендовалось использовать expo-constants для проектов Expo и react-native-config для чистой сборки React Native. Ранее в разговоре они упоминали инициализацию пустого проекта через Expo CLI, поэтому Code Rabbit справедливо указал на необходимость сохранения консистентности в пользу Expo. Кроме того, автоматический ревьюер выявил отсутствие обработки ошибок при авторизации через Google и Apple на страницах входа, порекомендовав перехватывать сбои и логировать их через PostHog. Все найденные баги оперативно устраняются с помощью функции автоматического исправления силами ИИ-агента.

🛠️ Глава 7. Переход к нативной компиляции и разработка фонового ИИ-сервиса 2:30:25

Настройка среды нативной компиляции в Xcode 2:30:25

Переход от использования легковесного окружения Expo Go к полноценной нативной сборке Development Build через среду Xcode продиктован технической необходимостью поддержки кастомных низкоуровневых аудио-модулей, критически важных для голосового ИИ. Процесс развертывания локальных симуляторов устройств требует серьезных дисковых и аппаратных ресурсов: один только базовый образ операционной системы для эмуляции iOS весит почти 13 ГБ. Современная мобильная разработка становится неотделима от систем искусственного интеллекта, поскольку сама среда Xcode активно внедряет агентские функции генерации кода с использованием моделей OpenAI и Claude прямо внутри интерфейса разработки. Для подготовки нативного окружения на операционной системе macOS развертывается пакетный менеджер Homebrew, а следом за ним — CocoaPods, отвечающий за интеграцию и связывание нативных iOS-библиотек на языках Swift или Objective-C с JavaScript-кодом проекта. После успешного развертывания базовых зависимостей инженеры выполняют команду npx expo pre-build --platform ios --clean, которая автоматически генерирует изолированную нативную папку ios на основе статической конфигурации приложения.

Для успешного выполнения компиляции нативного кода в конфигурационный файл app.config внутрь объекта настроек платформы iOS принудительно добавляется уникальный идентификатор приложения bundleIdentifier. При первой попытке запустить локальное нативное тестирование через терминал с помощью npx expo run:ios часто возникает блокирующая ошибка отсутствия валидных сертификатов цифровой подписи (code signing certificates). Для её устранения разработчику необходимо авторизоваться в своей учётной записи Apple ID через системные настройки Xcode и подключить профиль в меню "Signing & Capabilities", выбрав соответствующую команду разработки в выпадающем списке Team.

При первичном запуске скомпилированного нативного приложения на симуляторе разработчики могут столкнуться со сбоем инициализации локального хранилища данных. Ранее в разговоре они касались управления персистентным состоянием через Zustand и AsyncStorage. Текущая ошибка вызвана тем, что SDK встроенной аналитической платформы PostHog внутренне опирается на пакет async-storage, в то время как автоматический линкер Expo связывает нативные модули исключительно при условии их прямого объявления в качестве зависимостей первого уровня в package.json. Данная проблема оперативно решается явным добавлением библиотеки в проект, переходом в нативный каталог ios и вызовом команды pod install для пересборки моста зависимостей.

Низкоуровневая аудио-инфраструктура приложения полностью базируется на Stream React Native SDK, координирующем голосовые сессии реального времени. В целях безопасности токены авторизации пользователей генерируются строго на стороне сервера с помощью механизмов Expo API Routes, что полностью исключает компрометацию секретных ключей Stream на стороне клиента. В процессе повторной компиляции проекта может потребоваться исправление конфигурации сборщика Metro из-за разделения движка обработки стилей в NativeWind v5 (настройка стилизации интерфейса с помощью которого упоминалась ранее) — для этого в проект принудительно доустанавливается пакет react-native-css.

Создание фонового ИИ-сервиса на языке Python 2:47:52

Построение полноценного интерактивного опыта языкового обучения требует интеграции интеллектуального собеседника непосредственно в текущий аудиозвонок. Архитектурная схема взаимодействия в реальном времени разделена на три автономных уровня:

Фронтенд-часть мобильного приложения на базе фреймворка Expo, обеспечивающая интерфейс.
Инфраструктура реального времени и транспорт низколатентных аудиопотоков от платформы GetStream.
Выделенная ИИ-логика преподавателя на стороне обособленного фонового Python-сервиса.

Бэкенд-сервис функционирует полностью изолированно и задействует OpenAI Realtime API для генерации естественного человеческого голоса и синхронной обработки потокового аудио с минимально возможными задержками. Парадигма современного агентского программирования (agentic development) позволяет инженерам собирать подобные сервисы без глубоких познаний в тонкостях синтаксиса конкретного языка программирования — достаточно верхнеуровневого понимания общей архитектуры проекта и логики продуктовых фич.

Развертывание фонового сервиса начинается с инициализации экосистемы инструментов через запуск команды mpx skills add [https://visionagents.ai](https://visionagents.ai). На основе установленных модулей ИИ-ассистент автоматически разворачивает каталог vision-agent с управляющим скриптом. Для авторизации в облачной инфраструктуре нейросетей используется приватный токен, создаваемый в личном кабинете на платформе platform.openai.com и переносимый в переменную окружения OPENAI_API_KEY в локальном файле .env созданного бэкенда. Основной файл main.py описывает конфигурацию Speech-to-Text поверх сетевого шлюза GetStream Edge, динамически считывает целевой язык обучения из параметров звонка и ожидает входящего коннекта от клиента. Сервер запускается из контекста рабочей директории фонового сервиса посредством пакетного менеджера uv командой uv run main.py serve на локальном хосте.

На финальном этапе происходит бесшовная склейка нативного интерфейса с фоновым сервисом искусственного интеллекта: в момент запуска урока приложение создаёт комнату в Stream, а маршрут Expo API автоматически инициализирует сессию ИИ-агента. Весь контекст занятия — текущие лингвистические цели, активные словари, грамматические фразы и системные промпты поведения — упаковывается напрямую в метаданные вызова. Агенту программно присваиваются административные привилегии публикации аудиопотока в комнате, после чего активируется статус трансляции, а жизненный цикл фоновой сессии синхронизируется с моментом размонтирования экрана или ручного сброса звонка пользователем.

🎙️ Оживление ИИ-учителя: Сквозное проксирование, тонкие настройки промптов и переход на Push-to-Talk 2:55:28

Настройка аудио-моста: сквозное проксирование и латание уязвимостей 2:55:28

Интеграция голосового ИИ-агента в мобильное приложение требует ювелирной координации клиентской части и бэкенда. На этом этапе критически важно организовать сквозное проксирование контекста выбранного урока и авторизации пользователя в реальное аудио-подключение через Expo API-роуты. В процессе связывания приложения с созданным ранее фоновым Python-сервисом разработчики часто сталкиваются со специфической проблемой маршрутизации на MacOS: IPv6-адрес localhost разрешается в ::1, в то время как сервер Uvicorn по умолчанию слушает только IPv4. Для исправления этой ошибки приходится явно корректировать порты и оборачивать обновления звонков в блоки try-catch. Сам запуск бэкенда выполняется лаконичной командой uv run main.py serve в терминале.

Важнейшим этапом контроля качества кода стал автоматический аудит проекта с помощью инструмента Code Rabbit. Проверка выявила серьезную уязвимость в архитектуре безопасности: роут генерации токенов Stream API принимал произвольный идентификатор из параметров запроса без проверки подлинности вызывающей стороны, что открывало возможность для несанкционированного доступа и подмены личностей пользователей. Для исправления этой бреши бэкенд перевели на верификацию JWT-токенов из заголовка авторизации с использованием публичных ключей криптографического модуля Node.js против JWK-документов сервиса Clerk, чья интеграция уже настраивалась на более ранних этапах разработки. Дополнительно были устранены сопутствующие архитектурные недочеты:

Был исправлен роут сессий агента, который ошибочно возвращал статус успешного выполнения (okay: true) даже при сбое завершения сессии. Теперь в блоке catch корректно выбрасывается исключение с ошибкой.
В массиве зависимостей хука useEffect на странице урока были добавлены недостающие переменные для корректного обновления состояния ИИ при изменении данных пользователя.
В Python-код функции define_language_name добавили жесткие проверки наличия переменных окружения для реализации принципа «быстрого отказа» (fail-fast) при старте приложения.

Промпт-инжиниринг для преподавателя: от робота к живому наставнику 3:05:00

Даже при идеальной технической связке плоский, монотонный или излишне роботизированный голос ИИ мгновенно разрушает погружение в учебный процесс. Чтобы превратить бездушный алгоритм в харизматичного репетитора, фокус разработки смещается на промпт-инжиниринг. В рамках оптимизации системного промпта под номером 16 (AI Teacher) перед ИИ-агентом ставится задача вести себя как реальный, теплый и энергичный преподаватель.

Основные правила обновленного системного промпта включают строгие поведенческие ограничения: ИИ должен удерживать контекст конкретного урока, использовать преимущественно английский язык для объяснений, вводить новые иностранные слова медленно и обязательно давать их перевод. Ответы ИИ строго ограничиваются одной-двумя короткими фразами с использованием разговорных сокращений и мягкого поощрения. Модель учится слушать реакцию пользователя, просить его повторить материал в случае запинки и адаптировать последующие реплики под уровень студента. В результате такой тонкой настройки появляются уникальные цифровые личности: например, Юки — жизнерадостный учитель японского языка, или Луна — экспрессивная наставница по испанскому.

От симулятора к реальному железу: обход багов WebRTC 3:08:58

Попытка протестировать обновленные промпты в iOS-симуляторе вскрывает его известную ахиллесову пяту — крайне нестабильную работу WebRTC-соединений для передачи аудиопотока через виртуальный микрофон. Официальная документация Stream прямо рекомендует использовать для тестов звука физические устройства. Перенос сборки на реальный iPhone с помощью команды npx expo run:ios через проводное подключение требует преодоления цепочки защитных барьеров Apple:

Включение режима разработчика в настройках конфиденциальности телефона с последующей перезагрузкой.
Исправление профилей подписи (Signing Profiles) в Xcode (xed ios). Для обхода ошибок создания provisioning-профилей на бесплатных аккаунтах приходится временно удалять функцию «Sign in with Apple».
Разрешение запуска приложений из ненадежных источников в меню «VPN и управление устройством» на самом смартфоне.

Только после выполнения этого чек-листа приложение успешно разворачивается на смартфоне, позволяя пройти авторизацию через Google и запросить критически важные нативные разрешения на доступ к микрофону и камере.

Эволюция интерфейса: механика Push-to-Talk и мгновенное VAD-прерывание 3:15:30

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

Вся центральная область экрана отдается под механику Push-to-Talk (нажми и говори). При входе в звонок микрофон пользователя по умолчанию заглушается, что полностью разрывает петлю обратной связи и уничтожает эхо. Когда пользователь зажимает кнопку, микрофон активируется, аудиопоток устремляется в Stream OpenAI Realtime, а ИИ мгновенно прерывает свою речь. Отпускание кнопки отключает микрофон, и наступившая тишина служит для агента сигналом к формированию ответа.

Однако стандартная семантическая система обнаружения голосовой активности (Semantic VAD) на стороне Python-агента оказывается слишком медленной, заставляя ИИ продолжать говорить еще некоторое время после нажатия кнопки. Для достижения мгновенного UX-отклика систему переводят на серверный VAD (Server VAD), который работает на основе анализа энергии звука и срабатывает всего за 100 миллисекунд после появления любого аудиосигнала, а параметр interrupt_response выставляется в значение true для моментальной остановки генерации речи ИИ-агентом.

🏁 Интеграция дельта-транскриптов и ИИ-аналитика воронки в PostHog 3:21:59

Потоковая обработка аудио и мгновенные дельта-субтитры 3:21:59

Переходя к завершающему этапу сборки приложения, разработчики сталкиваются с необходимостью тонкой настройки поведения ИИ-агента. Изначально виртуальный учитель Луна преждевременно хвалила студента фразами вроде «great job» еще до того, как тот успевал произнести испанское приветствие. Это заставило команду модифицировать сценарий взаимодействия, разделив работу системы на два режима: режим обучения и режим мгновенной реакции на речь ученика. После этого фокус смещается на внедрение функции, которую авторы называют одной из самых недооцененных в ИИ-разработке — синхронных субтитров в реальном времени. На этом этапе создателям предлагается временно отойти от пошаговых туториалов и применить концепцию практического вайб-кодинга. Задача формулируется как вывод live-капшенов на экран аудиоуроков для одновременного отображения реплик учителя и пользователя.

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

Решением становится оперативный патч для SDK, добавляющий полноценную обработку входящих событий с типом conversation.item.input_audio_transcription. Режим передачи текстовых данных переключается на формат дельты (delta transcripts). Благодаря этому изменению подписчики интерфейса начинают получать текстовые фрагменты речи практически мгновенно, прямо в процессе говорения. Повторное тестирование подтверждает, что задержка исчезла, а реплики пользователя отображаются на экране одновременно с их произнесением.

Кастомные метрики удержания и ИИ-генерация дашбордов в PostHog 3:28:54

Хотя платформа продуктовой аналитики PostHog была интегрирована в проект ранее для базового отслеживания открытий приложения и просмотров экранов, для реального управления продуктом этого минимума недостаточно. Чтобы понять, в каких именно точках уроков пользователи теряют интерес и покидают интерфейс, необходимо настроить отслеживание кастомных событий внутри уроков.

Разработчики внедряют логику сбора трех ключевых метрик:

Language selected на экране онбординга для определения популярности конкретных языковых направлений среди аудитории.
Количество фактически запущенных уроков для выявления наиболее востребованных тем (приветствия, знакомство или числа).
Количество заброшенных занятий с фиксацией точной длительности сессии в секундах через хук duration_seconds при размонтировании компонента.

Для реализации этой аналитической модели ИИ-помощник Claude вносит точечные изменения в пять файлов проекта. В частности, компонент идентификации Clerk связывается с провайдером PostHog, благодаря чему метод postHog.identify вызывается при каждом входе в систему, намертво привязывая ID пользователя к выбранному языку.

После генерации серии тестовых событий внутри приложения, вместо ручной сборки сложных графиков разработчики задействуют голосовой ИИ-чат PostHog через систему Whisper Flow. Голосовой промпт формулирует задачу на автоматическое создание дашборда под названием «Dualingo Clone Core Engagement». В него запрашивается воронка онбординга (открытие приложения → выбор языка → старт урока), распределение языковых предпочтений в виде бар-чарта, точки дропаута и метрика ежедневных активных пользователей (DAU).

Инструмент аналитики PostHog параллельно генерирует все шесть затребованных инсайтов всего за пару минут. Сгенерированная воронка наглядно демонстрирует классическую проблему стартового интерфейса приложения: из трех уникальных пользователей двое прошли этап выбора предпочтительного языка, но только один запустил урок. Подобный инсайт дает четкое понимание, что текущий онбординг требует значительного упрощения и переработки. Аналитика также показывает, что испанский и японский языки лидируют, а среднее время до закрытия второго урока испанского составляет 9 секунд против 3 секунд на других этапах.

Финальный аудит кода и методология разработки 3:36:29

Перед завершением проекта и отправкой кода в продакшн проводится финальный аудит через ИИ-инструмент Code Rabbi прямо в среде VS Code. Проверка подтверждает высокое качество кодовой базы: единственной рекомендацией становится избавление от небезопасного типа any в TypeScript-скриптах. Разработчики создают строгий интерфейс StreamCustomEvent и добавляют автоматическую подстановку роли 'agent' в случае отсутствия спикера.

После успешного исправления код фиксируется коммитом «improve the AI teacher conversations» и отправляется в репозиторий GitHub, где безопасно сливается с веткой main. Подводя итоги курса, авторы подчеркивают, что ключевой навык ИИ-разработки в 2026 году заключается не в заучивании промптов, а в проектировании архитектуры. Размер промптов имеет второстепенное значение, если у агента есть надежный переиспользуемый контекст, заложенный в конфигурационном файле agents.md, и соблюдается строгая изоляция фич. В качестве финального штриха перед релизом упоминается выпуск специализированного практического гайда (playbook) по вайб-кодингу, включающего готовые чек-листы реализации функций и проверенные стратегии организации мобильных проектов.