Как создать сайт в Lovable пошаговый гайд по вайбкодингу с нуля до публикации
Сайт в Lovable AI создаётся за один вечер: 15-30 минут на генерацию первой версии, ещё час на итерации и публикацию. Бесплатный план даёт 5 кредитов в день: для лендинга хватает. Для полноценного приложения с базой данных нужен Pro за $25/месяц.
Ниже пошаговый процесс с конкретными примерами промптов, объяснением Plan Mode и нюансами Supabase, которые сэкономят вам время и кредиты.
Шаг 0. Подготовка: идея и промпт до того, как открыть Lovable
Самая частая ошибка: открыть Lovable и сразу что-то написать. Результат будет хуже, а кредитов уйдёт больше.
Подготовьте промпт заранее в Google Docs или Word. Оптимальная длина — 1,000-1,500 символов. Структура:
- Заголовки для разделов (Hero, О нас, Портфолио, Контакты)
- Краткие предложения для логики каждого блока
- Описание стиля (тёмный/светлый, цвета бренда, настроение)
Соберите материалы через ChatGPT. Работающий приём из реальной практики: задайте ChatGPT 15-20 вопросов о вашем бизнесе голосом (отвечать голосом в 3-4 раза быстрее). ChatGPT формирует структурированное ТЗ, вы вставляете его в Lovable.
Добавьте референсы. Нашли сайт с нужным дизайном — сделайте скриншот и приложите к промпту. Lovable понимает «сделай похожий стиль шрифтов и цветов» с визуальным примером значительно лучше, чем без него.
Мета-промптинг (для новичков). Если не знаете, как сформулировать задачу — опишите идею в чате Lovable в Plan Mode и попросите: «Переформулируй мою задачу в чёткий стартовый промпт для Lovable». ИИ сгенерирует более точный промпт из вашего «сырого» описания.
Шаг 1. Регистрация и первый запрос
Зайдите на lovable.dev и зарегистрируйтесь через Google-аккаунт: быстрее всего, кредитная карта не нужна.
На главной странице нажмите «New Project». Выберите режим:
Build Mode — стандартный. Lovable сразу пишет код и показывает результат.
Plan Mode — сначала показывает план изменений, вы его утверждаете, потом запускает генерацию. Рекомендуется начинать с Plan Mode: это снижает количество неожиданных изменений и экономит кредиты.
Для активации Plan Mode нажмите переключатель в правой части поля ввода перед первым промптом.
Пример первого промпта для лендинга:
Создай лендинг для AI-агентства по внедрению инструментов.
Стиль: тёмный фон, неоновые акценты (фиолетовый/синий),
минималистичный, современный.
Блоки:
- Hero: большой заголовок "Внедряем ИИ в ваш бизнес",
подзаголовок, кнопка CTA "Получить консультацию"
- Преимущества: 3 карточки (Скорость, Качество, Экономия)
- Кейсы: секция с 2-3 примерами работ
- Форма обратной связи: имя, email, телефон, кнопка отправки
- Футер: копирайт, ссылки на соцсети
Адаптивная вёрстка для мобильных.Шаг 2. Работа с Plan Mode и итерации
После первой генерации Lovable покажет результат в правой части экрана. Не жмите «одобрить» сразу: изучите план.
Как читать план в Plan Mode:
- Lovable показывает, какие компоненты создаст
- Можно добавить комментарий или отредактировать план прямо в интерфейсе
- Нажмите «реализовать» только когда план выглядит правильно
Добавляйте функции по одной, а не все сразу. Это главное правило качественного вайбкодинга. Не «сделай всё» в одном промпте, а постепенно: сначала структура, потом дизайн, потом функционал.
Не более 2-3 последовательных запросов в одном «раунде» Plan Mode. Это позволяет отслеживать изменения и при необходимости откатиться через кнопку History.
Пример итеративных запросов:
// Запрос 2 — дизайн
Измени цвет кнопки CTA на ярко-фиолетовый (#7C3AED).
Добавь лёгкую анимацию при наведении.
// Запрос 3 — контент
В секции «Преимущества» замени иконки на более современные
(Bolt, Rocket, Star). Добавь под каждую карточку
короткий текст 15-20 слов.
// Запрос 4 — мобильная версия
Проверь отображение на мобильных. Карточки должны
выстраиваться в одну колонку, кнопки занимать полную ширину.Шаг 3. Visual Edits — точечные правки без промптов
Visual Edits — это режим визуального редактора, который доступен через вкладку «Edits» в интерфейсе. Выбираете элемент на превью сайта и прямо пишете, что изменить: «Make it orange», «Increase font size», «Delete this section».
Почему это важно: Visual Edits стоят 0.5 кредита вместо 1-1.5 за полноценный промпт. На бесплатном плане это критично: 5 кредитов в день стараетесь потратить с умом.
Лайфхак из практики: для изменения одного CSS-свойства (цвет, отступ, шрифт) — всегда используйте Visual Edits. Для структурных изменений (новый блок, логика) — промпт.
Обязательно нажимайте «Save» после каждого изменения в Visual Edits. Без сохранения изменения теряются при обновлении страницы.
Шаг 4. Custom Knowledge — память проекта
При работе над большим проектом Lovable «забывает» контекст по мере роста. Решение: Custom Knowledge.
Зайдите в настройки проекта → Knowledge. Введите постоянные правила:
Всегда используй тёмный фон (#0F0F0F) и акцентный цвет #7C3AED.
Шрифт заголовков: Inter Bold. Основной текст: Inter Regular.
Кнопки всегда с закруглёнными углами (radius: 8px).
Поддерживай светлую и тёмную тему.
Используй только российские платёжные методы.Custom Knowledge работает во всех последующих промптах. Это экономит кредиты: не нужно повторять основные инструкции каждый раз.
Шаг 5. Подключение Supabase для Lovable AI App с бэкендом
Если нужна форма сбора данных, авторизация, личный кабинет: без бэкенда не обойтись. Lovable использует Supabase.
Вариант 1: Lovable Cloud (самый простой). В чате напишите: «Подключи Lovable Cloud». Это автоматически создаёт Supabase-бэкенд без ручной настройки. Включено в платные планы, на бесплатном — $25/мес бесплатного хостинга через Q1 2026.
Вариант 2: Собственный Supabase. Зарегистрируйтесь на supabase.com (бесплатный план), создайте проект, получите URL и API Key. В Lovable: Settings → Integrations → Supabase → вставьте данные.
Важный нюанс с RLS. Supabase использует Row Level Security — правила доступа к данным. Lovable настраивает базовые RLS-политики, но при сложной логике (например, пользователь видит только свои записи) нужна ручная настройка в Supabase Dashboard. Это главная техническая ловушка для нетехнических пользователей: данные «не сохраняются» или «не отображаются» — в 90% случаев причина в RLS.
Пример промпта для добавления формы с сохранением:
Добавь форму сбора заявок: имя, email, телефон, сообщение.
При отправке данные должны сохраняться в Supabase
в таблицу "leads". Покажи пользователю сообщение об успехе.
Данные таблицы должны быть доступны только авторизованным
администраторам.Перед настройкой схемы БД: сначала отточите UI. Менять структуру таблиц после создания сложнее, чем переделать дизайн.
Шаг 6. Безопасность перед публикацией
Lovable имеет встроенный Security Scan в 2.0, но перед каждым деплоем проверьте вручную.
Чек-лист безопасности:
- API-ключи не видны в публичном коде (Lovable прячет их в переменных окружения Supabase)
- RLS включён для всех таблиц с пользовательскими данными
- Форма с капчей или rate limiting, чтобы не принимать спам
- Политика конфиденциальности — сгенерируйте через ChatGPT или Termly и добавьте ссылку в футер
Добавь ссылку в футер "Политика конфиденциальности"
с переходом на /privacy. Создай страницу /privacy
со стандартным текстом политики конфиденциальности
для сайта, собирающего email и телефон.Шаг 7. Публикация сайта
Вариант 1: Быстрая публикация на lovable.app — нажмите кнопку Publish в правом верхнем углу. Сайт опубликуется по адресу ваш-проект.lovable.app. Бесплатно, поддерживает HTTPS — можно встраивать в Telegram Mini Apps.
Можно ограничить видимость перед публикацией (кнопка рядом с Publish): только вы, только по ссылке, или публично.
Вариант 2: Собственный домен — подключается в Settings → Domain. Нужно настроить DNS-записи типа A и TXT у вашего регистратора. Процесс занимает 5-15 минут, даже если регистратор не в «официальном списке» поддерживаемых — просто вручную настройте нужные записи.
Вариант 3: GitHub + Vercel — экспортируйте проект на GitHub через Settings → GitHub. Подключите GitHub-репозиторий к Vercel. Это даёт бесплатный хостинг, автоматический деплой при каждом изменении и возможность доработки кода в Cursor или другом IDE.
Максим: "Мы в NanaBanana делали MVP-лендинги именно через Lovable с выгрузкой на GitHub. Ребят, это работает — за вечер получаешь рабочую ссылку, которую не стыдно показать инвестору. Главный лайфхак: первый промпт пишите в ChatGPT голосом, потом вставляйте в Lovable. В разы быстрее и результат лучше."
Разбор реального примера: сайт агентства за один вечер
Вот как выглядит типичная сессия вайбкодинга в Lovable.
19:00 — подготовка (15 минут) Голосом надиктовываю ChatGPT описание агентства. ChatGPT задаёт уточняющие вопросы, формирует структурированное ТЗ. Копирую в Google Docs, корректирую.
19:15 — первая генерация (10 минут) Вставляю промпт в Lovable с Plan Mode. Просматриваю план, утверждаю. Lovable генерирует первую версию. Результат сразу выглядит хорошо: тёмный фон, правильные блоки.
19:25 — итерации дизайна (30 минут)
- Visual Edits: меняю цвета кнопок и шрифт заголовков
- Промпт: добавляю секцию с кейсами и карточками
- Промпт: настраиваю мобильную версию
- History: откатываюсь к предыдущей версии, когда анимация оказалась лишней
20:00 — форма и аналитика (20 минут)
- Добавляю форму обратной связи с Lovable Cloud
- Добавляю политику конфиденциальности
- Настраиваю кнопку «Консультация» с переходом в Telegram-канал
20:20 — публикация (5 минут) Publish → сайт на lovable.app. Параллельно экспортирую на GitHub для дальнейших доработок.
20:25 — готово. Рабочая ссылка, которую можно отправить клиенту или инвестору.
Lovable AI Pro: когда переходить на платный план
На бесплатном плане (5 кредитов/день) реально создать лендинг, просто медленнее. За несколько дней итераций получите хороший результат.
Переходите на Pro ($25/месяц, 100 кредитов + 5 ежедневных), когда:
- Строите приложение с авторизацией и базой данных
- Нужны приватные проекты (на бесплатном — только публичные)
- Хотите кастомный домен
- Активно итерируете и 5 кредитов в день не хватает
Экономия кредитов на Pro:
- Используйте Visual Edits для мелких правок (0.5 кредита)
- Кнопка «Try to fix» при системных ошибках — бесплатна
- Plan Mode перед сложными изменениями — меньше переделок
- Custom Knowledge — не повторяете инструкции в каждом промпте
- Дебаг через GitHub локально, а не через промпты Lovable
Если вы студент, скидка 50% на все планы. Достаточно подтвердить .edu-почту.
FAQ
Как создать сайт в Lovable с нуля? Зарегистрируйтесь на lovable.dev через Google, нажмите New Project, включите Plan Mode и вставьте промпт с описанием сайта. Lovable покажет план и сгенерирует первую версию за несколько минут. Бесплатного плана (5 кредитов/день) хватает для создания лендинга за 2-3 дня итераций.
Что такое Lovable AI App и как он работает? Lovable AI App это платформа вайбкодинга, которая генерирует React-приложения из текстовых промптов. Вы описываете сайт или приложение, Lovable создаёт реальный код с фронтендом на React/Tailwind и бэкендом через Supabase. Код можно экспортировать на GitHub.
Стоит ли покупать Lovable AI Pro ($25/мес)? Для лендинга или простого сайта: нет, бесплатного плана достаточно. Для приложения с авторизацией, базой данных и приватными проектами: Pro оправдывает себя. Аналог у фрилансера стоил бы минимум $5,000.
Что такое Sonata AI Lovable App? Sonata это один из внутренних AI-движков, которые Lovable использует для генерации кода. Пользователи не выбирают модель напрямую: Lovable использует проприетарный пайплайн, оптимизированный под задачи полноценного React-приложения.
Как подключить собственный домен к сайту Lovable? Settings → Domain → введите ваш домен. Lovable покажет DNS-записи (A и TXT), которые нужно добавить у вашего регистратора (NameCheap, reg.ru, Squarespace и т.д.). После настройки домен подключается за 5-30 минут.
Что делать, если сайт сломался после правки? Нажмите кнопку History в левой панели и выберите предыдущую версию. Это аналог Google Docs: можно откатиться к любой предыдущей точке. Если ошибка системная, кнопка «Try to fix» бесплатна и не тратит кредиты.
Как опубликовать Lovable сайт в Telegram? Опубликуйте сайт через Publish на lovable.app-домен (бесплатно, поддерживает HTTPS). Ссылку можно добавить в Telegram Mini App через BotFather. Кнопки CTA лучше настроить с переходом напрямую в личные сообщения Telegram-канала, конверсия выше, чем через форму обратной связи.
Глоссарий
Вайбкодинг — создание продуктов через описание на обычном языке без ручного программирования. Lovable — главный инструмент вайбкодинга для веб-приложений.
Plan Mode — режим, в котором Lovable сначала показывает план изменений без генерации кода. Вы утверждаете план и только потом запускаете реализацию.
Visual Edits — визуальный редактор для точечных правок (цвет, отступ, шрифт) без текстового промпта. Стоит 0.5 кредита вместо 1-2 за полный запрос.
Custom Knowledge — раздел настроек проекта, где хранятся постоянные правила. Lovable учитывает их в каждом последующем промпте без повторного напоминания.
Supabase — open-source бэкенд-сервис (база данных, авторизация, хранилище). Lovable использует Supabase для всех функций, требующих хранения данных.
RLS (Row Level Security) — механизм безопасности в Supabase: кто и какие строки базы данных может читать и изменять. Главная техническая ловушка при работе с бэкендом в Lovable.
Meta-prompting — приём, при котором вы просите ИИ сформулировать промпт вместо вас. Описываете идею «своими словами» в Chat Mode, Lovable генерирует чёткий и точный промпт для Build Mode.
Если хотите сравнить Lovable с другими инструментами вайбкодинга, смотрите каталог AI-инструментов на VibeCoderz. Там обзоры Bolt.new, Cursor, Claude Code и v0 с актуальными ценами.
По вопросам выбора инструмента под конкретный проект — запишитесь на консультацию к Максиму.
Обновлено: май 2026