Промпты для лендинга: как поставить задачу AI и получить рабочий код с первого раза

Девять из десяти вайбкодеров сталкиваются с одной и той же проблемой: пишут промпт, получают «что-то», начинают переделывать секцию за секцией — и теряют два часа вместо запланированных тридцати минут. Дело почти никогда не в инструменте. Дело в том, как поставлена задача.

Lovable, v0 и Bolt — это мощные инструменты с суммарной аудиторией свыше 1 миллиона пользователей, но все они работают строго с тем, что вы им даете. Расплывчатый промпт — расплывчатый результат. Конкретный промпт со структурой, референсами и ограничениями — и лендинг готов за одну итерацию.

В этой статье разберем пять шаблонов промптов под реальные задачи: от простого одностраничника для курса до конвертирующего лендинга SaaS-продукта. Плюс — как структурировать задачу до того, как открыть инструмент.

Почему у большинства промптов не получается результат с первого раза

Сначала короткий диагноз. Типичный промпт нуба выглядит так: «Сделай красивый лендинг для моего курса по маркетингу, темная тема, современный дизайн». Это не промпт — это пожелание. AI не знает, кому продаем, какой результат обещаем, какие секции нужны, какой стек использовать и какие ограничения есть.

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

1. Что это — продукт, аудитория, главный оффер
2. Структура — список секций в нужном порядке
3. Стиль — референс, цветовая палитра, типографика
4. Стек — React + Tailwind, Next.js, чистый HTML
5. Контент — конкретные тексты или заглушки
6. Ограничения — что точно не делать (анимации, лишние секции)

Без этого инструмент угадывает. И угадывает по-своему.

Как подготовиться к промпту за 20 минут: три шага

Это обязательный этап. Пропустишь — потратишь в три раза больше времени на правки.

Шаг 1. Контент сначала. Напиши в Google Doc (или прямо в Notion) весь текст лендинга: заголовок H1, подзаголовок, три-пять выгод, блок социального доказательства, CTA и FAQ. Не давай AI придумывать текст за тебя — он будет безликим. Твой текст — твой конвертирующий оффер.

Шаг 2. Дизайн-гайд. Одно-два предложения про стиль: «Минималистичный, темный фон (#0f0f0f), акцентный цвет #6C63FF, шрифт Inter, закругленные углы, без резких теней». Можно попросить Claude описать стиль любого сайта, который нравится — и взять этот текст как основу.

Шаг 3. Референс-скриншот. Одно изображение сайта с похожим настроением. Lovable и Bolt принимают картинки прямо в чат — это сокращает правки в два-три раза. Используй Pinterest или просто скриншот сайта, который нравится.

Максим: «При запуске NanaBanana мы не тратили время на итерации с AI в стиле "сделай лучше". Я заранее готовил структуру, тексты и один референс — и первая версия лендинга была уже на 80% готова. Правки занимали 15-20 минут, не два часа. Это и есть разница между вайбкодером и человеком, который просто кидает промпты и надеется.»

Структура рабочего промпта для лендинга

Перед шаблонами — универсальная формула. Можно использовать её как основу для любой задачи.

Создай [тип страницы] для [описание продукта/услуги].

АУДИТОРИЯ: [кто придет на страницу]
ГЛАВНЫЙ ОФФЕР: [один конкретный результат, который получит клиент]

СТРУКТУРА СЕКЦИЙ (в этом порядке):
1. Header — [что в нем: лого, навигация, CTA]
2. Hero — [заголовок, подзаголовок, кнопка]
3. [Остальные секции]
...

СТИЛЬ:
- Цветовая схема: [цвета HEX или описание]
- Шрифт: [название или тип]
- Настроение: [пример: минималистично, как stripe.com]
- Без: [что исключить]

СТЕК: [React + Tailwind / Next.js / чистый HTML]

КОНТЕНТ:
[Вставь готовые тексты или напиши "используй заглушки на тему [X]"]

ОГРАНИЧЕНИЯ:
- [Что точно не делать]

Теперь — пять рабочих примеров под конкретные задачи.

Шаблон 1. Лендинг для онлайн-курса через Lovable

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

Создай высококонвертирующий лендинг для онлайн-курса.

АУДИТОРИЯ: Предприниматели и маркетологи 25-40 лет, хотят запустить первый AI-продукт без найма разработчиков.

ГЛАВНЫЙ ОФФЕР: За 6 недель — работающий MVP с первыми пользователями.

СТРУКТУРА:
1. Header — логотип слева, кнопка "Записаться" справа, фиксированный при скролле
2. Hero — H1 "За 6 недель — твой первый AI-продукт", подзаголовок 2 строки, CTA "Начать сейчас" (акцентная кнопка), счетчик мест "Осталось 23 места"
3. Pain section — 3 карточки с болями аудитории (иконки, короткий текст)
4. Program — 6 модулей списком с описанием по 1-2 предложения каждый
5. Results — 3 кейса учеников: фото, имя, результат
6. Pricing — 2 тарифа: Базовый (9 900 руб.) и Расширенный (19 900 руб.) в карточках
7. FAQ — 5 вопросов с ответами, аккордеон
8. Final CTA — повторная кнопка записи, фраза про ограниченность мест
9. Footer — контакты, ссылки на соцсети

СТИЛЬ:
- Темный фон: #0f0f0f, акцентный цвет: #6C63FF (фиолетовый)
- Шрифт: Inter
- Закругленные углы на карточках (12px)
- Минимум анимаций — только плавное появление секций при скролле
- Без: параллакса, сложных 3D-эффектов, более 2 шрифтов

СТЕК: React + Tailwind CSS + shadcn/ui

ОГРАНИЧЕНИЯ:
- Не придумывай результаты учеников — используй заглушки [Имя Фамилия, город, результат]
- CTA-кнопки только двух видов: заполненная (акцентная) и outline
- Mobile-first — сначала мобильная версия

Почему это работает. Lovable понимает конкретику — названия компонентов, hex-коды, порядок секций. Чем меньше пространства для интерпретации, тем меньше итераций.

Шаблон 2. Промпт для SaaS-лендинга через v0

v0 от Vercel — лучший инструмент, если нужны чистые React-компоненты в экосистеме Next.js. Лендинг для SaaS — его родная среда.

Generate a SaaS landing page for a B2B productivity tool.

PRODUCT: AI-powered meeting summarizer that turns 1-hour calls into 3-line action items.
TARGET: Product managers and team leads at companies 50-500 people.
MAIN VALUE PROP: Save 2 hours per week per team member.

SECTIONS (in this order):
1. Navbar — logo, links (Features / Pricing / Blog), "Start free" button
2. Hero — H1 "Turn any meeting into action in 30 seconds", subhead, two CTAs: "Start free" (filled) + "See demo" (ghost), screenshot/mockup placeholder on the right
3. Social proof bar — logos of 6 company types (use placeholders)
4. Features — 3 columns: Real-time transcription / Smart summaries / One-click share
5. How it works — 3 steps with numbered icons
6. Pricing — 3 tiers: Free / Pro ($29/mo) / Team ($99/mo)
7. Testimonials — 3 cards with avatar, name, role, quote
8. Final CTA — full-width dark section, "Start your free trial" button
9. Footer

DESIGN:
- Light background, accent: #0066FF
- Font: Inter
- Clean, minimal, like Linear.app
- Subtle shadows on cards, no gradients except hero background

STACK: Next.js 14, TypeScript, Tailwind CSS, shadcn/ui components
OUTPUT: Complete page, no placeholder [TODO] comments, all sections functional

Обрати внимание: запрос на английском. v0 лучше понимает технические задачи на английском — результат чище. Тексты потом переведешь.

Шаблон 3. Быстрый промпт для Bolt под MVP-лендинг за 30 минут

Когда нужно быстро проверить идею. Bolt в этом режиме — чемпион по скорости.

Build a simple, fast-loading landing page for a freelance service.

SERVICE: Russian-speaking UX designer who creates Figma prototypes for startups.
OFFER: Clickable prototype in 5 days from scratch.

SECTIONS (keep it minimal):
1. Hero — Name + title, 1-line value prop, "Book a call" CTA
2. Services — 3 service cards: Prototype / UX audit / Design system (price range on each)
3. Work examples — 4-image grid with captions (use placeholder images)
4. About — 2 paragraphs + photo placeholder
5. Contact — simple form (name, email, message) + Telegram link

DESIGN: White background, black text, single accent #FF5733, geometric sans-serif font
STACK: Pure HTML + CSS + minimal vanilla JS (no frameworks, must load under 1 second)
NO: animations, sticky header, cookie banners, modals
MOBILE: Fully responsive, hamburger menu on mobile

Bolt хорошо работает с ограничением «без фреймворков» — генерирует быстрые легкие страницы. Для простых лендингов это часто лучше тяжелого React.

Шаблон 4. Промпт с референсом и скриншотом (мультимодальный подход)

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

[Прикрепи скриншот сайта, который нравится]

Recreate the visual style from the attached screenshot for a new landing page.

NEW PRODUCT: Subscription box with curated books for product managers.
Keep: layout structure, card style, color mood, typography feel
Change: all content, branding, copy

SECTIONS:
1. Hero — bold headline, subscription CTA, hero image of book collection
2. How it works — 3 steps
3. Sample box contents — 3-4 book cards with cover image placeholder, title, short description
4. Pricing — Monthly ($29) / Quarterly ($79 = save 10%) / Annual ($279 = save 20%)
5. Reviews — 3 testimonials
6. FAQ — 4 questions

STACK: React + Tailwind
OUTPUT: Full working page, placeholder images via picsum.photos

По практике из видео: мультимодальный подход (скриншот + текст) дает результат принципиально иного качества, чем чистый текстовый промпт. AI видит настроение, а не только слова.

Шаблон 5. Итеративный промпт для доработки (section-by-section)

Это не промпт для создания — это промпт для правок. Большинство теряют время именно на этом этапе, когда пишут по одному изменению за раз.

Make the following changes to the current page. Apply all changes in one batch:

HERO SECTION:
- Add gradient to the word "AI" in the headline (from #6C63FF to #00D4FF)
- Make CTA button 4px taller and add drop shadow on hover (remove grow animation)
- Move the subtitle 8px closer to the headline

FEATURES SECTION:
- Replace text bullets with colored icons (Lucide icons, match accent color)
- Add subtle hover lift effect to feature cards (translateY -4px)
- Reduce card padding from current to 24px

PRICING:
- Highlight the middle tier (Pro) with accent border and "Most Popular" badge
- Add annual toggle (Monthly / Annual, 20% discount for annual)

GLOBAL:
- Remove all instances of box-shadow: none
- Ensure minimum 16px line-height everywhere
- Fix mobile: stack pricing cards vertically on screens below 768px

Ключевой принцип — одна большая волна правок вместо десяти маленьких промптов. Каждый промпт тратит контекст и токены. Собери все изменения, отправь один раз.

Сравнение инструментов: какой выбрать под задачу

По данным 2026 года: Lovable лидирует по зрелости Supabase-интеграции, но Bolt Cloud закрыл разрыв — у него теперь встроенные базы данных, авторизация и хостинг. Оба Pro-плана стоят $25/месяц.

Типичные ошибки в промптах и как их исправить

Ошибка 1. Слишком общий стиль. «Современный минималистичный дизайн» — это не инструкция. Напиши: «минималистично, как linear.app» или «темный, как vercel.com». Одна ссылка-референс стоит десяти слов описания.

Ошибка 2. Нет порядка секций. AI расставит секции по своему усмотрению. Всегда нумеруй: 1, 2, 3. Это занимает 30 секунд и экономит одну итерацию.

Ошибка 3. Смешал контент и инструкции. Пиши отдельными блоками: сначала структура, потом стиль, потом контент. Не вали всё в один абзац.

Ошибка 4. Не указал стек. Lovable и Bolt могут выбрать разные фреймворки по умолчанию. Если нужен конкретный — укажи явно.

Ошибка 5. Просишь слишком много за один раз. Лендинг на 12 секций с анимациями, формой, кабинетом и блогом — это не один промпт. Начни с ядра (Hero + Features + CTA), добей детали итерациями.

И последнее. Если результат совсем не то — переподай тот же промпт без изменений. Это не баг — AI иногда просто генерирует лучше со второй попытки. Так устроена вероятностная природа языковых моделей.

FAQ

Можно ли писать промпты для Lovable и v0 на русском?
Да, оба инструмента понимают русский язык. Но для технических задач — стек, компоненты, CSS-свойства — английский дает более точный результат. Оптимально: структуру и стиль на английском, контент (тексты секций) на русском.

Сколько итераций нужно на нормальный лендинг?
По реальной практике: если промпт подготовлен по структуре выше — 3-5 итераций для финального результата. Без подготовки — 15-20 и больше.

Что лучше: один большой промпт или много маленьких?
Для создания — один большой с полной структурой. Для правок — один батч всех изменений сразу. Каждый отдельный промпт тратит токены и может терять контекст предыдущих решений.

Как добавить анимации без лишнего кода?
Укажи конкретно: «плавное появление секций при скролле через Intersection Observer» или «hover: translateY -4px на карточках». Не просто «добавь анимации» — иначе получишь анимированный хаос.

Почему лендинг нормально выглядит на десктопе, но сломан на мобилке?
Попроси явно: «Mobile-first approach, проверь адаптивность на 375px и 768px». Или используй инспектор в Bolt — выбери элемент и напиши, что именно не так на мобильной версии.

Можно ли подключить оплату к лендингу, созданному в Lovable?
Да. Lovable поддерживает интеграцию с Lemon Squeezy и Stripe через Supabase. Но для этого, скорее всего, придется экспортировать проект в Cursor для тонкой настройки.

Как проверить результат перед публикацией?
Три вещи: мобильная версия (375px), скорость загрузки (PageSpeed Insights), и пройдись по всем кнопкам вручную — убедись, что CTA ведут куда надо.

Все инструменты из статьи — Lovable, v0, Bolt — собраны в нашем каталоге AI-инструментов с подробными обзорами, ценами и сравнениями.

Если хочешь разобраться с вайбкодингом лично и построить свой первый продукт — запишитесь на консультацию к Максиму. Он строил продукты с нуля до 200 000 пользователей и знает, где именно теряется время у большинства.

Обновлено: октябрь 2026. Данные по инструментам и ценам актуальны на дату публикации.