Как пользоваться Lovable: первое приложение шаг за шагом
Полный разбор Lovable, воссозданный по реальному сбору новичка — структурированные промпты, режим Plan, Google Календарь, исправление ошибок, проверка безопасности и публикация приложения в виде PWA. Каждый шаг — со скриншотом.
Lovable коротко
- Первый промпт строится вокруг двух вещей: что делает приложение (цель) и как по нему движется пользователь (сценарий). Одна-две функции — достаточно для старта.
- Перед отправкой переключите Build на Plan. Сначала Lovable задаст уточняющие вопросы и напишет план, который можно поправить — и только потом пойдёт код.
- Если что-то работает не так, чините точным промптом — «задачи должны начинаться на ближайшей 15-минутной отметке и никогда в прошлом» работает куда лучше «исправь время».
- Перед публикацией запустите глубокую проверку безопасности — «Try to fix all» бесплатна. Одна фраза на естественном языке превращает приложение в PWA, которую можно поставить на телефон.
Lovable AI Tutorial for Beginners - Build Your First App
Исходное видео:Kevin Stratvert11:40
Скриншоты взяты из исходного видео и снабжены ссылками с таймкодами. Текст — наш собственный разбор по полной транскрипции; факты соответствуют записи.
Этот гайд — независимый иллюстрированный конспект для тех, кто предпочитает читать. Поддержать автора можно, посмотрев оригинальное видео по ссылке выше.
Собираем приложение в Lovable, шаг за шагом
- 1
Осмотреться в рабочем пространстве
После регистрации вы попадаете в рабочее пространство Lovable. Слева — Home, поиск, ресурсы и коннекторы, ниже — недавние чаты. Центральное поле промпта — начало любого приложения; сразу под ним — коллекции шаблонов на случай, если нужна идея.
Рабочее пространство Lovable: поле промпта в центре, чаты и коннекторы слева.Смотреть на 0:40 - 2
Написать структурированный первый промпт
Прежде чем печатать, определите две вещи: цель (что делает приложение) и сценарий (как по нему идёт пользователь). Этот сбор — приложение «голос в календарь»: наговариваете задачи, оно раскладывает их по Google Календарю. Укажите ограничения — задача длится 30 минут, если не сказано иное; пользователь подтверждает перед сохранением — и опишите стиль словами clean, sleek, minimal. В конце добавьте: «Задай мне любые вопросы, чтобы полностью понять, что я хочу».
Полный первый промпт: цель, сценарий, ограничения, стиль и приглашение к вопросам.Смотреть на 3:20 - 3
Переключиться в режим Plan до отправки
Откройте выпадающее меню Build под полем промпта и выберите Plan — «сначала обсуждаем» (переключается по Alt+P). В режиме Plan Lovable сначала задаёт вопросы и пишет план — так оно не соберёт не то приложение. Для первого проекта это самая ценная привычка.
Меню Build/Plan: выбирайте Plan — сначала обсуждаем, потом строим.Смотреть на 2:40 - 4
Ответить на уточняющие вопросы
Lovable вернётся с вопросами — сначала визуальные вроде акцентного цвета, затем функциональные: бесплатный встроенный распознаватель речи или сторонний, подключать Google Календарь через коннектор Lovable и так далее. Отвечайте честно: расплывчатые ответы сейчас превратятся в расплывчатые функции потом.
Уточняющие вопросы: выберите акцентный цвет, затем ответьте на функциональные.Смотреть на 4:12 - 5
Прочитать план и утвердить
План разбит на понятные разделы — внешний вид, экраны и сценарий, как это работает — плюс технические детали. Даже без знаний кода читайте «экраны и сценарий»: это ваше приложение на бумаге. Что-то не так — вместо утверждения напишите правку в поле промпта; когда всё совпадёт, жмите Approve.
Сгенерированный план: прочитать, попросить правки, затем утвердить.Смотреть на 5:00 - 6
Подключить Google Календарь, когда спросят
На середине сборки Lovable останавливается и просит подключить Google Календарь. Нажмите кнопку подключения, войдите через аккаунт Google и привяжите его к проекту. В этой демке календарь привязан к вашему; позже можно перейти на вход для каждого пользователя и поделиться приложением.
На полпути Lovable просит привязать ваш Google Календарь.Смотреть на 5:35 - 7
Продиктовать задачи для проверки
Когда появится предпросмотр, нажмите микрофон и честно выговоритесь: «Мне нужно отправить отчёт TPS с новой обложкой Биллу, а сводку по клиентам — Чарльзу». Остановите запись, и приложение превратит речь в карточки задач, ожидающие подтверждения.
Первый голосовой тест: поток речи превращается в задачи.Смотреть на 5:50 - 8
Чинить поведение точными промптами
Первый баг: задачи встали ровно на секунду, когда вы их произнесли. Исправление — точная инструкция: «Задачи должны начинаться на ближайшей 15-минутной отметке (и никогда в прошлом), а не в текущее время». Lovable оформит правку маленькой карточкой — вот зачем мы так старались с планом.
Точный промпт прижимает задачи к 15-минутным отметкам.Смотреть на 8:00 - 9
Научить понимать ваши формулировки времени
Скажите «позвонить Кевину завтра в 10 утра» — и получите 3 часа ночи: относительные даты приложение пока не понимает. Пропишите правила: распознавать tomorrow, yesterday, Friday at 3 p.m.; morning — до 11 утра, afternoon — с 13 до 16; next Monday — следующий через неделю, а не ближайший. Чем конкретнее примеры, тем меньше правок потом.
Голосовые правила дат: примеры моментов и длительностей по пунктам.Смотреть на 7:40 - 10
Дебажить по скриншоту в режиме Plan
Время всё ещё сбито примерно на семь часов — баг часового пояса. Вставьте скриншот с неверным временем прямо в поле промпта и опишите наблюдение: «Похоже на проблему с часовым поясом, время уехало часов на 7». Вернитесь в режим Plan для исправления; если план слишком технический, добавьте: «Я не технарь, объясни человеческим языком».
Скриншот бага, описание — и режим Plan выдаёт исправление.Смотреть на 8:55 - 11
Опубликовать и закрепить адрес
Перед публикацией последний промпт переводит приложение с вашего календаря на вход для каждого пользователя — чтобы никто не трогал ваши события. Затем жмите Publish справа вверху: вы получите бесплатный адрес на lovable.app (свой домен — в тарифе Pro), выберите публичный доступ и заполните название, описание и картинку для соцсетей.
Публикация: бесплатный адрес на lovable.app и метаданные приложения.Смотреть на 9:45 - 12
Прогнать проверку безопасности и добавить PWA
Перед запуском Lovable рекомендует глубокую проверку безопасности — особенно ценно для кода, сгенерированного ИИ. Исправления через «Try to fix all» бесплатны. Потом добавьте мобильный штрих одной фразой: «Сделай так, чтобы я мог установить это как иконку приложения на телефон. Возьми бирюзовый микрофон для иконки». Lovable сгенерирует манифест PWA и иконки.
Исправления безопасности бесплатны — промпт про PWA делает приложение устанавливаемым.Смотреть на 10:40 - 13
Установить на телефон
Опубликуйте обновление, откройте адрес в браузере телефона и нажмите иконку «Поделиться». Выберите «На экран “Домой”», подтвердите — и иконка приложения ляжет на домашний экран. Тап — и оно работает на весь экран, как нативное, без всякого App Store.
«На экран “Домой”» превращает опубликованное приложение в иконку на телефоне.Смотреть на 11:00