Lovable.dev: How I Built a Working App (Mostly) in 23 Prompts in 2 Hours

Создавать цифровые продукты сложно, особенно без опыта в full-stack разработке.

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

Помню как потратил пол года и $10К+ на создание образовательного стартапа, чтобы в конце понять что идея была изначально так себе.

Сейчас все проще — ИИ-инструменты и no-code платформы позволяют собрать MVP за считанные часы.

Если вы инди-хакер или солопредприниматель с кучей идей, но вас пугают технические детали — сегодня проверить идею проще, чем когда-либо.

В этой статье рассмотрим сервис, способный помочь в этом — Lovable.dev.

С его помощью я создал простое приложение всего за 12 запросов и 2 часа – Quests.

img

Что такое Lovable.dev?

Lovable.dev — это платформа для творческих специалистов, позволяющая быстро запускать полноценные SaaS-продукты без сложной разработки.

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

img

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

Платформа уточнит детали и сгенерирует готовое приложение, которое сразу можно опубликовать и использовать.

Lovable.dev упрощает путь от идеи до рабочего продукта, устраняя технические барьеры и позволяя сосредоточиться на креативной части.

Что можно делать в Lovable.dev?

Lovable.dev объединяя генерацию кода, дизайн и интеграции в одной платформе.

Что можно делать?

• Создавать полный стек приложений: генерируйте фронтенд и бэкенд (серверлесс или через Supabase) для запуска веб-продукта с нуля.
• Использовать AI для кода: формируйте промпты, и GPT-4 автоматически создаст компоненты, страницы и API.
• Быстро прототипировать UI: редактируйте интерфейс в реальном времени, загружайте макеты или описывайте дизайн текстом.
• Настраивать интеграции: подключайте базы данных, системы аутентификации и сторонние API (например, Stripe).
• Автоматизировать отладку и рефакторинг: AI поможет находить ошибки, исправлять их и обновлять код.
• Соблюдать стандарты: встроенные проверки на WCAG и GDPR упрощают соответствие приложения мировым нормам.
• Работать в команде: используйте инструменты для версионирования, совместного редактирования и облачного хранения кода.

Все это без необходимости писать код самостоятельно.

Но если захотите отредактировать сгенерированный платформой код, вы можете это сделать благодаря интеграции с GitHub.

Насколько качественный получается проект

лайтхаус

Примеры проектов созданнных на Lovable.dev

‍

Что делает Quests?

Quests — это сервис для креаторов и предпринимателей, который раз в сутки предлагает новое задание, чтобы развивать креативность, преодолевать творческие блоки и смотреть на задачи под другим углом.

Выполнив задание, можно опубликовать результат в X и увидеть, как с ним справились другие.

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

Далее расскажу, как создавал Quests с помощью Lovable.dev.

Как начать пользоваться Lovable.dev?

Создание аккаунта

Перейдите на сайт lovable.dev — вы сразу увидите интерфейс, где можно описать идею вашего приложения.

При попытке отправить сообщение система предложит авторизоваться или зарегистрироваться.

Зарегистрироваться можно через аккаунт GitHub, Google или с помощью электронной почты.

После регистрации вы попадете в интерфейс создания приложения: слева чат, справа ваше будущее приложение.

img

Как правильно делать запросы в Lovable.dev?

В бесплатной версии доступно 5 запросов в день.

На первый взгляд это немного, но даже один продуманный промпт может дать хороший результат.

Я изучил все доступные гайды по работе с Lovable и выделил несколько практических советов для составления эффективных запросов.

Чтобы упростить задачу, я также создал бесплатный кастомный GPT, который помогает превратить идею в четкий и структурированный промпт для Lovable.

Как использовать Lovable Prompt Machine?

Откройте Lovable Prompt Machine.

Используйте одну из предложенных опций или сразу опишите вашу идею.

img

Ответьте на уточняющие вопросы.

img

Скопируйте сгенерированный промпт в Lovable.

Вот пример приложения, созданного с помощью всего одного промпта, сформированного через Lovable Prompt Machine.

img

Как сделать промпты эффективными?

Добавьте контекст задачи

Дайте больше деталей, чтобы Lovable понимал общий замысел проекта.

We are developing a project management platform where users can create projects, assign tasks, and track progress. Start by designing the UI for adding a new project.

Четко определите цель

Сформулируйте, что вы создаете, и укажите ключевые функции.

We are building a CRM app with Supabase integration and secure authentication. Start by setting up the basic backend structure.


Разбейте задачу на этапы (incremental prompting)

Делите общий запрос на несколько последовательных шагов.

Step 1: Create a basic app structure connected to Supabase.


Затем:

Step 2: Add a secure authentication flow with user roles.


Будьте конкретны и детальны

Уточняйте, что именно должно быть реализовано, чтобы избежать неоднозначностей.

Create a registration form with fields for username, email, password, and a submit button. Ensure the form design matches the current app style.


Используйте обратную связь для корректировок

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

The login form looks good, but please add email validation to ensure the field contains a valid email address.


Исправление багов и ошибок

При обновлении приложения платформа автоматически проверяет его на ошибки.

Если ошибка обнаружена, может появиться кнопка «Try to fix it».

Использование этой функции не расходует лимит сообщений.

img

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

Режим Chat modes

В каждом сообщении Lovable ожидает от вас четких инструкций о том, что нужно изменить в проекте.

Если вам нужно уточнить детали или обсудить идеи без внесения изменений, используйте режим чата.

Чтобы его включить:

1. Перейдите в настройки и откройте вкладку «Account Settings».
2. В разделе «Labs» активируйте «Chat modes».
3. После активации появится возможность отправлять уточняющие сообщения.

img

Учтите, что сообщения в чате также могут расходовать дневной лимит запросов (но не всегда — подробнее об этом в разделе с тарифами).

Как взять максимум от Lovable.dev?

Визуальное редактирование

Чтобы внести изменения в интерфейс без отправки сообщения в чат, нажмите «Edit» и выберите нужный элемент интерфейса.

Настройте его прямо в редакторе так, как вам нужно.

img

Использование изображений для UI-подсказок

Загрузите скриншот, и Lovable воссоздаст интерфейс на его основе.

Attached is a screenshot of the current layout. Create a UI that closely resembles the provided image, adjusting margins for mobile responsiveness.

!!‍

Импорт из Figma в Lovable

Если у вас платная подписка на Figma с доступом к Dev Mode, вы можете импортировать готовый дизайн напрямую в Lovable и ускорить разработку.

Загрузка знаний о проекте

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

Полное владение кодом

Одно из ключевых преимуществ Lovable.dev — интеграция с GitHub.

Вы можете легко экспортировать свой код:

• Настраивать его под себя.
• Масштабировать проект.

Платформа не привязывает вас к закрытой экосистеме, что особенно важно для долгосрочных проектов.

Я редактировал код в визуальном интерфейсе GitHub, и после сохранения, обновленная версия автоматически обновлялась в Lovable.

img

Настройки SEO

Я большой поклонник поисковой оптимизации.

Этот сайт посещает более 500K+ человек в год, и 90% трафика приходит органически из поиска. В этом году планирую также начать развивать социальные сети.

Очевидно, что продвигать сайт с контентом проще, чем приложение или сервис.

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

Тем не менее для меня было важно, чтобы проект, созданный на Lovable, был оптимизирован для поиска.

Я спросил у платформы, что она может сделать для SEO, и она сразу внесла несколько улучшений.

img

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

Если ваш проект включает блог или большой объем контента, имеет смысл рассмотреть альтернативные платформы, например, Webflow.

Можно создать основную функциональность через Lovable, а блог разместить в сабдомене на Webflow.

Как опубликовать проект на Lovable.dev?

Все проекты на Lovable.dev автоматически публикуются на сабдомене: https://your-project.lovable.app/

Если вы хотите использовать собственный домен, можно подключить сервисы Netlify или Cloudflare Pages.

1. Netlify: простой вариант для быстрой публикации.
2. Cloudflare Pages: отлично подходит, если вы уже используете Cloudflare для других задач.

Оба сервиса позволяют разместить проект на своем домене бесплатно.

Публикация через Cloudflare Pages

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

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

Однако с первого раза проект не заработал — Cloudflare выдал ошибки, связанные с отсутствующими библиотеками.

Как я решил проблему?

1. Открыл репозиторий проекта на GitHub.
2. Запустил терминал прямо из браузера (или можно использовать консоль, если вам так удобнее).
3. В терминале выполнил несколько команд для установки недостающих зависимостей.

В терминале выполнил следующие команды.

bun install

git status

git diff bun.lockb


git add bun.lockb

git commit -m "Update bun lockfile after dependency resolution"

git push

И после этого настроил Cloudflare Pages с такими командами.

1. Build command: npm install && npm run build
2. Build output directory: dist

img

Возможно, в вашем случае ошибки будут другими.

Сначала попробуйте опубликовать проект через Cloudflare Pages.

Если что-то пойдет не так, скопируйте сообщение из консоли и отправьте его в ChatGPT — он подскажет, какие шаги нужно предпринять.

После успешной публикации все обновления, внесенные в Lovable, автоматически появятся на вашем домене.

Сколько стоит Lovable.dev?

Когда я впервые увидел лимит в 5 бесплатных сообщений в день и дополнительные 100 сообщений в месяц в самом доступном тарифе, мне показалось, что этого мало и я не успею реализовать проект.

Но на практике оказалось иначе:

1. Грамотно составленные промпты позволяют внедрять сразу несколько функций в одном запросе.
2. Лимиты списываются не всегда. В документации я не нашел объяснений этому, но заметил, что часто отправляю больше сообщений, чем предусмотрено лимитом. Возможно, есть минимальный порог изменений в коде, при котором сообщение не учитывается.

img

В итоге даже с самым дешевым тарифом можно создать несколько полноценных приложений.

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

Каждый платный план включает фиксированный месячный лимит сообщений, а также 5 бесплатных сообщений в день для всех пользователей.

Учтите:

1. Сообщения, вызванные через кнопку «Ask the AI to fix», не учитываются в лимитах, если вы используете именно кнопку. Однако, если вы отправляете дополнительный запрос вручную для исправления ошибки, это засчитывается как одно сообщение.
2. Неиспользованные сообщения не переносятся — лимиты обнуляются ежедневно или ежемесячно в зависимости от тарифа. Остаток сообщений не накапливается.

Какие альтернативы Lovable.dev?

Инструментов, которые ускоряют разработку продуктов, много.

Планирую протестировать самые популярные из них и подготовить отдельные гайды.

Вот мои фавориты:

1. Lovable.dev: отличается упором на AI-генерацию full-stack решений и совместную разработку в реальном времени. Хороший выбор для быстрого прототипирования и проектов, где важны интерактивные функции и гибкий бэкенд.
2. Cursor: больше фокусируется на улучшении кода в отдельном редакторе с AI-подсказками. Полезно, если у вас уже есть инфраструктура, и вы просто хотите ускорить написание кода.
3. v0.dev:  инструмент для быстрой сборки React/Node-приложений с помощью AI. Удобен для типовых CRUD-приложений и аутентификации.
4. GitHub Copilot/Codespaces: AI автодополнение в IDE + облачная среда разработки. Сильная интеграция с GitHub, но нет готовых full-stack шаблонов.
5. AWS Amplify / CodeCatalyst: облачный серверлесс-подход, отлично масштабируется, но требует понимания экосистемы AWS.
6. Bubble: no-code платформа для веб-приложений; быстрая разработка, но могут быть ограничения по производительности и кастомизации.
7. Retool:  идеален для внутренних панелей управления; простой конструктор, но мало подходит для внешних пользовательских приложений.

Таким образом, выбор инструмента зависит от ваших конкретных потребностей: нужна ли вам полноценная AI-поддержка на всех этапах (Lovable.dev, v0), AI-редактор кода (Cursor), корпоративное решение (PowerApps, AWS), или no-code платформа для MVP (Bubble).

Какие интеграции в Lovable?

Lovable.dev поддерживает много интеграций.

Нативные

Подключаются в пару кликов:

1. Supabase: для управления базами данных и бэкендом.
2. GitHub: для управления кодом.
3. Stripe: для удобной монетизации.

Верифицированные

Легко настраиваются через чат.

Искусственный интеллект:

1. OpenAI: добавляет в ваше приложение ИИ-функции от ChatGPT.
2. Stability AI: ИИ для различных сфер применения, в том числе создание изображений и видео.
3. Anthropic: интегрирует ИИ через модели Claude от Anthropic.
4. Replicate: запускает и настраивает open-source модели ИИ.
5. Runware: позволяет генерировать изображения на основе текстовых запросов.
6. Together.ai: облачное решение для интеграции разных моделей.

Визуализация данных и графика:

1. Three.js: добавляет интерактивную 3D-графику в ваше приложение.
2. D3.js: создает динамичные и интерактивные визуализации данных.
3. Highcharts: разрабатывает профессиональные диаграммы и графики.
4. p5.js: подходит для креативного программирования и интерактивной графики.
5. Rive: позволяет создавать интерактивные анимации.

Инструменты для разработки и аналитики:

1. Builder.io: конвертирует дизайны Figma в full-stack приложения в рамках Lovable.
2. Resend: расширяет возможности отправки электронной почты через API.
3. PostHog: предоставляет аналитику поведения пользователей, воспроизведение сессий и A/B тестирование.

Не верифицированные

Которым нужно чуть больше контекста, но тоже нормально работают:

Навигация и карты

• Mapbox: платформа для навигации людей, посылок и транспортных средств.

Инструменты ИИ и работы с данными

• Firecrawl: преобразует сайты в структурированные данные, пригодные для LLM.
• Perplexity: добавляет мощные возможности ИИ в приложения.
• Transformers.js (HF): запускает модели машинного обучения прямо в браузере без сервера.
• HeyGen: сервис для создания видео с помощью искусственного интеллекта.

Автоматизация процессов и интеграции

• Zapier: платформа автоматизации для интеграции различных веб-приложений.
• Make: визуальная платформа для создания рабочих процессов, автоматизации задач и интеграции приложений.
• Bannerbear: автоматизирует создание изображений и видео для социальных сетей.

Коммуникации и планирование

• Twilio: платформа для голосовых вызовов, текстовых сообщений и других коммуникационных сервисов.
• xAI: инструмент для автоматизации планирования встреч.
• Calendly: инструмент для удобного планирования встреч.

Электронная почта

• Mailgun: сервис для отправки, получения и отслеживания электронной почты.
• SendGrid: сервис доставки электронной почты для транзакционных и маркетинговых сообщений.

Поиск и интеграция данных

• Serper.dev: API для интеграции результатов поиска Google в приложения.

Инструменты для работы и управления

• Google Workspace: облачный набор инструментов для продуктивности и совместной работы от Google.
• Notion: универсальный инструмент для заметок, управления задачами и работы с базами данных.
• GoJS: библиотека для создания блок-схем и визуализации рабочих процессов.
• TinyMCE: визуальный редактор для создания и редактирования текста.

Электронная коммерция и финансы

• Lemon Squeezy: платформа для электронной коммерции, упрощающая продажу цифровых продуктов.
• Square: решение для приёма платежей и управления продажами в сфере торговли.
• GetLago: открытая платформа для учёта использования и оплаты по модели pay-as-you-go.

Что ждать?

Если вы инди-хакер или солопредприниматель, главное — не застревать в бесконечном поиске идеала.

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

Даже продукт, который работает "в основном", может дать ценные инсайты и показать потенциал.

Используйте ИИ, чтобы автоматизировать рутинные задачи и ускорить процесс разработки — это сэкономит время и силы.

А платформы вроде lovable.dev позволяют вносить изменения на лету, не начиная всё заново, что делает процесс гибким и удобным.

Но-код решения дают огромную свободу для экспериментов.

С lovable.dev можно легко тестировать разные функции и интеграции, а когда придёт время для более сложных решений — перейти на полноценную разработку через интеграцию с GitHub.

При этом монетизировать продукт можно практически сразу, подключив платёжные системы вроде Stripe.

Это позволяет начать зарабатывать ещё до того, как продукт станет полностью готовым.

Часто задаваемые вопросы про Lovable (FAQs)