Skill: Landing Autopilot Pro

Когда использовать

• Нужно быстро сделать новый лендинг под конкретную компанию/оффер.
• Нужен production-ready результат без долгих уточнений.
• Важно не спорить о процессе, а стабильно выдавать сильный дизайн и конверсию.

Цель

Сделать лендинг уровня senior UI/UX + frontend за 1 итерацию с минимальным количеством вопросов и с гарантированным quality gate.

P0: Frontend AI Quality Gate

Перед Discovery и реализацией обязательно использовать skill-frontend-ai-quality-gate.

Для premium/public landing также обязательно использовать skill-designcorp-visual-doctrine в Premium Landing Mode. skill-designer-core не является style source для лендингов.

Жёсткий порядок для новых лендингов:

1. Собрать реальные референсы.
2. Создать/обновить PRODUCT.md.
3. Создать/обновить DESIGN.md до кода.
4. Использовать Impeccable для shape/critique/harden, если он доступен.
5. Проверить screenshots 1440 + 390 без horizontal overflow.
6. Для русского текста использовать ru-text.

Режим работы (без лишних вопросов)

1. Если нет блокера, не задавать вопросов до первой полноценной версии.
2. Сразу: референсы -> 3 направления -> выбор Recommended -> реализация.
3. Если пользователь пишет "не нравится" — сразу новая версия (без защиты старого решения).

P0: Обязательный Discovery

1. Собрать минимум 10 референсов по нише и типу страницы.
2. Дать 3 направления:

• Direction A: conservative conversion-first
• Direction B: balanced brand+conversion
• Direction C: bold visual

3. Для каждого направления зафиксировать:

• visual language
• layout pattern
• CTA стратегия
• риски

4. Выбрать Recommended и сразу реализовать.

P0: Обязательный каркас лендинга (Skeleton)

Использовать как дефолт для любых компаний. Менять только акценты, не базовую логику:

1. Hero (обязателен):

• 1 главный оффер
• 1 primary CTA + 1 secondary CTA
• 2 варианта hero (A/B), быстрый switch

2. Value System (обязателен):

• 4 карточки (1 доминирующая + 3 поддерживающих)
• четкая смысловая иерархия

3. Process / Execution Loop (обязателен):

• 4 шага
• короткие формулировки без воды

4. Proof (обязателен):

• 3 метрики + 1 блок доверия/цитата

5. FAQ (обязателен):

• 4 вопроса, закрывающих возражения

6. Final CTA (обязателен):

• повтор оффера
• 2 действия: primary + fallback

Preset System (обязательно)

1. Перед реализацией выбрать один preset из STYLE_PRESETS.md.
2. Если пользователь preset не указал:

• по умолчанию использовать Balanced Conversion.

3. Если пользователь просит premium, high-end, вау, конкурсный дизайн, студийный сайт, brand surface или redesign reset:

• не использовать Balanced Conversion как visual direction;
• выбрать/создать premium aesthetic lane из реальных референсов;
• Balanced Conversion можно применять только к CTA/структуре, не к визуальному стилю.

4. Применять preset целиком:

• hero-композиция
• цветовая система
• стиль карточек
• CTA-стиль
• motion-уровень

5. Не смешивать пресеты в одной версии без явной просьбы пользователя.

Контент-правила (жестко)

1. Формула по странице:

• Offer -> Proof -> Process -> FAQ -> CTA

2. У каждого блока одна функция:

• объяснить
• доказать
• снять возражение
• привести к действию

3. Никакого lorem ipsum и шаблонной "воды".
4. Тон: деловой, конкретный, без пафоса.

Визуальные правила

1. Страница должна выглядеть как цельный арт-дирекшн, а не как набор блоков.
2. Сильная типографика и ритм обязательны.
3. Визуальный контраст должен проходить 5-second clarity test.
4. Mobile и desktop одинаково качественные.

Ассеты и изображения

1. Минимум 2 визуала: hero + support.
2. Можно использовать:

• реальные фото (с указанием источника и лицензии)
• сгенерированные изображения (обязательно: prompt, negative prompt, size)

3. При замене изображений всегда использовать новый filename (антикэш).
4. Не использовать чужие бренд-ассеты 1-в-1.

Реализация в коде

1. Добавить новый route с локалями.
2. Добавить пункт в navigation desktop+mobile.
3. Добавить переводы минимум для ru/en/pl/ua.
4. Поддержать переключение hero A/B (если не попросили оставить только один).

Rapid Visual Loop (обязательно)

После первой версии быть готовым к сверхбыстрым правкам:

1. Micro-tuning (цвет, фон, радиус, бордер, opacity) — без рефакторинга.
2. Macro-tuning (hero/layout/арт-дирекшн) — за 1 итерацию.
3. На каждую правку отвечать прямым действием в коде.

Auto-Evolution Protocol (обязательно после каждого проекта)

1. Сразу после завершения проекта обновить:

• CHANGELOG.md (новая запись)
• при необходимости STYLE_PRESETS.md
• при необходимости SKILL.md (разделы DO/DON'T/TUNING)

2. Формат записи в CHANGELOG.md:

• date
• project/repo
• preset used
• what worked
• what failed
• what changed in skill
• expected impact

3. Правило изменений:

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

4. Это обязательный шаг выполнения skill, а не дополнительная опция.

Quality Gate (Definition of Done)

Задача считается завершенной только если:

1. Новый пункт меню ведет на новую страницу.
2. Страница работает во всех локалях.
3. Визуально это дизайнерский лендинг, не шаблонный набор.
4. Есть hero A/B (или оставлен один по явной просьбе пользователя).
5. Есть 2 изображения (hero/support) с источником/промптами.
6. Lint и Build проходят.

Финальный отчет (обязательный формат)

1. P0: что реализовано и почему выбран стиль.
2. P1: альтернативы и как переключить.
3. P2: изображения (источник или prompt/negative/size) + UX-check.
4. RISK: возможные просадки и как закрыты.
5. Список измененных файлов.

Правило постоянного улучшения skill

После каждого проекта фиксировать:

1. Что сработало лучше всего по конверсии/фидбеку.
2. Где было больше всего правок пользователя.
3. Что добавить в дефолтный skeleton/чек-лист.

Это не "дообучение модели", а эволюция процесса: skill становится точнее и быстрее после каждого релиза.

P1

• Основная реализация и расширение функционала после выполнения P0.

P2

• Полировка, оптимизация и необязательные улучшения.