В этой статье я покажу как быстро генерировать продающие лендинги, предоставив все необходимые промты.
Ниже 3 варианта «нулевых» промтов, которые нужны для того, чтобы от нейросети получить основной промт, по которому она сгенерирует лендинг, который вам нужен. Оба промта ниже одинаковые, отличаются только тем что написано в скобках и в заголовках каждого варианта. В обоих промтах ниже в каждом блоке написаны мои заголовки и тексты — для своего лендинга просто скопируйте один из двух промтов, вставьте в файл и замените мои заголовки и тексты в каждом блоке на свои. Можете для каждого блока добавить описание дизайна (так как вы его видите).
Первое видео: показываю как сгенерировать основной промт и файлы лендинга
- Или смотреть на RuTube — нажать, перейти и смотреть.
- Или смотреть на VK видео — нажать, перейти и смотреть.
Второе видео: показываю как создать файлы лендинга
- Или смотреть на RuTube — нажать, перейти и смотреть.
- Или смотреть на VK видео — нажать, перейти и смотреть.
Третье видео: показываю как загрузить архив с файлами лендинга на домен и поддомен
- Или смотреть на RuTube — нажать, перейти и смотреть.
- Или смотреть на VK видео — нажать, перейти и смотреть.
Вы можете использовать любую нейросеть, я использую вот этот сервис, в котором есть все необходимые нейронки для текста (ChatGPT, Claud и др. и для генерации изображений).
ШАГ 1: ПЕРВЫЙ ВАРИАНТ для генерации Мега промта (с готовым текстом, который нужно указать для каждого блока лендинга) с средним кол-вом эффектов. Улучшаем дизайн!
Для этого, отправь в нейросеть (Claude или ChatGPT) следующий промт (задание):
«Как самый опытный и креативный промт инженер, напиши мне профессиональный промт, по которому нейросеть сгенерирует мне лендинг с продающим и крутым дизайном премиум уровня, который у в веб-студиях стоит от 200000 рублей. Жду от тебя готовый промт для генерации лендинга.
Заголовки, подзаголовки и тексты для блоков лендинга я указал для каждого блока.
Вот данные для лендинга:
Лендинг продает инфопродукт: [вместо скобок и текста в них, здесь укажите названия вашего инфопродукта, товара или услуги]. В инструкции рассказываю [вместо скобок и текста в них, здесь напишите какую информацию предлагает ваш инфопродукт / товар или услуга, в чем помогает и какие проблемы клиентов решает].
В шапке слева должен быть логотип: [вместо скобок и текста в них, здесь укажите названия вашего лендинга для логотипа], справа должны располагаться названия блоков: [вместо скобок и текста в них, здесь укажите свои названия верхнего меню например: Что вы получите, Как это работает, Кому подойдет, Получить, Отзывы, Частые вопросы, Как нас найти].
В верхнем меню справа от логотипа, выведи названия блоков лендинга на ПК. При нажатии на пункты верхнего меню происходит прокрутка к нужному блоку лендинга. На мобильных экранах верхнее меню должно показываться «бургером», а при нажатии на «бургер», должны открываться названия верхнего меню лендинга.
Блоки лендинга:
Ниже названия блоков лендинга, слева от названия мой поясняющий текст для каждого блока. Под поясняющим текстом в каждом блоке: заголовки, подзаголовки и тексты для каждого блока. Напиши мои тексты как есть, ничего не меняй.
HERO (первый экран): За 3 секунды должно быть понятно: что за продукт, для кого, в чём УТП, что сделать.
Заголовок H1: Показываю как за 30 минут создать премиум лендинг — без дизайнера, программиста и навыков
Подзаголовок (lead-параграф под H1): Заберите пошаговую видео-инструкцию + специальные Мега Промты и получите готовый лендинг премиум класса на своем домене
Trust-блок под подзаголовком: Если вам нужен лендинг «как у всех» — в интернете есть информация об этом. А если вам нужен лендинг премиум-класса — делай по нашей инструкции и получай больше заказов и продаж!
Два CTA в ряд:
Главная кнопка: Получить инструкцию — клик ведёт к блоку «Получить»
Вторичная кнопка: Узнать подробнее» — клик ведёт к блоку «Что вы получите»
ПРИЗЫВ К ДЕЙСТВИЮ №1 (CTA-микротекст под кнопками): Забери, сделай лендинг сегодня и получай клиентов завтра!
БЛОК «Что вы получите»: Здесь 6 блоков в каждом блоке тексты в виде 1-2 предложений. Ниже подблок с Бонусами: в этом блоке текст в виде 1-2 предложений с перечислением трех бонусов. Ниже 1 завершающее предложение с текстом.
Заголовок H2: Видео-инструкцию: «Как сгенерировать лендинг с помощью нейросетей»
Подзаголовок: Показываю алгоритм простых действия уровня «смотри, повторяй — получи результат.
Сетка 6 карточек мини-заголовок, текст 1-2 предложения:
Карточка 1: Два черновых промта (на выбор) / Для генерации основного (профессионального) промта продающего лендинга.
Карточка 2: Специальный промт / Улучшает основной промт и генерирует лендинг с премиальным дизайном
Карточка 3: В видео-инструкции показываю / процесс генерации файлов лендинга нейросетью, их загрузку на хостинг и домен
Карточка 4: Показал как зарегистрировать / Домен и поддомен на готовом домене
Карточка 5: Показываю как редактировать / Информацию на лендинге (заголовки, тексты)
Карточка 6: Список нейросетей / Для генерации лендинга бесплатно и Бонусы!
Призыв к действию (CTA — call to action): Текст без градиента с высоким контрастом без кнопки снизу с выделением важных фраз золотистым цветом.
Заголовки H3 призывов к действию:
Даже если вы видите код первый раз в жизни — через 30 минут вы сделаете лендинг, за который дизайн-студии берут от 100 000 ₽. А первые заказы и продажи — получите уже на следующий день. Наши Бонусы вам в этом помогут!
БЛОК «Как это работает:
Заголовок H2: Как вы будете создавать лендинг
Вертикальный/горизонтальный таймлайн из 5 шагов (узкие блоки друг под другом):
Шаг 1: Отправляете в нейросеть один из двух промтов — чтобы она написала основной промт для генерации лендинга
Шаг 2: Отправляете второй специальный промт — нейросеть улучшит основной промт, по которому сгенерирует лендинг
Шаг 3: Собираете файлы лендинга. Просто копируете содержимое каждого файла и вставляете в свой файл
Шаг 4: Весь процесс длится 20-30 минут. Просто копируйте и добавляйте информацию сначала в чат нейросети, а затем — в несколько файлов
Шаг 5: Дальше регистрируется хостинг, затем домен/поддомен, на который загружаете архив с файлами лендинга
Завершающее предложение (центрировано): Все это — показываю в видео инструкции. Каждый шаг — с пояснениями — что открыть, куда вставить, что нажать и т.д. Все действия объясняю «понятным языком» — для людей, которые НЕ программисты, у которых НЕТ соответствующих знаний и опыта
Призыв к действию (CTA — call to action): Текст без градиента с высоким контрастом без кнопки ниже (важные 2-3 слова выделено цветом #04eaf0).
Заголовки H3 призывов к действию: Копируй промты, вставь в нейросеть → готовые файлы, загрузи на домен/поддомен и получи готовый лендинг с дизайном уровня топовых студий
БЛОК «Кому подойдет» (в этом блоке будет перечислено 8 представителей бизнеса, которым нужна наша инструкция)
Заголовок H2: Для кого наша инструкция
Подзаголовок: Для всех, кто продает физические и цифровые товары и услуги
Сетка 8 карточек — каждая карточка glassmorphism, с SVG-иконкой и названием представителя бизнеса и кратким текстом пояснением под названием. Hover — gradient border + лёгкий lift:
Карточка 1: Предпринимателям — которые хотят запустить новый продукт и не сливать 100К на студию.
Карточка 2: Экспертам и коучам — нужен сайт-визитка / продающий лендинг под услугу.
Карточка 3: Инфобизнесу — для запуска инфопродуктов, марафонов, наставничества.
Карточка 4: Селлерам и магазинам — для рекламы товаров и работы с трафиком.
Карточка 5: Фрилансерам — кто хочет добавить услугу «лендинг под ключ за 1 день» и зарабатывать на этом.
Карточка 6: Продавцам услуг — мастера, репетиторы, психологи, юристы и т.д.
Карточка 7: Новичкам — кто давно хотел зайти в IT-сферу, но боялся сложности.
Карточка 8: Маркетологам и таргетологам — для тестов офферов и быстрых посадочных страниц.
Призыв к действию (CTA — call to action): Текст с новой строки по центру, без градиента с высоким контрастом без кнопки снизу.
Заголовки H3 призывов к действию:
Получите готовый лендинг премиум класса на вашем домене за 30 минут — БЕЗ навыков и БЕЗ опыта
БЛОК «Получить»: главный конверсионный блок
Заголовок H2 (с акцентом на названии инструкции): Получить инструкцию и все Бонусы!
Подзаголовок H3: «Как сгенерировать лендинг с помощью нейросетей»
Список преимуществ в строчку:
Лендинг через 30 минут.
Без знаний и опыта.
Бонусы!
Цена / Старая цена (опционально, если используете):
Обычная цена: 3999 ₽.
Цена со скидкой: 1999 ₽.
Кнопка: «Получить инструкцию»
Ссылка для кнопки: https://a56300s3.autoweboffice.ru/?r=ordering/cart/as1&id=117&clean=true&lg=ru
ПРИЗЫВ К ДЕЙСТВИЮ (заметный микротекст желтого цвета под кнопкой, до чекбокса): Цена действует ограниченное время. Дальше — 3 999 ₽ без бонусов.
Чекбокс под кнопкой (по умолчанию checked) с текстом:
Под кнопкой расположи чекбокс и текст: «Нажимая на кнопку, я соглашаюсь с условиями публичной оферты, с политикой конфиденциальности и обработки персональных данных» — в этом тексте там где нужно укажи ссылки (каждая ссылка должна открываться в новой вкладке браузера) укажи ссылки на страницы нижнего меню: Политика конфиденциальности, Обработка персональных данных, Оферта. По умолчанию в чекбоксе стоит галочка, если галочку пользователь уберет кнопка оплаты не работает и при нажатии на нее появляется текст: Необходимо поставить галочку в чекбокс согласившись с условиями оплаты.
Подблок «Подарки при покупке» — 3 блока — по горизонтали, в каждом название Подарка, ниже зачеркнутая цена, справа от цены — надпись: БЕСПЛАТНО:
Заголовок: Бонусы в Подарок!
Названия Подарков: Инструкция: «Бесплатные способы привлечения клиентов на ваш лендинг/в бизнес» — 4500 ₽, Инструкция: «Как создать сайт на WordPress за 30 минут» — 2500 ₽, Промт для генерации продающего текста для лендинга — 500 ₽.
Завершающее предложение (центрировано, средний выделенный жирным шрифт — важные фразы выдели цветом: #ec6f0e без градиента):
Суммарная ценность бонусов: 7 500 ₽ — для вас в Подарок при покупке!
БЛОК «Отзывы»: Сгенерируй сам 9 реалистичных отзывов на русском языке (мужчины и женщины 24-35 лет) по теме инфопродукта: «Как сгенерировать лендинг с помощью нейросетей». По умолчанию должно показываться 3 блока с отзывами, остальные после прокрутки влево или вправо. Текст каждого отзыва состоит из: небольшого размера фото человека оставившего отзыв (сгенерируй фото людей и предоставь инструкцию как их добавить на лендинг), справа от каждого фото сгенерируй и напиши текст положительного и реалистичного отзыва до 500 символов, ниже напиши имя оставившего отзыв, под текстом отзыва напиши Имя и Фамилию, которые должны быть разными. Все тексты отзывов, Имя и Фамилию, сгенерируй сам по теме продукта. Тексты отзывов на лендинге должны располагаться по горизонтали, пролистываться влево и вправо и красиво оформлены. Картинки людей должны соответствовать тексту отзывов по полу, предусмотри это.
Заголовок H2: Реальные результаты покупателей
9 карточек-отзывов в горизонтальном слайдере (по умолчанию показываются 3 отзыва на ПК, 2 на планшете, 1 на мобильном). Прокрутка влево/вправо: стрелки + drag/swipe + клавиатура. Использовать scroll-snap-type: x mandatory + кастомные стрелки.
Каждая карточка (glassmorphism, скругление 20px, hover — tilt 3D):
Слева: круглое фото (80×80)
Справа от фото: 5 звёзд (SVG, золотые #FFD700)
Под звёздами: текст отзыва до 500 символов
Под текстом: Имя Фамилия
БЛОК «Частые вопросы»: при нажатии на текст вопроса ниже, под каждым вопросом должны открываться ответы на каждый вопрос, а при повторном нажатии на вопрос тексты ответов должны закрываться. Всего будет 7 вопросов и ответов для каждого вопроса.
Заголовок H2: Частые вопросы
Аккордеон из 7 вопросов (нативный <details><summary> + JS для плавной анимации высоты). По умолчанию все закрыты. При клике на вопрос — открывается ответ (max-height transition + fade-in), при повторном клике — закрывается. Иконка + поворачивается в × (rotate 45°). Только один может быть открыт одновременно (опционально — на твой выбор, лучше разрешить несколько открытых).
Вопрос 1: Почему вам нужна именно наша инструкция? / Ответ 1: «Мы продаем только необходимую информацию по теме». Никогда не понимал продавцов, инфопродукты которых состоят из нескольких десятков видео-инструкций, и они выдают такое огромное кол-во видео за преимущество. На деле, более 90% информации у таких продавцов «вода» в виде ненужной болтовни, а те оставшиеся 10% ценной инфы, часто не содержат самую необходимую информацию.
«Включено видео установки на хостинг». 90% обучений заканчиваются на словах «ну а дальше залейте на хостинг» или другими словами, но в таком же ключе. И всё — человек один на один с FTP, DNS, SSL и непонятными терминами. Я показываю эту часть отдельным видео-блоком, максимально просто, понятно и по шагам, в котором показал регистрацию хостинга, домена, поддомена и установку архива лендинга на ваш домен и поддомен (сами выберите куда загрузить свой).
«От идеи до сайта в интернете — за ≈ 30± минут». Не «изучите за месяц», не «пройдите курс из 40 уроков». С нашей инструкцией так: сел за ПК — через 30± минут у вас готовый продающий лендинг с премиальным дизайном, который работает на вашем домене/поддомене.
«Промты, которые реально работают». Мы длительное время тестировали промты. Переписывали, вносили изменения, правили, проверяли конверсии на готовых вариантах, сравнивали. У нас — выверенные конструкции промтов и важных дополнений, которые дают результат.
«Видео + текст одновременно». Большинство инфопродуктов — это либо «голая» PDF-ка, либо видео без пояснений. У нас и то, и другое, без воды и с наглядными пояснениями. У нас не нужно учиться и тратить время — у нас копируй промт, добавь название и описание своего продукта или услуги, запусти генерацию и код файлов лендинга готов, дальше — быстрая загрузка на хостинг и домен, клиенты и продажи/заказы.
Вопрос 2: Нейросети я буду использовать платные? Или бесплатные? / Ответ 2: В видео я показываю как создаю лендинг с помощью нейросети Claud, которой пользуюсь на сервисе, в котором доступно множество нейросетей, в том числе и для генерации картинок и видео. Стоимость использования сервиса с множеством необходимых нейросетей составляет 700-800 руб. в месяц. Этого вполне достаточно чтобы сгенерировать несколько десятков готовых лендингов для себя и для клиентов. Но предложу и бесплатный вариант нейросетей.
Вопрос 3: Я вообще не разбираюсь в технике. Справлюсь? / Ответ 3: Да. Инструкция написана для людей, которые ни разу не видели код. Если умеете копировать и вставлять текст — справитесь.
Вопрос 4: Лендинг будет МОЙ или привязан к какой-то платформе? / Ответ 4: Полностью ваш. Файлы лежат на вашем хостинге и домене. Никаких подписок, никакой привязки.
Вопрос 5: А можно ли использовать для коммерческих целей — продавать клиентам? / Ответ 5: Да, можно. Делайте сколько хотите лендингов и продавайте за любую цену. Многие покупатели многократно окупают инструкцию с первого клиента.
Вопрос 6: Как я получу инструкцию? / Ответ 6: Сразу после оплаты — доступ к статье с текстовой информацией со скриншотами и видео + все промты, нейросети и Бонус.
Вопрос 7: Можно ли задавать вопросы? / Ответ 7: Да, в течение 30 дней после покупки можете писать нам на e-mail или в Telegram по техническим вопросам. После оплаты данные предоставлю, а Email в шапке сайта.
Добавь Schema.org FAQ structured data в <head> (JSON-LD).
БЛОК «Как нас найти»:
Заголовок H2: Карта проезда в офис
Подзаголовок: Показываю место на карте проезда к нам
Слева (на ПК): контактная карточка glassmorphism с иконками — адрес, телефон, email, часы работы:
Адрес: г.Москва
Телефон: +7 930 4568460
Email: vs-bumerang@mail.ru
Часы работы: 09:00 — 17:00
Справа: контейнер для карты с скруглением 20px, бордером rgba(255,255,255,.08), высотой 450px:
html
<!— 🗺️ ВСТАВЬТЕ СЮДА ИНТЕРАКТИВНЫЙ КОД КАРТЫ ИЗ ЯНДЕКС-КАРТ —>
<div class=»map-placeholder»>Здесь будет карта проезда</div>
ПОДВАЛ (Footer)
По центру: © 2026 Академия-Продаж. Все права защищены.
По центру: меню в строчку — Политика конфиденциальности · Обработка персональных данных · Оферта (на мобильных — друг под другом, разделители ·).
Каждая ссылка → на соответствующую страницу, открывается в новой вкладке (target=»_blank»).
КНОПКА ПРОКРУТКИ ВВЕРХ: Сделай кнопку прокрутки лендинга вверх, кнопка должна появляться и отображаться после начала прокрутки лендинга в нижнем левом углу. Кнопка прокрутки должна показываться на ПК и на всех экранах мобильных устройств.
Круглая кнопка 56×56, фон #04CBC3, иконка стрелки вверх белая.
Позиция: position: fixed; bottom: 24px; left: 24px; (на ПК и мобильных).
Появляется (opacity 0→1 + translateY) после прокрутки 400px вниз.
На мобильных — позиция чуть выше, чтобы не мешать sticky-bottom-bar.
STICKY-BOTTOM-BAR (только на мобильных)
Фиксированная панель снизу экрана (мобильные ≤768px): фон rgba(10,14,26,.95) + blur, padding 12px 16px.
Внутри: кнопка во всю ширину «Получить инструкцию» (#FF5F3A, скругление 12px), клик → скролл к блоку «Получить».
Добавляет padding-bottom: 80px к <body> на мобильных, чтобы не перекрывать контент.
Пояснения по дизайну лендинга:
Лендинг и все элементы на нем (заголовки, подзаголовки, тексты, картинки, проигрыватели с видео и другие), должны быть адаптивны: корректно отображаться на всех экранах мобильных устройств и в разных браузерах, на планшетах и на ПК. Тексты на русском языке, лендинг для русскоязычной аудитории. Чтобы лендинг можно было прокручивать вверх и вниз пальцами рук на мобильных устройствах.
Сделай в двух блоках на лендинге фоновые изображения по теме (картинка затемненная темным фоном — дай инструкцию как менять цвет фона затемнения и степень затемнения) и 2 картинки по теме — предоставь промты для генерации всех картинок и инструкцию как готовые картинки добавить на лендинг. Там где нужно, используй иконки по теме. Заголовки и подзаголовки должны хорошо читаться.
Все картинки лендинга должны располагаться в одной папке архива с файлами лендинга.
Дизайн лендинга:
Лендинг нужен премиум-уровня с дизайном уровня Stripe/Linear/Vercel. В Hero за 3 секунды должно быть понятно: что за продукт, для кого, в чём УТП и какое действие совершить. H1 — 72-96px, bold, с выделением ключевых фраз другим цветом. Внедри психологические триггеры: дефицит, социальное доказательство, авторитет, гарантию. Используй конкретные цифры вместо общих фраз. Структура: Hero с двумя CTA и trust-блоком → логотипы клиентов → боли ЦА → решение с визуализацией → выгоды → демо продукта → шаги работы → кейсы с цифрами → отзывы с фото → сравнение с конкурентами → FAQ → финальный CTA с дедлайном. Дизайн-система: spacing кратно 8px, многослойные тени, colored shadows для CTA, mesh-градиенты в Hero, glassmorphism для карточек, единый стиль иконок. Анимации: stagger fade-in в Hero, scroll-triggered появления, hover-эффекты на кнопках, анимированные счётчики цифр. Mobile-first, sticky-CTA на мобильных, semantic HTML, WCAG AA контраст. Плавная анимация появления элементов и контента блоков при прокрутки лендинга. Карточки блоков компактные с хорошо читаемыми заголовками и текстами. Справа от иконок карточек — название каждой карточки, под названием поясняющий текст. Заголовки блоков с высоким контрастом, без градиента, чтобы они четко выделялись на фоне. Стили шрифтов заголовков: для логотипа — Russo One (обычный), для H1 в Hero — Roboto, для заголовков в других блоках — Roboto. Не используй эмоджи. Иконки во всех блоках лендинга при наведении курсора на блок — крутятся, а фон карточек в блоках при наведении курсора на каждую слегка подсвечивается и появляется подсветка обрамления блоков. Градиенты и подсветка на кнопках. На лендинге — узкие пробелы между блоками и внутри блоков лендинга сверху и снизу заголовков, текстов и элементов. Добавь анимацию, которая работает только при наведении на блок курсора.. Не используй таймеры с обратным отсчетом и гарантии. Все тексты должны хорошо читаться. Название продукта H3 и выдели цветом. Если есть что еще добавить в дизайн и анимацию — добавь. Дизайн лендинга очень важен, потому что, от дизайна и анимации лендинга зависит кол-во заказов и продаж, поэтому очень постарайся. На готовом лендинге заголовки, тексты, элементы блоков и анимация — должны корректно показываться на персональном компьютере и на экранах всех мобильных устройств.
Цветовая гамма лендинга:
- Черная премиум палитра с золотыми акцентами и яркими цветами иконок и блоков.
- Цвет текста заголовков блоков: #FFFFFF. Отдельные слова и фразы заголовков выдели строго этим цветом: #04eaf0 без градиента.
- Крупный текст на кнопках без градиента.
- Фон кнопок в спокойном состоянии: ec6f0e, цвет текста: #FFFFFF.
- Фон кнопок при наведении: #04eaf0, цвет шрифта названия кнопок: #FFFFFF без градиента.
- Названия верхнего меню и ссылок #FFFFFF, при наведении на них курсора: #04eaf0
- Логотип в этих цветах: #04eaf0 и #FFFFFF или придумай свои сочетания, подходящие для указанных оттенков.
- Фон кнопки: Оплатить и получить, в спокойном состоянии такой: #f87c08, цвет шрифта на кнопке такой: #FFFFFF.
- Фон кнопки: Оплатить и получить, при наведении на нее курсора строго такой: #ec6f0e, цвет шрифта на кнопке такой: #FFFFFF.
Пояснение: вместо маркированного списка выше, можете указать следующий текст (вместо квадратных скобок и текста в них напишите свои цвета): Сайт должен быть современным с эффектами анимации, серьёзным и красивым. Мои фирменные цвета: [графитовый чёрный, золотой, жемчужный белый].
Страницы подвала — оформление:
Создай три отдельные HTML-страницы (privacy.html, personal-data.html, oferta.html)
в едином дизайне с лендингом (та же шапка с логотипом и ссылкой «На главную»,
тот же подвал, дизайн, палитра, те же шрифты и градиенты).
⚠️ ВАЖНО: внутри каждой страницы блок для вставки текста должен быть
ОБРАМЛЁН ДВУМЯ ЯРКИМИ HTML-КОММЕНТАРИЯМИ-МЕТКАМИ со стрелками-эмодзи,
например:
⬇️⬇️⬇️ ВСТАВЬТЕ ТЕКСТ ПОЛИТИКИ КОНФИДЕНЦИАЛЬНОСТИ СЮДА ⬇️⬇️⬇️
Удалите всё ОТ этой строки ДО строки «⬆️ КОНЕЦ ТЕКСТА ⬆️»
и напишите свой текст с тегами <h1>, <h2>, <p>, <ul><li>.
… ЗДЕСЬ примерный шаблон-заглушка с h1, h2, p, ul …
⬆️⬆️⬆️ КОНЕЦ ТЕКСТА ⬆️⬆️⬆️
Внутри блока размести готовый шаблон-заглушку из 4–5 типовых разделов
(<h1> + несколько <h2> + <p>), чтобы пользователь видел пример структуры
и просто заменял текст внутри.
Стилизуй документные страницы так, чтобы заголовки h1/h2, абзацы <p>,
списки <ul>/<ol> и ссылки <a> имели аккуратный читаемый вид
на тёмном фоне (h1 — градиентом, h2 — белым, текст — приглушённым,
ссылки — циан/розовый).
После кода трёх страниц обязательно добавь отдельную инструкцию
для новичка из 4 шагов:
1) Открыть файл в редакторе (VS Code / Notepad++).
2) Найти блок между метками «⬇️ ВСТАВЬТЕ … СЮДА ⬇️» и «⬆️ КОНЕЦ ТЕКСТА ⬆️».
3) Удалить пример-заглушку и вставить свой текст с правильными HTML-тегами.
4) Сохранить файл (Ctrl+S) и проверить в браузере.«
Код каждого файла выдай в одном ответе. Обязательно указывай названия каждого файла лендинга. Если нужны другие файлы создай и сгенерируй код для каждого. Все тексты должны хорошо читаться.
Важное дополнение для ОСНОВНОГО промта
После того как нейросеть по одному из промтов (выше или ниже) — сгенерирует для вас ОСНОВНОЙ промт для генерации лендинга, в начале и в конце основного промта нужно добавить следующее дополнение, чтобы нейросеть использовала только ваши заголовки, подзаголовки и тексты в каждом блоке:
«Соблюдай ПРАВИЛО №1 (НЕРУШИМОЕ): Мои тексты — это исходник. Копируй их в HTML 1:1, символ в символ. НЕ переписывай, НЕ сокращай, НЕ улучшай, НЕ перефразируй, НЕ исправляй пунктуацию, НЕ меняй регистр, НЕ добавляй свои слова. Любое изменение моего текста = ошибка. Сгенерировать сам можно ТОЛЬКО то, что прямо помечено фразами «сгенерируй сам» или «придумай».»
Куда вставлять:
Лучше всего работает, если правило встречается дважды:
В самом начале промта (после первого абзаца ОСНОВНОГО промта, т.е. после роли) — чтобы задать контекст:
Ты — senior front-end разработчик…
ПРАВИЛО №1: все мои тексты копировать 1:1, без изменений.
В конце промта (перед «Поехали») — чтобы это было последнее, что нейросеть «прочитает» перед генерацией:
…ПОЕХАЛИ. Соблюдай правило: Мои тексты — это исходник ...
Вставь напоминание в самом конце готового ОСНОВНОГО ПРОМТА:
«Все анимации (marquee, hover-эффекты иконок, fade-up при скролле) должны быть полностью рабочими «из коробки». Marquee-ленту дублируй в HTML 2 раза. Для каждой карточки пропиши hover-анимацию иконки/emoji (scale + rotate + glow). Для появления при скролле используй IntersectionObserver + страховочный setTimeout 800мс + fallback на scroll-событие. Если JS отключён — контент должен быть виден. Перед выдачей мысленно прогони сценарии: загрузка, скролл, hover на десктопе и тач на мобиле».
ВТОРОЙ ВАРИАНТ для генерации Мега промта (с готовым текстом, который нужно указать для каждого блока лендинга) без описания дизайна. Улучшаем дизайн!
Для этого, отправь в нейросеть (Claude или ChatGPT) следующий промт (задание):
«Как самый опытный и креативный промт инженер, напиши мне профессиональный промт, по которому нейросеть сгенерирует мне лендинг с продающим и крутым дизайном премиум уровня, который у в веб-студиях стоит от 200000 рублей. Жду от тебя готовый промт для генерации лендинга.
Заголовки, подзаголовки и тексты для блоков лендинга я указал для каждого блока.
Вот данные для лендинга:
Лендинг продает инфопродукт: [вместо скобок и текста в них, здесь укажите названия вашего инфопродукта, товара или услуги]. В инструкции рассказываю [вместо скобок и текста в них, здесь напишите какую информацию предлагает ваш инфопродукт / товар или услуга, в чем помогает и какие проблемы клиентов решает].
В шапке слева должен быть логотип: [вместо скобок и текста в них, здесь укажите названия вашего лендинга для логотипа], справа должны располагаться названия блоков: [вместо скобок и текста в них, здесь укажите свои названия верхнего меню например: Что вы получите, Как это работает, Кому подойдет, Получить, Отзывы, Частые вопросы, Как нас найти].
В верхнем меню справа от логотипа, выведи названия блоков лендинга на ПК. При нажатии на пункты верхнего меню происходит прокрутка к нужному блоку лендинга. На мобильных экранах верхнее меню должно показываться «бургером», а при нажатии на «бургер», должны открываться названия верхнего меню лендинга.
Блоки лендинга:
Ниже названия блоков лендинга, слева от названия мой поясняющий текст для каждого блока. Под поясняющим текстом в каждом блоке: заголовки, подзаголовки и тексты для каждого блока. Напиши мои тексты как есть, ничего не меняй.
HERO (первый экран): За 3 секунды должно быть понятно: что за продукт, для кого, в чём УТП, что сделать.
Заголовок H1: Показываю как за 30 минут создать премиум лендинг — без дизайнера, программиста и навыков
Подзаголовок (lead-параграф под H1): Заберите пошаговую видео-инструкцию + специальные Мега Промты и получите готовый лендинг премиум класса на своем домене
Trust-блок под подзаголовком: Если вам нужен лендинг «как у всех» — в интернете есть информация об этом. А если вам нужен лендинг премиум-класса — делай по нашей инструкции и получай больше заказов и продаж!
Два CTA в ряд:
Главная кнопка: Получить инструкцию — клик ведёт к блоку «Получить»
Вторичная кнопка: Узнать подробнее» — клик ведёт к блоку «Что вы получите»
ПРИЗЫВ К ДЕЙСТВИЮ №1 (CTA-микротекст под кнопками): Забери, сделай лендинг сегодня и получай клиентов завтра!
БЛОК «Что вы получите»: Здесь 6 блоков в каждом блоке тексты в виде 1-2 предложений. Ниже подблок с Бонусами: в этом блоке текст в виде 1-2 предложений с перечислением трех бонусов. Ниже 1 завершающее предложение с текстом.
Заголовок H2: Видео-инструкцию: «Как сгенерировать лендинг с помощью нейросетей»
Подзаголовок: Показываю алгоритм простых действия уровня «смотри, повторяй — получи результат.
Сетка 6 карточек мини-заголовок, текст 1-2 предложения:
Карточка 1: Два черновых промта (на выбор) / Для генерации основного (профессионального) промта продающего лендинга.
Карточка 2: Специальный промт / Улучшает основной промт и генерирует лендинг с премиальным дизайном
Карточка 3: В видео-инструкции показываю / процесс генерации файлов лендинга нейросетью, их загрузку на хостинг и домен
Карточка 4: Показал как зарегистрировать / Домен и поддомен на готовом домене
Карточка 5: Показываю как редактировать / Информацию на лендинге (заголовки, тексты)
Карточка 6: Список нейросетей / Для генерации лендинга бесплатно и Бонусы!
Призыв к действию (CTA — call to action): Текст без градиента с высоким контрастом без кнопки снизу с выделением важных фраз золотистым цветом.
Заголовки H3 призывов к действию:
Даже если вы видите код первый раз в жизни — через 30 минут вы сделаете лендинг, за который дизайн-студии берут от 100 000 ₽. А первые заказы и продажи — получите уже на следующий день. Наши Бонусы вам в этом помогут!
БЛОК «Как это работает:
Заголовок H2: Как вы будете создавать лендинг
Вертикальный/горизонтальный таймлайн из 5 шагов (узкие блоки друг под другом):
Шаг 1: Отправляете в нейросеть один из двух промтов — чтобы она написала основной промт для генерации лендинга
Шаг 2: Отправляете второй специальный промт — нейросеть улучшит основной промт, по которому сгенерирует лендинг
Шаг 3: Собираете файлы лендинга. Просто копируете содержимое каждого файла и вставляете в свой файл
Шаг 4: Весь процесс длится 20-30 минут. Просто копируйте и добавляйте информацию сначала в чат нейросети, а затем — в несколько файлов
Шаг 5: Дальше регистрируется хостинг, затем домен/поддомен, на который загружаете архив с файлами лендинга
Завершающее предложение (центрировано): Все это — показываю в видео инструкции. Каждый шаг — с пояснениями — что открыть, куда вставить, что нажать и т.д. Все действия объясняю «понятным языком» — для людей, которые НЕ программисты, у которых НЕТ соответствующих знаний и опыта
Призыв к действию (CTA — call to action): Текст без градиента с высоким контрастом без кнопки ниже (важные 2-3 слова выделено цветом #04eaf0).
Заголовки H3 призывов к действию: Копируй промты, вставь в нейросеть → готовые файлы, загрузи на домен/поддомен и получи готовый лендинг с дизайном уровня топовых студий
БЛОК «Кому подойдет» (в этом блоке будет перечислено 8 представителей бизнеса, которым нужна наша инструкция)
Заголовок H2: Для кого наша инструкция
Подзаголовок: Для всех, кто продает физические и цифровые товары и услуги
Сетка 8 карточек — каждая карточка glassmorphism, с SVG-иконкой и названием представителя бизнеса и кратким текстом пояснением под названием. Hover — gradient border + лёгкий lift:
Карточка 1: Предпринимателям — которые хотят запустить новый продукт и не сливать 100К на студию.
Карточка 2: Экспертам и коучам — нужен сайт-визитка / продающий лендинг под услугу.
Карточка 3: Инфобизнесу — для запуска инфопродуктов, марафонов, наставничества.
Карточка 4: Селлерам и магазинам — для рекламы товаров и работы с трафиком.
Карточка 5: Фрилансерам — кто хочет добавить услугу «лендинг под ключ за 1 день» и зарабатывать на этом.
Карточка 6: Продавцам услуг — мастера, репетиторы, психологи, юристы и т.д.
Карточка 7: Новичкам — кто давно хотел зайти в IT-сферу, но боялся сложности.
Карточка 8: Маркетологам и таргетологам — для тестов офферов и быстрых посадочных страниц.
Призыв к действию (CTA — call to action): Текст с новой строки по центру, без градиента с высоким контрастом без кнопки снизу.
Заголовки H3 призывов к действию:
Получите готовый лендинг премиум класса на вашем домене за 30 минут — БЕЗ навыков и БЕЗ опыта
БЛОК «Получить»: главный конверсионный блок
Заголовок H2 (с акцентом на названии инструкции): Получить инструкцию и все Бонусы!
Подзаголовок H3: «Как сгенерировать лендинг с помощью нейросетей»
Список преимуществ в строчку:
Лендинг через 30 минут.
Без знаний и опыта.
Бонусы!
Цена / Старая цена (опционально, если используете):
Обычная цена: 3999 ₽.
Цена со скидкой: 1999 ₽.
Кнопка: «Получить инструкцию»
Ссылка для кнопки: https://a56300s3.autoweboffice.ru/?r=ordering/cart/as1&id=117&clean=true&lg=ru
ПРИЗЫВ К ДЕЙСТВИЮ (заметный микротекст желтого цвета под кнопкой, до чекбокса): Цена действует ограниченное время. Дальше — 3 999 ₽ без бонусов.
Чекбокс под кнопкой (по умолчанию checked) с текстом:
Под кнопкой расположи чекбокс и текст: «Нажимая на кнопку, я соглашаюсь с условиями публичной оферты, с политикой конфиденциальности и обработки персональных данных» — в этом тексте там где нужно укажи ссылки (каждая ссылка должна открываться в новой вкладке браузера) укажи ссылки на страницы нижнего меню: Политика конфиденциальности, Обработка персональных данных, Оферта. По умолчанию в чекбоксе стоит галочка, если галочку пользователь уберет кнопка оплаты не работает и при нажатии на нее появляется текст: Необходимо поставить галочку в чекбокс согласившись с условиями оплаты.
Подблок «Подарки при покупке» — 3 блока — по горизонтали, в каждом название Подарка, ниже зачеркнутая цена, справа от цены — надпись: БЕСПЛАТНО:
Заголовок: Бонусы в Подарок!
Названия Подарков: Инструкция: «Бесплатные способы привлечения клиентов на ваш лендинг/в бизнес» — 4500 ₽, Инструкция: «Как создать сайт на WordPress за 30 минут» — 2500 ₽, Промт для генерации продающего текста для лендинга — 500 ₽.
Завершающее предложение (центрировано, средний выделенный жирным шрифт — важные фразы выдели цветом: #ec6f0e без градиента):
Суммарная ценность бонусов: 7 500 ₽ — для вас в Подарок при покупке!
БЛОК «Отзывы»: Сгенерируй сам 9 реалистичных отзывов на русском языке (мужчины и женщины 24-35 лет) по теме инфопродукта: «Как сгенерировать лендинг с помощью нейросетей». По умолчанию должно показываться 3 блока с отзывами, остальные после прокрутки влево или вправо. Текст каждого отзыва состоит из: небольшого размера фото человека оставившего отзыв (сгенерируй фото людей и предоставь инструкцию как их добавить на лендинг), справа от каждого фото сгенерируй и напиши текст положительного и реалистичного отзыва до 500 символов, ниже напиши имя оставившего отзыв, под текстом отзыва напиши Имя и Фамилию, которые должны быть разными. Все тексты отзывов, Имя и Фамилию, сгенерируй сам по теме продукта. Тексты отзывов на лендинге должны располагаться по горизонтали, пролистываться влево и вправо и красиво оформлены. Картинки людей должны соответствовать тексту отзывов по полу, предусмотри это.
Заголовок H2: Реальные результаты покупателей
9 карточек-отзывов в горизонтальном слайдере (по умолчанию показываются 3 отзыва на ПК, 2 на планшете, 1 на мобильном). Прокрутка влево/вправо: стрелки + drag/swipe + клавиатура. Использовать scroll-snap-type: x mandatory + кастомные стрелки.
Каждая карточка (glassmorphism, скругление 20px, hover — tilt 3D):
Слева: круглое фото (80×80)
Справа от фото: 5 звёзд (SVG, золотые #FFD700)
Под звёздами: текст отзыва до 500 символов
Под текстом: Имя Фамилия
БЛОК «Частые вопросы»: при нажатии на текст вопроса ниже, под каждым вопросом должны открываться ответы на каждый вопрос, а при повторном нажатии на вопрос тексты ответов должны закрываться. Всего будет 7 вопросов и ответов для каждого вопроса.
Заголовок H2: Частые вопросы
Аккордеон из 7 вопросов (нативный <details><summary> + JS для плавной анимации высоты). По умолчанию все закрыты. При клике на вопрос — открывается ответ (max-height transition + fade-in), при повторном клике — закрывается. Иконка + поворачивается в × (rotate 45°). Только один может быть открыт одновременно (опционально — на твой выбор, лучше разрешить несколько открытых).
Вопрос 1: Почему вам нужна именно наша инструкция? / Ответ 1: «Мы продаем только необходимую информацию по теме». Никогда не понимал продавцов, инфопродукты которых состоят из нескольких десятков видео-инструкций, и они выдают такое огромное кол-во видео за преимущество. На деле, более 90% информации у таких продавцов «вода» в виде ненужной болтовни, а те оставшиеся 10% ценной инфы, часто не содержат самую необходимую информацию.
«Включено видео установки на хостинг». 90% обучений заканчиваются на словах «ну а дальше залейте на хостинг» или другими словами, но в таком же ключе. И всё — человек один на один с FTP, DNS, SSL и непонятными терминами. Я показываю эту часть отдельным видео-блоком, максимально просто, понятно и по шагам, в котором показал регистрацию хостинга, домена, поддомена и установку архива лендинга на ваш домен и поддомен (сами выберите куда загрузить свой).
«От идеи до сайта в интернете — за ≈ 30± минут». Не «изучите за месяц», не «пройдите курс из 40 уроков». С нашей инструкцией так: сел за ПК — через 30± минут у вас готовый продающий лендинг с премиальным дизайном, который работает на вашем домене/поддомене.
«Промты, которые реально работают». Мы длительное время тестировали промты. Переписывали, вносили изменения, правили, проверяли конверсии на готовых вариантах, сравнивали. У нас — выверенные конструкции промтов и важных дополнений, которые дают результат.
«Видео + текст одновременно». Большинство инфопродуктов — это либо «голая» PDF-ка, либо видео без пояснений. У нас и то, и другое, без воды и с наглядными пояснениями. У нас не нужно учиться и тратить время — у нас копируй промт, добавь название и описание своего продукта или услуги, запусти генерацию и код файлов лендинга готов, дальше — быстрая загрузка на хостинг и домен, клиенты и продажи/заказы.
Вопрос 2: Нейросети я буду использовать платные? Или бесплатные? / Ответ 2: В видео я показываю как создаю лендинг с помощью нейросети Claud, которой пользуюсь на сервисе, в котором доступно множество нейросетей, в том числе и для генерации картинок и видео. Стоимость использования сервиса с множеством необходимых нейросетей составляет 700-800 руб. в месяц. Этого вполне достаточно чтобы сгенерировать несколько десятков готовых лендингов для себя и для клиентов. Но предложу и бесплатный вариант нейросетей.
Вопрос 3: Я вообще не разбираюсь в технике. Справлюсь? / Ответ 3: Да. Инструкция написана для людей, которые ни разу не видели код. Если умеете копировать и вставлять текст — справитесь.
Вопрос 4: Лендинг будет МОЙ или привязан к какой-то платформе? / Ответ 4: Полностью ваш. Файлы лежат на вашем хостинге и домене. Никаких подписок, никакой привязки.
Вопрос 5: А можно ли использовать для коммерческих целей — продавать клиентам? / Ответ 5: Да, можно. Делайте сколько хотите лендингов и продавайте за любую цену. Многие покупатели многократно окупают инструкцию с первого клиента.
Вопрос 6: Как я получу инструкцию? / Ответ 6: Сразу после оплаты — доступ к статье с текстовой информацией со скриншотами и видео + все промты, нейросети и Бонус.
Вопрос 7: Можно ли задавать вопросы? / Ответ 7: Да, в течение 30 дней после покупки можете писать нам на e-mail или в Telegram по техническим вопросам. После оплаты данные предоставлю, а Email в шапке сайта.
Добавь Schema.org FAQ structured data в <head> (JSON-LD).
БЛОК «Как нас найти»:
Заголовок H2: Карта проезда в офис
Подзаголовок: Показываю место на карте проезда к нам
Слева (на ПК): контактная карточка glassmorphism с иконками — адрес, телефон, email, часы работы:
Адрес: г.Москва
Телефон: +7 930 4568460
Email: vs-bumerang@mail.ru
Часы работы: 09:00 — 17:00
Справа: контейнер для карты с скруглением 20px, бордером rgba(255,255,255,.08), высотой 450px:
html
<!— 🗺️ ВСТАВЬТЕ СЮДА ИНТЕРАКТИВНЫЙ КОД КАРТЫ ИЗ ЯНДЕКС-КАРТ —>
<div class=»map-placeholder»>Здесь будет карта проезда</div>
ПОДВАЛ (Footer)
По центру: © 2026 Академия-Продаж. Все права защищены.
По центру: меню в строчку — Политика конфиденциальности · Обработка персональных данных · Оферта (на мобильных — друг под другом, разделители ·).
Каждая ссылка → на соответствующую страницу, открывается в новой вкладке (target=»_blank»).
КНОПКА ПРОКРУТКИ ВВЕРХ: Сделай кнопку прокрутки лендинга вверх, кнопка должна появляться и отображаться после начала прокрутки лендинга в нижнем левом углу. Кнопка прокрутки должна показываться на ПК и на всех экранах мобильных устройств.
Круглая кнопка 56×56, фон #04CBC3, иконка стрелки вверх белая.
Позиция: position: fixed; bottom: 24px; left: 24px; (на ПК и мобильных).
Появляется (opacity 0→1 + translateY) после прокрутки 400px вниз.
На мобильных — позиция чуть выше, чтобы не мешать sticky-bottom-bar.
STICKY-BOTTOM-BAR (только на мобильных)
Фиксированная панель снизу экрана (мобильные ≤768px): фон rgba(10,14,26,.95) + blur, padding 12px 16px.
Внутри: кнопка во всю ширину «Получить инструкцию» (#FF5F3A, скругление 12px), клик → скролл к блоку «Получить».
Добавляет padding-bottom: 80px к <body> на мобильных, чтобы не перекрывать контент.
Пояснения по дизайну лендинга:
Лендинг и все элементы на нем (заголовки, подзаголовки, тексты, картинки, проигрыватели с видео и другие), должны быть адаптивны: корректно отображаться на всех экранах мобильных устройств и в разных браузерах, на планшетах и на ПК. Тексты на русском языке, лендинг для русскоязычной аудитории. Чтобы лендинг можно было прокручивать вверх и вниз пальцами рук на мобильных устройствах.
Сделай в двух блоках на лендинге фоновые изображения по теме (картинка затемненная темным фоном — дай инструкцию как менять цвет фона затемнения и степень затемнения) и 2 картинки по теме — предоставь промты для генерации всех картинок и инструкцию как готовые картинки добавить на лендинг. Там где нужно, используй иконки по теме. Заголовки и подзаголовки должны хорошо читаться.
Все картинки лендинга должны располагаться в одной папке архива с файлами лендинга.
Цветовая гамма лендинга:
- Черная премиум палитра с золотыми акцентами и яркими цветами иконок и блоков.
Страницы подвала — оформление:
Создай три отдельные HTML-страницы (privacy.html, personal-data.html, oferta.html)
в едином дизайне с лендингом (та же шапка с логотипом и ссылкой «На главную»,
тот же подвал, дизайн, палитра, те же шрифты и градиенты).
⚠️ ВАЖНО: внутри каждой страницы блок для вставки текста должен быть
ОБРАМЛЁН ДВУМЯ ЯРКИМИ HTML-КОММЕНТАРИЯМИ-МЕТКАМИ со стрелками-эмодзи,
например:
⬇️⬇️⬇️ ВСТАВЬТЕ ТЕКСТ ПОЛИТИКИ КОНФИДЕНЦИАЛЬНОСТИ СЮДА ⬇️⬇️⬇️
Удалите всё ОТ этой строки ДО строки «⬆️ КОНЕЦ ТЕКСТА ⬆️»
и напишите свой текст с тегами <h1>, <h2>, <p>, <ul><li>.
… ЗДЕСЬ примерный шаблон-заглушка с h1, h2, p, ul …
⬆️⬆️⬆️ КОНЕЦ ТЕКСТА ⬆️⬆️⬆️
Внутри блока размести готовый шаблон-заглушку из 4–5 типовых разделов
(<h1> + несколько <h2> + <p>), чтобы пользователь видел пример структуры
и просто заменял текст внутри.
Стилизуй документные страницы так, чтобы заголовки h1/h2, абзацы <p>,
списки <ul>/<ol> и ссылки <a> имели аккуратный читаемый вид
на тёмном фоне (h1 — градиентом, h2 — белым, текст — приглушённым,
ссылки — циан/розовый).
После кода трёх страниц обязательно добавь отдельную инструкцию
для новичка из 4 шагов:
1) Открыть файл в редакторе (VS Code / Notepad++).
2) Найти блок между метками «⬇️ ВСТАВЬТЕ … СЮДА ⬇️» и «⬆️ КОНЕЦ ТЕКСТА ⬆️».
3) Удалить пример-заглушку и вставить свой текст с правильными HTML-тегами.
4) Сохранить файл (Ctrl+S) и проверить в браузере.«
Код каждого файла выдай в одном ответе. Обязательно указывай названия каждого файла лендинга. Если нужны другие файлы создай и сгенерируй код для каждого. Все тексты должны хорошо читаться.
Важное дополнение для ОСНОВНОГО промта
После того как нейросеть по одному из промтов (выше или ниже) — сгенерирует для вас ОСНОВНОЙ промт для генерации лендинга, в начале и в конце основного промта нужно добавить следующее дополнение, чтобы нейросеть использовала только ваши заголовки, подзаголовки и тексты в каждом блоке:
«Соблюдай ПРАВИЛО №1 (НЕРУШИМОЕ): Мои тексты — это исходник. Копируй их в HTML 1:1, символ в символ. НЕ переписывай, НЕ сокращай, НЕ улучшай, НЕ перефразируй, НЕ исправляй пунктуацию, НЕ меняй регистр, НЕ добавляй свои слова. Любое изменение моего текста = ошибка. Сгенерировать сам можно ТОЛЬКО то, что прямо помечено фразами «сгенерируй сам» или «придумай».»
Куда вставлять:
Лучше всего работает, если правило встречается дважды:
В самом начале промта (после первого абзаца ОСНОВНОГО промта, т.е. после роли) — чтобы задать контекст:
Ты — senior front-end разработчик…
ПРАВИЛО №1: все мои тексты копировать 1:1, без изменений.
В конце промта (перед «Поехали») — чтобы это было последнее, что нейросеть «прочитает» перед генерацией:
…ПОЕХАЛИ. Соблюдай правило: Мои тексты — это исходник ...
Вставь напоминание в самом конце готового ОСНОВНОГО ПРОМТА:
«Все анимации (marquee, hover-эффекты иконок, fade-up при скролле) должны быть полностью рабочими «из коробки». Marquee-ленту дублируй в HTML 2 раза. Для каждой карточки пропиши hover-анимацию иконки/emoji (scale + rotate + glow). Для появления при скролле используй IntersectionObserver + страховочный setTimeout 800мс + fallback на scroll-событие. Если JS отключён — контент должен быть виден. Перед выдачей мысленно прогони сценарии: загрузка, скролл, hover на десктопе и тач на мобиле».
ТРЕТИЙ ВАРИАНТ для генерации Мега промта (с готовым текстом, который нужно указать для каждого блока лендинга) с большим кол-вом эффектов
Для этого, отправь в нейросеть (Claude или ChatGPT) следующий промт (задание):
«Как самый опытный и креативный промт инженер напиши мне профессиональный промт, по которому нейросеть сгенерирует мне лендинг с продающим и крутым дизайном премиум уровня, который у в веб-студиях стоит от 200000 рублей. Жду от тебя готовый промт для генерации лендинга.
Заголовки, подзаголовки и тексты для блоков лендинга я указал для каждого блока.
Вот данные для лендинга:
Лендинг продает инфопродукт: [вместо скобок и текста в них, здесь укажите названия вашего инфопродукта, товара или услуги]. В инструкции рассказываю [вместо скобок и текста в них, здесь напишите какую информацию предлагает ваш инфопродукт / товар или услуга, в чем помогает и какие проблемы клиентов решает].
В шапке слева должен быть логотип: [вместо скобок и текста в них, здесь укажите названия вашего лендинга для логотипа], справа должны располагаться названия блоков: [вместо скобок и текста в них, здесь укажите свои названия верхнего меню например: Что вы получите, Как это работает, Кому подойдет, Получить, Отзывы, Частые вопросы, Как нас найти].
В верхнем меню справа от логотипа, выведи названия блоков лендинга на ПК. При нажатии на пункты верхнего меню происходит прокрутка к нужному блоку лендинга. На мобильных экранах верхнее меню должно показываться «бургером», а при нажатии на «бургер», должны открываться названия верхнего меню лендинга.
Блоки лендинга:
Ниже названия блоков лендинга, слева от названия мой поясняющий текст для каждого блока. Под поясняющим текстом в каждом блоке: заголовки, подзаголовки и тексты для каждого блока. Напиши мои тексты как есть, ничего не меняй.
HERO (первый экран): За 3 секунды должно быть понятно: что за продукт, для кого, в чём УТП, что сделать.
Заголовок H1: Показываю как за 30 минут создать премиум лендинг — без дизайнера, программиста и навыков
Подзаголовок (lead-параграф под H1): Заберите пошаговую видео-инструкцию + специальные Мега Промты и получите готовый лендинг премиум класса на своем домене
Trust-блок под подзаголовком: Если вам нужен лендинг «как у всех» — в интернете есть информация об этом. А если вам нужен лендинг премиум-класса — делай по нашей инструкции и получай больше заказов и продаж!
Два CTA в ряд:
Главная кнопка: Получить инструкцию — клик ведёт к блоку «Получить»
Вторичная кнопка: Узнать подробнее» — клик ведёт к блоку «Что вы получите»
ПРИЗЫВ К ДЕЙСТВИЮ №1 (CTA-микротекст под кнопками): Забери, сделай лендинг сегодня и получай клиентов завтра!
БЛОК «Что вы получите»: Здесь 6 блоков в каждом блоке тексты в виде 1-2 предложений. Ниже подблок с Бонусами: в этом блоке текст в виде 1-2 предложений с перечислением трех бонусов. Ниже 1 завершающее предложение с текстом.
Заголовок H2: Видео-инструкцию: «Как сгенерировать лендинг с помощью нейросетей»
Подзаголовок: Показываю алгоритм простых действия уровня «смотри, повторяй — получи результат.
Сетка 6 карточек мини-заголовок, текст 1-2 предложения:
Карточка 1: Два черновых промта (на выбор) / Для генерации основного (профессионального) промта продающего лендинга.
Карточка 2: Специальный промт / Улучшает основной промт и генерирует лендинг с премиальным дизайном
Карточка 3: В видео-инструкции показываю / процесс генерации файлов лендинга нейросетью, их загрузку на хостинг и домен
Карточка 4: Показал как зарегистрировать / Домен и поддомен на готовом домене
Карточка 5: Показываю как редактировать / Информацию на лендинге (заголовки, тексты)
Карточка 6: Список нейросетей / Для генерации лендинга бесплатно и Бонусы!
Призыв к действию (CTA — call to action): Текст без градиента с высоким контрастом без кнопки снизу с выделением важных фраз золотистым цветом.
Заголовки H3 призывов к действию:
Даже если вы видите код первый раз в жизни — через 30 минут вы сделаете лендинг, за который дизайн-студии берут от 100 000 ₽. А первые заказы и продажи — получите уже на следующий день. Наши Бонусы вам в этом помогут!
БЛОК «Как это работает»:
Заголовок H2: Как это работает
Подзаголовок: Как вы будете создавать лендинг
Вертикальный/горизонтальный таймлайн из 5 шагов:
Шаг 1: Отправляете в нейросеть один из двух промтов — чтобы она написала основной промт для генерации лендинга
Шаг 2: Отправляете второй специальный промт — нейросеть улучшит основной промт, по которому сгенерирует лендинг
Шаг 3: Собираете файлы лендинга. Просто копируете содержимое каждого файла и вставляете в свой файл
Шаг 4: Весь процесс длится 20-30 минут. Просто копируйте и добавляйте информацию сначала в чат нейросети, а затем — в несколько файлов
Шаг 5: Дальше регистрируется хостинг, затем домен/поддомен, на который загружаете архив с файлами лендинга
Завершающее предложение (центрировано): Все это — показываю в видео инструкции. Каждый шаг — с пояснениями — что открыть, куда вставить, что нажать и т.д. Все действия объясняю «понятным языком» — для людей, которые НЕ программисты, у которых НЕТ соответствующих знаний и опыта
Призыв к действию (CTA — call to action): Текст без градиента с высоким контрастом без кнопки ниже.
Заголовки H3 призывов к действию: Копируй промты, вставь в нейросеть — готовые файлы, загрузи на домен/поддомен и получи готовый лендинг с дизайном уровня топовых студий
БЛОК «Кому подойдет» (в этом блоке будет перечислено 8 представителей бизнеса, которым нужна наша инструкция)
Заголовок H2: Для кого наша инструкция
Подзаголовок: Для всех, кто продает физические и цифровые товары и услуги
Сетка 8 карточек — каждая карточка glassmorphism, с SVG-иконкой и названием представителя бизнеса и кратким текстом пояснением под названием. Hover — gradient border + лёгкий lift:
Карточка 1: Предпринимателям — которые хотят запустить новый продукт и не сливать 100К на студию.
Карточка 2: Экспертам и коучам — нужен сайт-визитка / продающий лендинг под услугу.
Карточка 3: Инфобизнесу — для запуска инфопродуктов, марафонов, наставничества.
Карточка 4: Селлерам и магазинам — для рекламы товаров и работы с трафиком.
Карточка 5: Фрилансерам — кто хочет добавить услугу «лендинг под ключ за 1 день» и зарабатывать на этом.
Карточка 6: Продавцам услуг — мастера, репетиторы, психологи, юристы и т.д.
Карточка 7: Новичкам — кто давно хотел зайти в IT-сферу, но боялся сложности.
Карточка 8: Маркетологам и таргетологам — для тестов офферов и быстрых посадочных страниц.
Призыв к действию (CTA — call to action): Текст с новой строки по центру, без градиента с высоким контрастом без кнопки снизу.
Заголовки H3 призывов к действию:
Получите готовый лендинг премиум класса на вашем домене за 30 минут — БЕЗ навыков и БЕЗ опыта
БЛОК «Получить»: главный конверсионный блок
Заголовок H2 (с акцентом на названии инструкции): Получить инструкцию и все Бонусы!
Подзаголовок H3: «Как сгенерировать лендинг с помощью нейросетей»
Список преимуществ в строчку:
Лендинг через 30 минут.
Без знаний и опыта.
Бонусы!
Цена / Старая цена (опционально, если используете):
Обычная цена: 3999 ₽.
Цена со скидкой: 1999 ₽.
Кнопка: «Получить инструкцию»
Ссылка для кнопки: https://a56300s3.autoweboffice.ru/?r=ordering/cart/as1&id=117&clean=true&lg=ru
ПРИЗЫВ К ДЕЙСТВИЮ (заметный микротекст желтого цвета под кнопкой, до чекбокса): Цена действует ограниченное время. Дальше — 3 999 ₽ без бонусов.
Чекбокс под кнопкой (по умолчанию checked) с текстом:
Под кнопкой расположи чекбокс и текст: «Нажимая на кнопку, я соглашаюсь с условиями публичной оферты, с политикой конфиденциальности и обработки персональных данных» — в этом тексте там где нужно укажи ссылки (каждая ссылка должна открываться в новой вкладке браузера) укажи ссылки на страницы нижнего меню: Политика конфиденциальности, Обработка персональных данных, Оферта. По умолчанию в чекбоксе стоит галочка, если галочку пользователь уберет кнопка оплаты не работает и при нажатии на нее появляется текст: Необходимо поставить галочку в чекбокс согласившись с условиями оплаты.
Подблок «Подарки при покупке» — 3 блока — по горизонтали, в каждом название Подарка, ниже зачеркнутая цена, справа от цены — надпись: БЕСПЛАТНО:
Заголовок: Бонусы в Подарок!
Названия Подарков: Инструкция: «Бесплатные способы привлечения клиентов на ваш лендинг/в бизнес» — 4500 ₽, Инструкция: «Как создать сайт на WordPress за 30 минут» — 2500 ₽, Промт для генерации продающего текста для лендинга — 500 ₽.
Завершающее предложение (центрировано, средний выделенный жирным шрифт — важные фразы выдели цветом: #04CBC3 без градиента):
Суммарная ценность бонусов: 7 500 ₽ — для вас в Подарок при покупке!
БЛОК «Отзывы»: Сгенерируй сам 9 реалистичных отзывов на русском языке (мужчины и женщины 24-35 лет) по теме инфопродукта: «Как сгенерировать лендинг с помощью нейросетей». По умолчанию должно показываться 3 блока с отзывами, остальные после прокрутки влево или вправо. Текст каждого отзыва состоит из: небольшого размера фото человека оставившего отзыв (сгенерируй фото людей и предоставь инструкцию как их добавить на лендинг), справа от каждого фото сгенерируй и напиши текст положительного и реалистичного отзыва до 500 символов, ниже напиши имя оставившего отзыв, под текстом отзыва напиши Имя и Фамилию, которые должны быть разными. Все тексты отзывов, Имя и Фамилию, сгенерируй сам по теме продукта. Тексты отзывов на лендинге должны располагаться по горизонтали, пролистываться влево и вправо и красиво оформлены. Картинки людей должны соответствовать тексту отзывов по полу, предусмотри это.
Заголовок H2: Реальные результаты покупателей
9 карточек-отзывов в горизонтальном слайдере (по умолчанию показываются 3 отзыва на ПК, 2 на планшете, 1 на мобильном). Прокрутка влево/вправо: стрелки + drag/swipe + клавиатура. Использовать scroll-snap-type: x mandatory + кастомные стрелки.
Каждая карточка (glassmorphism, скругление 20px, hover — tilt 3D):
Слева: круглое фото (80×80)
Справа от фото: 5 звёзд (SVG, золотые #FFD700)
Под звёздами: текст отзыва до 500 символов
Под текстом: Имя Фамилия
БЛОК «Частые вопросы»: при нажатии на текст вопроса ниже, под каждым вопросом должны открываться ответы на каждый вопрос, а при повторном нажатии на вопрос тексты ответов должны закрываться. Всего будет 7 вопросов и ответов для каждого вопроса.
Заголовок H2: Частые вопросы
Аккордеон из 7 вопросов (нативный <details><summary> + JS для плавной анимации высоты). По умолчанию все закрыты. При клике на вопрос — открывается ответ (max-height transition + fade-in), при повторном клике — закрывается. Иконка + поворачивается в × (rotate 45°). Только один может быть открыт одновременно (опционально — на твой выбор, лучше разрешить несколько открытых).
Вопрос 1: Почему вам нужна именно наша инструкция? / Ответ 1: «Мы продаем только необходимую информацию по теме». Никогда не понимал продавцов, инфопродукты которых состоят из нескольких десятков видео-инструкций, и они выдают такое огромное кол-во видео за преимущество. На деле, более 90% информации у таких продавцов «вода» в виде ненужной болтовни, а те оставшиеся 10% ценной инфы, часто не содержат самую необходимую информацию.
«Включено видео установки на хостинг». 90% обучений заканчиваются на словах «ну а дальше залейте на хостинг» или другими словами, но в таком же ключе. И всё — человек один на один с FTP, DNS, SSL и непонятными терминами. Я показываю эту часть отдельным видео-блоком, максимально просто, понятно и по шагам, в котором показал регистрацию хостинга, домена, поддомена и установку архива лендинга на ваш домен и поддомен (сами выберите куда загрузить свой).
«От идеи до сайта в интернете — за ≈ 30± минут». Не «изучите за месяц», не «пройдите курс из 40 уроков». С нашей инструкцией так: сел за ПК — через 30± минут у вас готовый продающий лендинг с премиальным дизайном, который работает на вашем домене/поддомене.
«Промты, которые реально работают». Мы длительное время тестировали промты. Переписывали, вносили изменения, правили, проверяли конверсии на готовых вариантах, сравнивали. У нас — выверенные конструкции промтов и важных дополнений, которые дают результат.
«Видео + текст одновременно». Большинство инфопродуктов — это либо «голая» PDF-ка, либо видео без пояснений. У нас и то, и другое, без воды и с наглядными пояснениями. У нас не нужно учиться и тратить время — у нас копируй промт, добавь название и описание своего продукта или услуги, запусти генерацию и код файлов лендинга готов, дальше — быстрая загрузка на хостинг и домен, клиенты и продажи/заказы.
Вопрос 2: Нейросети я буду использовать платные? Или бесплатные? / Ответ 2: В видео я показываю как создаю лендинг с помощью нейросети Claud, которой пользуюсь на сервисе, в котором доступно множество нейросетей, в том числе и для генерации картинок и видео. Стоимость использования сервиса с множеством необходимых нейросетей составляет 700-800 руб. в месяц. Этого вполне достаточно чтобы сгенерировать несколько десятков готовых лендингов для себя и для клиентов. Но предложу и бесплатный вариант нейросетей.
Вопрос 3: Я вообще не разбираюсь в технике. Справлюсь? / Ответ 3: Да. Инструкция написана для людей, которые ни разу не видели код. Если умеете копировать и вставлять текст — справитесь.
Вопрос 4: Лендинг будет МОЙ или привязан к какой-то платформе? / Ответ 4: Полностью ваш. Файлы лежат на вашем хостинге и домене. Никаких подписок, никакой привязки.
Вопрос 5: А можно ли использовать для коммерческих целей — продавать клиентам? / Ответ 5: Да, можно. Делайте сколько хотите лендингов и продавайте за любую цену. Многие покупатели многократно окупают инструкцию с первого клиента.
Вопрос 6: Как я получу инструкцию? / Ответ 6: Сразу после оплаты — доступ к статье с текстовой информацией со скриншотами и видео + все промты, нейросети и Бонус.
Вопрос 7: Можно ли задавать вопросы? / Ответ 7: Да, в течение 30 дней после покупки можете писать нам на e-mail или в Telegram по техническим вопросам. После оплаты данные предоставлю, а Email в шапке сайта.
Добавь Schema.org FAQ structured data в <head> (JSON-LD).
БЛОК «Как нас найти»:
Заголовок H2: Карта проезда в офис
Подзаголовок: Показываю место на карте проезда к нам
Слева (на ПК): контактная карточка glassmorphism с иконками — адрес, телефон, email, часы работы:
Адрес: г.Москва
Телефон: +7 930 4568460
Email: vs-bumerang@mail.ru
Часы работы: 09:00 — 17:00
Справа: контейнер для карты с скруглением 20px, бордером rgba(255,255,255,.08), высотой 450px:
html
<!— 🗺️ ВСТАВЬТЕ СЮДА ИНТЕРАКТИВНЫЙ КОД КАРТЫ ИЗ ЯНДЕКС-КАРТ —>
<div class=»map-placeholder»>Здесь будет карта проезда</div>
ПОДВАЛ (Footer)
По центру: © 2026 Академия-Продаж. Все права защищены.
По центру: меню в строчку — Политика конфиденциальности · Обработка персональных данных · Оферта (на мобильных — друг под другом, разделители ·).
Каждая ссылка → на соответствующую страницу, открывается в новой вкладке (target=»_blank»).
КНОПКА ПРОКРУТКИ ВВЕРХ: Сделай кнопку прокрутки лендинга вверх, кнопка должна появляться и отображаться после начала прокрутки лендинга в нижнем левом углу. Кнопка прокрутки должна показываться на ПК и на всех экранах мобильных устройств.
Круглая кнопка 56×56, фон #04CBC3, иконка стрелки вверх белая.
Позиция: position: fixed; bottom: 24px; left: 24px; (на ПК и мобильных).
Появляется (opacity 0→1 + translateY) после прокрутки 400px вниз.
На мобильных — позиция чуть выше, чтобы не мешать sticky-bottom-bar.
STICKY-BOTTOM-BAR (только на мобильных)
Фиксированная панель снизу экрана (мобильные ≤768px): фон rgba(10,14,26,.95) + blur, padding 12px 16px.
Внутри: кнопка во всю ширину «Получить инструкцию» (#FF5F3A, скругление 12px), клик → скролл к блоку «Получить».
Добавляет padding-bottom: 80px к <body> на мобильных, чтобы не перекрывать контент.
Пояснения по дизайну лендинга:
Лендинг и все элементы на нем (заголовки, подзаголовки, тексты, картинки, проигрыватели с видео и другие), должны быть адаптивны: корректно отображаться на всех экранах мобильных устройств и в разных браузерах, на планшетах и на ПК. Тексты на русском языке, лендинг для русскоязычной аудитории. Чтобы лендинг можно было прокручивать вверх и вниз пальцами рук на мобильных устройствах.
Сделай в двух блоках на лендинге фоновые изображения по теме (картинка затемненная темным фоном — дай инструкцию как менять цвет фона затемнения и степень затемнения) и 2 картинки по теме — предоставь промты для генерации всех картинок и инструкцию как готовые картинки добавить на лендинг. Там где нужно, используй иконки по теме. Заголовки и подзаголовки должны хорошо читаться.
Все картинки лендинга должны располагаться в одной папке архива с файлами лендинга.
Дизайн лендинга:
Лендинг нужен премиум-уровня с дизайном уровня Stripe/Linear/Vercel. В Hero за 3 секунды должно быть понятно: что за продукт, для кого, в чём УТП и какое действие совершить. H1 — 72-96px, bold, с выделением ключевых фраз другим цветом. Внедри психологические триггеры: дефицит, социальное доказательство, авторитет, гарантию. Используй конкретные цифры вместо общих фраз. Структура: Hero с двумя CTA и trust-блоком → логотипы клиентов → боли ЦА → решение с визуализацией → выгоды → демо продукта → шаги работы → кейсы с цифрами → отзывы с фото → сравнение с конкурентами → FAQ → финальный CTA с дедлайном. Дизайн-система: spacing кратно 8px, многослойные тени, colored shadows для CTA, mesh-градиенты в Hero, glassmorphism для карточек, единый стиль иконок. Анимации: stagger fade-in в Hero, scroll-triggered появления, hover-эффекты на кнопках, анимированные счётчики цифр. Mobile-first, sticky-CTA на мобильных, semantic HTML, WCAG AA контраст. Плавная анимация появления элементов и контента блоков при прокрутки лендинга. Карточки блоков компактные с хорошо читаемыми заголовками и текстами. Заголовки блоков с высоким контрастом, без градиента, чтобы они четко выделялись на фоне. Стили шрифтов заголовков: для логотипа — Russo One (обычный), для H1 в Hero — Rubik (жирный), для заголовков в других блоках — Roboto, для текстов в блоках — Montserrat. Не используй эмоджи. Иконки в блоках при наведении курсора на блок — крутятся, а фон карточек при наведении курсора на каждую слегка подсвечивается. Градиенты и подсветка на кнопках. На лендинге — узкие пробелы между блоками и внутри блоков лендинга сверху и снизу заголовков, текстов и элементов. Добавь анимацию. Не используй таймеры с обратным отсчетом и гарантии. Все тексты должны хорошо читаться. Название продукта H3 и выдели цветом. Если есть что еще добавить в дизайн и анимацию — добавь. Дизайн лендинга очень важен, потому что, от дизайна и анимации лендинга зависит кол-во заказов и продаж, поэтому очень постарайся. На готовом лендинге заголовки, тексты, элементы блоков и анимация — должны корректно показываться на персональном компьютере и на экранах всех мобильных устройств.
Конверсионные элементы (UX/CRO):
- Прогресс-индикатор внутри блока «Как это работает» — горизонтальная полоса, заполняющаяся по мере скролла внутри секции.
- Bottom-sheet оффер на мобильных — раскрывающаяся снизу панель с подробным CTA при свайпе вверх.
- Анимированная стрелка/jiggle на основной CTA-кнопке (мягко покачивается каждые 4 сек, привлекает внимание).
- Sticky-bottom-bar на мобильных — фиксированная панель снизу с кнопкой «Получить инструкцию», чтобы CTA всегда был в зоне большого пальца.
- Микроанимации hover на карточках (tilt 3D, parallax внутри).
- Подсветка-glow за главным CTA (pulsing animation).
- Breadcrumb-индикатор прокрутки — тонкая полоска прогресса вверху страницы.
- Скелетон при загрузке + плавный fade-in всей страницы.
Визуальный дизайн и премиум эффекты:
- Анимированные градиентные blob’ы на фонах секций (не только в Hero) — медленно дышащие световые пятна в углах блоков «Кому подойдёт» и «Получить».
- Conic-gradient анимированные обводки на главных CTA-кнопках (вращающийся радужный border на hover).
- Текстовая reveal-анимация для H1 — слова появляются по очереди с blur→sharp эффектом (cinematic intro).
- Number-counter анимация — цифры (30 минут, 100 000 ₽, 1247 покупателей) при появлении в viewport крутятся от 0 до значения.
- SVG-линии-коннекторы в блоке «Как это работает» — анимированные пунктиры между шагами с движением точки по линии.
- Hover-эффект «магнитная кнопка» — главные CTA слегка тянутся к курсору при наведении (popular у Awwwards-сайтов).
- Glow-particles — мелкие светящиеся точки, плавающие в Hero (как у Linear).
- Image-mask reveal — фоновые картинки появляются с эффектом «clip-path: inset из 100% в 0».
- Light-leak эффект — диагональные блики света, периодически проходящие через карточки.
- Grain animation — noise-текстура не статичная, а с тонкой анимацией зёрен (1-2 fps подмена).
- Mesh-gradient вместо плоских фонов секций — многоцветные размытые градиентные пятна.
- Иконки с глоу-эффектом — SVG-иконки в карточках с тонким filter: drop-shadow(#04eaf0).
- Glassmorphism двух уровней — карточки внутри тёмных секций vs внутри светлых градиентных секций для контраста.
- Noise-текстура на фоне (тонкая, 3-5% opacity) — даёт «дороговизну».
- Светящиеся бордеры карточек (animated gradient border на hover).
- Marquee-лента с фразами/иконками после Hero (бесконечная горизонтальная прокрутка).
- Декоративные элементы: тонкие линии-разделители с градиентом, абстрактные фигуры-blobs с blur.
- Кастомный курсор-точка на десктопе (опционально, премиум-фишка).
- Кастомный скроллбар в премиум-цветах.
Премиум фичи «вау-уровня»:
- Лоадер при первом заходе — фирменный, с лого Академии-Продаж и прогрессом загрузки (1-1.5 сек, не больше).
- Кастомные курсоры разных типов — на ссылках, кнопках, изображениях, тексте.
- Page-transition animations между лендингом и страницами подвала.
Технические улучшения:
- Preload критичных шрифтов и hero-картинки.
- Lazy-load для всех картинок ниже первого экрана.
- CSS clamp() для типографики — плавная адаптивность шрифтов.
- prefers-reduced-motion — отключение анимаций для accessibility.
- Accessibility: aria-label, role, фокус-стили.
- SEO-блок: structured data (Schema.org Product/FAQ), мета-теги, og-image, robots.
- Favicon в нескольких размерах + apple-touch-icon + manifest.json.
- Open Graph и Twitter Card для красивых превью при шеринге.
Психология продаж:
- Микро-обещание под H1 — «Уже через 30 минут вы увидите готовый лендинг на своём домене».
Якорные цифры в Hero на градиентных карточках: «30 мин ⏱️», «0 ₽ за дизайнера», «1 промт → готовый сайт» — конкретика бьёт лучше прилагательных. - Highlight-эффект на ключевых словах в текстах (текстовый маркер #04eaf0 с прозрачностью).
- Эмоциональный finalCTA перед футером — «Сегодня вы сидите без лендинга. Завтра у вас могут быть первые заявки. Решение — один клик.»
- Чек-маркеры перед перечислениями (галочка #04CBC3 в круге).
Пояснение: тексты меняете на свои.
Микровзаимодействия и UX:
- Confetti-эффект при нажатии на CTA (краткий праздничный feedback).
- Звук клика на CTA (опционально, тихий, выключаемый).
- Tooltip’ы на сложных терминах («хостинг», «домен», «промт») с краткими объяснениями для новичков.
- Анимированная замена слов в H1 — «лендинг для бизнеса / для услуг / для эксперта / для онлайн-курса» — каждые 2 сек меняется (typewriter), бьёт в разные аудитории.
Hover-preview на карточках отзывов — лёгкий зум фото + появление полного текста.
Пояснение: тексты меняете на свои.
Мобильная оптимизация:
- Pull-to-refresh кастомный — премиум-фишка.
- Свайп-навигация по блокам — на мобильных можно свайпать между секциями (горизонтально или вертикально с snap).
- Уменьшенный bento-grid на мобильных — карточки в одну колонку с увеличенными иконками.
- Большие тап-зоны — все кликабельные элементы ≥ 48×48 px.
- Адаптивные изображения через <picture> — webp + jpg fallback, разные размеры для разных экранов.
Доверие и право:
- Блок «Получить» — надписи: Visa, MasterCard, МИР, СБП + надпись «Безопасный платёж» — с иконками слева.
- Иконка SSL-замочка рядом с ценой — «Защищённое соединение».
Пояснение: тексты меняете на свои.
Aurora / Beams фон в Hero:
В Hero — анимированный aurora-эффект (медленно движущиеся световые лучи #04CBC3 и #4E3AFF через CSS @keyframes + blur).
Прогресс-индикатор «Сколько вы уже прочитали»:
Дополни breadcrumb-индикатор сверху подписью внизу/сбоку (на ПК): тонкая вертикальная линия справа с точками-якорями секций — посетитель видит, на каком этапе он находится, и сколько ещё контента впереди (как у Medium).
Цветовая гамма лендинга:
- Темная премиум палитра с золотыми акцентами и яркими цветами иконок и блоков.
- Название продукта H3.
- Цвет текста заголовков блоков: #FFFFFF. Отдельные слова и фразы заголовков выдели строго этим цветом: #04eaf0 без градиента.
- Крупный текст на кнопках без градиента.
- Фон кнопок в спокойном состоянии: #04eaf0, цвет текста: #FFFFFF.
- Фон кнопок при наведении: #FFFFFF, цвет шрифта названия кнопок: #04eaf0 без градиента.
- Названия верхнего меню и ссылок #FFFFFF, при наведении на них курсора: #04eaf0
- Логотип в этих цветах: #04eaf0 и #FFFFFF или придумай свои сочетания, подходящие для указанных оттенков.
- Фон кнопки: Оплатить и получить, в спокойном состоянии такой: FF5F3A, цвет шрифта на кнопке такой: #FFFFFF.
- Фон кнопки: Оплатить и получить, при наведении на нее курсора строго такой: FF5F3A, цвет шрифта на кнопке такой: #FFFFFF.
На лендинге делай узкие пробелы между блоками и внутри блоков лендинга сверху и снизу заголовков. Добавь анимацию. Не используй таймеры с обратным отсчетом и гарантии.
Страницы подвала — оформление:
Создай три отдельные HTML-страницы (privacy.html, personal-data.html, oferta.html)
в едином дизайне с лендингом (та же шапка с логотипом и ссылкой «На главную»,
тот же подвал, дизайн, палитра, те же шрифты и градиенты).
⚠️ ВАЖНО: внутри каждой страницы блок для вставки текста должен быть
ОБРАМЛЁН ДВУМЯ ЯРКИМИ HTML-КОММЕНТАРИЯМИ-МЕТКАМИ со стрелками-эмодзи,
например:
⬇️⬇️⬇️ ВСТАВЬТЕ ТЕКСТ ПОЛИТИКИ КОНФИДЕНЦИАЛЬНОСТИ СЮДА ⬇️⬇️⬇️
Удалите всё ОТ этой строки ДО строки «⬆️ КОНЕЦ ТЕКСТА ⬆️»
и напишите свой текст с тегами <h1>, <h2>, <p>, <ul><li>.
… ЗДЕСЬ примерный шаблон-заглушка с h1, h2, p, ul …
⬆️⬆️⬆️ КОНЕЦ ТЕКСТА ⬆️⬆️⬆️
Внутри блока размести готовый шаблон-заглушку из 4–5 типовых разделов
(<h1> + несколько <h2> + <p>), чтобы пользователь видел пример структуры
и просто заменял текст внутри.
Стилизуй документные страницы так, чтобы заголовки h1/h2, абзацы <p>,
списки <ul>/<ol> и ссылки <a> имели аккуратный читаемый вид
на тёмном фоне (h1 — градиентом, h2 — белым, текст — приглушённым,
ссылки — циан/розовый).
После кода трёх страниц обязательно добавь отдельную инструкцию
для новичка из 4 шагов:
1) Открыть файл в редакторе (VS Code / Notepad++).
2) Найти блок между метками «⬇️ ВСТАВЬТЕ … СЮДА ⬇️» и «⬆️ КОНЕЦ ТЕКСТА ⬆️».
3) Удалить пример-заглушку и вставить свой текст с правильными HTML-тегами.
4) Сохранить файл (Ctrl+S) и проверить в браузере.«
Код каждого файла выдай в одном ответе. Обязательно указывай названия каждого файла лендинга. Если нужны другие файлы создай и сгенерируй код для каждого. Все тексты должны хорошо читаться.
Пояснение (этот текст не копируем): Подробные пояснения по каждому элементу дизайна лендинга (как выглядит и как работает) из разделов выше начиная от Конверсионные элементы (UX/CRO): читайте в боке Вопрос-Ответ (внизу страницы), нажав на текст последнего вопроса.
Пояснение по обоим промтам
- Если вам не нужен какой то блок (например блок: Отзывы, о котором написано в моем промте), просто удалите его и удалите пояснение о нем. Или напишите свое название блока и пояснение для него.
- Если нейросеть будет останавливаться (не до конца допишет ответ на любой промт) в поле для промта каждый раз пиши фразу: «Продолжай с того места, где остановился, не повторяй уже выведенный код» или напишите слово: продолжи и отправь это задание нейросети.
- Если нейросеть при генерации файлов лендинга изменит ваш текст или напишет свой, в файле .index.html найдите нужный блок лендинга, замените или допишите заголовки и тексты которые вам нужно изменить и сохраните изменения.
- В каждом из двух промтов выше вы можете изменить цвета на свои или удалить пояснение по цветовой гамме (в дизайне), предоставив это нейросети.
- Если у вас нет текстов для своего лендинга, выше промт, по которому нейросеть напишет вам продающий текст для вашего лендинга.
- Если вам нужен блок Контакты, допишите к промту текст: «Сделай блок Контакты и укажи данные для связи со мной [здесь вместо квадратных скобок напишите все контактные данные для связи с вами].
- Если вам нужно на лендинг добавить блок с формой обратной связи (для сбора заявок на покупку товара или заказ услуги), чтобы получать с нее сообщения клиентов с их контактными данными, допишите к промту текст: «Сделай форму обратной связи, чтобы получать с нее сообщения клиентов с контактными данными [здесь вместо квадратных скобок напишите контактные данные, которые хотите получать, например номер телефона или Email либо мессенджер или все вместе].
- Если нужно в какой то блок лендинга добавить ссылку для кнопки оплаты или html код проигрывателя с видео, в тексте описания этого блока напиши следующее: дай инструкцию как добавить ссылку для кнопки оплаты или html код проигрывателя с видео — подробно объясни и покажи места (какую сточку в коде удалить и вместо нее вставить ссылки, url ссылку для кнопки оплаты, html код проигрывателя с видео из YouTube или Rutube или с VK видео) если это требуется сделать.
- Если нужен таймер с обратным отсчетом действия скидки и гарантии — в конце промтов выше, удали предложение: Не используй таймеры с обратным отсчетом и гарантии и вместо него добавь такое предложение: Используй таймеры с обратным отсчетом и гарантии.»
- Если вам нужен калькулятор на лендинге, добавьте в конце описания блока в которых хотите добавить калькулятор следующий текст: «Сделай интерактивный калькулятор в блоке (вместо скобок и текста здесь опишите как он должен работать, т.е. что считать и показывать), который должен быть адаптивным и корректно показываться на всех экранах мобильных устройств. Предоставь инструкцию как создать файлы калькулятора и куда и как загрузить архив с ними.»
Дополнение к пояснению выше (надеюсь хватит предыдущего нумерованного списка):
Цветовая гамма лендинга: в этом разделе вы можете написать общее описание дизайна, например так: Темная премиум палитра с золотыми и серебряными акцентами. Или что то другое свое.
А если вам понравился дизайн какого то блока не лендинге, который нашли в интернете, сделайте скриншот этого блока, загрузите в нейросеть и напишите следующий промт: «Напиши промт по которому был создан дизайн (цвет и градиент фона, фоновая заставка, цвет и стили шрифтов и все остальное) картинки.»
Полученный ответ в виде промта дизайна по которому было создан понравившийся вам блок чужого лендинга, вы можете указать в строчке: Дизайн (выбрав один из двух промтов выше) для определённого блока своего лендинга.
Если вам нужны какие то особенности дизайна на своем лендинге, то напишите об этом примерно так: «В Первом блоке после заголовка для поясняющего текста сделай анимацию, чтобы поясняющий текст появлялся по буквам и дай инструкцию как увеличить или уменьшить скорость анимации. Все элементы каждого блока лендинга сделай так, чтобы они плавно появлялись на экране после прокрутки.»
Что делать, если нейросеть что то забудет сгенерировать:
Если нейросеть не напишет промты для генерации картинок для фона и для отдельных картинок, которые будут на лендинге, сразу после того как она сгенерирует все файлы для вашего лендинга. в этом же чате отправь ей следующий промт:
«Ты не написал промты для генерации изображений и генерации аватарок людей для отзывов, сгенерируй эти промты, напиши как назвать каждый файл и напиши в какой файл их добавить.»
Пояснение: вам нужно последовательно с помощью каждого промта сгенерировать в нейросети картинки и положить файлы в папку
images/с правильными именами (их напишет нейросеть) — и всё заработает автоматически. А в коде файлов, все пути к картинкам уже прописаны.
Картинки (фото людей) для отзывов вы можете либо сгенерировать с помощью нейросети или просто скачать готовые фото людей нужного вам пола и возраста, найдя их в интернете. Для этого задайте в Яндексе запрос: фотографии людей из Европы, скачайте на ПК понравившиеся, переименовав каждое фото так как это будет написано в инструкции, которую вам выдаст нейросеть после того как сгенерирует все файлы лендинга.
Если нейросеть сгенерирует вам файлы для лендинга, но что то не напишет, например, инструкцию к какому то файлу либо другую инструкцию или сам файл, список которых она написала выше или что то еще, отправьте ей в этом же чате примерно такой промт: «Ты не сгенерировала (вместо скобок и текста в них перечислите что она не сгенерировала)» и отправьте это нейросети на выполнение.
В ответ на этот промт, нейросеть сгенерирует вам информацию которую она пропустила.
ШАГ 2 (по желанию): Что добавить к готовому промту для генерации лендинга
После того, как нейросеть напишет ПЕРВЫЙ промт для генерации лендинга, в этом же чате отправь нейросети один из двух вариантов улучшающих ответ промтов:
Первые вариант:
«А теперь представь, что ты арт-директор Awwwards Site of the Day. Пересмотри сгенерированный промт и УСИЛЬ дизайн: добавь больше микроанимаций, улучши типографику (контраст между крупным H1 и тонким lead-параграфом), сделай Hero ещё более «дорогим» — с парящими стеклянными элементами, добавь noise-текстуру 2% поверх фона, усиль glow на главной CTA. Перепиши ранее написанный промт, в который включи список улучшений.»
После этого нейросеть напишет более улучшенный промт, который проверь и отправь нейросети на генерацию файлов лендинга.
Или второй вариант из двух промтов:
«А теперь проанализируй промт и перечисли что можно добавить в него, чтобы улучшить его, получив лендинг с продающим, стильным, современным и богатым дизайном, и дизайна лендинг имел высокую степень конверсии. Просто проведи анализ и напиши список улучшений»
Нейросеть по промту выше, напишет вам список улучшений для дизайна вашего лендинга. Вам нужно проверить этот список улучшений, скопировать те, которые вам не нужны и вставить вместо квадратных скобок в промт ниже, затем скопировать этот промт целиком и отправить в этом же чате нейросети.
«А теперь напиши новый (улучшенный) промт, в который включи все дополнения, которые ты только что предложил, кроме этих: [вместо этих скобок и пояснительного текста в них, вставь скопированные пункты улучшений, которые вы не хотите чтобы они были на вашем лендинге]. В конце каждого файла с кодом дай пояснение как его создать, как добавить там где нужно ссылку для кнопки оплаты или html код проигрывателя с видео — подробно объясни и покажи места (какую сточку в коде удалить и вместо нее вставить ссылки, url ссылку для кнопки оплаты, html код проигрывателя с видео из YouTube или Rutube или с VK видео) если это требуется сделать. Напиши промты для генерации каждой картинки лендинга с указанием названия каждой, размер и формат. Еще напиши промт для генерации фавикона по теме лендинга. Мои заголовки и тексты в блоках оставь как есть, не меняй их. Если я не указал где то тексты, напиши свои по теме блока и лендинга в целом. А в конце промта напиши структуру файлов лендинга и понятную для новичка инструкцию, с объяснением как загрузить архив с файлами лендинга на хостинг и домен или поддомен и как редактировать тексты лендинга«.
Отправляйте промт выше с вашими дополнениями вместо квадратных скобок и текста в них, нейросети на выполнение.
В итоге нейросеть выдаст вам супер переработанный и ПРОРАБОТАННЫЙ ГОТОВЫЙ ПРОМТ и уже его копируйте и отправляйте нейросети на выполнение. Именно по нему она начнет генерировать файлы для вашего лендинга. А если будет останавливаться, каждый раз отправляйте ей в чате слово: продолжи, после которого она продолжит генерацию файлов лендинга пока не сгенерирует их все.
Что делать если не понравился дизайн
Если не понравится дизайн или цветовая гамма (палитра) сайта, добавьте в тот же диалог (в поле для промта после того как нейросеть вам выдала все файлы лендинга с пояснениями) следующий промт:
«Мне не нравится дизайн, перегенерируй дизайн лендинга, используй цвета для фона: черный (оттенки), можно с градиентами, для текстов и элементов: белый, FFC241 и оттенки, серый, для кнопок: оранжевый и напиши инструкцию в каких файлах какой код заменить.»
Пояснение по промту: цвета в промте выше напишите свои, которые хотите видеть на своем лендинге, можете подробно написать цвета даже по каждому блоку, шрифту, заголовкам и элементам.
Где взять готовые тексты документов (Политика …, Оферта, Персональные данные)
- Онлайн-конструкторы юридических документов:
- https://prostodocs.com
- https://document-konstruktor.ru
- https://tilda.cc/ru/free/personaldata/ (генератор политики конфиденциальности)
- ChatGPT / Нейросети — попросите: «Составь политику конфиденциальности для сайта по продаже инфопродуктов в РФ согласно ФЗ-152, в HTML-разметке с тегами
<h1>,<h2>,<p>,<ul>». - Юрист на фрилансе:
- FL.ru → https://www.fl.ru/
- Kwork → https://kwork.ru/ (от 500 ₽ за документ)
- Profi.ru → https://profi.ru/
- Готовые шаблоны коллег и конкурентов — посмотрите политики на крупных инфо-сайтах (GetCourse, Tilda) и адаптируйте под себя.
Промт для генерации продающего текста
Промт для генерации продающего текста для лендинга (нажми и открой)
Пояснение: ниже промт, в котором вместо квадратных скобок и текста в них, нужно написать свои данные (требуемые данные о своем товара или услуге, целевой аудитории и т.д.). Если какие то пункты не нужны, например в вашем продающем тексте не нужен рассказ о компании или гарантиях, удалите эти строчки из этого промта. Поссле заполнения всех данных, скопируйте промт и отправьте в нейросеть чтобы они по нему сгенерировала вам текст для вашего продающего лендинга, который используйте в первом или втором промте выше.
«Ты — опытный копирайтер продающих лендингов. Напиши продающий текст для лендинга, пиши в стиле маркетолога Джозефа Шугермана, используя подходящие ментальные триггеры. Пишешь конкретно, без воды, штампов и канцеляризмов. Каждый блок ведёт читателя к целевому действию.
# БРИФ
1. Продукт и как работает:
[Например: «Онлайн-курс по таргету ВКонтакте, 8 недель, разбор личных кейсов учеников, обратная связь от наставника каждую неделю»]
2. Цена и спецусловия:
[Например: «29 900 ₽ вместо 49 900 ₽ до 30 ноября. Рассрочка на 6 месяцев без переплат. Бонус — шаблоны рекламных объявлений»]
3. Целевая аудитория:
[Например: «Начинающие таргетологи 22–35 лет, которые прошли бесплатные курсы, но не могут найти первых клиентов и боятся брать деньги за работу»]
4. Главная боль:
[Например: «Знаний много, но непонятно, как упаковать себя и выйти на стабильные 80 000 ₽ в месяц»]
5. Главный результат клиента:
[Например: «Через 2 месяца — 3–5 платящих клиентов и доход от 60 000 ₽ на фрилансе»]
6. УТП (чем лучше конкурентов, 1 предложение):
[Например: «Единственный курс, где наставник лично ведёт ученика до первого клиента и возвращает деньги, если результата нет»]
7. Доказательства (опыт, цифры, кейсы, отзывы):
[Например: «5 лет на рынке, 1 200 выпускников, 87% находят клиента быстро»]
# ЗАДАЧА
Напиши текст лендинга по структуре ниже. Для каждого блока — заголовок и текст. Используй только конкретику из брифа. Если данных не хватает — задай уточняющие вопросы перед генерацией, факты не выдумывай.
# СТРУКТУРА (9 блоков)
1. **Первый экран**: H1 с выгодой и конкретикой + подзаголовок + CTA-кнопка + микрокопия снятия риска
2. **Боль**: «Узнаёте себя?» — 3–4 ситуации от первого лица
3. **Решение**: как продукт убирает эту боль
4. **Что получите**: 5 выгод-результатов (не функций)
5. **Как это работает**: 3–4 шага процесса
6. **Доказательства**: цифры, кейсы, отзывы из брифа
7. **Возражения**: 4 главных возражения + ответы
8. **Оффер**: что входит, цена, бонусы, гарантия, дедлайн, CTA
9. **Финал**: напоминание главной выгоды + последний CTA
# ПРАВИЛА
— Короткие предложения (8–14 слов), абзацы по 2–4 строки
— Конкретика: цифры, сроки, факты
— Прямое обращение к читателю, активный залог
— Без эмодзи, канцеляризмов и клише («индивидуальный подход», «команда профессионалов», «в современном мире», «лучший на рынке»)
— Выгоды — про результат, а не про функции
# ФОРМАТ ОТВЕТА
1. Текст лендинга по 9 блокам
2. 3 альтернативных H1 для A/B-теста
3. 3 варианта CTA-кнопки
Кол-во символов: 3000 знаков»
Пояснение: после того как нейросеть напишет вам текст для продающего лендинга, отправьте ей следующий промт (задание):
«А теперь проведи анализ текста. выяви недостатки, что не написала и напиши улучшенный текст».
В итоге, нейросеть напишет вам второй вариант продающего текста для вашего лендинга, который вы можете подредактировать и использовать для своего лендинга.
Промт для генерации подписной/страницы подписки (посадочной страницы)
Ниже промт для генерации лендинга посадочной страницы:
«Ты — ведущий Senior Front-End разработчик и Award-Winning UI/UX дизайнер уровня Awwwards, CSS Design Awards и Webby Awards с 15-летним опытом создания премиум-лендингов для Fortune 500 компаний (Apple, Stripe, Linear, Vercel, Framer). Твои работы публикуются в Dribbble Top 10 и Behance Featured.
ЗАДАЧА:
Создай ОДНОФАЙЛОВУЮ продающую посадочную страницу (Landing Page) для сбора подписчиков (Lead Magnet / Subscription Page) уровня премиум веб-студии стоимостью от 100 000 ₽. Весь код — в одном HTML-файле с встроенными <style> и <script>. Никаких внешних зависимостей, кроме CDN (TailwindCSS, GSAP, AOS — по необходимости).
[ТВОИ ДАННЫЕ — ЗАПОЛНИ ЭТО]
• Ниша/Продукт: [например — закрытый клуб инвесторов / онлайн-курс по нейросетям / email-рассылка по маркетингу]
• Главный оффер (что получит подписчик): [например — PDF-гайд «10 нейросетей, которые заменят сотрудников»]
• Целевая аудитория: [например — предприниматели 25–45 лет]
• Tone of voice: [например — экспертный, дерзкий, премиальный]
• Имя/Бренд автора: [например — Александр Иванов / NeuroLab]
ТРЕБОВАНИЯ К ДИЗАЙНУ (КРИТИЧНО):
ВИЗУАЛЬНЫЙ СТИЛЬ:
— Стиль: Modern Premium / Glassmorphism + Neumorphism + тонкий Bento Grid
— Цветовая палитра: тёмная база (#0A0A0F или #0F0F1A) + акцентный градиент (например, фиолетово-розовый #8B5CF6 → #EC4899, или сине-бирюзовый #06B6D4 → #3B82F6) + контрастный CTA-цвет
— Типографика: связка двух шрифтов с Google Fonts — заголовки «Space Grotesk» / «Manrope» / «Unbounded» (700–900), текст «Inter» (400–500). Tracking и leading настроены идеально.
— Размер заголовка H1: clamp(48px, 7vw, 96px), с градиентным text-fill и тонким glow
— Микро-анимации на КАЖДОМ интерактивном элементе (hover, focus, scroll)
— Декор: тонкие светящиеся линии, blur-пятна (radial gradients), noise-texture overlay, parallax-блики
— Скруления: rounded-2xl / rounded-3xl везде
— Тени: многослойные мягкие shadows + inset glow на карточках
СТРУКТУРА (обязательные секции):
1. **Sticky Navigation** — лого + ссылки + CTA-кнопка с magnetic-эффектом
2. **HERO** — мощный заголовок с градиентом, подзаголовок, форма подписки (email + кнопка) inline, социальные доказательства (звёзды, аватарки «5000+ подписчиков»), фоновый animated gradient mesh или particles
3. **Логотипы/упоминания в СМИ** (Forbes, РБК, VC.ru) — ч/б, opacity 60%, бесконечная карусель
4. **Bento Grid «Что вы получите»** — 4–6 карточек разного размера с иконками (SVG inline), glassmorphism, hover-tilt 3D-эффектом
5. **»О подарке/лид-магните»** — split-секция: слева mockup PDF/гаджета, справа буллеты с галочками
6. **Социальные доказательства** — 3 отзыва-карточки с аватарами, рейтингом, цитатой
7. **FAQ-аккордеон** — плавное раскрытие, 5–6 вопросов
8. **Финальный CTA** — большой блок с градиентным фоном, повтор формы подписки, гарантия (политика конфиденциальности)
9. **Footer** — минималистичный, тёмный, ссылки + соцсети
АНИМАЦИИ И ВЗАИМОДЕЙСТВИЯ:
— Reveal-on-scroll (IntersectionObserver или AOS)
— Кастомный курсор (опционально) или magnetic-кнопки
— Плавная прокрутка (smooth scroll)
— Hover на карточках: scale(1.02) + light-glow follow cursor
— Анимированный счётчик подписчиков
— Floating элементы на фоне (CSS-анимация)
— Текст с эффектом «появления по буквам» в hero (GSAP SplitText или ручной JS)
— Кнопка submit с состояниями: idle → loading (спиннер) → success (галочка с конфетти)
АДАПТИВНОСТЬ:
— Mobile-first, breakpoints: 640 / 768 / 1024 / 1280 / 1536 px
— На мобильных — упрощённый layout, увеличенные тач-зоны (min 44px), bottom-fixed CTA
— Идеальные отступы по сетке 8pt
ДОСТУПНОСТЬ И SEO:
— Semantic HTML5 (header, main, section, article, footer)
— ARIA-labels, alt-теги
— Meta-теги: title, description, OG-теги, favicon (inline SVG)
— Schema.org разметка для organization
— Lazy-load изображений
— Lighthouse score: 95+ по всем метрикам
ТЕХНИЧЕСКИЙ СТЕК:
— HTML5 + TailwindCSS (через CDN play) + Vanilla JS
— GSAP (CDN) для сложных анимаций
— Lucide Icons (inline SVG) для иконок
— Никакого jQuery, никаких лишних библиотек
КОПИРАЙТИНГ (ВАЖНО!):
Тексты — продающие, по фреймворку **PAS (Problem-Agitate-Solution)** + **AIDA**.
— Заголовок цепляет за 3 секунды, обещает конкретный результат с цифрой
— Подзаголовок снимает главное возражение
— CTA-кнопки: глагол действия + выгода (не «Подписаться», а «Получить гайд бесплатно →»)
— Используй принцип FOMO, социальное доказательство, конкретику (цифры, факты)
— Никакой воды и канцелярита
ФОРМАТ ОТВЕТА:
1. Один полный HTML-файл, готовый к запуску (просто открыть в браузере)
2. Весь код снабжён короткими комментариями на русском по секциям
3. После кода — краткая инструкция: как кастомизировать цвета, шрифты, тексты (3–5 пунктов)
КРИТЕРИИ КАЧЕСТВА:
Страница должна вызывать «вау-эффект» с первой секунды. Если бы я открыл её на awwwards.com — она должна претендовать на «Site of the Day». Никакого «детского» дизайна, никаких стоковых решений в стиле Bootstrap-2015. Только современный, чистый, премиальный, дорогой вид.
Начинай. Сначала кратко (2–3 предложения) опиши концепцию и палитру, затем выдавай полный код.»
КАК ИСПОЛЬЗОВАТЬ ПРОМТ ВЫШЕ:
- Перед использованием замени блок [ТВОИ ДАННЫЕ] на свою тематику, добавь или удали секции в: Структура.
- Скопируй и вставь промт в нейросеть (DeepSeek Chat / DeepSeek Coder, Qwen Chat, ChatGPT, Claude, Cursor, v0.dev и т.д.).
- Замени блок
[ТВОИ ДАННЫЕ]на свою нишу - Вставь в нейросеть:
- 🥇 Claude 3.5 Sonnet / Opus — даст лучший HTML/CSS
- 🥈 ChatGPT o1 / GPT-4o — отличный результат
- 🥉 v0.dev от Vercel — сразу с превью
- Сохрани результат в файл
index.htmlи открой в браузере - Для доработок пиши: «Сделай hero ещё более эффектным, добавь parallax и измени палитру на изумрудно-золотую»
БОНУС-КОМАНДЫ для улучшения:
- «Усиль анимации, добавь GSAP ScrollTrigger»
- «Перепиши копирайтинг агрессивнее, в стиле Дэна Кеннеди»
- «Сделай вариант в светлой палитре с минимализмом в стиле Apple»
- «Добавь секцию с таймером дедлайна и social proof виджет»
Бесплатный способ привлечения клиентов на ваш лендинг и в бизнес
Начните публиковать статьи на https://habr.com/ru, делать это можно бесплатно при соблюдении определенных правил. Статьи опубликованные на этом сайте быстро выходят в ТОП 10 Яндекса и не только в этом поисковике. Поэтому задействовав эту схему вы начнете без вложений привлекать целевую аудиторию из поиска Яндекса.
Способ не новый и широко известный, но все, кто его использует для привлечения клиентов в бизнес, довольствуются одним, максимум двумя аккаунтами, в которых публикуют свои статьи.
Я предлагаю использовать этот способ по максимуму, публикуя статьи на регулярной основе в множество аккаунтов.
А начать этот способ вам поможет антидетект браузер Дольфин, как его использовать я рассказываю дальше.
Чтобы привлекать трафик без затрат на рекламу, вот что нужно сделать:
- Скачиваете на ПК антидетект браузер, например Dolphin https://dolphin-anty.net/ru/ или любой другой.
- На бесплатном тарифе доступно создание 5-10 профилей. Каждый профиль это отдельный компьютер (каждый профиль с добавленным прокси это отдельный персональный компьютер со своими отпечатками).
- В каждый профиль добавляете прокси. Прокси привязывается к профилю и при входе в каждый профиль прокси будет работать. В интернете много мест где продают прокси. Покупайте прокси не РФ. На месяц не покупайте, купите на 7 дней, проверьте как работают, если все хорошо, сможете продлевать их, если работают плохо, купите другие так же, сначала на пробу с оплатой на 1 неделю.
- Добавьте в каждый профиль в антидетект браузере свою прокси. В итоге, каждый профиль будет отдельным персональным компьютером.
Что дальше:
Дальше, запускаете на своем ПК антидетект браузер Dolphin (можете любой другой), по очереди заходите из каждого профиля антидетект браузера на https://habr.com/ru, регистрируетесь и публикуете статьи. Таким образом у вас будет 5-10 аккаунтов в https://habr.com/ru, в каждый из них вы будете входить с отдельного профиля антидетект браузера.
Для каждого профиля потребуется новый Email, которые вы можете купить. Желательно приобрести gmail почту и свой прокси к каждому профилю с разной локацией, можно англоязычные, России или бывших союзных республик.
- Чтобы купить почтовые адреса в поиске Яндекса введите запрос: купить email или запрос: купить gmail и перед вами откроется много сайтов, на которых продают почтовые ящики.
- А купить прокси вы можете на этом сайте, покупайте IPv4 Прокси, цена 28 рублей в неделю.
По готовности, запускаете на своем ПК антидетект браузер Dolphin, по очереди заходите в каждый профиль (это это обычный браузер) и из каждого профиля антидетект браузера заходите на https://habr.com/ru и регистрируетесь, затем публикуете каждый день первые 5-7 статей только без ссылок в них.
Статьи генерируйте в нейросети (ссылка выше), желательно в Claud 4.5 Sonet или Claud 4.7 Opus, статьи до 5000 символов, готовые тексты перечитайте и если требуется подредактируйте, добавьте в начале, в середине и в конце по 1 предложению от себя.
Через 5-7 статей, в каждой второй-третьей следующей статье, указывайте одну ссылку на свой сайт, в интернет магазин или на сайт услуг, либо в Tg канал, ТГ бот, нельзяграм, воронку …, в общем на свою посадочную страницу.
Как зарегистрироваться на хостинге, зарегистрировать домен и Бонус как создать сайт на WordPress
- Смотреть видео на VK видео — нажать, перейти и смотреть (в этом видео с начала и до 9 минуты, показываю как проверить домен на занятость, как зарегистрироваться на хостинге и как зарегистрировать домен — дальше показываю как создать и настроить сайт на WordPress, управлять им и публиковать sero оптимизированные статьи). Дополнительная информация по созданию сайта на этой странице (нажми и узнай).
- Смотреть видео на YouTube — нажать, перейти и смотреть.
Ссылки на сайты, которые использовал в видео:
- Проверить домен на занятость на RUCENTER.RU — нажать, перейти и проверить.
- Хостинг (лучший в плане услуг и поддержки) для регистрации домена и размещения сайта — нажать, перейти и узнать).
Полезная информация
Вы можете использовать любую нейросеть, я использую вот этот сервис, в котором есть все необходимые нейронки для текста (ChatGPT, Claud и др. и для генерации изображений). Использую тариф за 760 руб/месяц.
DeepSeek Chat / DeepSeek Coder
- Бесплатная нейросеть, отлично генерирует код лендингов.
- Полностью бесплатно без жёстких лимитов.
- Ссылка: chat.deepseek.com
Qwen Chat (от Alibaba)
- Qwen 2.5 / Qwen3 — генерирует HTML-лендинги.
- Есть режим Artifacts с превью.
- Полностью бесплатно
- Ссылка: chat.qwen.ai
Полезные ссылки
Подобрать палитры сочетаний цветов для своего лендинга (сайта) вы можете задав в строке поиска Яндекса запрос: «палитра сочетания цветов сайта», перед вами откроются несколько сайтов, зайдите на них и выберите цвета для своего лендинга.
Или воспользуйтесь сайтом, на котором представлено множество сочетаний цветов для сайта (лендинга) — нажми, перейди и выбери или выбери палитру цветов и их коды на этой странице.
Список цветов для дизайна сайта — нажми и узнай.
На вашем персональном компьютере должен быть установлен Notepad++ — это бесплатный текстовый редактор и редактор исходного кода с открытым исходным кодом для операционной системы Windows. В поисковой строке Яндекса введите запрос: Notepad++ скачать, нажмите на кнопку Найти и перед вами откроется множество сайтов, на которых вы можете скачать этот редактор, который нужно установить на свой ПК (если сайт не открывается, нужен сервис из трех букв, который используют для того чтобы зайти в Нельзяграм, а теперь и в Telegram).
Сервис для сжатия и изменения размера картинок — нажать и перейти.
Вопрос — Ответ
Как зарегистрировать домен и хостинг?
Вот ссылка на видео — нажать, перейти и смотреть или вот ссылка, в котором можете более подробно посмотреть как зарегистрироваться на лучшем Российском хостинге и как зарегистрировать домен для будущего сайта. Это видео на YouTube, сами знаете как его смотреть, с помощью какого сервиса.
Про домен и хостинг
Про домен и хостинг
- Домен оплачивается 1 раз в год, не пропустите это.
- Если срок регистрации закончился и вы не успели его продлить, то знайте, что у вас есть еще 1 месяц приоритетного продления, дальше домен зарегистрирует кто то другой и сайт перестанет существовать.
- Поэтому, для удобства, регистрируйте домен на хостинге на котором будет ваш сайт, а не у регистратора доменов.
- Баланс на хостинге, можно пополнять раз в месяц или за 1-2-3 года вперед.
- Выгодно пополнять 1 раз в год. Так дешевле, а следующая оплата только через 1 год.
- Если платите хостинг за год вперед, то положите чуть больше, с учетом продления домена.
- Если оплачиваете каждый месяц, то помните о том, что когда придет время продления домена, то хостинг сделает это автоматически (при условии если в момент регистрации домена вы поставили галочку в пункте продлить автоматически) и за продление домена будет списана сумма денег, а на балансе хостинга денег может не остаться , он перестанет работать, равно как и ваш сайт.
- Если забыли оплатить хостинг он никуда не денется, после пополнения баланса, сайт снова станет доступен.
- Но такого не допускайте, т.к. для сайта это очень плохо. Представьте что в этот момент произошел очередное обновление поиска в Яндексе и в Google, а страницы вашего сайте недоступны. На позиции такое повлияет негативным образом.
Подробные пояснения по каждому элементу лендинга
Ниже список элементов для улучшения дизайна дендинга с пояснениями. Вы можете использовать их все или выборочно. Какие то элементы при генерации файлов лендинга могут быть не добавлены или добавлены но не сработать, но в основном все добавляется. Либо вы можете оставить только описание дизайна из раздела: Дизайн лендинга — вот этот текст:
Лендинг нужен премиум-уровня с дизайном уровня Stripe/Linear/Vercel. В Hero за 3 секунды должно быть понятно: что за продукт, для кого, в чём УТП и какое действие совершить. H1 — 72-96px, bold, с выделением ключевых фраз другим цветом. Внедри психологические триггеры: дефицит, социальное доказательство, авторитет, гарантию. Используй конкретные цифры вместо общих фраз. Структура: Hero с двумя CTA и trust-блоком → логотипы клиентов → боли ЦА → решение с визуализацией → выгоды → демо продукта → шаги работы → кейсы с цифрами → отзывы с фото → сравнение с конкурентами → FAQ → финальный CTA с дедлайном. Дизайн-система: spacing кратно 8px, многослойные тени, colored shadows для CTA, mesh-градиенты в Hero, glassmorphism для карточек, единый стиль иконок. Анимации: stagger fade-in в Hero, scroll-triggered появления, hover-эффекты на кнопках, анимированные счётчики цифр. Mobile-first, sticky-CTA на мобильных, semantic HTML, WCAG AA контраст. Анимация появления элементов и контента при прокрутки лендинга. Стили шрифтов заголовков: IBM Plex-для логотипа, Russo One (обычный) — для заголовка H1 в Hero, Rubik (жирный) и Roboto — для заголовков в других блоках, Montserrat- для текстов в блоках.
.. а все остальные элементы дизайна (длинный список в обоих промтах выше — не использовать, то есть удалить), при этом дизайн готового лендинга будет не хуже.
КОНВЕРСИОННЫЕ ЭЛЕМЕНТЫ (UX/CRO)
1. Прогресс-индикатор внутри блока «Как это работает»
Выглядит как тонкая горизонтальная полоса (2-4 px) с акцентным цветом #04CBC3, расположенная сверху или снизу секции. При скролле внутри блока она плавно заполняется слева направо, показывая, сколько шагов уже пройдено. Работает через JavaScript: вычисляется позиция скролла относительно границ секции и пересчитывается в проценты ширины полосы. Психологически это удерживает пользователя — мозг хочет «доскроллить до конца», как достижение в игре.
2. Bottom-sheet оффер на мобильных
Это панель, закреплённая внизу экрана с небольшой «ручкой» сверху (горизонтальная полоска-индикатор для свайпа). При свайпе вверх или тапе она плавно раскрывается на 70-90% высоты экрана, показывая расширенный CTA: цену, выгоды, кнопку оплаты, гарантии. Внутри — затемнённый фон (backdrop), который закрывает панель по тапу. Это нативный паттерн iOS/Android, привычный пользователю — он не воспринимается как реклама.
3. CTA-микротекст внутри кнопки во второй строке
Главная кнопка содержит две строки текста: крупная (например, «Получить инструкцию») и под ней мелкая строка серого/полупрозрачного цвета — «Доступ за 30 секунд • Гарантия результата». Маркер «•» визуально разделяет два преимущества. Это снимает финальные возражения прямо в момент клика, без необходимости искать информацию.
4. Анимированная стрелка/jiggle на CTA
Каждые 4 секунды кнопка делает едва заметное покачивание (rotate ±2°) или стрелка-иконка внутри неё совершает короткое движение вправо-влево (translateX 4-6px). Анимация длится 0.6 сек и реализуется через CSS @keyframes с infinite animation-iteration. Это «жизнь» в статичном интерфейсе — взгляд автоматически возвращается к кнопке благодаря периферическому зрению.
5. Sticky-bottom-bar на мобильных
Узкая фиксированная панель (60-72px) внизу экрана, появляющаяся после прокрутки первого экрана. Содержит короткое название продукта/цену слева и крупную кнопку «Получить» справа. Использует position: fixed; bottom: 0 с лёгким backdrop-blur для премиальности. Гарантирует, что CTA всегда в зоне большого пальца — конверсия на мобильных растёт на 15-30%.
6. Микроанимации hover на карточках (tilt 3D)
При наведении карточка слегка наклоняется в сторону курсора (effect tilt максимум 8-12°), создавая ощущение 3D-объекта. Внутри карточки иконка или картинка двигается с другой скоростью (parallax) — это усиливает глубину. Реализуется через JS-библиотеку vanilla-tilt.js или собственный код на mousemove. Премиум-приём, ассоциирующийся с дорогими сайтами Awwwards.
7. Подсветка-glow за главным CTA
За кнопкой — размытое пятно (box-shadow или ::before элемент) акцентного цвета с blur(40px), которое пульсирует от 60% до 100% яркости каждые 2 секунды. Создаёт эффект «кнопка светится», притягивая взгляд. Анимация плавная (ease-in-out), не раздражающая. Особенно эффективна в тёмных секциях, где glow выглядит как неоновая вывеска.
8. Breadcrumb-индикатор прокрутки
Тонкая полоска (2-3px) акцентного цвета вверху страницы под navbar или поверх него. Её ширина растёт от 0% до 100% по мере скролла всей страницы. Реализуется на window.scroll: ширина = (scrollTop / (scrollHeight — clientHeight)) × 100%. Даёт пользователю интуитивное понимание, сколько ещё контента впереди.
9. Скелетон при загрузке + плавный fade-in
До загрузки контента вместо пустых блоков отображаются серые прямоугольники-плейсхолдеры с лёгкой «волной» (shimmer-эффект через linear-gradient + animation). Когда контент готов — он плавно проявляется через opacity 0→1 за 0.3-0.5 сек. Это убирает ощущение «лагающего» сайта и воспринимается как премиум-приложение.
🎨 ВИЗУАЛЬНЫЙ ДИЗАЙН И ПРЕМИУМ ЭФФЕКТЫ
10. 3D-параллакс мокап лендинга в Hero
Изображение iPhone или MacBook с превью результата, повёрнутое в перспективе (transform: perspective(1000px) rotateY(-15deg) rotateX(5deg)). При скролле мокап смещается медленнее, чем основной контент (parallax со скоростью 0.5-0.7). Это создаёт ощущение, что устройство «парит» в пространстве. Сразу демонстрирует конечный результат, что повышает доверие.
11. Анимированные градиентные blob’ы на фонах секций
Большие размытые цветные пятна (blur 80-120px) в углах секций, медленно двигающиеся по эллиптической траектории через transform: translate с animation 20-30 сек. Цвета — фирменные #04CBC3 и #4E3AFF с прозрачностью 30-50%. «Дышат» через scale 1 → 1.2 → 1. Дают визуальную глубину без перегрузки контента.
12. Conic-gradient анимированные обводки CTA
По периметру кнопки бежит радужный градиент (background: conic-gradient), вращающийся через animation. Внутри — обычный фон кнопки, оставляющий тонкую (1-2px) светящуюся рамку. На hover скорость вращения увеличивается. Это «вау»-приём, который выглядит как neon-border дорогого сайта.
13. Текстовая reveal-анимация для H1
Каждое слово в заголовке появляется отдельно с задержкой 0.15 сек, переходя от blur(10px) и opacity 0 к blur(0) и opacity 1 за 0.6 сек. Реализуется через split-text JS-библиотеку или span’ы для каждого слова. Эффект кинематографического титра — создаёт сильное первое впечатление.
14. Number-counter анимация
При появлении цифры в viewport (через IntersectionObserver) она начинает крутиться от 0 до целевого значения за 1.5-2 сек с easing. Например, «1247 покупателей» — цифры быстро перебираются 0 → 1247. Запоминается лучше статичных, добавляет динамики секции с социальными доказательствами.
15. SVG-линии-коннекторы в блоке «Как это работает»
Между шагами 1→2→3 идут пунктирные SVG-линии, а по ним движется светящаяся точка (animateMotion вдоль path). Линии могут быть с лёгким изгибом — это смотрится живее, чем прямые. Визуализирует последовательность процесса, помогает «вести» взгляд через секцию.
16. Hover-эффект «магнитная кнопка»
При приближении курсора кнопка слегка смещается в его сторону (3-8px), будто притягивается магнитом. Реализуется через JS: вычисляется позиция курсора относительно центра кнопки, и применяется transform: translate. При уходе курсора кнопка плавно возвращается. Любимая фишка Awwwards-сайтов.
17. Glow-particles
В Hero парят 20-40 мелких светящихся точек (2-4px) с box-shadow того же цвета. Они медленно двигаются по случайным траекториям, мерцают через opacity-анимацию. Реализуется через Canvas или абсолютно позиционированные div’ы с keyframes. Создаёт эффект «звёздного неба» — стиль Linear.app.
18. Image-mask reveal
Картинки появляются не через простой fade, а через изменение clip-path: inset(100% 0 0 0) → inset(0 0 0 0) за 0.8 сек. Визуально это выглядит как «штора открывается» сверху вниз или сбоку. Триггер — попадание в viewport. Премиум-приём, заменяющий банальный fade-in.
19. Light-leak эффект
Через карточки периодически (каждые 5-10 сек) проходит диагональный белый блик-полоса с blur и низкой прозрачностью. Реализуется через ::before с linear-gradient и animation translateX от -100% до 200%. Эффект «киноплёнки» или дорогого глянцевого материала.
20. Grain animation
На фон накладывается шумовая текстура (SVG noise или PNG), которая периодически (1-2 fps) меняется на другую версию или сдвигается. Это создаёт ощущение «живой плёнки», свойственное аналоговому фото. Opacity текстуры — 3-7%, чтобы не мешать чтению.
21. Mesh-gradient вместо плоских фонов
Вместо однотонного фона или линейного градиента используется «mesh» — несколько размытых цветовых пятен, наложенных друг на друга (radial-gradient в 3-5 точках). Это даёт сложный, многомерный фон, как на новых сайтах Stripe и Vercel. Воспринимается дорого и современно.
22. Иконки с glow-эффектом
SVG-иконки в карточках имеют тонкий цветной ореол через filter: drop-shadow(0 0 8px #04CBC3). Создаётся ощущение, что иконка светится изнутри. Особенно красиво на тёмных фонах. На hover свечение усиливается до 16px.
23. Эмодзи-иллюстрации крупного размера в Bento-Grid
В карточках вместо мелких иконок используются крупные эмодзи (60-80px) — 🚀, 💡, ⚡, 🎯. Они задают эмоциональный ритм и распознаются мгновенно. Дешевле кастомных иллюстраций, но смотрятся «по-человечески» — стиль Notion и современных SaaS-лендингов.
24. Glassmorphism двух уровней
Карточки в тёмных секциях имеют backdrop-filter: blur(20px) с белой прозрачной заливкой rgba(255,255,255,0.05) — выглядят как «матовое стекло». В светлых градиентных секциях те же карточки получают тёмную полупрозрачную заливку. Это создаёт контрастную, но единую визуальную систему.
25. Noise-текстура на фоне
Тонкий слой шума (SVG-фильтр feTurbulence или PNG-текстура) на всех фонах с opacity 3-5%. Глазом почти не считывается, но убирает ощущение «плоской CSS-заливки». Это любимый трюк дизайнеров Apple — добавляет тактильность и премиальность.
26. Светящиеся бордеры карточек на hover
По периметру карточки на hover бежит градиентная анимированная обводка через conic-gradient + mask. Внутри карточка получает лёгкий glow того же цвета. Эффект «выделения» элемента — как будто пользователь «активировал» карточку.
27. Spotlight-эффект в Hero
За курсором мыши следует круглое размытое световое пятно (radial-gradient с прозрачностью). Реализуется через JS, который обновляет CSS-переменные —x, —y на mousemove, а ::before элемент использует их в radial-gradient. Эффект «подсветки фонариком» — премиальный приём с сайта GitHub.
28. Marquee-лента после Hero
Бесконечно бегущая горизонтальная лента с фразами/иконками/логотипами. Реализуется через дублирование контента + animation translateX. Скорость медленная (30-60 сек на цикл). Может содержать преимущества, метрики, или логотипы клиентов. Создаёт динамику и заполняет «мёртвое» пространство между секциями.
29. Декоративные элементы (линии и blobs)
Между секциями — тонкие горизонтальные линии с градиентом (от прозрачного к акцентному цвету и обратно). По углам секций — крупные размытые абстрактные фигуры с blur 60-100px. Это «связки» между блоками, делающие лендинг визуально цельным.
30. Кастомный курсор-точка на десктопе
Стандартный курсор скрывается (cursor: none), вместо него — мелкая точка (8-12px) и второй элемент-кольцо (32-40px), которое следует за точкой с задержкой через JS + lerp. На hover по кликабельным элементам кольцо увеличивается и становится цветным. Только на десктопе, отключается на мобильных.
31. Smooth-scroll с easing
Браузерный smooth-scroll заменяется на JS-реализацию (например, через requestAnimationFrame + lerp), где скролл имеет инерцию и плавное замедление. Это похоже на скролл в нативных приложениях iOS. Особенно заметно при использовании колеса мыши и кликах по якорным ссылкам.
32. Кастомный скроллбар в премиум-цветах
Стандартная серая полоса скролла стилизуется через ::-webkit-scrollbar: тонкая (6-8px), с акцентным цветом и закруглёнными углами. Трек — полупрозрачный, thumb — фирменный. Мелочь, но добавляет ощущение «продуманности до пикселя».
⭐ ПРЕМИУМ ФИЧИ «ВАУ-УРОВНЯ»
33. WebGL-фон в Hero
Через Three.js или vanilla WebGL рендерится анимированная 3D-сцена: сетка частиц, реагирующих на курсор, или жидкостный шейдер с переливами фирменных цветов. Это не картинка, а живая графика, выполняемая на GPU. Это уровень apple.com и stripe.com. Требует оптимизации, чтобы не «грузить» слабые устройства.
34. SVG-illustrations вместо стоковых картинок
Кастомные изометрические иллюстрации (3D-объекты, нарисованные в плоской перспективе) в фирменных цветах. Стиль Stripe/Linear: чистые формы, тонкие линии, акценты-градиенты. Подчёркивают индивидуальность бренда и стоят дороже стоковых фото, но окупаются доверием.
35. Лоадер при первом заходе
Первые 1-1.5 сек показывается полноэкранный экран с логотипом Академии-Продаж по центру и тонкой progress-полосой под ним. После загрузки лоадер плавно «уходит» (translateY -100% или scale + fade). Создаёт ритуал «открытия» сайта, ассоциируется с премиальными приложениями.
36. Кастомные курсоры разных типов
На ссылках — стрелка превращается в кольцо с подписью «click». На картинках — становится крупным кругом со словом «view». На текстовых блоках — превращается в текстовую I-beam с другим стилем. Реализуется через JS-смену классов на :hover разных элементов.
37. Smooth Lenis-style scroll на чистом JS
Скролл с настоящей инерцией: при остановке прокрутки страница ещё немного «доезжает» с замедлением. Реализуется через requestAnimationFrame и интерполяцию. В отличие от scroll-behavior: smooth, чувствуется как нативное мобильное приложение на iOS.
38. Page-transition animations
Между лендингом и страницами Политики/Оферты переход не «мгновенный» (как при стандартном переходе), а анимированный: текущая страница уходит (например, fade-out + слегка scale), потом fade-in новой. Реализуется через View Transitions API или JS-роутер с overlay. Уровень одностраничных премиум-сайтов.
🔧 ТЕХНИЧЕСКИЕ УЛУЧШЕНИЯ
39. Preload критичных шрифтов и hero-картинки
В <head> добавляются теги <link rel="preload"> для шрифтов формата woff2 и главной картинки Hero. Браузер загружает их параллельно с парсингом HTML, до того как они понадобятся. Это устраняет FOIT/FOUT (мерцание шрифтов) и ускоряет LCP-метрику в Core Web Vitals.
40. Lazy-load для всех картинок ниже первого экрана
Все <img> после Hero получают атрибут loading=»lazy». Браузер не загружает их, пока они не приблизятся к viewport. Это экономит трафик, ускоряет первую загрузку и улучшает PageSpeed. Для фоновых картинок используется IntersectionObserver.
41. CSS clamp() для типографики
Размер шрифта задаётся через clamp(min, preferred, max) — например, font-size: clamp(2rem, 5vw, 4rem). Это значит: на мобильных 2rem, на десктопе 4rem, а между — плавно масштабируется по ширине окна. Исключает резкие «скачки» при медиа-запросах и убирает кучу breakpoint’ов.
42. prefers-reduced-motion
В CSS добавляется медиа-запрос @media (prefers-reduced-motion: reduce), в котором все анимации сокращаются до 0.01ms или заменяются на статичные состояния. Это для людей с вестибулярными нарушениями и пользователей, отключивших анимации в настройках ОС. Требование WCAG.
43. Accessibility: aria-label, role, фокус-стили
Все интерактивные элементы получают aria-label (для скринридеров), role (если нестандартный элемент используется как кнопка), и видимый фокус-outline (цветная рамка при навигации клавиатурой). Это открывает сайт для людей с инвалидностью и поднимает SEO-рейтинг.
44. SEO-блок (Schema.org, мета-теги)
В <head> добавляются JSON-LD скрипты со структурированными данными типа Product (с ценой и рейтингом) и FAQPage (с вопросами и ответами). Это даёт расширенные сниппеты в Google: цена, звёзды, развёрнутые вопросы прямо в выдаче. Конкретное конкурентное преимущество в SERP.
45. Favicon в нескольких размерах + manifest.json
Создаются favicon разных размеров (16, 32, 48, 96, 192, 512 px), apple-touch-icon (180×180), и manifest.json с цветами темы. Это нужно для красивого отображения иконки во вкладке, на главном экране смартфона при «Добавить на главный экран», а также делает сайт PWA-ready.
46. Open Graph и Twitter Card
В <head> добавляются мета-теги og:title, og:description, og:image (1200×630), twitter:card. При шеринге ссылки в Telegram, ВКонтакте, WhatsApp, Twitter показывается красивая карточка с картинкой и описанием вместо «голой» ссылки. Конверсия из социальных сетей растёт в разы.
🧠 ПСИХОЛОГИЯ ПРОДАЖ
47. Pain-points блок «Знакомо?»
Отдельная секция с заголовком-вопросом и 3-4 карточками с конкретными болями: «Студия просит 100 000 ₽ и 2 недели», «Конструкторы дают шаблонный дизайн», «Курсы на 40 уроков с водой». Каждая боль — с иконкой и коротким описанием. Это резонанс перед решением — человек узнаёт себя и готовится воспринимать продукт как спасение.
48. Сравнительная таблица
4 колонки: «Наша инструкция», «Дизайн-студия», «Конструктор», «Курс». Строки: «Цена», «Время», «Уникальность», «Результат», «Поддержка». В нашей колонке — чек-маркеры #04CBC3, в остальных — крестики или ограничения. Это убойный конверсионный элемент — наглядно показывает превосходство.
49. Блок «Что вы НЕ получите»
Парадоксальный приём: вместо стандартного «Что входит» — отдельная секция с «анти-обещаниями»: «Не получите 50 часов видео с водой», «Не получите устаревшие промты 2022 года», «Не получите подписку с ежемесячными списаниями». Снимает страхи и повышает доверие, потому что показывает понимание реальных опасений клиента.
50. Микро-обещание под H1
Прямо под главным заголовком — одна строка с конкретным результатом: «Уже через 30 минут вы увидите готовый лендинг на своём домене». Это якорь конкретики: не размытое «улучшите бизнес», а четкое время + результат + ваше владение. Превращает абстрактное предложение в осязаемое.
51. Якорные цифры в Hero
Три-четыре крупные карточки с фирменным градиентом: «30 мин ⏱️», «0 ₽ за дизайнера», «1 промт → готовый сайт». Цифры огромные (60-100px), описание мелкое. Конкретика бьёт лучше прилагательных: «быстро» — пусто, «30 минут» — работает.
52. Highlight-эффект на ключевых словах
В абзацах текста ключевые фразы («за 30 минут», «0 рублей», «без дизайнера») выделяются полупрозрачным «маркером» — фоновым прямоугольником с цветом rgba(#04CBC3, 0.2) и небольшим закруглением. Глаз сразу выхватывает суть из больших блоков текста — как будто человек уже отметил важное в книге.
53. Эмоциональный finalCTA
Перед футером — секция с крупным эмоциональным текстом: «Сегодня вы сидите без лендинга. Завтра у вас могут быть первые заявки. Решение — один клик». Контраст текущего состояния и желаемого + минимальное усилие. Эмоция продаёт сильнее, чем логика — это последний шанс закрыть сделку.
54. Чек-маркеры перед перечислениями
Вместо обычных bullet-точек — иконка галочки в круге фирменного цвета #04CBC3 (12-16px). Используется во всех списках преимуществ и состава продукта. Визуально это «уже подтверждённые пункты», что психологически приближает покупку к завершённой сделке.
✨ МИКРОВЗАИМОДЕЙСТВИЯ И UX
55. Confetti-эффект при нажатии на CTA
В момент клика на главную кнопку из неё «вырываются» десятки разноцветных конфетти-частиц, разлетающихся в стороны и падающих с гравитацией. Реализуется через canvas-confetti.js или собственный canvas. Длится 1-2 сек. Это праздничный feedback, делающий покупку приятным событием.
56. Звук клика на CTA
При нажатии на главную кнопку проигрывается короткий (50-100 мс) тихий звук — мягкий «pop» или «click» с громкостью 20-30%. В углу страницы — небольшая иконка-тумблер «🔊 / 🔇» для отключения. Используется Web Audio API или просто <audio>. Звук должен быть приятным, не дешёвым — это деталь, делающая сайт похожим на премиум-приложение.
57. Tooltip’ы на сложных терминах
Слова «хостинг», «домен», «промт» подчёркнуты тонкой пунктирной линией. При наведении (или тапе на мобильных) появляется небольшая всплывающая подсказка с кратким объяснением в 1-2 предложения. Реализуется через <abbr title> или кастомный JS-компонент. Снижает порог входа для новичков, не перегружая текст объяснениями.
58. Анимированная замена слов в H1
Часть заголовка содержит динамическое слово: «лендинг для бизнеса / для услуг / для эксперта / для онлайн-курса». Каждые 2-3 сек слово меняется с эффектом typewriter (буква стирается, потом печатается новая). Это бьёт в разные аудитории одновременно — каждый посетитель найдёт «свой» вариант и почувствует, что лендинг про него.
59. Hover-preview на карточках отзывов
При наведении на карточку отзыва фото автора слегка увеличивается (scale 1.05), карточка приподнимается через box-shadow, а если текст был обрезан — появляется полная версия с плавным height-расширением. Эффект «исследования» — пользователь сам управляет глубиной погружения в контент.
📱 МОБИЛЬНАЯ ОПТИМИЗАЦИЯ
60. Pull-to-refresh кастомный
При свайпе вниз на верху страницы появляется не браузерный спиннер, а кастомная анимация в фирменных цветах: вращающийся логотип Академии-Продаж или фирменная graphic. Реализуется через JS на touchstart/touchmove. Перехватывает стандартное поведение и делает обновление страницы брендированным моментом.
61. Свайп-навигация по блокам
На мобильных пользователь может свайпом перейти между секциями: вертикальный свайп с CSS scroll-snap-type: y mandatory + scroll-snap-align: start на каждой секции. Прокрутка «защёлкивается» на границах блоков, не позволяя застрять посередине. Это нативный паттерн TikTok/Reels, привычный пользователю.
62. Уменьшенный bento-grid на мобильных
На десктопе bento-grid имеет карточки разных размеров (2×1, 1×1, 1×2), но на мобильных все карточки выстраиваются в одну колонку с увеличенными иконками/эмодзи (для компенсации потери визуальной иерархии). CSS grid через media-queries переключает grid-template на 1fr. Сохраняет «вау-эффект» и на маленьких экранах.
63. Большие тап-зоны
Все кликабельные элементы (кнопки, ссылки, иконки соцсетей, чекбоксы) имеют минимальный размер 48×48 px (рекомендация Material Design и Apple HIG). Если визуально элемент меньше — добавляется невидимый padding или ::after с inset, расширяющий область клика. Это сокращает промахи и фрустрацию на мобильных.
64. Адаптивные изображения через <picture>
Вместо простого <img> используется <picture> с <source> для разных форматов (avif → webp → jpg) и разных размеров (через srcset и sizes). Браузер сам выбирает оптимальный вариант под устройство и connection. Это экономит до 70% веса картинок на мобильных и ускоряет загрузку.
🔒 ДОВЕРИЕ И ПРАВО
65. Иконки платёжных систем в блоке «Получить»
Под кнопкой оплаты — горизонтальный ряд цветных или монохромных иконок: Visa, MasterCard, МИР, СБП, и подпись «Безопасный платёж • Защита покупателя». Размер иконок 28-36 px, выровнены по центру. Это убирает финальные страхи перед оплатой — пользователь видит знакомые логотипы и понимает, что транзакция привычная.
66. Контакты поддержки перед CTA
За 2-3 секции до главной кнопки оплаты — небольшой плашка-блок: «Возникли вопросы? Напишите в Telegram — отвечаем за 5 минут» с кнопкой-ссылкой на чат. Иконка Telegram, мягкий фон. Это снимает возражение «а вдруг не разберусь» и показывает «живых людей» за продуктом — резко повышает доверие.
67. Иконка SSL-замочка рядом с ценой
Рядом с ценой или кнопкой оплаты — маленький закрытый замочек 🔒 (SVG, фирменного цвета) и подпись «Защищённое соединение» мелким шрифтом. Это якорь безопасности — пользователь интуитивно ассоциирует замочек с надёжностью (он есть в адресной строке браузера). Деталь, но работает на подкорке.
68. Блок «Кому НЕ подойдёт»
Отдельная секция (после «Кому подойдёт») с 3-4 пунктами честных ограничений: «Если вы хотите супер-сложный сайт с админкой», «Если у вас нет доступа к ChatGPT», «Если вы не готовы потратить 30 минут». Парадоксально повышает доверие — пользователь видит честность и понимает, что ему не «впаривают». Снижает количество возвратов.
🍱 СПЕЦИАЛЬНЫЕ ТРЕБОВАНИЯ (Bento-Grid, Aurora, Progress)
69. Bento-Grid в блоке «Что вы получите»
Вместо ровной сетки 3×2 — асимметричная композиция в стиле Apple/Vercel/Linear: одна крупная карточка 2×1 (главная фича), четыре обычные карточки 1×1, и одна высокая 1×2 (для длинного описания или иллюстрации). Реализуется через CSS Grid с grid-column/grid-row span. Создаёт визуальную иерархию — глаз сначала «цепляется» за большую карточку, потом сканирует остальные. Каждая карточка с уникальной эмодзи-иллюстрацией и Glassmorphism. Этот паттерн стал стандартом премиум-сайтов в 2024-2025 годах.
70. Aurora / Beams фон в Hero
В Hero — слой с медленно движущимися диагональными лучами света фирменных цветов (#04CBC3 и #4E3AFF), реализованный через CSS @keyframes + сильный blur (60-100px). Лучи — это несколько элементов с linear-gradient под углом 30-45°, анимированно перемещающихся через translateX и поворачивающихся через rotate. Создаёт эффект «северного сияния» — визуально намекает на «технологичность» и «будущее». Этот эффект популяризировали лендинги Aceternity UI и Linear.
71. Прогресс-индикатор «Сколько вы уже прочитали»
В дополнение к верхнему breadcrumb — на десктопе справа фиксируется тонкая вертикальная линия (1-2 px шириной, высотой 60-70% viewport) с точками-якорями каждой секции (Hero → Боли → Решение → Что входит → Цена → FAQ). Текущая секция помечена увеличенной светящейся точкой, пройденные — заполненной частью линии. При клике на точку — плавный скролл к нужной секции. Это паттерн Medium и премиум longread-сайтов — даёт пользователю карту контента и контроль над навигацией, снижая bounce rate.