Создание продающего лендинга для рекламной кампании с помощью ИИ — это процесс, где 80% успеха зависит от правильного маркетингового брифа и структуры, и только 20% от самого кода. Под «Claude Code» обычно понимают использование кодерских возможностей Claude через интерфейс Claude.ai с функцией Artifacts либо через IDE на базе ИИ, такие как Cursor или Windsurf. Ниже — пошаговая инструкция, как собрать быстрый, конверсионный и готовый к аналитике лендинг. Шаг 1
Прежде чем просить Claude написать HTML/CSS, нужно сформировать маркетинговый каркас. Лендинг для рекламы должен бить точно в «боль» аудитории и соответствовать тексту объявления (Message Match).
Действуй как эксперт по конверсионным лендингам и прямой реакции. Я запускаю рекламную кампанию в [Яндекс.Директ / Telegram Ads / VK].
Продукт: [Описание продукта, например, онлайн-курс по нейросетям для маркетологов].
Целевая аудитория: [Например, маркетологи 25-40 лет, которые боятся выгорания и хотят автоматизировать рутину].
Главный оффер: [Например, "Освой AI-инструменты за 4 недели и верни себе 10 часов в неделю"].
Цена и условия: [Например, 15 000 руб., рассрочка, гарантия возврата].
Напиши подробную структуру лендинга (блок за блоком) с заголовками (H1, H2), текстами, идеями для визуала и формулировками CTA (кнопок). Используй формулу AIDA или PAS. Тексты должны быть без "воды", с триггерами, закрывающими возражения.
💡 Совет: После того как Claude выдаст структуру и тексты, утвердите их или попросите докрутить. Только после этого переходите к коду.
Для рекламных лендингов, где важна скорость загрузки и быстрые итерации, не нужно использовать тяжелые фреймворки вроде React/Next.js, если у вас нет сложной логики.
✅ Идеальный стек: HTML5 + Tailwind CSS (через CDN) + Alpine.js (для интерактива).
Это позволит получить один файл index.html, который грузится мгновенно и легко деплоится.
Не просите Claude написать весь лендинг одним промптом — он может оборвать код или сделать его слишком общим. Разбейте задачу на блоки.
Напиши код первого экрана (Hero section) для лендинга.
Стек: Один HTML файл, используй Tailwind CSS через CDN.
Дизайн: Современный, минималистичный, темная тема (или светлая), акцентный цвет [например, неоново-зеленый #00FF99] для кнопок CTA.
Контент: [Вставь H1, подзаголовок и текст кнопки из Шага 1].
Требования:
1. Полная адаптивность (Mobile First).
2. Слева текст, справа — плейсхолдер под изображение/видео (используй div с градиентом и подписью "Место для видео").
3. Кнопка CTA должна иметь эффект hover (свечение или подъем).
4. Добавь "социальное доказательство" под кнопкой (например, "Уже 500+ маркетологов прошли курс").
Продолжи код лендинга. Добавь секцию "Проблемы" (3 карточки с иконками SVG) и секцию "Как мы это решаем" (шаги 1-2-3).
Используй сетку Tailwind (grid-cols-1 md:grid-cols-3).
Иконки сгенерируй в виде инлайн SVG (простые, линейные).
Контент бери из утвержденной структуры. Сделай плавное появление блоков при скролле (используй простой IntersectionObserver на Vanilla JS).
Напиши секцию с формой захвата (Лид-магнит / Заявка).
Поля: Имя, Телефон/Telegram, [Специфичное поле].
Дизайн формы: стеклянный эффект (glassmorphism) или четкие границы, крупная контрастная кнопка "Получить доступ".
Под формой добавь чекбокс согласия на обработку персональных данных.
В футере укажи реквизиты (плейсхолдеры) и ссылки на политику конфиденциальности.
Лендинг для рекламы бесполезен без аналитики и передачи UTM-меток. Попросите Claude написать JS-скрипты.
Напиши Vanilla JS скрипт, который:
1. При загрузке страницы считывает UTM-метки из URL (utm_source, utm_medium, utm_campaign, utm_content, utm_term).
2. Сохраняет их в скрытые поля формы при отправке заявки.
3. Отправляет данные формы через fetch POST-запрос на webhook (оставь переменную WEBHOOK_URL).
4. Показывает пользователю красивое модальное окно (modal) с благодарностью вместо перезагрузки страницы.
5. Добавь код для инициализации Яндекс.Метрики и Google Analytics (GA4) с подстановкой ID (оставь плейсхолдеры).
Если вы используете Cursor или Claude Code (CLI):
<img> на использование <picture> с форматами AVIF/WebP для ускорения загрузки, или используй CSS-градиенты и SVG-паттерны вместо картинок».<link rel="preload"> или использовать системные шрифты (System UI), чтобы не терять скорость загрузки (Core Web Vitals), что критично для снижения стоимости клика в рекламе.Вам не нужен сервер. Лендинг — это статика.
index.html на GitHub.your-landing.vercel.app.Когда лендинг собран, используйте Claude для генерации гипотез.
«У меня есть текущий H1: [Текст]. Напиши 5 альтернативных вариантов H1 по разным психологическим триггерам: 1. Страх упущенной выгоды (FOMO), 2. Любопытство, 3. Жадность/Выгода, 4. Статус. Чтобы я мог сделать А/Б тест в рекламе.»
«Проанализируй мой оффер. Какие 5 скрытых возражений может возникнуть у клиента при цене [Х рублей]? Напиши для каждого возражения блок FAQ (вопрос-ответ), который я вставлю в лендинг.»
«Сделай из этого лендинга квиз. Напиши JS-код на Alpine.js, который будет показывать вопросы по шагам, а в конце выдавать расчет стоимости и просить оставить телефон.»