Lovable позволяет собрать сайт или веб-приложение обычным текстовым запросом: вы описываете задачу, сервис создаёт интерфейс и код, а дальше проект можно дорабатывать в диалоге. Но хороший результат редко получается из команды вроде «сделай мне сайт». Чем понятнее вы зададите структуру, аудиторию и нужное действие, тем меньше придётся переделывать.
Если вы пока только присматриваетесь к сервису, у нас есть отдельный обзор Lovable и его возможностей. Здесь же разберём практический путь: от пустого экрана до опубликованного проекта.
Что можно сделать в Lovable
Lovable подходит не только для лендингов. В нём можно собирать личные кабинеты, каталоги, небольшие SaaS-сервисы, внутренние панели, формы, приложения с авторизацией и базой данных. У новых проектов есть встроенный backend Lovable Cloud, а при необходимости можно подключить собственный Supabase, GitHub, платежи и внешние API.
Главное — не начинать сразу со сложной архитектуры. Для первого проекта лучше сначала собрать интерфейс и проверить логику, а уже потом добавлять авторизацию, базу и платежи.
Шаг 1. Создаём проект
После регистрации в Lovable на главной странице появляется поле для запроса. Можно начать с короткого описания идеи, но лучше сразу дать сервису четыре вещи:
- что вы создаёте;
- для кого;
- какие блоки или экраны нужны;
- что пользователь должен сделать на странице.
Например, вместо «сделай сайт кофейни» запрос можно сформулировать так:
Создай адаптивный сайт небольшой кофейни. Нужны первый экран с кнопкой бронирования, меню по категориям, фотографии, часы работы, адрес и форма обратной связи. Стиль тёплый и минималистичный. Сначала без авторизации и базы данных.
Так Lovable получает понятную рамку и реже начинает придумывать лишнее.
Если хотите подробнее разобраться с формулировками, мы собрали отдельный гайд как писать промпты для Lovable и экономить кредиты на правках.
Шаг 2. Проверяем первую версию
После первого запроса Lovable создаёт проект и показывает его в редакторе. Слева находится чат, справа — живой превью сайта. Не спешите сразу отправлять десять новых команд.
Сначала пройдитесь по странице как обычный посетитель:
- проверьте кнопки и ссылки;
- посмотрите мобильную версию;
- оцените порядок блоков;
- проверьте тексты и реальные сценарии;
- убедитесь, что ключевое действие заметно без долгого поиска.
Чем раньше вы заметите ошибку в структуре, тем дешевле её исправить. Перестроить один блок проще, чем переделывать готовый сайт после десяти следующих итераций.
Шаг 3. Исправляем по одному элементу
Для мелких правок не стоит каждый раз просить Lovable «переделать страницу». Лучше указывать конкретный элемент: заголовок, карточку, кнопку, форму или секцию.
Хорошая команда выглядит примерно так:
В блоке тарифов добавь третий план. Сохрани текущие цвета, шрифты и размеры карточек. Остальные секции не меняй.
Такая формулировка важна: вы не только говорите, что изменить, но и задаёте границы. Это снижает риск, что вместе с одной кнопкой внезапно поменяется половина страницы.
Шаг 4. Добавляем базу данных и вход пользователей
Когда интерфейс уже устраивает, можно переходить к функционалу. Lovable Cloud включает базу данных, авторизацию, хранилище файлов и серверные функции. Для большинства первых проектов отдельный аккаунт Supabase теперь вообще не обязателен.
Если вам нужен собственный backend и полный доступ к панели Supabase, посмотрите отдельную инструкцию Lovable + Supabase: как подключить базу данных, авторизацию и файлы.
Добавляйте функции последовательно. Сначала регистрацию, потом профиль пользователя, затем нужные таблицы и только после этого сложные сценарии. Так проще понять, где именно возникла ошибка.
Шаг 5. Тестируем сайт перед публикацией
Перед публикацией стоит пройти все основные сценарии вручную. Если есть форма — отправьте её. Если есть регистрация — создайте тестового пользователя. Если есть фильтры — переключите каждый вариант.
Особенно внимательно проверьте мобильную версию. Красивый десктопный макет ещё ничего не гарантирует: кнопка может уехать за экран, таблица — не помещаться, а модальное окно — перекрыть интерфейс.
Шаг 6. Публикуем проект
Lovable позволяет опубликовать проект на адресе вида lovable.app. Важный момент: опубликованный сайт является отдельной версией. Изменения, которые вы внесли в редакторе после публикации, не появятся на живом сайте сами — нужно снова опубликовать изменения.
Для тестового проекта адреса lovable.app достаточно. Для нормального сайта лучше подключить собственный домен. Пошаговую настройку мы вынесли в инструкцию как подключить свой домен к Lovable.
Сколько кредитов нужно новичку
На бесплатном тарифе Lovable можно попробовать основные функции и собрать небольшой проект. Но кредиты расходуются на работу агента, а в запущенных проектах — ещё и на Cloud и AI-функции.
Поэтому бессмысленные циклы «сделай красивее» → «нет, верни» → «попробуй ещё» быстро съедают лимит. Для первого знакомства Free подходит, а перед платной подпиской лучше понять, сколько запросов вы реально делаете и нужен ли вам собственный домен или дополнительные командные функции.
Актуальные планы и механику списания мы отдельно разобрали в статье тарифы Lovable, кредиты и стоимость работы.
Что делать после первого проекта
Когда базовый сайт уже работает, дальше всё зависит от задачи. Для коммерческого проекта обычно следующая цепочка выглядит так: собственный домен → SEO → GitHub → аналитика → авторизация → платежи.
Не обязательно включать всё сразу. Сильная сторона Lovable как раз в том, что проект можно наращивать постепенно, сохраняя рабочую версию после каждого этапа.
Практический тест перед большим проектом
Чтобы понять Lovable не по описанию, а по собственным цифрам, соберите маленький тестовый лендинг из пяти секций и не меняйте задачу по ходу работы. После каждого запроса открывайте историю сообщений и записывайте списанные кредиты.
У Lovable сейчас стоимость запроса зависит от сложности: даже маленькая правка и добавление авторизации расходуют разное количество. Поэтому универсальная цифра «один промпт = один кредит» неверна.
Для теста достаточно четырёх действий:
- создать лендинг;
- изменить один визуальный элемент;
- удалить ненужный блок;
- добавить регистрацию и вход.
В конце посчитайте не только общий расход, но и количество переделок. Если половина кредитов ушла на исправление собственного расплывчатого ТЗ, проблема не в тарифе — сначала стоит улучшить промпты.
FAQ
Нужно ли знать программирование для Lovable?
Для старта — нет. Но базовое понимание страниц, базы данных, доменов и авторизации помогает быстрее замечать ошибки и точнее формулировать задачи.
Можно ли сделать сайт бесплатно?
Да, Free позволяет начать проект и опубликовать его на lovable.app. Для некоторых возможностей, включая собственный домен и редактирование кода, нужен платный план.
Можно ли забрать код?
Да. Код принадлежит владельцу проекта. Для постоянной синхронизации и дальнейшего развёртывания удобно подключить GitHub.
Стоит ли сразу подключать Supabase?
Не обязательно. Встроенный Lovable Cloud уже даёт базу, авторизацию и хранилище. Собственный Supabase нужен прежде всего тем, кому важен отдельный аккаунт и прямой контроль backend-инфраструктуры.
Итог
Самый простой способ освоить Lovable — не пытаться сделать полноценный SaaS за один запрос. Соберите первую версию, проверьте интерфейс, исправляйте по одному блоку, затем подключайте backend и только после этого публикуйте.
Так и результат получается предсказуемее, и кредиты не исчезают на бесконечных переделках.