AlekseiUL Landing Builder
name: landing-builder description: Генератор одностраничных HTML лендингов с продающими текстами. Triggers: "создай лендинг", "сделай landing page", "лендинг для", "landing builder", "одностраничник", "посадочная страница".
Обзор
Скилл создает готовые адаптивные HTML лендинги на Tailwind CSS.
Агент проводит онбординг, подбирает блоки, генерирует HTML через write tool.
Результат - файл, который открывается в браузере без сборки.
Тип: Workflow
Шаг 1. Онбординг (3 вопроса)
Задай пользователю ТРИ вопроса. Не начинай генерацию без ответов.
1. Что за продукт/сервис? (кратко: название, суть, ключевая ценность)
2. Кто целевая аудитория? (кому продаем, какая боль)
3. Какое целевое действие (CTA)? (купить, записаться, скачать, подписаться)
Если пользователь ответил одним сообщением на все три - ок, разбери сам. Если ответ неполный - переспроси ТОЛЬКО недостающее.
Шаг 2. Выбор блоков
Прочитай references/marketing-blocks.md - там каталог блоков лендинга с описанием и рекомендациями.
Подбери 5-8 блоков под конкретный продукт и аудиторию:
Обязательные блоки (всегда включать):
- Hero (заголовок + подзаголовок + CTA)
- Features/Benefits (3-6 штук)
- CTA-секция (финальный призыв)
- Footer (контакты, копирайт)
Опциональные (по ситуации):
- Social Proof (отзывы, логотипы клиентов, цифры)
- Pricing (тарифы, сравнение)
- FAQ (частые вопросы)
- How It Works (шаги, процесс)
- Pain/Problem (описание боли - для PAS фреймворка)
- About/Team (о компании, если важно для доверия)
- Lead Magnet (бесплатный материал за email)
- Video/Demo (секция с видео или скриншотами)
Для каждого блока напиши тексты по фреймворку из marketing-blocks.md.
Шаг 3. Генерация HTML
Сгенерируй ОДИН HTML файл через write tool. Путь: {{WORKSPACE_PATH}}projects/landing-builder/result/landing.html (или путь указанный пользователем).
Технические требования:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{Название продукта}</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Кастомные стили если нужно */
</style>
</head>
<body>
<!-- Блоки лендинга -->
</body>
</html>
Правила генерации:
- Tailwind CSS через CDN (
cdn.tailwindcss.com) - никаких npm/установок - Mobile-first:
sm:,md:,lg:брейкпоинты - Современный дизайн: градиенты, тени, скругления, spacing
- Шрифт: системный стек (
font-sansв Tailwind) - Цветовая схема: подбирай под тип продукта (tech - синий/фиолетовый, здоровье - зелёный, премиум - тёмный/золотой). Можно уточнить у пользователя
- Плейсхолдеры для изображений:
https://placehold.co/600x400?text=Product - Якорные ссылки в навигации:
href="#features",href="#pricing" - Smooth scroll:
scroll-behavior: smoothв<html> - Кнопки CTA: контрастные, крупные, с hover-эффектом
- Иконки: emoji или SVG inline (без внешних библиотек)
- Никаких JS-фреймворков. Ванильный JS только для интерактива (мобильное меню, скролл)
- Весь контент внутри HTML (не подгружать из внешних источников)
- Минимум 5 секций, максимум 12
Шаг 4. Превью и правки
После генерации:
- Сообщи пользователю путь к файлу
- Предложи открыть превью (если есть browser tool - используй)
- Спроси: "Что поправить?" Варианты:
- Тексты (заголовки, описания, CTA)
- Цвета/стиль
- Добавить/убрать блоки
- Поменять порядок блоков
Правки вноси через edit tool (точечно), НЕ перегенерируй весь файл.
Максимум 3 раунда правок, потом предложи финализировать.
Примеры использования
Пример 1: SaaS продукт
Пользователь: Сделай лендинг для TaskFlow - это таск-менеджер для удалёнщиков
Агент: Три вопроса для лендинга:
1. Что за продукт? → TaskFlow, таск-менеджер. Какая ключевая ценность?
2. Целевая аудитория? → Удалёнщики. Какая главная боль?
3. CTA? → Что должен сделать посетитель?
Пользователь: TaskFlow помогает удалёнщикам не тонуть в задачах.
Боль - хаос в задачах между Slack, почтой и заметками.
CTA - начать бесплатно (14 дней триал).
Агент:
- Читает marketing-blocks.md
- Выбирает блоки: Hero, Pain, Features (6), How It Works, Pricing (2 тарифа), Testimonials, FAQ, CTA
- Генерирует HTML (синий/индиго палитра, tech-стиль)
- Сохраняет файл, показывает превью
Пример 2: Инфопродукт
Пользователь: Лендинг для курса "AI для маркетолога"
Агент: Три вопроса...
Пользователь: Курс для маркетологов которые хотят использовать AI.
Боль - конкуренты уже используют, а ты нет.
CTA - записаться на вебинар (бесплатный).
Агент:
- Выбирает блоки: Hero, Pain/FOMO, Benefits (не features), Social Proof (цифры учеников), Program, Author, Lead Magnet, CTA
- Генерирует HTML (тёмная тема, акцент фиолетовый - AI вайб)
- Фреймворк PAS для текстов (Pain → Agitate → Solution)
Ограничения
- Только статика. Нет бэкенда, баз данных, серверной логики. Формы без обработки (action="#")
- Только один HTML файл. Без отдельных CSS/JS файлов, без сборки
- Плейсхолдеры вместо реальных фото. Пользователь заменяет сам
- Тексты - черновик. Продающие, но требуют проверки фактов пользователем
- Не e-commerce. Нет корзины, оплаты, каталога товаров. Только посадочные страницы
- CDN зависимость. Tailwind грузится из интернета. Оффлайн не работает
- Без аналитики. Google Analytics / Pixel - пользователь добавляет сам
- Максимум 12 секций. Больше - лендинг теряет фокус
Чеклист качества (перед отдачей)
- HTML валиден (закрыты все теги)
- Tailwind CDN подключен
-
<meta viewport>есть - Mobile-responsive (проверить sm/md/lg)
- Все CTA-кнопки ведут на якорь или #
- Нет битых ссылок
- Тексты без Lorem ipsum
- Контрастность текста читаема
-
<title>заполнен - Файл < 100KB
Файлы
| Файл | Назначение |
|---|---|
references/marketing-blocks.md |
Каталог маркетинговых блоков, фреймворки текстов (PAS, AIDA) |