Lovable — это AI-платформа, которая позволяет создавать полноценные веб-приложения с помощью текстовых описаний. Вам не нужно знать код — достаточно просто объяснить, что вы хотите построить . Ниже приведена подробная инструкция для начинающих.
Что такое Lovable?
Lovable — это AI-платформа для создания веб-приложений. Основанная создателем GPT Engineer, компания быстро выросла в одного из лидеров в Европе . Она преобразует ваши идеи на естественном языке в работающий код, обрабатывая как интерфейс, так и внутреннюю логику. Вы просто указываете, какое приложение вам нужно, и платформа создает его за вас — программировать не нужно!
Ключевые возможности:
- Генерация через промпты: Вы описываете приложение, AI создает его структуру .
- Деплой в один клик: Публикация приложения сразу после создания .
- Реальный превью: Изменения видны мгновенно .
- Интеграция с GitHub: Вы получаете полный код и можете экспортировать его.
Шаг 1: Регистрация аккаунта
Перейдите на официальный сайт: Откройте браузер и перейдите по адресу https://lovable.dev .
Нажмите «Sign Up»: На главной странице найдите кнопку регистрации («Sign Up» или «Get Started») .
Выберите способ регистрации:
- Google или GitHub: Вы можете использовать аккаунты Google или GitHub для быстрой регистрации .
- Электронная почта: Введите ваш email и придумайте пароль.
Подтвердите email: На указанный адрес придет письмо с подтверждением. Перейдите по ссылке в письме, чтобы активировать аккаунт .
После завершения этих шагов вы попадете в личный кабинет (дашборд), где будут отображаться все ваши проекты
Шаг 2: Знакомство с тарифными планами и лимитами
Перед началом работы важно понимать систему кредитов (credits), так как каждый запрос к AI их расходует .
- Бесплатный тариф (Free): 5 кредитов в день. Этого достаточно для создания прототипов и знакомства с платформой .
- Business тариф ($50/мес): Больше кредитов и возможности для команд .
- Pro тариф ($25/мес): 100 кредитов в месяц. Подходит для активной разработки .
Важно: Чем сложнее ваш запрос и чем больше кода генерирует AI, тем больше кредитов тратится .
Шаг 3: Создание первого приложения
Теперь перейдем к самому интересному — созданию приложения. Вся работа строится через диалог с AI .
3.1. Напишите первый промпт **
На главном экране дашборда вы увидите поле для ввода текста (чат). Здесь нужно максимально подробно описать, какое приложение вы хотите .
Пример промпта (копируйте и вставляйте, меняя описание под вашу идею):
«Создайте приложение для управления задачами с лаконичным современным дизайном в светло-голубой цветовой гамме. Пользователи должны иметь возможность добавлять, редактировать и удалять задачи. У каждой задачи должны быть заголовок, описание и срок выполнения. Сделайте интерфейс адаптивным для мобильных устройств и компьютеров».
Нажмите Enter и подождите несколько секунд — AI спланирует структуру и сгенерирует код .
3.2. Изучите результат
Справа от чата появится интерактивное окно предпросмотра (Preview). Вы можете кликать по кнопкам и проверять, как работает ваше приложение прямо в браузере .
3.3. Улучшайте приложение через чат
Если что-то нужно изменить или добавить, просто напишите об этом в чате. Например:
«Добавьте в задачи поле с приоритетами: высокий, средний, низкий. Показывайте задачи с высоким приоритетом красным цветом».
Рекомендуется вносить изменения по одному или небольшими группами (2-3 изменения за раз), чтобы AI не путался и экономил ваши кредиты .
Шаг 4: Добавление базы данных и авторизации (Supabase)
Для создания полноценных приложений, которые сохраняют данные пользователей, необходимо подключить базу данных. Lovable использует для этого Supabase .
1. Создайте проект Supabase:
Перейдите на supabase.com и зарегистрируйтесь.
Создайте новый проект и скопируйте Project URL и Anon Key .
2. Подключите Supabase к Lovable:
Вернитесь в чат Lovable и напишите промпт:
«Подключите это приложение к Supabase. Создайте таблицу tasks со столбцами: id, user_id, title, description, due_date, priority и status».
Lovable сгенерирует SQL-код для создания таблиц. Нажмите «Apply» в чате, чтобы выполнить его в вашей Supabase базе .
3. Добавьте авторизацию:
Чтобы пользователи могли регистрироваться и видеть только свои данные, добавьте в промпт:
«Добавьте аутентификацию пользователей с помощью электронной почты и Supabase. Создайте страницы входа и регистрации. Показывайте только те задачи, которые принадлежат пользователю, вошедшему в систему».
Lovable автоматически создаст страницы входа, регистрации и настроит правила безопасности (RLS) .
Шаг 5: Визуальная настройка (Visual Edits)
Если вам нужно изменить цвет кнопки или отступы, не обязательно писать текстовые промпты. Используйте функцию визуального редактирования :
- Нажмите на любой элемент в окне предпросмотра (например, на кнопку или заголовок).
- Слева откроется панель с настройками.
- Изменяйте цвет, шрифт, размер или расположение прямо в панели — код обновится автоматически .
Шаг 6: Публикация приложения
Когда приложение готово, его можно опубликовать в интернете:
- Нажмите кнопку «Publish» (или «Deploy») в правом верхнем углу .
- Lovable предоставит бесплатный поддомен (например, ваше_приложение.lovable.app) .
- При желании вы можете подключить свой собственный домен в настройках проекта .
Через 1-2 минуты приложение будет доступно для всех пользователей по ссылке.
Полезные советы для успешной работы
- Будьте конкретны в промптах. Вместо "Сделай крутой дизайн" напишите: "Сделай дизайн в стиле Notion: светлый фон, карточки с тенями, шрифт Inter" .
- Используйте GitHub для бэкапа. Подключите свой GitHub в настройках проекта, чтобы код автоматически сохранялся в ваш репозиторий. Вы всегда сможете скачать его и доработать в других инструментах .
- Пользуйтесь кнопкой «Try to Fix». Если приложение выдает ошибку, нажмите эту кнопку — AI попытается исправить баг самостоятельно .
- Следите за версиями. Lovable сохраняет историю изменений. Если что-то пошло не так, вы всегда можете откатить проект к предыдущей рабочей версии .
Lovable — это мощный инструмент для быстрого создания веб-приложений от идеи до работающего продукта, доступный даже тем, кто никогда не писал код . Удачи в ваших проектах
** Пишеи пока здесь «промпт» — это заимствованное из английского языка слово «prompt», но по-русски более естественно можно и нужно называть просто «промт».