Что такое вайбкодинг прототипов и как создать прототип сайта за 2 часа с помощью AI. Lovable, Cursor, v0 — инструменты для быстрого прототипирования без дизайнера. Пошаговый гайд от практикующего PM.
Раньше создание прототипа сайта выглядело так: написать ТЗ дизайнеру → ждать макеты в Figma 3-5 дней → правки → еще правки → наконец показать стейкхолдерам. Итого: неделя минимум.
Сейчас я делаю так: открываю Lovable или Cursor → надиктовываю что хочу → через 2 часа показываю кликабельный прототип. Разница — 7 дней vs 2 часа.
Это вайбкодинг — создание работающих прототипов с помощью AI-инструментов, без дизайнера и без Figma.
В этой статье расскажу что такое вайбкодинг прототипов, какие инструменты использую и как за 2 часа сделать прототип который можно показать заказчику.
Что такое вайбкодинг прототипов (и чем он лучше Figma)
Определение вайбкодинга
Вайбкодинг — это создание работающих прототипов и MVP с помощью AI-инструментов (нейросетей для генерации кода), без глубоких знаний программирования.
Вместо того чтобы:
- Рисовать макет в Figma
- Ждать дизайнера неделю
- Потом отдавать макеты разработчикам
Ты:
- Описываешь задачу AI-инструменту (Lovable, Cursor, v0)
- Получаешь работающий код и интерфейс за 2 часа
- Показываешь стейкхолдерам кликабельный прототип с реальной логикой
Чем вайбкодинг отличается от классического прототипирования
Классическое прототипированиеВайбкодинг прототиповFigma → статичный макетLovable/Cursor → работающий кодЖдать дизайнера 3-7 днейСам делаешь за 2 часаКликабельный прототип = связанные экраныКликабельный прототип = реальная логикаНельзя показать с даннымиМожно подключить API и показать с реальными даннымиИзменения = ждать дизайнераИзменения = 5 минут в диалоге с AI
Главное преимущество вайбкодинга: Ты получаешь не картинку, а работающий интерфейс. Стейкхолдеры могут кликать, вводить данные, видеть как всё работает.
Почему я отказался от дизайнера и перешёл на вайбкодинг
Проблема классического подхода
Типичный флоу в компании:
- Написать ТЗ для дизайнера (1-2 часа)
- Обсудить с дизайнером (созвон 30 минут + правки)
- Ждать макеты (3-5 дней если дизайнер загружен)
- Дать правки (еще 1-2 дня)
- Показать стейкхолдерам (наконец!)
Итого: 5-7 дней от идеи до первого показа.
И это если у тебя вообще есть дизайнер. В малых командах его часто нет, и ты застреваешь на этапе "а как это вообще должно выглядеть".
Главная боль: Пока ты ждешь макеты, ты не можешь собрать обратную связь от пользователей. А когда макеты готовы, выясняется что идея не зашла и надо переделывать.
Как вайбкодинг решает эту проблему
Вместо того чтобы писать ТЗ дизайнеру, я пишу ТЗ для AI и сразу завайбкоживаю прототип.
Почему вайбкодинг быстрее:
- Не нужно ждать дизайнера
- Итерации занимают минуты, а не дни
- Можно показать работающий прототип, а не статичный макет в Figma
- Правки делаются на месте, в диалоге с AI
Большой плюс: Тебе нужен только собственный ресурс. Особенно актуально в корпорациях, где дизайнеры перегружены и ждать макеты можно неделями.
Буквально за 2-3 часа ты можешь пойти к стейкхолдеру/пользователям и показать новую фичу.
Инструменты для вайбкодинга: Lovable, Cursor, v0
Я использую два типа инструментов в зависимости от задачи:
Быстрые прототипы: Lovable / v0
Когда использую: Нужен прототип за 30-60 минут для быстрого показа.
Что такое Lovable:
Lovable — это AI-инструмент для создания веб-приложений. Ты описываешь что хочешь текстом, Lovable генерирует код и интерфейс. Никакого программирования.
Плюсы Lovable:
- Простота: просто описываешь что хочешь, получаешь рабочий интерфейс
- Бесплатная версия выдает токены на день (если не успел — продолжишь завтра)
- Встроенная публикация в интернет (бесплатно)
- Можно сразу дать ссылку стейкхолдеру
- Lovable конструктор подходит для новичков
Минусы Lovable:
- Ограниченная кастомизация
- Не подходит для сложных интерфейсов
Что такое v0:
v0 (от Vercel) — аналог Lovable, работает похоже. Генерирует React-компоненты по описанию.
Когда выбрать v0 вместо Lovable:
- Если нужны компоненты на React (а не полное приложение)
- Если хочешь больше контроля над кодом
Продвинутые прототипы: Cursor / Trae / Claude Code
Когда использую: Нужна максимальная гибкость или прототип для реального продукта.
Что такое Cursor:
Cursor — это IDE (редактор кода) со встроенным AI. Пишешь что хочешь → AI генерирует код → ты правишь → публикуешь.
Плюсы Cursor:
- Полный контроль над кодом
- Можно интегрировать с API
- Легко добавить сложную логику
- Публикация через GitHub Pages (бесплатно)
Минусы Cursor:
- Выше порог входа (нужно понимать базовые концепции веб-разработки)
- Дольше по времени (2-3 часа вместо 30 минут)
Альтернативы Cursor:
- Trae — похож на Cursor, но заточен под вайбкодинг
- Claude Code — командная строка с AI для тех кто любит терминал
Какой инструмент выбрать для вайбкодинга
ЗадачаИнструментВремяБыстрый прототип для показаLovable / v030-60 минутПрототип с API и логикойCursor / Trae2-3 часаЭксперимент с новой идеейLovable30 минутПрототип который пойдет в продакшнCursor3-5 часов
Мой стек: 80% задач делаю в Lovable, 20% в Cursor (когда нужна сложная логика).
Как создать прототип сайта за 2 часа: пошаговый процесс вайбкодинга
Разберу на конкретном примере как я завайбкодил прототип за 2 часа.
Шаг 1. Написать ТЗ для AI
Важно: Я не пишу ТЗ руками. Использую LLM для написания требований (об этом была предыдущая статья).
Пример запроса в Claude:
"Нужен раздел с отчетами. Пользователь выбирает период, тип отчета и скачивает PDF. Учти что отчеты генерируются не мгновенно, нужен статус загрузки."
Claude задаст уточняющие вопросы, и через 10 минут у меня готовое ТЗ.
Промпт для написания требований: [ссылка из предыдущей статьи]
Шаг 2. Загрузить ТЗ в Lovable (или Cursor)
Открываю Lovable.
Добавляю:
- ТЗ из шага 1
- Промпт дизайнера/специалиста по прототипам (промпт в комментах к посту)
- Референсы (если есть) — скриншоты похожих интерфейсов
Пример промпта в Lovable:
Создай раздел с отчетами для CRM-системы.
Требования:
- Фильтры: период (дата от/до), тип отчета (dropdown)
- Кнопка "Сгенерировать отчет"
- После клика показать loader + статус "Генерируется..."
- Когда готово → кнопка "Скачать PDF"
- Использовать современный дизайн, Tailwind CSS
Референсы:
[прикрепляю скриншот похожего интерфейса]
Шаг 3. Итерации с AI
Lovable генерирует код → я проверяю результат → даю комментарии.
Пример комментария:
"Кнопка слишком большая, сделай как в Material Design. И добавь loading state когда отчет генерируется."
Обычно за 3-5 итераций получается то что нужно.
Время на итерации: 10-15 минут.
Шаг 4. Публикация и показ
В Lovable:
- Нажимаю "Publish" → получаю ссылку
- Отправляю стейкхолдеру
В Cursor:
- Заливаю на GitHub Pages → получаю ссылку
Профит! Довольный иду показывать результат и собираю реальную обратную связь.
Итого времени: 2 часа (30 минут ТЗ + 1 час вайбкодинг + 30 минут правки).
Примеры прототипов которые я завайбкодил
Что мне удалось создать с помощью вайбкодинга:
1. Раздел с отчетами (для работы в PRYSM)
- Задача: Добавить раздел где пользователи могут скачивать отчеты
- Время: 2 часа
- Инструмент: Cursor
- Результат: Работающий прототип, который генеральный директор использует на пресейлах
Что получилось:
Полноценный интерфейс с фильтрами, генерацией PDF, статусами загрузки. Всё кликабельно, можно показать клиенту.
2. Habbiter — сервис для трекинга привычек
- Задача: MVP для личного проекта
- Время: 3 часа
- Инструмент: Lovable
- Результат: Полноценное приложение с дашбордом и статистикой
Что получилось:
Работающее приложение где можно добавлять привычки, отмечать выполнение, смотреть статистику. Опубликовал, дал ссылку друзьям для теста.
3. Новый дизайн для soprovodai.ru
- Задача: Редизайн главной страницы
- Время: 2 часа
- Инструмент: v0
- Результат: Прототип который я показал пользователям для сбора фидбека
Что получилось:
Современный лендинг с анимациями, призывами к действию. Показал в чате подписчикам, собрал комментарии, понял что менять.
4. Лендинг для Vibecoding-сессии
- Задача: Простой лендинг для анонса обучающей сессии
- Время: 1 час
- Инструмент: Lovable
- Результат: Опубликованный сайт с формой регистрации
Что получилось:
Одностраничник с описанием, ценой, формой регистрации. Подключил интеграцию с Google Forms для сбора заявок.
Общее: Все эти прототипы я сделал сам, без дизайнера, без разработчиков. Только вайбкодинг.
Когда вайбкодинг прототипов работает (а когда нет)
Вайбкодинг работает отлично для:
- Прототипы для показа стейкхолдерам — быстро, наглядно, кликабельно
- MVP личных проектов — можно запустить за выходные
- Дашборды и админки — табличные интерфейсы AI делает хорошо
- Лендинги — одностраничники с формами и призывами к действию
- Формы и страницы с простой логикой — регистрация, настройки, профили
Правило: Если задача = "нужен быстрый рабочий прототип чтобы проверить идею" — вайбкодинг идеален.
❌ Вайбкодинг НЕ работает (или работает плохо) для:
- Сложные анимации — лучше дизайнер
- Уникальный брендинг — AI сделает "как у всех"
- Мобильные приложения (нативные) — Lovable/Cursor делают веб, не iOS/Android
- Интерфейсы с нестандартными UI-паттернами — AI знает только популярные решения
Правило: Если задача требует "креативного взгляда дизайнера" или "уникального стиля бренда" — не подходит.
Когда использовать вайбкодинг вместо Figma
Используй вайбкодинг если:
- ✅ Нужно быстро проверить идею
- ✅ Нет дизайнера или он занят
- ✅ Нужен работающий интерфейс с логикой (не статичный макет)
- ✅ Хочешь показать прототип с реальными данными
Используй Figma если:
- ✅ Нужен детальный дизайн для финальной разработки
- ✅ Важен уникальный брендинг
- ✅ Работаешь над сложными анимациями
- ✅ Нужно согласовать визуал с командой
Мой подход: Вайбкодинг для ранних стадий (идея → прототип → фидбек), Figma для финальной разработки (согласованный дизайн → передача разрабам).
Подводные камни вайбкодинга
1. Слепое доверие к AI
Проблема: AI может сгенерировать красивый интерфейс, но с плохим UX.
Пример:
Lovable сделал форму с 10 полями на одном экране. Красиво, но пользователи не будут заполнять. Надо разбить на шаги.
Решение: Проверяй логику взаимодействия сам. Задавай вопросы: "А что если пользователь нажмет сюда? А если данных нет?"
2. Технический долг в коде
Проблема: Код от AI часто не production-ready.
Пример:
Lovable генерирует рабочий код, но там нет обработки ошибок, нет валидации, нет оптимизации.
Решение: Если прототип зашёл и переходит в разработку, разработчики перепишут код нормально. Прототип — это просто proof of concept, не финальный продукт.
3. Дизайнер обижается
Проблема: Дизайнер может воспринять твои прототипы как "я без тебя справлюсь".
Реальная ситуация:
На моей работе дизайнер несколько раз говорил "Стас меня уволят, завязывай"
Решение: Объясни что это черновик для сбора фидбека, а финальный дизайн все равно делает дизайнер. Вайбкодинг не заменяет дизайнера, а ускоряет работу продакта.
4. Завышенные ожидания от прототипа
Проблема: Стейкхолдеры видят кликабельный прототип и думают что разработка займет неделю.
Реальная ситуация:
Показал прототип, CEO говорит "Ахуенно, запускаем завтра!". Приходится объяснять что это макет, а реальная разработка — это месяц работы.
Решение: Сразу объясни что это прототип для проверки идеи. Реальная разработка включает: бэкенд, безопасность, тестирование, оптимизацию.
5. AI генерирует устаревшие решения
Проблема: AI обучен на данных из интернета, где много устаревших практик.
Пример:
Cursor сгенерировал код с использованием библиотеки которая deprecated.
Решение: Если ты технически подкован, проверяй какие библиотеки использует AI. Если нет — не страшно, это всё равно прототип.
Итог: Вайбкодинг — это не замена дизайнера, а инструмент продакта
Вайбкодинг прототипов — это не замена дизайнера или разработчика. Это инструмент для ускорения цикла обратной связи.
Главные преимущества вайбкодинга:
- Скорость: 2 часа вместо недели
- Независимость: не нужно ждать дизайнера
- Гибкость: правки делаются моментально
- Реализм: показываешь не статичный макет, а работающий интерфейс
Инструменты для вайбкодинга:
- Lovable — для быстрых прототипов (30-60 минут)
- Cursor — для сложных задач с API (2-3 часа)
- v0 — альтернатива Lovable от Vercel
Как начать вайбкодинг:
- Возьми простую задачу (лендинг, форма, дашборд)
- Напиши ТЗ через Claude (промпт из предыдущей статьи)
- Открой Lovable или v0
- Используй промпт дизайнера (в комментах к посту в ТГ)
- Через 2 часа покажи результат коллегам
Попробуй на следующей фиче. И делись результатами — какие инструменты используешь? Какие трудности встретил?
Полезные материалы: