Вайбкодинг интернет-магазина каталог, корзина и ЮKassa за 1 день

Вайбкодинг интернет-магазина занимает один рабочий день, если собирать его по проверенной связке: Lovable для витрины, Supabase для каталога и корзины, ЮKassa для оплаты и Telegram-бот для уведомлений о заказах. Ниже - пошаговые промпты для каждого этапа, от базы данных до скрытой админки на внутреннем пути. Разберем конкретно, что писать нейросети на каждом шаге и где новички теряют часы на ошибках, которых легко избежать.

Вайбкодинг интернет-магазина с нуля до рабочей продажи занимает один день: связка Lovable и Supabase дает каталог с корзиной, ЮKassa API закрывает оплату, а Telegram-бот шлет уведомления о каждом заказе. В статье - готовые промпты, таблица цен и разбор пяти типичных ошибок сборки.

Сколько времени реально нужно на вайбкодинг интернет-магазина?

Один день хватает на рабочий MVP: 2-3 часа на каталог и корзину в Supabase, час на ЮKassa, час на Telegram-уведомления, остаток - на дизайн и тесты платежей.

Максим и Лиза собрали портал VibeCoderz за неделю тремя скриптами голосом в Claude Code, а веб-версию GoBanana - за 3 часа после выхода новой модели. Итог GoBanana - 12 миллионов рублей выручки без единого рубля на рекламу. Магазин с оплатой и уведомлениями укладывается в похожий темп.

Час на архитектуру и список сущностей: товары, заказы, пользователи. Час на дизайн через промпты в Lovable. Три часа на бэкенд, логику корзины и статусы заказа. Ещё час на тесты оплаты в песочнице ЮKassa. Такой график реален, если писать структурированные промпты, а не бросать нейросети одну фразу и надеяться на чудо.

Экономия времени идет не от волшебства, а от разделения задач. Lovable отвечает за то, что видит покупатель. Supabase хранит данные и логику под капотом. В туториале по сборке eCommerce-бэкенда на MGX команда AI-агентов проходит этапы исследования, планирования, архитектуры и разработки сама, а человек только ставит задачи и проверяет результат - тот же принцип работает и при вайбкодинге магазина руками через Lovable и Supabase.

Если делаете магазин впервые, закладывайте день с запасом. На первой итерации почти всегда всплывает пара нюансов с оплатой или уведомлениями, которые легче поймать сразу, чем чинить после первого реального заказа.

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

Какой стек выбрать: Lovable для фронта или Supabase для базы?

Это не выбор одного инструмента. Lovable строит интерфейс и логику страниц, Supabase хранит товары, заказы и пользователей. Вместе они закрывают полный стек интернет-магазина.

Lovable в 2026 году работает как full-stack AI-платформа: описываешь идею текстом, сервис собирает интерфейс, подключает логику и помогает с деплоем и правками. Supabase дает готовую Postgres-базу, аутентификацию и автосгенерированный API без написания бэкенда с нуля, а бесплатный тариф держит до 50 000 активных пользователей (supabase.com/pricing).

Такое разделение снимает главную боль вайбкодинга магазина - хаос в данных. Когда каталог, корзина и заказы живут в отдельной Postgres-базе с Row Level Security, покупатель физически не сможет увидеть чужой заказ или отредактировать цену через консоль браузера.

Есть и альтернатива - собрать магазин одним инструментом с командой AI-агентов, как показано в туториале по MGX: агент-исследователь Iris изучает архитектуру и аутентификацию, агент-менеджер Mike пишет техническое задание, а агент-инженер Alex собирает фронт и бэк вместе. Для быстрого прототипа это удобно. Но когда нужен контроль над структурой заказов и оплатой, связка Lovable плюс Supabase дает больше прозрачности: вы видите каждую таблицу и можете править запросы напрямую.

Как собрать каталог и корзину в Supabase за один присест?

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

Раньше на такую связку уходили недели переписки с подрядчиком. Сейчас всю логику можно описать текстом и получить рабочую структуру за один присест - без ручного написания SQL-схем.

Промпт для структуры базы данных

Подключите Supabase к проекту в Lovable через раздел интеграций, затем дайте нейросети такой промпт:

Создай в Supabase структуру для интернет-магазина:
- таблица products: название, описание, цена, изображение, категория, остаток на складе
- таблица orders: покупатель, список товаров, сумма, статус (new, paid, shipped, cancelled), дата
- таблица customers: имя, телефон, email
Включи Row Level Security: покупатель видит только свои заказы,
администратор видит все. Сгенерируй тестовые данные для 10 товаров.

Промпт для каталога и фильтров

Собери страницу каталога товаров из таблицы products в Supabase.
Нужны: сетка карточек, фильтр по категории, сортировка по цене,
поиск по названию. На карточке - изображение, цена, кнопка "В корзину".
Дизайн минималистичный, адаптивный под мобильные устройства.

Промпт для корзины и оформления заказа

Добавь корзину: иконка со счетчиком в шапке, страница корзины
с изменением количества и удалением товара, итоговая сумма.
На странице оформления - форма (имя, телефон, email, адрес доставки),
кнопка "Оформить заказ" создает запись в таблице orders со статусом new.

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

Как подключить ЮKassa API и не запутаться в статусах платежа?

ЮKassa дает тестовый режим без регистрации ИП или ООО, поэтому первую интеграцию делают там. Комиссия за карты для ИП стартует от 2,8%, СБП дешевле - от 0,4%.

ЮKassa предоставляет возможность тестировать платежи без ИП и ООО, что удобно на старте (yookassa.ru/fees). При работе с рублями сумму нужно умножать на 100 - API принимает копейки, а не рубли, и это самая частая причина, почему первый тестовый платеж не проходит.

Промпт для интеграции ЮKassa

Подключи оплату через ЮKassa API к оформлению заказа.
При создании заказа отправляй запрос на создание платежа
с суммой в копейках (умножь рубли на 100) и описанием заказа.
После оплаты ЮKassa должна вызывать webhook на моем сервере -
обнови статус заказа в Supabase на "paid" и запиши ID платежа.
Используй тестовый shop_id и secret_key из личного кабинета ЮKassa.

Прикинь: один забытый множитель на 100 в сумме ЮKassa - и все платежи в системе проходят ровно в сто раз дешевле. Проверяйте эту строку кода первой при тестировании.

Комиссия зависит от способа оплаты и оборота. Ниже - ориентир по базовым тарифам для ИП на 2026 год.

Для теста оплаты в песочнице ЮKassa используются демо-данные карты из документации сервиса - никаких реальных денег на этом этапе не списывается. Переключение на боевой режим происходит после подписания договора и замены тестового токена на реальный shop_id.

Как настроить уведомления о заказах в Telegram без разработчика?

Telegram-уведомления заменяют почту, когда важна скорость. Бот создается бесплатно через BotFather за пару минут, а сообщение о новом заказе приходит через пару секунд после оплаты.

Email-уведомления часто теряются среди спама, а вот сообщение в Telegram читают сразу. Разница особенно заметна для небольших магазинов, где владелец сам обрабатывает заказы вручную и должен реагировать быстро.

Создайте бота через @BotFather, сохраните токен и chat_id личного чата или рабочей группы. Если уведомления должны приходить в группу, бота нужно добавить туда и выдать права администратора - без этого сообщения просто не отправятся.

Промпт для Telegram-уведомлений

Настрой Supabase Edge Function, которая срабатывает при появлении
новой записи в таблице orders со статусом "paid".
Функция должна отправлять сообщение в Telegram через Bot API:
номер заказа, имя покупателя, список товаров, сумма, телефон.
Используй переменные окружения для токена бота и chat_id.
Формат сообщения - Markdown, с переносами строк через \n.

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

Где спрятать админку интернет-магазина от посторонних глаз?

Админку не выносят на главное меню сайта. Достаточно внутреннего пути вроде /panel-7x2k и проверки роли администратора в Supabase на каждом запросе.

Проще всего добавить в таблицу пользователей поле role со значениями user и admin, а затем проверять его в middleware перед отдачей страницы. Такой паттерн используют даже крупные каталоги на Sanity и NextAuth - роль хранится в базе, а не угадывается по URL.

Промпт для админ-панели

Собери админ-панель на пути /panel-7x2k (не показывай ссылку
в навигации сайта). Доступ только для пользователей с role = admin
в таблице customers, проверка через Supabase Auth.
Нужны разделы: список заказов с фильтром по статусу,
смена статуса заказа вручную, список товаров с редактированием
цены и остатка. Добавь meta noindex, чтобы страница не попала в поиск.

Тег noindex не пускает страницу в выдачу Google и Яндекса, но сам по себе не защищает от прямого перехода по ссылке - проверка роли в базе обязательна, а не опциональна.

Сколько стоит вайбкодинг магазина в месяц

Основные расходы после запуска - подписки на инструменты и комиссия платежной системы. Реклама на старте не нужна.

Для первого месяца тестирования хватает бесплатных тарифов Lovable и Supabase. Как только магазин выходит на реальные продажи, апгрейд до Pro на обоих сервисах обойдется примерно в 50 долларов в месяц (lovable.dev).

Какие ошибки убивают магазин, собранный за один день?

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

Пять ошибок встречаются регулярно, и почти все они лечатся одной строчкой в промпте, если знать, где искать.

Первая - сумма платежа в рублях вместо копеек. ЮKassa примет запрос, но спишет сумму, отличающуюся в сто раз от реальной цены товара. Вторая - отсутствие проверки подписи webhook: без неё любой сторонний запрос сможет пометить заказ как оплаченный. Третья - публичная админка без проверки роли, доступная просто по прямой ссылке. Четвертая - права администратора не выданы Telegram-боту в группе, из-за чего уведомления тихо не приходят. Пятая - тестовый режим ЮKassa забыли переключить на боевой перед реальным запуском, и первые покупатели платят «в никуда».

Каждую из этих ошибок можно поймать за 10 минут, если протестировать полный путь заказа от корзины до сообщения в Telegram хотя бы один раз перед публикацией ссылки на магазин.

Часто задаваемые вопросы

Можно ли собрать интернет-магазин через вайбкодинг совсем без кода?

Да, Lovable и Supabase позволяют описать структуру и логику текстом. Но базовое понимание того, что такое база данных и API, экономит часы на отладке ошибок в промптах.

Сколько стоит вайбкодинг магазина для старта?

Первый месяц можно уложиться в бесплатные тарифы Lovable и Supabase. Реальные расходы начинаются, когда трафик или число заказов превышает лимиты бесплатного тарифа.

Нужно ли открывать ИП, чтобы протестировать оплату через ЮKassa?

Нет, тестовый режим ЮKassa работает без ИП и ООО. Регистрация бизнеса нужна только для перехода на боевые платежи с реальными покупателями.

Как проверить, что оплата через ЮKassa работает правильно?

Оформите тестовый заказ с демо-данными карты из документации ЮKassa и проверьте, что статус заказа в Supabase сменился на «paid» после webhook.

Почему уведомления о заказах в Telegram лучше email?

Email часто теряется среди других писем, а сообщение в Telegram приходит мгновенно и не требует захода в почту. Для быстрой реакции на заказ это критично.

Можно ли использовать Lovable без Supabase?

Можно, но тогда каталог и заказы придется хранить где-то еще, вручную настраивая базу и API. Связка с Supabase закрывает эту часть работы за один промпт.

Как защитить админку магазина от посторонних?

Внутренний путь без ссылки в навигации, проверка роли администратора на каждом запросе и meta noindex снижают риск случайного или намеренного доступа.

Собрать магазин своими силами реально за день, но чем сложнее продукт, тем больше пригодится готовая карта инструментов. Полный каталог AI IDE и no-code платформ для вайбкодинга смотрите в каталоге инструментов VibeCoderz, а обзор связки для сборки интерфейсов - на странице Lovable. Если после первой сборки бэкенд начинает капризничать, для точечной отладки кода часто выручает Claude Code.

Если нужна помощь с архитектурой конкретного магазина или разбор промптов под вашу нишу, запишитесь на консультацию к Максиму.

Обновлено: октябрь 2026.