Landing launch bundle: всё для запуска одной страницы

Действуй как ведущий копирайтер + бренд-дизайнер. Продукт: {{product}}. Аудитория: {{audience}}. Тон: {{tone}}. URL: {{url}}. Цвета: {{brand_colors}}.

Задача — собрать полный «launch bundle» для лендинга так, чтобы команда могла копировать-вставить и задеплоить без новых итераций.

Часть 1 — Hero copy (основной вариант)

Структура:

• Eyebrow (необязательно, 2-5 слов): категория или контекст
• Headline (5-9 слов): обещание исхода для пользователя, не описание фичи
• Subhead (15-25 слов): для кого, как и почему это лучше альтернатив
• Primary CTA (2-4 слова): глагол + награда (например, «Start free trial»)
• Secondary CTA (2-4 слова): низкорискованное действие («See how it works»)
• Social proof line (одна строка): «Trusted by 4 000+ teams at Stripe, Vercel, Linear»

Часть 2 — Три альтернативных hero-варианта

Каждый — другой угол:

Variant A — Outcome-led

Фокус: что пользователь получит в результате. Эмоция: облегчение / гордость.

Variant B — Problem-led

Фокус: боль до использования продукта. Эмоция: «они меня поняли».

Variant C — Contrast-led

Фокус: чем мы НЕ являемся. Эмоция: «наконец-то не как у всех».

Каждый вариант — полный набор (eyebrow, headline, subhead, CTA). Кратко (1 строка) — для кого и когда лучше тестировать этот вариант.

Часть 3 — Meta tags (готовый HTML)

<title>...</title> <!-- 50-60 chars, бренд в конце -->
<meta name="description" content="..."> <!-- 140-160 chars, активный глагол + бенефит + CTA -->
<meta name="keywords" content="..."> <!-- 5-8 фраз, в одной строке -->
<link rel="canonical" href="{{url}}">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="{{url}}">
<meta property="og:title" content="..."> <!-- может отличаться от title -->
<meta property="og:description" content="..."> <!-- ~140 chars -->
<meta property="og:image" content="{{url}}/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="...">
<meta name="twitter:description" content="...">
<meta name="twitter:image" content="{{url}}/og.png">

Часть 4 — OG image brief

Опиши изображение 1200×630, готовое к выдаче дизайнеру:

Размер: 1200 × 630 px (safe area 1200 × 600)
Формат: PNG (или WebP с фолбэком)
Палитра: {{brand_colors}}
Композиция:
  - Левая половина: headline в 1-2 строки, шрифт ___, размер ___
  - Правая половина: продукт / иллюстрация / mockup
  - Логотип: нижний левый угол, 32px height
  - Брендовая «подпись» (домен): нижний правый угол
Текст на изображении:
  - Основной: "..." (≤ 6 слов)
  - Вспомогательный (если есть): "..." (≤ 10 слов)
Атмосфера: ___ (например: «уверенно, без кричащих градиентов»)
Anti-patterns:
  - Не использовать stock-фото людей в наушниках
  - Не размещать важный текст в нижних 30px (обрезка в Slack/iMessage)

Часть 5 — Favicon brief

Источник: логотип в SVG (квадратный crop)
Размеры для генерации:
  - favicon.ico (16, 32, 48 multi)
  - icon-192.png
  - icon-512.png
  - apple-touch-icon.png (180×180)
  - safari-pinned-tab.svg (моно)
Файл manifest.json:
  - name, short_name, theme_color, background_color
Контраст: символ читаем при 16×16 на тёмной и светлой панели браузера
Anti-patterns:
  - Не использовать полный логотип (мелкий = каша)
  - Не использовать тонкие линии < 2px при 32×32

Часть 6 — Sanity checklist перед деплоем

• Title уникален, бренд в конце
• Description содержит CTA-глагол
• OG image открывается, не битый URL
• Canonical корректен (https, без trailing slash если так на сайте)
• Twitter card preview: проверить через cards-dev.twitter.com/validator
• FB OG preview: developers.facebook.com/tools/debug
• LinkedIn preview: linkedin.com/post-inspector
• Favicon отображается во всех браузерах из BrowserStack-набора
• Hero copy не превышает 50 слов всего

Anti-patterns

• ❌ Headline-фича вместо headline-исхода («AI-powered analytics platform» вместо «See where your revenue leaks»)
• ❌ CTA «Learn more» — не глагол действия, низкий CTR
• ❌ Description без бенефита («The best tool for X»)
• ❌ OG image из фотобанка с людьми «работают в open-space»
• ❌ Favicon = первая буква названия в круге (нет идентичности)
• ❌ Meta-теги без проверки в реальных превью (Slack/LinkedIn/Twitter рендерят по-разному)
• ❌ Три варианта = три почти одинаковых хедлайна (теряется ценность теста)
• ❌ Social proof без цифр или брендов («Trusted by many teams»)