Vibe Engineering: как управлять AI вместо написания кода

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

🚀 Эволюция AI-разработки: Концепция Vibe Engineering 0:00

Современная разработка с использованием искусственного интеллекта часто превращается в бесконечный цикл правок, когда разработчик по многу раз переписывает один и тот же промпт, пытаясь добиться от модели нужного результата . Эдриан из JavaScript Mastery утверждает, что главная проблема большинства неудачных AI-проектов заключается в недопонимании: разработчик знает, что ему нужно, но не может донести это до AI на его языке . Чтобы решить эту проблему, предлагается методология Vibe Engineering — подход, при котором человек задаёт направление, а AI сам пишет детальные инструкции для реализации функций .

В основе Vibe Engineering лежит идея, что если современные модели (такие как Claude 3.5 Sonnet или GPT-4o) достаточно умны, чтобы писать код, то они достаточно умны и для того, чтобы планировать этот код . Вместо того чтобы тратить по 20 минут на составление огромного промпта, разработчик указывает на файл со спецификациями или документацию и говорит, что должно произойти . AI анализирует задачу, определяет необходимые изменения в файлах и сам составляет «промпт на реализацию» . Таким образом, разработчик переходит от роли исполнителя к роли архитектора и ревьюера, который одобряет план действий до того, как будет написана первая строка кода .

Стратегический центр: Файл agents.md и его роль 6:22

Для управления сложными проектами недостаточно простого общения с чатом. В методологии Vibe Engineering центральное место занимает файл agents.md . Это не просто список технологий, а документ, описывающий мыслительный процесс и правила игры для AI-агента . Вместо того чтобы хранить ответы на вопросы «что построить», этот файл содержит инструкции о том, «как думать» перед тем, как приступать к задаче .

В agents.md фиксируются критически важные аспекты проекта:

Список Out-of-Scope (Вне рамок проекта): AI-агенты часто стремятся добавить лишние функции (комментарии, уведомления), которые кажутся полезными, но не входят в текущий план . Чёткое перечисление того, что делать НЕ нужно, экономит время и ресурсы .
Data Model (Модель данных): Жесткие правила для структур данных (например, обязательное наличие URL изображения или даты публикации статьи), которые AI будет принудительно соблюдать во всех частях системы: от скрапера до валидации в UI .
Правила отката (Fallback Rules): Список действий для ситуаций, не описанных в файле. Главное правило — создавать минимально жизнеспособный код и задавать уточняющие вопросы вместо того, чтобы принимать важные решения самостоятельно .

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

Модульность знаний через использование Skills 8:50

Если agents.md отвечает за контекст конкретного проекта, то за знания об инструментах отвечают так называемые Skills (Навыки) . Скилл — это выделенный файл (обычно в формате Markdown), содержащий лучшие практики и паттерны работы с конкретной библиотекой или сервисом .

Например, скилл для Clerk может содержать правила правильной реализации аутентификации, а скилл для Supabase — паттерны запросов и настройки безопасности (RLS) . Такое разделение ответственности даёт два огромных преимущества:

Обновляемость: Если библиотека выпускает обновление, разработчику нужно обновить всего один файл навыка, а не переписывать промпты во всём проекте .
Переиспользование: При запуске нового проекта со знакомым стеком достаточно перенести файлы скиллов и написать свежий agents.md .

В рабочем процессе это выглядит максимально просто: разработчик пишет короткий промпт «Реализуй Clerk-аутентификацию, используя скилл Clerk» . AI берет контекст проекта из agents.md, технические знания из файла навыка и самостоятельно готовит план внедрения .

Рабочий процесс (Workflow): От промпта к утверждению 10:12

Ключевое отличие Vibe Engineering от обычной разработки с AI — это наличие промежуточного шага планирования. Перед тем как прикоснуться к любому файлу кода, AI обязан создать «промпт на реализацию» и сохранить его в папке prompts в формате Markdown . Этот документ не является просто кратким пересказом — это детальная спецификация .

Типовой план реализации от AI включает в себя:

Цель: Одно четкое предложение о том, что будет сделано .
Контекст: Какие файлы будут прочитаны и какие скиллы использованы .
Список изменений: Точный перечень файлов, которые будут созданы или модифицированы .
Критерии приемки: Технические проверки (тайпчек, линтинг) и пошаговая инструкция для разработчика по проверке функционала (например, конкретные curl-команды или действия в интерфейсе) .

Разработчик читает этот план и задает себе вопрос: «Достаточно ли он хорош для исполнения?» . Если план содержит ошибки, они исправляются на этапе текста, а не на этапе уже написанного кода . Это позволяет ловить архитектурные проблемы до того, как они станут «фичами», которые придется переделывать .

Подготовка инфраструктуры и первый запуск 16:21

Для демонстрации эффективности Vibe Engineering выбран проект Skew — новостная платформа на базе AI . Перед началом кодинга необходимо подготовить четыре ключевых сервиса, каждый из которых имеет бесплатный уровень для старта: Clerk для управления пользователями , Supabase в качестве базы данных и backend-платформы , OxyLabs для надежного скрапинга новостей и PostHog для продуктовой аналитики .

Настройка проекта начинается с классической команды npx create-next-app@latest . При инициализации выбираются стандартные настройки: TypeScript, ESLint и React Compiler . Эдриан подчеркивает, что лучший способ познакомиться с новой структурой проекта — попросить об этом AI . В качестве основного инструмента в видео используется расширение Claude Code в VS Code . Первый тест агента — просьба объяснить структуру сгенерированного Next.js приложения в дружелюбном, но техническом стиле . Агент успешно анализирует файлы, объясняет роль папки app, работу серверных компонентов и стилизацию через Tailwind . С этого момента проект готов к превращению в полноценную систему через методологию Vibe Engineering.

🎨 Создание дизайн-системы и интерфейса приложения 37:38

Фундамент проекта: Настройка дизайн-системы и токенов Tailwind CSS 37:38

Прежде чем приступать к разработке функциональных модулей, необходимо заложить консистентную визуальную основу. В современной AI-разработке это начинается не с написания кода, а с предоставления модели качественного UI-референса . Для проекта Skew — новостного агрегатора, фокусирующегося на балансе мнений, — визуальный язык критически важен, так как он должен наглядно отображать политический уклон (bias) статей .

Процесс настройки дизайн-системы включает несколько ключевых этапов:

Анализ визуального референса: Агенту передается изображение-спецификация, созданное с помощью модели GPT Image 2.0 , на котором зафиксированы основные цвета, типографика, сетка и примеры карточек .
Генерация дизайн-токенов: Вместо того чтобы стилизовать каждую страницу отдельно, AI создает глобальный файл app.globals.css, куда прописываются переменные для Tailwind CSS . Сюда входят основные цвета бренда, шкала отступов, радиусы скруглений и специфические цвета для индикации медиа-предвзятости (left/right bias colors) .
Создание примитивов: На базе токенов агент генерирует библиотеку базовых компонентов: кнопки, чипы (badges) для категорий, измерители предвзятости (bias meters) и скелетоны карточек .
Визуальная валидация: Важным шагом является создание страницы-витрины (/design-system), где рендерятся все созданные компоненты . Это позволяет разработчику убедиться, что ховер-эффекты, тени и шрифты соответствуют задумке, прежде чем они разойдутся по всему приложению .

Ранее в разговоре упоминалось, что агент всегда следует правилам из файла конфигурации проекта, поэтому он не приступает к кодингу сразу, а сначала формирует промпт на реализацию и ждёт одобрения пользователя . Такой подход гарантирует, что UI останется целостным даже при добавлении множества новых экранов .

Реализация главной страницы (Homepage) на базе mock-данных 43:21

После фиксации дизайн-системы разработка переходит к созданию первой полноценной фичи — главной страницы . Методология «Vibe Engineering» предполагает итеративный подход: сначала строится презентационный слой (UI), а уже потом подключается логика данных .

Для реализации главной страницы агент анализирует структуру макета, которая включает:

Верхнюю утилитарную панель (top bar) и липкий боковой хедер с логотипом .
Горизонтально скроллируемую строку с категориями новостей (chips) .
Трехколоночную адаптивную сетку вертикальных карточек новостей .

Критически важно на этом этапе использовать типизированные mock-данные (заглушки) вместо реальных запросов к базе данных Superbase . Это позволяет отладить верстку до пикселя и убедиться в корректности адаптивности, не отвлекаясь на ошибки API или задержки сети . В результате генерируются современные React-компоненты (sidebar, category bar, site footer), соответствующие высоким стандартам кодинга .

В процессе тестирования на мобильных устройствах (например, в режиме симуляции iPhone 14 Pro Max) могут возникать баги, такие как «выскакивание» элементов за пределы вьюпорта . Такие проблемы легко решаются с помощью уточняющих голосовых промптов: достаточно указать AI на проблему, и он автоматически скорректирует стили .

Детальная страница статьи и визуализация AI-анализа 47:41

Третьим этапом визуальной сборки становится страница деталей новости (news details page), где пользователь знакомится с полным содержанием и AI-аналитикой . На этой странице реализуется двухколоночная разметка, включающая основной текст статьи, блок связанных историй и призыв к подписке на рассылку .

Особенности реализации этого интерфейса:

Динамический роутинг: Используются возможности Next.js для обработки параметров страниц и вывода 404 ошибки для несуществующих ID .
Сложные компоненты: Создаются специализированные UI-элементы для отображения результатов анализа тональности контента (sentiment analysis), хотя на данном этапе они также заполнены тестовыми данными .
Автоматизированная проверка: После генерации кода агент самостоятельно запускает проверки, имитируя переходы по разным URL, чтобы подтвердить работоспособность навигации .

В итоге, имея на руках готовую дизайн-систему, главную страницу и экран деталей, разработчик получает полностью функционирующий визуальный прототип . Хотя расчеты предвзятости и тексты статей на этом этапе являются фиктивными , такая база позволяет бесшовно интегрировать реальные данные из Superbase и результаты скрапинга на следующих этапах разработки.

🔐 Аутентификация и данные: Развертывание Clerk и Supabase 52:06

Переход от визуального прототипирования к созданию полноценного приложения начинается с внедрения логики идентификации и настройки надежного хранилища . На этом этапе проект перестает быть набором статических макетов, созданных в рамках «vibe engineering» (о котором шла речь в первой главе), и обретает архитектурный скелет. Основная стратегия здесь заключается в четком разделении ответственности: Clerk берет на себя управление личностью пользователя, в то время как Supabase становится единым источником истины для всех данных приложения .

Управление пользователями: Интеграция Clerk и защита маршрутов 52:06

Выбор Clerk в качестве системы аутентификации обусловлен его способностью предоставить готовые UI-компоненты «из коробки», что избавляет разработчика от написания сложного кода для обработки сессий и интеграции OAuth-провайдеров . В отличие от встроенных решений баз данных, Clerk предлагает полноценную платформу управления пользователями, которая легко масштабируется до уровня организаций и систем монетизации .

Процесс внедрения системы в приложение Skew News проходил через следующие этапы:

Настройка провайдеров: В панели управления Clerk были выбраны Google и авторизация по Email как основные способы входа .
Конфигурация окружения: Публичный и секретный ключи API были интегрированы в файл .env.local для обеспечения связи между SDK и сервером .
Агентское внедрение: Вместо ручного написания кода использовался специализированный агент, которому была поставлена задача внедрить аутентификацию, используя предварительно установленные «навыки» (skills) для Clerk .

Важным архитектурным решением стало разграничение прав доступа: главная страница с лентой новостей остается публичной, но для просмотра детального анализа статьи и полных данных пользователю необходимо авторизоваться . Использование актуальной версии Clerk SDK (V7) позволило агенту автоматически применить новые методы защиты маршрутов и заменить устаревшие компоненты SignedIn/SignedOut на современные API-проверки . В итоге, после успешного входа через Google, пользователь перенаправляется обратно к контенту, а в интерфейсе появляется компонент управления профилем и безопасностью .

Архитектура данных: Supabase как источник истины 58:29

Если Clerk отвечает за то, кто зашел в приложение, то Supabase определяет, что пользователь видит. Согласно правилам архитектуры, зафиксированным в файле agents.md, пользовательский интерфейс должен отображать только те данные, которые уже сохранены в базе . Это означает, что слои скрапинга и анализа (которые будут подробно разобраны в следующей главе) работают независимо, а UI лишь обращается к таблицам Postgres .

Для реализации этого слоя в Supabase был создан проект JSM_SKU_news . Интеграция потребовала настройки трех типов ключей: публичного URL, анонимного ключа (anon key) для базовых запросов и секретного ключа роли сервиса (service role key) для выполнения административных операций на стороне сервера .

Автоматизация БД и создание типизированного доступа 1:00:57

Процесс настройки базы данных был полностью делегирован AI-агенту Claude, который проанализировал существующие паттерны кода и структуру agents.md для формирования детального плана реализации . Ключевой особенностью стало создание «рукописных» (handwritten) типов данных, что обеспечило строгую типизацию в TypeScript с самого первого запроса .

Схема базы данных была спроектирована таким образом, чтобы охватить все аспекты работы новостного агрегатора:

Sources (Источники): Таблица для хранения данных об изданиях, таких как BBC или Reuters .
Articles (Статьи): Основное хранилище метаданных и текстов новостей .
Article Analyses: Результаты работы нейросетей по анализу контента .
Logs и Schedules: Системные таблицы для отслеживания работы скраперов и расписаний запусков .

Для проверки работоспособности системы агент сгенерировал SQL-скрипты для создания таблиц и наполнения их начальными данными (seed) . После выполнения этих скриптов в SQL-редакторе Supabase в базе появилось пять активных источников . Чтобы убедиться в корректности отображения, агент также создал «дамми-статью» — самодостаточный объект данных, который был вставлен вручную через консоль . Это позволило мгновенно увидеть результат на локальном хосте: реальная запись из базы данных успешно отрендерилась на главной странице приложения . Это заложило фундамент для следующего этапа — автоматизации наполнения этих таблиц через конвейер скрапинга.

🚀 От скрапинга к смыслам: создание автономного новостного пайплайна 1:15:41

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

Автоматизированный сбор данных через OxyLabs 1:15:41

Процесс начинается с запуска пайплайна скрапинга, который обращается к списку авторитетных ресурсов, таких как BBC, NPR и Reuters . На этом этапе критически важна стабильность соединения: использование инфраструктуры OxyLabs позволяет системе беспрепятственно собирать данные через сеть надежных прокси, избегая блокировок со стороны новостных сайтов . В реальном времени можно наблюдать, как агент обрабатывает ссылки: например, из 48 ссылок на главной странице BBC может не найтись подходящих кандидатов, в то время как NPR сразу выдает 57 потенциальных статей для анализа .

Этот пайплайн — не просто скрипт для копирования текста, а сложная система с несколькими уровнями проверки:

Очистка и дедупликация: Система автоматически сверяет найденные URL с базой данных, чтобы исключить повторы .
Фильтрация контента: Используется «reject list» для отсеивания страниц, не являющихся новостными статьями .
Валидация: Каждая страница проходит проверку на корректность структуры перед сохранением в базу данных .

Результатом работы становится список из десятков детально проработанных страниц, сохраненных в Supabase (интеграция которой обсуждалась в предыдущих главах) . Всего за один проход агент может собрать около 25 полных текстов статей с метаданными, такими как канонические URL и заголовки о важных событиях — например, о законопроектах по доступному жилью . Самое впечатляющее, что вся эта производственная система была создана на основе одного короткого промпта, который агент развернул в детальные инструкции и реализовал программно .

AI-анализ: определение тональности и политического вектора 1:19:26

После того как сырые данные попадают в базу, они остаются скрытыми для пользователя до тех пор, пока поле analyzed_at имеет значение null . Именно на этапе анализа приложение Skew News оправдывает свое название (от англ. skew — перекос, предвзятость), выявляя, в какую сторону склоняется автор статьи . Для реализации этой логики используется API OpenAI, ключи от которого интегрируются в окружение проекта .

Согласно спецификациям в файле agents.md (о котором говорилось в начале курса), AI-агент должен генерировать комплексный отчет по каждой статье . Этот отчет включает в себя:

Нейтральное резюме: Краткое изложение сути событий без эмоциональной окраски .
Оценка тональности (Sentiment): Определение общего настроя материала (позитивный, негативный или нейтральный) .
Политический фрейминг: Оценка распределения предвзятости в процентах — насколько текст тяготеет к левому, центристскому или правому спектру .
Коэффициент уверенности: Показатель того, насколько модель уверена в своем выводе (Confidence score) .

Важно понимать, что этот анализ — не истина в последней инстанции, а «оценка по мнению AI», о чем приложение честно предупреждает пользователя специальным дисклеймером . Алгоритм анализирует исключительно текст статьи, не опираясь на репутацию самого издания . Для обеспечения надежности данных на выходе используется валидация через библиотеку Zod .

Интеграция результатов в интерфейс 1:22:31

Запуск процесса анализа происходит через защищенный API-запрос с использованием секретного ключа администратора . Система обрабатывает статьи батчами — например, по 5 штук за один проход . Как только анализ завершается, в базе данных обновляются временные метки, и статьи мгновенно появляются на главной странице приложения . Теперь каждая карточка новости содержит не только заголовок, но и визуальную шкалу политического фрейминга.

На практике это выглядит так: статья о происшествии на борту Ryanair (где пассажира частично засосало в иллюминатор) определяется как центристская, так как она не имеет политического подтекста . В то же время материал о деятельности националистических группировок может быть классифицирован как значительно отклоняющийся влево или вправо в зависимости от риторики автора .

В процессе отображения могут возникнуть технические нюансы, такие как блокировка внешних изображений. Это решается настройкой remotePatterns в файле конфигурации Next.js, что позволяет корректно рендерить фотографии с любых новостных доменов . В итоге пользователь получает полностью работоспособный продукт, который не просто агрегирует заголовки, а предоставляет глубокий контекст и инсайты о медиа-ландшафте . В следующей главе будет рассмотрено, как использовать эти данные для поиска похожих материалов через векторные базы данных.

🚀 Автоматизация, аналитика и деплой: превращаем прототип в продукт 1:40:43

Продуктовая аналитика с PostHog и Slack-агентом 1:40:43

На финальном этапе разработки Skew News фокус смещается с написания кода на понимание того, как пользователи взаимодействуют с приложением. Интеграция PostHog начинается с решения технических нюансов: например, блокировщики рекламы вроде uBlock или Brave Shield могут блокировать скрипты автозахвата событий . Однако при деплое в реальный браузер эта проблема минимизируется, а серверный прокси обеспечивает стабильный трекинг . Система не просто собирает анонимные клики — благодаря интеграции с Clerk, PostHog идентифицирует пользователей по их email, связывая поведение конкретного человека с его профилем .

Настоящая мощь современной аналитики раскрывается через «self-driving» подход. Вместо того чтобы часами настраивать дашборды, разработчик может взаимодействовать с данными напрямую через Slack .

Интеграция позволяет вызвать PostHog в любом канале и задать вопрос на естественном языке, например: «Какие статьи открывали чаще всего?» .
Агент использует MCP (Model Context Protocol) для извлечения данных из проекта и выдает ответ за несколько секунд: например, указывая, что лидер просмотров имеет 13 кликов .
Система способна анализировать воронки (drop-off) между главной страницей и чтением статьи без написания SQL-запросов .

Более того, PostHog может самостоятельно предлагать улучшения. Если вы хотите отслеживать клики по кнопке «Как мы анализируем предвзятость», агент проверит, работает ли автозахват, и сообщит, что кнопка уже отслеживается (например, 16 кликов от тестового пользователя) . Если метрики нет, агент может сам создать «Insight» для дашборда или даже подготовить PR . Это меняет статус-кво: аналитика перестает быть набором графиков и становится активным участником процесса разработки .

Автоматизация через Vercel Cron и OxyLabs Scheduler 1:46:50

Чтобы Skew News работал автономно, необходимо автоматизировать сбор и анализ новостей. Ранее в разговоре упоминался процесс скрапинга, но теперь он переводится на рельсы расписаний. Система автоматизации состоит из двух независимых компонентов, которые должны быть настроены одновременно .

Первый компонент — OxyLabs Scheduler. Он отвечает за то, что серверы OxyLabs каждый час заходят на главные страницы выбранных СМИ и сохраняют их HTML-код . Важно понимать: OxyLabs не отправляет данные в приложение через вебхук, он просто хранит результат на своей стороне .

Второй компонент — Vercel Cron. Он настраивается через файл vercel.json и дает команду платформе вызвать API-роут приложения ровно через 15 минут после начала каждого часа . Эта задержка в 15 минут критически важна по двум причинам:

Скрапинг не происходит мгновенно, и приложению нужно дождаться готовности данных на стороне OxyLabs .
Разделение задач позволяет избежать таймаутов серверных функций (Serverless Functions) . Если бы мы пытались скрапить, парсить и анализировать десятки статей в рамках одного HTTP-запроса, функция бы просто аварийно завершилась .

Реализация этого пайплайна через агентов включает создание клиента для Data API OxyLabs, который умеет создавать расписания, деактивировать устаревшие задачи («orphans») и забирать результаты HTML . В базе данных Supabase (которую настраивали в предыдущих главах) создаются таблицы oxyilab_schedules и run_tables для контроля статуса задач . После запуска синхронизации через терминал, система создает расписания для всех активных источников (например, 5 крупных газет) .

Деплой и работа с ограничениями платформы 1:55:02

Публикация проекта на Vercel — это не только способ сделать его доступным миру, но и единственная возможность запустить Cron-задачи, так как локально они не срабатывают . Процесс начинается с пуша кода в репозиторий GitHub . При импорте проекта в Vercel критически важно правильно перенести переменные окружения из локального файла .env, а также добавить специальный CRON_SECRET — строку минимум из 16 символов для защиты эндпоинтов автоматизации .

После деплоя необходимо перенастроить Clerk (систему аутентификации) с тестовых ключей на продакшн-домен . Одной из главных сложностей для новичков становятся лимиты тарифных планов Vercel:

Hobby Plan: позволяет запускать Cron-задачи не чаще одного раза в сутки . Если ваше расписание в коде настроено на ежечасный запуск, деплой может завершиться ошибкой .
Pro Plan: поддерживает ежечасное выполнение .

Для проверки работоспособности нужно перейти в раздел Settings -> Cron Jobs в панели управления Vercel . Если регистрация прошла успешно, там появится соответствующий API-путь. Теперь приложение полностью автономно: оно само собирает новости, проводит AI-анализ и обновляет ленту, пока разработчик может просто наблюдать за результатами .

Масштабирование: PG Vector и будущее Skew News 2:01:17

Построенная архитектура — это лишь фундамент. Для превращения Skew News в полноценный продукт можно внедрить функцию «связанных статей». Это реализуется с помощью расширения PG Vector в базе данных Postgres . Использование векторных эмбеддингов позволяет выполнять семантический поиск: система находит статьи не по ключевым словам, а по смысловому сходству векторов контента .

Кроме того, проект готов к монетизации. Благодаря связке Clerk и системы биллинга, в приложение легко добавить тарифные планы . Учитывая высокую стоимость и сложность качественного скрапинга через OxyLabs, такой сервис анализа медиа-предвзятости вполне может быть платным продуктом .

Главный вывод курса: в 2026 году навык написания кода уступает место навыку «проектирования» (architecting) . AI не заменяет инженера, а многократно усиливает его возможности, превращая решения в работающее ПО с невероятной скоростью . Теперь основной цикл разработки — это определение фичи в agents.md, постановка задачи агенту и контроль результата .