Lovable AI для лендинга: пошаговый кейс

Что собираем

Одностраничный лендинг с блоками:

• hero с офером и CTA;
• три-четыре секции с фичами;
• социальное подтверждение (отзывы, логотипы);
• цены;
• FAQ;
• финальный CTA с формой сбора email.

Шаг 1. Промт под скелет

Пример промта: "Собери одностраничный лендинг для сервиса Х (в одной фразе, что он делает). Секции: hero с заголовком и подзаголовком, три блока фич с иконками, пара отзывов, блок с одной ценой, четыре вопроса FAQ, финальный CTA с формой email. Стиль - светлая версия Vercel".

Один промт - один рабочий скелет.

Шаг 2. Наполнение текстом

Замените текст-заглушки на реальный. Не просите ИИ придумать - вы знаете свой продукт лучше. Модели можно давать драфт вашего текста для полировки.

Шаг 3. Форма сбора email

Просите ИИ создать таблицу `subscribers` в Supabase с полями `email`, `created_at`, `source`. Обязательно включите RLS и добавьте политику INSERT для анонимов.

Форма должна:

• валидировать email;
• обрабатывать ошибку "уже подписан";
• показывать сообщение об успехе.

Шаг 4. SEO

Прописываете title до 60 символов, description до 160. Один H1. Sitemap.xml, robots.txt. Open Graph и Twitter Card для превью в мессенджерах.

Шаг 5. Аналитика

Подключаете Google Analytics или Plausible. Настраиваете цель на успешную подписку.

Шаг 6. Домен и деплой

В настройках проекта - свой домен, ждёте выпуска SSL. Публикация - одним кликом.

Чек-лист перед запуском

• [ ] Форма отправляет email в базу.
• [ ] RLS включён, есть INSERT-политика.
• [ ] Meta-теги прописаны.
• [ ] Sitemap и robots на месте.
• [ ] Работает на мобильном.
• [ ] Скорость загрузки < 2 сек.
• [ ] Аналитика ловит визиты и подписки.

Часто задаваемые вопросы

Сколько времени займёт?

Три-пять часов при первом заходе. Второй лендинг соберёте за час.

Нужен ли Pro-тариф?

Для подключения своего домена - да.

Можно ли делать A/B-тесты?

Да, через сервисы вроде PostHog или простую перезаписью варианта через query-параметр.