# Landing Builder
> Landing Builder
- Skill: `alekseiul/landing-builder` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add alekseiul/landing-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/alekseiul/landing-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: AlekseiUL (https://skillmd.com/u/alekseiul)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/alekseiul/landing-builder
---
# 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` (или путь указанный пользователем).
**Технические требования:**
```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` в ``
- Кнопки CTA: контрастные, крупные, с hover-эффектом
- Иконки: emoji или SVG inline (без внешних библиотек)
- Никаких JS-фреймворков. Ванильный JS только для интерактива (мобильное меню, скролл)
- Весь контент внутри HTML (не подгружать из внешних источников)
- Минимум 5 секций, максимум 12
### Шаг 4. Превью и правки
После генерации:
1. Сообщи пользователю путь к файлу
2. Предложи открыть превью (если есть browser tool - используй)
3. Спроси: "Что поправить?" Варианты:
- Тексты (заголовки, описания, 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 подключен
- [ ] `` есть
- [ ] Mobile-responsive (проверить sm/md/lg)
- [ ] Все CTA-кнопки ведут на якорь или #
- [ ] Нет битых ссылок
- [ ] Тексты без Lorem ipsum
- [ ] Контрастность текста читаема
- [ ] `` заполнен
- [ ] Файл < 100KB
---
## Файлы
| Файл | Назначение |
|------|-----------|
| `references/marketing-blocks.md` | Каталог маркетинговых блоков, фреймворки текстов (PAS, AIDA) |