🎯 О чём этот конспект: Разбор новой профессии «Vibe Coding Engineer» на примере Лазара Явановича из компании Lovable. Видео раскрывает философию создания сложных IT-продуктов с помощью AI-агентов, когда фокус смещается с написания кода на ясность мысли, вкус и архитектурное планирование.

👤 Кому будет полезно: Вайбкодерам, продакт-менеджерам, дизайнерам и всем, кто хочет создавать работающие приложения, не изучая синтаксис языков программирования.

✨ Что получите: Пошаговую систему планирования проектов через MD-файлы, методику параллельной разработки и алгоритм «4х4» для отладки любых багов без знаний кода.

1. Смена парадигмы: От написания кода к управлению ясностью

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

Выгода: Возможность собирать работающие прототипы и даже продакшн-решения (например, CRM или интернет-магазины) в 10-20 раз быстрее традиционных команд.

Как применить:

• Шаг 1: Примите роль дирижера — Перестаньте смотреть на код. Сосредоточьтесь на «Agent Output» (том, что пишет агент о своих действиях), а не на синтаксисе.
• Шаг 2: Используйте аналогию с Джинном — Помните, что AI — это джинн из лампы. Если вы попросите «сделай меня выше», он сделает вас 4-метровым великаном, который не влезет в дом. Будьте предельно специфичны в деталях.

Результат: Вы перестаете тратить время на обучение синтаксису и начинаете инвестировать его в развитие насмотренности и качества продукта.

2. Метод параллельного прототипирования (5 подходов)

Контекст: Вместо того чтобы мучить один проект бесконечными правками, Лазар предлагает запускать 5 разных подходов одновременно. Это экономит токены и время, так как вы сразу видите, какое направление архитектуры или дизайна «завелось» лучше. Это контринтуитивно для инженеров, но максимально эффективно для вайбкодеров.

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

Как применить: Запустите 5 вкладок в Lovable / Cursor / Windsurf с разными вводными:

• Вариант 1: Brain Dump — Голосовой ввод или сумбурный текст со всеми идеями сразу.
• Вариант 2: Структурированный промпт — Четкое описание страниц и функций.
• Вариант 3: Визуальный референс — Загрузите скриншоты с Mobbin или Dribbble.
• Вариант 4: Кодовый референс — Найдите похожий open-source проект или сниппет и скормите его AI.
• Вариант 5: Экстремальный вариант — Попросите AI предложить самую безумную реализацию вашей идеи.

Результат: Через 10 минут у вас есть 5 живых прототипов, из которых вы выбираете один «победитель» для дальнейшей доработки.

3. Система «Источников Истины» через MD-файлы

Контекст: Когда проект разрастается, AI начинает «забывать» детали из-за лимита контекстного окна. Чтобы этого избежать, профессиональный вайбкодер тратит 80% времени на планирование и создание документации, которую AI будет читать перед каждым действием.

Выгода: Стабильность приложения. AI не ломает старые функции, добавляя новые, потому что всегда видит «карту» проекта.

Как применить: Создайте в корне проекта следующие файлы и заставьте AI читать их перед работой:

1. master_plan.md — Высокоуровневое описание: для кого, зачем и как должен чувствовать себя пользователь.
2. implementation_plan.md — Техническая последовательность: сначала база данных, потом авторизация, потом API.
3. design_guidelines.md — Шрифты, цвета, отступы, стиль (например, "Glassmorphism" или "Minimalist").
4. user_journey.md — Пошаговый путь пользователя от регистрации до целевого действия.
5. tasks.md — Список конкретных задач. AI должен отмечать выполненные пункты.

Промпт для создания этих файлов (использовать в ChatGPT/Claude):

Я хочу создать [ОПИСАНИЕ ПРОЕКТА]. Действуй как элитный Product Manager и Solution Architect. 
Задай мне уточняющие вопросы, чтобы собрать достаточно информации, а затем создай для меня 5 файлов в формате Markdown: 
1. master_plan.md (суть и цели)
2. implementation_plan.md (технический стек и порядок сборки)
3. design_guidelines.md (визуальный стиль и UI-правила)
4. user_journey.md (логика переходов пользователя)
5. tasks.md (чек-лист для AI-агента)
Пиши файлы так, чтобы AI-кодер (например, Lovable или Cursor) мог идеально их интерпретировать.

Результат: У вас есть «внешний мозг» проекта, который позволяет AI работать автономно и точно.

4. Фреймворк отладки «4х4»

Контекст: Даже у профи случаются баги. Лазар использует четырехступенчатую систему, чтобы разблокировать себя, не зная кода.

Выгода: Возможность решить 100% возникающих технических проблем самостоятельно.

Как применить:

• Уровень 1: Кнопка «Try to fix» — Просто дайте агенту шанс исправить свою же ошибку.
• Уровень 2: Слой осведомленности (Console Logs) — Если AI не видит ошибку, попросите его:

  Добавь подробные console.log во все связанные файлы, чтобы мы могли отследить путь данных и найти, где именно происходит сбой.

Затем скопируйте вывод консоли браузера обратно в чат.

• Уровень 3: Внешний консультант (Codeex/Claude) — Экспортируйте код в один файл (через repomix) и закиньте в самую мощную модель (Claude 3.5 Sonnet или Codeex) с вопросом: «В чем здесь логическая ошибка?». Полученный ответ верните в основной инструмент разработки.
• Уровень 4: Откат и рефлексия — Если ничего не помогло, откатитесь на 3 шага назад (Version Control) и переформулируйте задачу.

Важный финальный шаг: После фикса спросите AI:

Мы потратили много времени на этот баг. Как мне нужно было сформулировать изначальный промпт или какие правила добавить в rules.md, чтобы ты не допустил этой ошибки в будущем?

Результат: Каждая ошибка делает вашу систему (и ваши навыки) сильнее.

FAQ

В: Нужно ли мне учить Python или React, чтобы стать вайбкодером?

О: Лазар считает, что нет. Вместо этого учите «язык дизайна» (что такое отступы, шрифты, визуальная иерархия) и «язык продукта» (как строить логические цепочки). Код — это теперь задача AI, ваша задача — вкус и суждение.

В: Как AI-агент узнает о моих правилах в MD-файлах?

О: В таких инструментах, как Cursor, есть файл .cursorrules, в Lovable — настройки проекта. Укажите там инструкцию: «Всегда читай master_plan.md и tasks.md перед внесением любых изменений».

В: Что делать, если AI «галлюцинирует» и говорит, что исправил баг, но это не так?

О: Это происходит из-за нехватки контекста. Используйте Шаг 2 из системы отладки — заставьте его проставить console.log. Цифры и логи в консоли не врут, и AI будет вынужден признать ошибку, увидев их.

В: Вайбкодинг подходит только для прототипов?

О: Нет, Лазар собирает на Lovable реальные внутренние инструменты для крупных компаний и даже публичные магазины (например, мерч-стор Lovable с интеграцией Shopify). Ключ в использовании внешних надежных API.

В: Какие навыки будут самыми дорогими в будущем?

О: Эмоциональный интеллект, чувство юмора (AI плохо шутит) и безупречный вкус. Когда каждый сможет создать «средний» продукт за 5 минут, ценность будет иметь только «магический» и эстетически совершенный продукт.

Конспект создан на основе видео «Vibe Coding: The future of engineering, design, and product management» канала Lenny's Podcast. Все права на оригинальный материал принадлежат авторам. Источник: https://youtu.be/0XNkUdzxiZI?si=87wuTpTGmQjyKKpl