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

Представьте: клиент пишет в 18:00 и просит «landing завтра к утру, бюджет — 10 тысяч». Руки опускаются? А если я скажу, что с помощью нейросетей и правильно составленных промтов можно уложиться в 4–5 часов, включая кофе? Звучит как магия, но это уже реальность. В этой статье я собрал 15 промтов, которые проведут вас по всему пути: от генерации структуры и текстов до вёрстки на HTML/CSS/JS и базовой SEO-оптимизации. Никакой воды — только готовые решения, которые вы сможете применить уже сегодня.

Почему это работает? Потому что современные LLM (Large Language Models) обучены на огромном количестве кода и текстов. Они понимают не только синтаксис, но и контекст. Главное — правильно поставить задачу. Промт — это не просто запрос, это техническое задание для нейросети. Чем детальнее вы его составите, тем качественнее будет результат. В этой подборке каждый промт — это мини-ТЗ, которое вы можете скопировать и использовать.

Базовые промты: фундамент вашего лендинга

1. Генерация структуры лендинга

Задача: Получить каркас будущей страницы — блоки, секции, их порядок и логику.

Промт:

Ты — опытный веб-дизайнер и маркетолог. Создай структуру лендинга для [услуга/продукт]. Целевая аудитория: [описание]. Цель: [конверсия в заявку/продажу].

Опиши последовательность блоков (секций) с указанием цели каждого и примерным содержанием. Используй классическую модель AIDA (Attention, Interest, Desire, Action).

Формат ответа: нумерованный список, каждый пункт — название блока, его цель и ключевые элементы.

Пример результата:

1. **Hero-блок** — привлечение внимания: заголовок с УТП, подзаголовок, кнопка CTA, фоновое изображение.
2. **Проблема/Боль** — показать, что вы понимаете клиента: описание типичных трудностей.
3. **Решение** — представить ваш продукт как ответ на боль.
4. **Преимущества** — 3-5 ключевых отличий от конкурентов.
5. **Социальные доказательства** — отзывы, кейсы, цифры.
6. **Как мы работаем** — 3 шага: заявка, обсуждение, результат.
7. **Частые вопросы (FAQ)** — снять возражения.
8. **Форма заявки** — финальный призыв к действию.

2. Генерация текстового контента

Задача: Написать тексты для каждого блока с учётом tone of voice и SEO.

Промт:

Ты — копирайтер, пишущий тексты для лендингов с высокой конверсией. Напиши тексты для следующих блоков лендинга: [список блоков из предыдущего промта].

Товар/услуга: [описание]. Целевая аудитория: [портрет]. Тон общения: [дружеский/деловой/дерзкий].

Учти SEO: используй ключевые фразы: [список ключей]. Заголовки должны быть цепляющими, тексты — краткими и убедительными. Для каждого блока дай готовый текст.

Пример результата:

**Hero:** Заголовок: "Создайте лендинг, который продаёт, за 4 часа". Подзаголовок: "Используйте готовые промты, чтобы сгенерировать структуру, тексты и код. Никаких дизайнеров и программистов — только вы и нейросеть". CTA: "Забрать промты".

**Проблема:** "Устали от бесконечных правок и дорогих подрядчиков? Месяц уходит на то, чтобы сделать простую страницу. А клиенты всё равно уходят к конкурентам".

**Решение:** "Наш набор промтов автоматизирует 80% работы. Вы получаете готовый лендинг за вечер, а не за месяц".

3. Генерация изображений и иконок

Задача: Получить описания для генерации изображений (или сами изображения через API).

Промт:

Ты — арт-директор. Создай промты для генерации изображений в нейросетях (Midjourney, DALL-E, Stable Diffusion) для лендинга о [услуга].

Стиль: [минимализм/флэт/3D/фотореализм]. Палитра: [цвета]. Настроение: [доверие/инновации/скорость].

Для каждого блока лендинга дай описание изображения: сюжет, композиция, цветовая гамма, технические детали (освещение, ракурс). Оформи как список: блок -> промт для генерации.

Пример результата:

**Hero:** Фото улыбающегося человека за ноутбуком, на экране — яркий лендинг. Светлое фоновое изображение с размытием, чтобы текст читался. На переднем плане — рука с мышкой.

**Преимущества:** Плоские иконки с градиентами, символизирующие скорость, качество, надёжность. Каждая иконка на отдельном цветном фоне.

Продвинутые промты: код и вёрстка

4. Генерация HTML-каркаса

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

Промт:

Ты — frontend-разработчик. Создай HTML-код для лендинга по следующей структуре: [вставьте структуру из промта №1]. Используй семантические теги (header, main, section, footer). Подключи Bootstrap 5 (CDN) для сетки и стилей. Все секции должны иметь классы для дальнейшей стилизации. Код должен быть валидным и без ошибок.

Пример результата:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Лендинг для [услуги]</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <header class="bg-light py-5">
        <div class="container">
            <h1>Заголовок</h1>
            <p>Подзаголовок</p>
            <a href="#cta" class="btn btn-primary">CTA</a>
        </div>
    </header>
    <section id="problem" class="py-5">
        <div class="container">
            <h2>Проблема</h2>
            <p>Текст</p>
        </div>
    </section>
    <!-- остальные секции -->
    <footer class="bg-dark text-white py-3">
        <div class="container">© 2026</div>
    </footer>
</body>
</html>

5. Стилизация с CSS

Задача: Написать CSS, который превратит скелет в красивый лендинг.

Промт:

Ты — CSS-специалист. Напиши CSS для лендинга, структура которого: [вставьте HTML-код из промта №4].

Дизайн-требования: шрифт — [Google Fonts, например, Inter], цветовая схема — [основной цвет, фоновый, акцент], отступы, скругления, тени. Сделай адаптивность (mobile-first). Используй CSS Grid и Flexbox. Добавь анимации при появлении (fadeIn).

Оформи код в виде отдельного CSS-файла.

Пример результата:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

:root {
    --primary: #4A90E2;
    --bg: #F8F9FA;
    --text: #333;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
}

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, var(--primary), #6DD5FA);
    color: white;
}

.cta-button {
    background: white;
    color: var(--primary);
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
}

@media (max-width: 768px) {
    .hero h1 { font-size: 2rem; }
}

6. Добавление JavaScript-интерактивности

Задача: Оживить страницу: модальные окна, плавная прокрутка, формы.

Промт:

Ты — frontend-разработчик. Напиши JavaScript для лендинга, HTML которого: [вставьте код]. Нужно:
1. Плавная прокрутка к якорям.
2. Открытие модального окна при клике на кнопку.
3. Валидация формы (имя, телефон) с выводом сообщения об успехе.
4. Анимация появления блоков при скролле (Intersection Observer).

Используй чистый JS без библиотек, кроме Bootstrap (если подключен). Код должен работать на современных браузерах.

Пример результата:

// Плавная прокрутка
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
    });
});

// Модальное окно
const modal = document.getElementById('modal');
const openBtn = document.getElementById('open-modal');
const closeBtn = document.getElementById('close-modal');
openBtn.addEventListener('click', () => modal.style.display = 'block');
closeBtn.addEventListener('click', () => modal.style.display = 'none');

// Валидация формы
document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const name = document.getElementById('name').value;
    const phone = document.getElementById('phone').value;
    if (name.trim() === '' || phone.trim() === '') {
        alert('Заполните все поля');
    } else {
        alert('Спасибо! Мы свяжемся с вами.');
        this.reset();
    }
});

// Появление при скролле
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
}, { threshold: 0.1 });
document.querySelectorAll('.animate-block').forEach(el => observer.observe(el));

7. Адаптация под мобильные устройства

Задача: Убедиться, что лендинг идеально выглядит на смартфонах.

Промт:

Ты — верстальщик. Проверь и исправь следующий код для мобильных устройств: [вставьте HTML/CSS]. Убедись, что:
- изображения масштабируются (max-width: 100%),
- шрифты не меньше 16px,
- кнопки легко нажимать (высота > 44px),
- меню сворачивается в бургер.

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

Пример результата:

img {
    max-width: 100%;
    height: auto;
}

.btn {
    min-height: 44px;
    font-size: 16px;
}

.navbar-toggler {
    display: block;
}

@media (min-width: 768px) {
    .navbar-toggler { display: none; }
}

Экспертные промты: оптимизация и публикация

8. SEO-оптимизация контента

Задача: Адаптировать тексты под поисковые запросы.

Промт:

Ты — SEO-специалист. Оптимизируй тексты лендинга: [вставьте тексты из промта №2].

Ключевые слова: [список ключей]. Добавь мета-теги (title, description, keywords) для каждой секции, расставь H1-H3, улучши читабельность (короткие абзацы, списки). Используй LSI-фразы. Предоставь результат в виде таблицы: элемент страницы -> оригинал -> оптимизированный вариант.

Пример результата:

9. Базовая SEO-разметка Schema.org

Задача: Добавить структурированные данные для поисковиков.

Промт:

Ты — SEO-специалист. Добавь JSON-LD разметку Schema.org для лендинга о [услуга]. Используй типы: LocalBusiness, Service, FAQPage (если есть FAQ). Укажи название, описание, рейтинг, цену, контакты. Предоставь код для вставки в <head>.

Пример результата:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Service",
  "name": "Создание лендинга на промтах",
  "description": "Быстрое создание лендинга с помощью нейросетей",
  "provider": {
    "@type": "LocalBusiness",
    "name": "Ваша компания",
    "telephone": "+7-123-456-78-90",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "ул. Примерная, 1",
      "addressLocality": "Москва",
      "addressCountry": "RU"
    }
  },
  "areaServed": "RU",
  "offers": {
    "@type": "Offer",
    "price": "10000",
    "priceCurrency": "RUB"
  }
}
</script>

10. Проверка на доступность (a11y)

Задача: Сделать лендинг удобным для людей с ограниченными возможностями.

Промт:

Ты — эксперт по веб-доступности. Проанализируй следующий код: [вставьте HTML]. Найди проблемы: отсутствие alt у изображений, недостаточный контраст, нет label у форм, нет aria-атрибутов. Предложи исправления и покажи изменённый код.

Пример результата:
- Добавлены alt="Описание" к изображениям.
- Изменены цвета для контраста (например, #333 на #000).
- Форма: Имя.
- Кнопки: aria-label="Закрыть".

11. Ускорение загрузки (Core Web Vitals)

Задача: Оптимизировать скорость страницы.

Промт:

Ты — performance-инженер. Дай рекомендации по ускорению следующей страницы: [описание или код]. Учитывай: оптимизацию изображений (WebP, lazy loading), минификацию CSS/JS, кэширование, критический CSS. Предоставь список действий с примерами кода.

Пример результата:

<!-- Lazy loading для изображений -->
<img src="image.jpg" loading="lazy" alt="...">

<!-- Минификация CSS: удалите пробелы и комментарии -->
<!-- Используйте CDN для Bootstrap (уже подключен) -->

<!-- Критический CSS: вставьте стили для первого экрана в <style> прямо в head -->

12. Генерация политики конфиденциальности и оферты

Задача: Юридические документы для лендинга.

Промт:

Ты — юрист, специализирующийся на интернет-праве. Напиши политику конфиденциальности и договор оферты для сайта, который собирает данные (имя, телефон) и использует cookie. Укажи: какие данные собираются, как используются, права пользователя, контакты. Ссылайся на 152-ФЗ “О персональных данных” (для России). Предоставь текст в формате Markdown, готовый для вставки.

Пример результата:

Политика конфиденциальности
1. Общие положения
Настоящая политика определяет порядок обработки персональных данных пользователей сайта...
2. Какие данные мы собираем
- Имя, телефон, email (при заполнении формы)
- Cookie-файлы (с согласия пользователя)
...

Сборка и публикация

13. Сборка всех частей в единый проект

Задача: Объединить HTML, CSS, JS в один файл (или структуру папок).

Промт:

Ты — разработчик. Собери все части лендинга в один проект. HTML: [вставьте код]. CSS: [вставьте код]. JS: [вставьте код].

Создай структуру папок: index.html, styles.css, script.js. В index.html подключи styles.css и script.js. Приведи итоговый код каждого файла.

Пример результата:

index.html: <!DOCTYPE html>...<link rel="stylesheet" href="styles.css">...<script src="script.js" defer></script>...
styles.css: (весь CSS)
script.js: (весь JS)

14. Деплой на GitHub Pages / Netlify

Задача: Получить инструкцию по публикации.

Промт:

Ты — DevOps-инженер. Опиши пошагово, как задеплоить статический сайт (HTML/CSS/JS) на GitHub Pages и Netlify. Для GitHub Pages: создание репозитория, настройка GitHub Actions (или просто включить Pages в настройках). Для Netlify: перетащить папку или подключить Git. Укажи, какие файлы нужны (например, index.html). Предоставь команды для терминала, если необходимо.

Пример результата:
GitHub Pages:
1. Создайте репозиторий на GitHub.
2. Загрузите файлы (index.html, styles.css, script.js).
3. В настройках репозитория выберите Branch: main, /root.
4. Через минуту сайт будет доступен по адресу https://username.github.io/repo/.

Netlify:
1. Перейдите на app.netlify.com/drop.
2. Перетащите папку с сайтом.
3. Получите ссылку (например, random-name.netlify.app).

15. Настройка аналитики и счётчиков

Задача: Подключить Яндекс.Метрику и Google Analytics.

Промт:

Ты — веб-аналитик. Дай инструкцию по подключению Яндекс.Метрики и Google Analytics к статическому сайту. Приведи код счётчика для вставки в <head>. Объясни, как настроить цели (например, отправка формы). Укажи, какие данные отслеживать (просмотры, визиты, конверсии).

Пример результата:

<!-- Яндекс.Метрика -->
<script type="text/javascript">
(function(m,e,t,r,i,k,a){m[i]=m[i]

||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();
   for (var j=0; j<document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
   k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(ВАШ_НОМЕР, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   });
</script>

<!-- Google Analytics (GA4) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXX');
</script>

Кейс из практики: лендинг для кофейни за 4 часа

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

Проблема: Владелец не имел бюджета на дизайнера и разработчика, а времени было в обрез — нужно было к открытию через 3 дня.

Решение: Я использовал следующую последовательность промтов:
1. Структура (промт №1) — получил каркас: hero, меню, о нас, отзывы, контакты, бронь.
2. Тексты (промт №2) — сгенерировал приветственный текст, описание меню, отзывы (выдуманные, но правдоподобные).
3. HTML (промт №4) — создал каркас на Bootstrap.
4. CSS (промт №5) — стилизовал под тёплую кофейную гамму (коричневый, кремовый).
5. JS (промт №6) — добавил модальное окно для брони и валидацию формы.
6. SEO (промт №8) — подобрал ключи: "кофейня рядом", "свежая выпечка", "забронировать столик".
7. Деплой (промт №14) — выложил на Netlify за 10 минут.

Результат: Сайт был готов за 4 часа. Владелец доволен, первые заказы пошли через форму брони уже на следующий день. Конечно, тексты пришлось немного поправить вручную, но основа была готова.

Выводы

С помощью промтов можно радикально ускорить создание лендинга. Вы не заменяете разработчика полностью, но экономite 80% времени на рутине. Главное — правильно формулировать задачи, итеративно улучшать результат и не бояться экспериментировать.

Попробуйте прямо сегодня: возьмите один из промтов и сгенерируйте структуру для своего проекта. Уверен, вы удивитесь, насколько это просто. А если хотите углубиться в тему, изучите документацию по вашей любимой LLM — там много фишек, которые помогут вам выжать максимум.

Удачной вёрстки!