Как сделать лендинг с помощью ИИ за час — гайд с промптами, Cursor, Lovable и деплоем на Vercel
Основной чат
Чат для вайбкодеров: новости, гайды, поиск исполнителей, маркетплейс и разбор реальных кейсов.
Раньше сделать лендинг означало либо заплатить разработчику от 30 000 рублей и ждать неделю, либо самому разобраться в HTML/CSS/JS, Bootstrap, хостинге и деплое. Сейчас это час работы и ноль строк кода, написанных вручную.
В этом гайде — полный маршрут от пустой страницы до живого сайта в интернете. С конкретными промптами, которые можно скопировать, объяснением каждого шага и отдельным блоком по SEO — потому что красивый лендинг без органического трафика существует только для тех, кому вы сами дадите ссылку.
Что вы получите на выходе
За час по этому гайду можно сделать полноценный лендинг:
- адаптированный под мобильные устройства
- с правильной SEO-структурой (заголовки, мета-теги, скорость)
- задеплоенный на реальный домен через Vercel
- готовый к правкам через промпты без знания кода
Это подходит для: личного проекта, MVP, портфолио, сервиса, мероприятия, продукта — любой задачи, где нужна одностраничная презентация.
Инструменты: Lovable или Cursor — что выбрать
Перед стартом нужно выбрать инструмент. Они решают одну задачу разными способами.
Lovable — если хотите результат немедленно
Lovable — браузерный инструмент, который генерирует готовое React-приложение по описанию. Вы пишете промпт, через 30 секунд видите работающий предпросмотр, правите итерациями.
Подходит если: нет знакомства с IDE, важна скорость первого результата, хотите сразу видеть живой предпросмотр.
Ограничения: меньше контроля над структурой файлов, сложнее подключить сторонние библиотеки вручную.
Cursor — если хотите полный контроль
Cursor — IDE на базе VS Code с встроенным ИИ. Генерирует и правит файлы прямо на вашем компьютере. Полный доступ к коду, Git, терминалу.
Подходит если: хотите понимать, что происходит в коде, планируете развивать проект дальше, нужна интеграция с другими сервисами.
Рекомендация для первого лендинга: начните с Lovable — быстрее получите результат и поймёте процесс. Для развития дальше переходите на Cursor.
В этом гайде будут промпты для обоих инструментов — они почти одинаковые, разница только в интерфейсе.
Шаг 1. Подготовка: бриф за 10 минут (0:00–0:10)
Главная ошибка — начинать с промпта «сделай мне лендинг». ИИ сгенерирует что-то общее, вы потратите час на правки. Правильный подход — сначала написать мини-бриф.
Ответьте на пять вопросов:
1. Что продаёт или презентует лендинг? Не «сервис», а конкретно: «онлайн-курс по вайбкодингу для предпринимателей без опыта в разработке».
2. Кто целевая аудитория? Не «все», а: «владельцы малого бизнеса 30–45 лет, хотят автоматизировать рутину, не умеют кодить».
3. Какое одно главное действие должен совершить посетитель? Оставить email? Написать в Telegram? Купить? Один призыв к действию работает лучше, чем три.
4. Какой тон и стиль? Серьёзный и корпоративный? Дружелюбный и простой? Технический?
5. Есть ли у вас конкуренты или примеры понравившихся сайтов? URL конкурентов можно дать напрямую в Lovable — он проанализирует стиль.
Запишите ответы в текстовый файл — они станут основой первого промпта.
Шаг 2. Первый промпт — структура лендинга (0:10–0:20)
Открываете Lovable или новый чат Cursor и даёте первый промпт. Вот шаблон, который работает — вставьте свои ответы из брифа:
Создай лендинг для [ЧТО].
Целевая аудитория: [КТО].
Главная цель: [ДЕЙСТВИЕ — например, оставить email в форме].
Тон: [ТОНАЛЬНОСТЬ — например, дружелюбный, без жаргона].
Стек: React + Tailwind CSS.
Структура страницы:
1. Hero-секция: заголовок H1, подзаголовок, CTA-кнопка
2. Блок с проблемой: 3 боли целевой аудитории
3. Решение: как продукт решает эти боли
4. Блок с преимуществами: 4–6 карточек с иконками
5. Секция с социальным доказательством: 3 отзыва (используй плейсхолдеры)
6. Блок с ценами или тарифами (если применимо)
7. FAQ: 5 вопросов и ответов
8. Финальный CTA: форма с полем email и кнопкой
9. Footer: копирайт, ссылки на политику
Цветовая схема: [ЦВЕТА — например, тёмный фон, акцент #3f64ff].
Шрифт: Inter или аналогичный sans-serif.
Важно:
- Мобильная адаптация обязательна
- Анимации при прокрутке (subtle, не агрессивные)
- Все тексты заполни реалистичными плейсхолдерами по темеПример заполненного промпта
Создай лендинг для онлайн-курса «Вайбкодинг с нуля» — обучение
созданию приложений с помощью ИИ без знания программирования.
Целевая аудитория: предприниматели и менеджеры 28–45 лет,
хотят создавать свои инструменты, боятся технической сложности.
Главная цель: оставить email в форме для получения бесплатного урока.
Тон: дружелюбный, мотивирующий, без технического жаргона.
Стек: React + Tailwind CSS.
Структура страницы:
1. Hero: заголовок «Создайте своё первое приложение за выходные»,
подзаголовок про ИИ-разработку, CTA «Получить бесплатный урок»
2. Блок с болями: «Нанимать разработчика дорого», «Нет времени
учить код годами», «Идеи есть — реализации нет»
3. Решение: курс объясняет, как ИИ пишет код за вас
4. Преимущества: 6 карточек (скорость, стоимость, поддержка и т.д.)
5. Отзывы: 3 плейсхолдера от «выпускников»
6. Тарифы: Базовый / Продвинутый / Персональный
7. FAQ: 5 вопросов о формате, времени, требованиях
8. Финальный CTA: форма email + кнопка
9. Footer
Цвета: тёмный фон #0a0a0a, акцент #3f64ff, текст #ffffff.
Шрифт: Inter.Lovable сгенерирует первую версию за 20–40 секунд. Cursor создаст файлы компонентов в папке проекта.
Шаг 3. Итерации — правки через промпты (0:20–0:35)
Первая версия почти никогда не идеальна — это нормально. Следующие 15 минут уходят на точечные правки промптами.
Правки текста и контента
Перепиши заголовок Hero. Сейчас он слишком общий.
Новый заголовок должен:
- содержать конкретное обещание результата
- говорить о времени («за выходные», «за 1 час»)
- обращаться напрямую к читателю
Предложи 3 варианта.В блоке с болями замени третий пункт. Вместо абстрактного
«нет времени» напиши конкретную ситуацию: человек придумал
идею приложения, открыл Upwork, увидел цену разработки и закрыл.Правки дизайна
Hero-секция слишком пустая. Добавь:
- градиентный фон с тонкой сеткой (grid pattern)
- бейдж над заголовком: «Уже 1200+ выпускников»
- под CTA-кнопкой мелкий текст «Без кредитной карты. Отмена в любой момент.»Карточки с преимуществами сделай на тёмном фоне с тонкой
границей и иконками из lucide-react. Добавь hover-эффект:
лёгкое свечение по границе карточки при наведении.Кнопка CTA мигает слишком агрессивно. Замени анимацию
на subtle pulse — только тень, не сама кнопка.Правки формы
Форму email сделай двухшаговой:
1. Шаг 1: поле email + кнопка «Получить урок»
2. Шаг 2: после submit — сообщение «Проверьте почту» + анимация галочки
Используй useState для управления состоянием.Добавление секций
Добавь секцию «Как это работает» между блоком с болями и блоком
с преимуществами. Три шага с нумерацией:
1. Опишите идею словами
2. ИИ генерирует рабочий код
3. Запускаете и показываете клиентам
Визуально: горизонтальная линия соединяет шаги на десктопе,
вертикальная на мобильном.Шаг 4. SEO — самый важный блок (0:35–0:50)
Красивый лендинг без SEO — это объявление, которое никто не увидит без ссылки. Правильная SEO-оптимизация занимает 15 минут в промпте, но влияет на трафик годами.
4.1 Мета-теги
Добавь в <head> полный набор SEO и Open Graph мета-тегов:
<title>Вайбкодинг с нуля — создайте приложение за выходные без кода</title>
<meta name="description" content="Онлайн-курс по созданию приложений
с ИИ для предпринимателей. Без знания кода. Первый результат за 2 дня.
Уже 1200+ выпускников.">
<meta name="keywords" content="вайбкодинг, создать приложение без кода,
ИИ разработка, курс программирования, lovable cursor">
<link rel="canonical" href="https://ваш-домен.ru/">
Open Graph:
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="https://ваш-домен.ru/og-image.png">
<meta property="og:url" content="https://ваш-домен.ru/">
<meta property="og:type" content="website">
Twitter Card:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="...">
<meta name="twitter:description" content="...">
<meta name="twitter:image" content="https://ваш-домен.ru/og-image.png">4.2 Правильная иерархия заголовков
Это одна из самых частых ошибок AI-генерированных лендингов: несколько H1, H2 и H3 в случайном порядке.
Проверь и исправь иерархию заголовков на всей странице:
- Ровно один <h1> — только в Hero-секции. Он должен содержать
главный ключевой запрос страницы.
- Каждый раздел лендинга открывается <h2>.
- Подпункты внутри раздела — <h3>.
- Никаких h4/h5/h6 на лендинге.
- Кнопки, подписи, бейджи — это <p> или <span>, не заголовки.
Выведи текущую структуру заголовков и исправь все нарушения.4.3 Schema.org разметка
Структурированные данные помогают Google лучше понять содержимое и показывать расширенные сниппеты:
Добавь JSON-LD разметку Schema.org в <head>:
Для курса:
{
"@context": "https://schema.org",
"@type": "Course",
"name": "Вайбкодинг с нуля",
"description": "Онлайн-курс по созданию приложений с ИИ",
"provider": {
"@type": "Organization",
"name": "Название вашей компании"
},
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "RUB",
"description": "Бесплатный первый урок"
}
}
Для FAQ-секции добавь отдельный блок FAQPage:
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Нужны ли знания программирования?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Нет. Курс создан специально для людей без технического фона."
}
}
// остальные вопросы из FAQ-секции
]
}FAQPage-разметка часто даёт отображение прямо в поисковой выдаче — это значительно увеличивает CTR.
4.4 Скорость загрузки
Скорость — прямой фактор ранжирования Google. Три обязательных оптимизации:
Оптимизируй производительность:
1. Все изображения:
- формат WebP
- атрибуты width и height обязательны
- loading="lazy" для всего ниже fold
- loading="eager" + fetchpriority="high" для Hero-изображения
2. Шрифты:
- Загружай Inter через Google Fonts с параметром display=swap
- Добавь <link rel="preconnect" href="https://fonts.gstatic.com">
- Preload только используемые начертания (400, 600)
3. Критический CSS:
- Стили Hero-секции встрой inline в <head>
- Остальные стили загружай асинхронно4.5 Мобильная адаптация и Core Web Vitals
Проверь и оптимизируй под мобильные устройства:
- viewport meta обязателен: <meta name="viewport"
content="width=device-width, initial-scale=1">
- Кнопки CTA: минимум 44×44px (tap target size)
- Шрифт основного текста: не меньше 16px на мобильном
- Отступы между секциями: 48px на мобильном, 96px на десктопе
- Hero-секция на мобильном: текст поверх изображения, не рядом
- Форма на мобильном: кнопка на всю ширину
Для LCP (Largest Contentful Paint):
- Hero-изображение или фоновый градиент должны загружаться первыми
- Никаких тяжёлых библиотек в критическом пути
Для CLS (Cumulative Layout Shift):
- Все изображения с фиксированными размерами
- Шрифты с font-display: swap и заданным fallback-шрифтом4.6 Семантический HTML
Замени все <div> на семантические теги там, где это уместно:
- Основная навигация: <nav>
- Главная секция: <main>
- Каждый тематический блок: <section> с aria-labelledby
- Список преимуществ: <ul> + <li>
- Отзывы: <blockquote> + <cite>
- Footer: <footer>
- Форма с подписями: <label for="..."> + <input id="...">
Добавь alt-текст ко всем изображениям.
Добавь aria-label к иконкам без текста.4.7 Sitemap и robots.txt
Создай два файла в папке public/:
sitemap.xml:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://ваш-домен.ru/</loc>
<lastmod>2026-06-03</lastmod>
<changefreq>monthly</changefreq>
<priority>1.0</priority>
</url>
</urlset>
robots.txt:
User-agent: *
Allow: /
Sitemap: https://ваш-домен.ru/sitemap.xmlШаг 5. Деплой на Vercel (0:50–1:00)
Vercel — самый простой способ выкатить React-проект в интернет. Бесплатный тариф покрывает 95% лендинговых задач.
Из Lovable
В Lovable есть кнопка Publish — нажимаете, получаете адрес на .lovable.app. Для подключения своего домена: переходите в настройки проекта → Custom Domain → вводите домен → добавляете CNAME-запись в DNS.
Если хотите деплоить через Vercel вместо встроенного хостинга Lovable — экспортируйте проект кнопкой Export to GitHub, дальше следуйте инструкции ниже.
Из Cursor (через GitHub + Vercel)
Шаг 1. Инициализируйте Git и запушьте в GitHub:
git init
git add .
git commit -m "Initial landing page"
gh repo create my-landing --public --pushШаг 2. Зайдите на vercel.com, войдите через GitHub.
Шаг 3. Нажмите Add New Project → выберите репозиторий my-landing → нажмите Deploy.
Vercel сам определит, что это React-проект, настроит сборку и задеплоит. Через 60–90 секунд сайт живой на адресе my-landing.vercel.app.
Шаг 4. Подключите свой домен: Settings → Domains → Add Domain → введите домен → добавьте предложенные DNS-записи у вашего регистратора.
После этого каждый git push в ветку main = автоматический деплой новой версии. Никакого ручного обновления сервера.
Переменные окружения
Если в лендинге есть форма с отправкой на бэкенд:
# Добавить через Vercel Dashboard → Settings → Environment Variables
NEXT_PUBLIC_API_URL=https://api.ваш-сервис.ru
RESEND_API_KEY=re_xxxxxxxxxxxx## Шаг 6. Аналитика и отслеживание конверсий (бонус)
Лендинг без аналитики — это деньги в темноту. Минимальный набор:
Подключи аналитику:
1. Vercel Analytics (встроенная, бесплатная):
npm install @vercel/analytics
В корневом компоненте:
import { Analytics } from '@vercel/analytics/react'
// добавь <Analytics /> в конец JSX
2. Событие при отправке формы:
import { track } from '@vercel/analytics'
const handleSubmit = () => {
track('lead_form_submitted', { source: 'hero_cta' })
}
3. Yandex Metrika (для русскоязычной аудитории):
Добавь скрипт в <head> с твоим ID счётчика.
Настрой цель на клик по CTA-кнопке.Типичные ошибки и как их избежать
За час можно не только сделать лендинг, но и наступить на стандартные грабли. Вот самые частые:
Несколько призывов к действию. «Купить», «Подписаться», «Узнать больше» и «Написать нам» на одном экране — конверсия падает. Один лендинг = одно целевое действие.
H1 с названием бренда. «АйТи Академия» в H1 — ошибка. H1 должен содержать ключевой запрос и пользу: «Онлайн-курс по созданию приложений с ИИ без кода».
Медленная загрузка из-за видео в Hero. Видео в фоне Hero-секции весит 5–20 МБ и убивает LCP. Замените на анимацию через CSS или статичное изображение.
Форма без подтверждения. Пользователь нажал кнопку — не знает, отправилась ли форма. Всегда добавляйте состояние успеха.
Текст заголовка не менялся. ИИ генерирует шаблонные заголовки вроде «Добро пожаловать» или «Откройте для себя новые возможности». Перепишите H1 под реальный поисковый запрос вашей аудитории.
Нет мобильной версии формы. Проверьте лендинг на телефоне лично — форма должна быть удобной, кнопка достаточно крупной.
Итоговый чеклист перед публикацией
Перед тем как поделиться ссылкой, пройдитесь по списку:
SEO:
☐ Один H1 с ключевым запросом
☐ Title до 60 символов, description до 160 символов
☐ Canonical-тег с финальным URL
☐ Все изображения с alt-текстами
☐ JSON-LD разметка (Course/Service + FAQPage)
☐ Sitemap.xml и robots.txt в /public
Скорость:
☐ Проверено через PageSpeed Insights — LCP < 2.5s
☐ Все изображения в WebP
☐ Шрифты с font-display: swap
Мобильная версия:
☐ Проверено на iPhone SE (маленький экран)
☐ Все кнопки минимум 44×44px
☐ Форма работает с мобильной клавиатуры
Контент:
☐ Нет Lorem ipsum и очевидных плейсхолдеров
☐ Реальные или правдоподобные отзывы
☐ CTA-кнопка одна и она заметна
☐ Footer с политикой конфиденциальности (особенно если есть форма)
Технически:
☐ Форма отправляет данные или хотя бы показывает success-состояние
☐ Нет битых ссылок
☐ Favicons подключены
☐ Open Graph изображение 1200×630px созданоКак итерировать после запуска
Лендинг — это не финал, а начало. После запуска работа продолжается промптами:
По данным Vercel Analytics:
- 80% пользователей уходят после Hero-секции
- Средняя глубина прокрутки — 40%
Переработай Hero: сделай заголовок конкретнее, добавь
социальное доказательство прямо под CTA (число клиентов
или логотипы компаний), уменьши отступ до первого контентного блока.Конверсия формы — 0.8%, хочу поднять до 2%+.
Протестируй три варианта текста CTA-кнопки:
1. «Получить бесплатный урок»
2. «Начать бесплатно»
3. «Хочу попробовать»
Реализуй A/B тест через случайное распределение пользователей
в localStorage.Месяц промптов после запуска часто даёт больший результат, чем первоначальная генерация.
Заключение
Час — это реалистичное время для первой рабочей версии лендинга. Качественный результат, который реально конвертирует и виден в поиске, потребует ещё 2–3 часа итераций и правок уже после первого деплоя.
Главное, что меняет ИИ в этом процессе: вы перестаёте зависеть от разработчика для каждой правки. Захотели поменять цвет кнопки, переформулировать заголовок, добавить секцию — промпт, и готово.
Сокращённый маршрут:
- Написать бриф (10 мин) → первый промпт → получить базовую версию
- Итерации промптами по дизайну и контенту (15 мин)
- SEO-промпты: мета-теги, H1, Schema.org, скорость (15 мин)
- Деплой на Vercel через GitHub (10 мин)
- Проверка по чеклисту (10 мин)
Ссылку можно шарить уже через час после старта.