От идеи до MVP за один вечер: пошаговый разбор

Почему именно этот пример? Потому что он достаточно простой, чтобы уместиться в один вечер, и достаточно реальный, чтобы показать весь цикл — от формулировки задачи до деплоя. Сервис записи — это типичный продукт малого бизнеса: форма для клиентов, админка для владельца, база данных для хранения записей. Если вы поймёте этот паттерн, вы сможете применить его к десяткам похожих задач: записи к врачу, бронирования столиков, регистрации на события.

Фаза 1: Формулировка — 10 минут, которые определяют всё

Прежде чем открывать любой инструмент, возьмите лист бумаги (или заметку в телефоне) и запишите три вещи. Что делает продукт — одним предложением. Кто им пользуется — конкретные роли. Какие 3–5 функций абсолютно необходимы для первой версии.

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

Обратите внимание на то, чего здесь нет: нет оплаты онлайн, нет системы отзывов, нет интеграции с Instagram, нет push-уведомлений. Всё это может появиться позже, но для MVP это лишний вес. Дисциплина отсечения лишнего — один из самых важных навыков в продуктовой разработке, и вайбкодинг не исключение.

Фаза 2: Генерация интерфейса — 30 минут

Открываем Bolt.new (или Lovable — процесс похожий) и пишем наш первый промпт. Здесь мы применяем всё, что обсуждали в статье про промпты: конкретность, контекст, визуальный стиль.

Создай веб-приложение для онлайн-записи к мастеру маникюра. Главная страница: список услуг с названием, описанием и ценой в тенге, календарь для выбора даты и доступных слотов времени, форма записи с полями «Имя» и «Телефон». Визуальный стиль: минималистичный, мягкая розово-белая палитра, округлые карточки с тенями, шрифт Montserrat. Мобильная адаптация обязательна.

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

Фаза 3: Итерирование дизайна — 20 минут

Теперь начинается самая приятная часть. Мы смотрим на результат и точечно корректируем. Каждая правка — короткий промпт, 10–20 секунд на формулировку.

«Сделай карточки услуг в две колонки на десктопе и в одну на мобильном». «Добавь индикатор загрузки при выборе даты». «Сделай кнопку "Записаться" крупнее и добавь ей лёгкую анимацию при наведении». «Поменяй иконки на более мягкие, закруглённые». «Добавь в шапку логотип — просто текст с названием салона красивым шрифтом».

За 20 минут вы легко пройдёте 10–15 таких итераций. Каждая из них занимает от 30 секунд до двух минут. К концу этой фазы интерфейс будет выглядеть профессионально и ощущаться как настоящий продукт, а не как шаблон.

Фаза 4: Подключение базы данных — 30 минут

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

Подключи Supabase. Создай таблицы: services с полями id, name, description, price (в тенге), duration_minutes. И bookings с полями id, client_name, client_phone, service_id (ссылка на services), booking_date, booking_time, status (значения: new, confirmed, completed, cancelled). При отправке формы записи сохраняй данные в таблицу bookings со статусом new.

ИИ сгенерирует код интеграции, создаст SQL-миграции для таблиц, подключит клиентскую библиотеку Supabase. Вам нужно будет создать проект в Supabase (это бесплатно), скопировать ключи подключения — и всё, ваше приложение работает с реальной базой данных. Записи сохраняются, данные не теряются при перезагрузке страницы.

Фаза 5: Админка — 20 минут

Клиентская часть готова, но мастеру нужна панель управления, чтобы видеть записи и управлять ими. Снова один промпт.

Создай страницу /admin с таблицей всех записей из Supabase. Столбцы: имя клиента, телефон, услуга, дата, время, статус. Добавь возможность менять статус записи: новая → подтверждена → завершена, или отменена на любом этапе. Добавь фильтры по дате и по статусу. Стиль — чистый, табличный, без лишних украшений.

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

Фаза 6: Деплой и запуск — 10 минут

Если вы работали в Bolt.new или Replit — ваше приложение уже задеплоено, у вас есть публичная ссылка. Если работали в Cursor — подключите Vercel: создайте аккаунт, свяжите с GitHub-репозиторием, нажмите Deploy. Vercel автоматически подхватит настройки и через пару минут ваш сервис будет доступен по красивой ссылке.

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