Vibe Landing Kit

Гипотеза под ключ: одна фраза агенту — лендинг, A/B-тест, заявки в Telegram и реклама в Яндекс Директе. Атмосферный первый экран с картинкой или видео на всю ширину, персонаж с русской речью, заявки в Telegram, A/B-тест на одном адресе, паспорт качества и чат-бот с ИИ. 31 дизайн-систем в духе мировых брендов, 26 анимаций, 12 навыков, семантика Вордстата. Для Claude Code, ChatGPT, Claude и Cursor.

Русский · English

---

Что нового

• Правки из чата. «Замени картинку в варианте Б», «поправь цену в обоих» — агент правит живую страницу кусками: картинки, видео, озвучку, тексты и блоки. Сломанная правка не сохранится, «верни как было» — шаг назад.
• Консультант с ИИ под бренд. Логотип в шапке, лицо консультанта, цвета стиля, напоминание у кнопки, быстрые вопросы, сбор контакта — одинаково в обоих вариантах.
• 31 дизайн-система. Новые: «Вайб-Маркетолог · Русский код» (без госсимволики, по-русски) и стиль нашего партнёра eLama.
• Честный A/B. План теста закрепляется при запуске, победителя объявляет сервер только по плану; с Битрикс24 — продажи по вариантам.
• Директ до показов. Черновик → модерация с предохранителем → проверка в самом Директе → старт только после вашего «да».
• Одной фразой. Напишите агенту, что продаёте, что сравнить и сколько готовы потратить, — остальное он сделает сам. Дневной лимит подключения — 2 500 ₽, меняется на lk.vibemarketolog.ru/agent.

Одна команда

/plugin marketplace add vibemarketologru/vibe-landing-kit
/plugin install vibe-landing@vibe-landing-kit
/landing Пластиковые окна в Москве. Гипотеза: «цена из договора» против «от 9 900 ₽». Стиль швейцарский

Агент пройдёт весь путь сам и остановится перед каждым платным шагом, назвав цену:

flowchart LR
  Z[Гипотеза<br/>и выборка] --> A[Бриф]
  A --> B[Стиль из каталога]
  B --> C[Семантика Вордстата]
  C --> D[Медиа: кадр, персонаж, видео]
  D --> E[Вариант А:<br/>телефон, закон, чат-бот]
  E --> F[Вариант Б:<br/>одно отличие]
  F --> G[Паспорт качества]
  G --> H[Запуск: адрес, заявки,<br/>A/B-тест]
  H --> R[Реклама<br/>под варианты]
  R --> I[Итоги теста]

[!TIP] Каталог работает и без подключения: каждая система лежит в репозитории как JSON, готовый theme.css для обеих тем и DESIGN.md. Передайте файл любому агенту — он сверстает страницу в этом стиле.

Живые лендинги

6 самых частотных ниш по Яндекс Вордстату и наш собственный продукт. Каждый собран этим маршрутом: стиль из каталога, медиа на весь первый экран, два варианта с одним отличием, паспорт, запуск. Страницы работают: откройте вариант A и вариант Б, отправьте заявку — она придёт в кабинет (компании в примерах вымышленные, это отмечено на странице).

Медиа на первом экране

Что	Как	Цена
Кадр первого экрана и секций	gpt-image-2.5-flare, язык документальной съёмки, место под заголовок задаётся композицией	16 ₽
Логотип или маскот в кадре	gpt-image-2.5-flare-edit с вашим файлом — логотип не перерисовывается	22 ₽
Персонаж на все ролики	голос-пресет gemini-omni-audio → персонаж gemini-omni-character по портрету	39 + 49 ₽
Видео	gemini-omni-video 720p, до 10 с: фон-петля из кадра или обращение персонажа с точной репликой	149 ₽
Аудиоверсия страницы	gemini-flash-tts тем же голосом, что у персонажа	13 ₽ за 1000 знаков

Где ставить видео, решает стиль: блок media каждой дизайн-системы повторяет приём бренда — у Apple фильм по кнопке и липкие секции, у BMW разделённые экраны «кадр + факт», у Airbnb ролик хозяина в его блоке, у журнального стиля фото-эссе. Тихие петли собираются «вперёд и назад» без шва, люди в кадре играют один раз и замирают, ролик со звуком — только по кнопке и с субтитрами.

[!IMPORTANT] Против нейрослопа: каждый кадр смотрят глазами до оживления, речь в каждом ролике проверяют распознаванием. В примерах выше две реплики из трёх модель испортила повтором — их поймал этот шаг, и на страницы они не попали. Приёмы и готовые блоки — skills/landing-media.

Гипотеза под ключ

Шаг	Инструмент	Цена
Паспорт: настоящий браузер на 1280/390/360/320 px и боком — скролл на телефоне, кнопка на первом экране, форма с согласием 152-ФЗ, CDN, медиа, читаемость; снимки первого экрана A и Б до оплаты; черновик на сервере — дальше только правки	landing_check	бесплатно
Файл, приложенный в чат: одноразовая ссылка загрузки для человека	upload_link	бесплатно
Проверка речи в ролике и петля видео на сервере	media_check, video_loop	бесплатно
Запуск: адрес, заявки, A/B-тест, проверочная заявка. Паспорт не пройден — деньги не списываются	landing_launch	990 ₽
Правки запущенной страницы из чата: картинка, видео, озвучка, текст, блоки — кусками в A, Б или сразу в оба; паспорт до сохранения, «верни как было» на шаг назад	landing_source, landing_update	бесплатно
Итоги: люди, заявки, конверсия; план теста закрепляется при запуске, победителя сервер объявляет только по плану; интервал разницы, проверка перекоса A/Б (SRM), история версий	landing_status	бесплатно
Продажи по вариантам: заявки уходят лидами в Битрикс24 с меткой варианта, в статусе — сделки «Успешно» с суммой	landing_update c crm=bitrix	бесплатно
Про-версия победителя: полный сайт по выигравшему варианту	landing_pro	до 4 500 ₽

Библиотека навыков

Навык	Что даёт
landing-ab	Главный маршрут: от гипотезы до запущенного теста
hypothesis-lab	Гипотеза «если — то — потому что», ICE/PIE, выборка и бюджет, A/A-тест, вердикт без подглядывания
landing-brief	Бриф A–G до вёрстки, «зерно дизайна» против шаблонности, 21 раскладка секций, ревью по 14 пунктам
design-system	Стиль из каталога: токены обеих тем, шрифты с кириллицей, компоненты
brand-to-system	Свой стиль из брендбука клиента в формате каталога, с проверкой контраста
semantics	Заголовки, FAQ и минус-слова из Яндекс Вордстата
landing-media	Кадр первого экрана, персонаж на все ролики, видео с русской речью, аудиоверсия
motion	Анимации с режимом «меньше движения»
landing-mobile	Телефон: чек-лист из 30 пунктов, iOS 26/27, Android, встроенные браузеры ВК и Telegram
landing-law-ru	152-ФЗ, закон о рекламе, модерация Директа и ВК — шаблоны согласия и политики
landing-chatbot	Чат-бот с ИИ на странице: обучение по FAQ и сайту, виджет в цвет стиля
ad-match	Реклама под варианты: объявление обещает то же, что первый экран; кампании A и Б — прямо в кабинет Директа; автостоп

Телефон: iOS 26/27 и Android

Из рекламы на лендинг приходят с телефона — 70–85 % визитов. Навык landing-mobile собирает то, что реально меняется на экране, и помечает, что подтверждено Apple и WebKit, что — сообществом, а что — слухи:

Что	Почему
html, body с цветом фона	iOS 26 больше не красит панели по theme-color: цвет берётся из фона страницы и прижатых к краю слоёв; прозрачный корень даёт белые полосы
Первый экран 100svh, кнопка видна на 360×740, 320×640 и боком 844×390	половина посетителей рекламы до кнопки не долистает
Поля от 16 px, type="tel", autocomplete="tel"	мельче 16 px iOS увеличивает страницу при фокусе; номер подставляется одним касанием
Липкая кнопка прячется у формы и при открытой клавиатуре	иначе она закрывает поле, в которое человек пишет
Видео muted playsinline и постер со смыслом	в режиме энергосбережения автозапуска нет вовсе — остаётся только постер
Safari 27: sizes="auto", привязка прокрутки	картинки нужного размера и страница без прыжков при догрузке

Отдельной «адаптации под iOS 27» в CSS не существует: достаточно пережить Liquid Glass из Safari 26 и взять новые возможности Safari 27. Паспорт проверяет это автоматически — на сервере (landing_check) и у вас на компьютере: node tools/passport.mjs index.html b.html (Playwright, 49 видов проверок — в отчёт попадают те, что касаются страницы; без сети и денег). Что видно только на живом телефоне — в конце навыка протокол на 10 минут.

Чат-бот с ИИ на лендинге

Шаг	Инструмент	Цена
Создать бота для сайта	chatbot_create_site	бесплатно
Научить: пункт FAQ или текст · страница сайта · весь сайт	chatbot_learn, chatbot_learn_site	5 ₽ · 10 ₽ · 4 ₽ за страницу (до 30)
Оформление под бренд: логотип в шапке и лицо консультанта, цвета стиля, напоминание у кнопки, быстрые вопросы, сбор контакта, Telegram и WhatsApp; код виджета	chatbot_widget	бесплатно
Ответ посетителю	—	от 2 ₽ за ответ, без абонплаты
Диалоги, ответ от имени оператора	chatbot_conversations, chatbot_status	бесплатно

Реклама в Яндекс Директ

Шаг	Инструмент	Цена
Подготовить черновик: группы, ключевые фразы, объявления со своей ссылкой, минус-слова, быстрые ссылки, регион, бюджет. Лимиты Директа проверяются сразу, в Яндекс ещё ничего не уходит	direct_import_campaign	бесплатно
Или собрать кампанию ИИ по адресу страницы	direct_create_campaign	49 ₽
Отправить черновик в кабинет Директа	direct_publish_campaign	99 ₽
Отправить объявления на модерацию: дата начала уходит вперёд, показов не будет; можно сразу привязать счётчик Метрики	direct_moderate	бесплатно
Проверка из самого Директа: стадия, ссылки отвечают, бюджет, счётчики, блокеры; план запуска	direct_campaign_inspect, direct_launch_preflight	бесплатно
Включить показы по согласованному плану	direct_launch	9 ₽
Цель заявки в Метрике без дублей (событие после записи заявки сервером)	metrika_create_goal	бесплатно
Проверка подключения: права ключа, Директ, Метрика, Вордстат, Битрикс24	connection_health	бесплатно
Правка живой кампании: ставки (в выбранной группе), бюджет, ключи (в выбранную группу), минус-слова, текст объявления, запуск после паузы	direct_set_bids, direct_set_budget, direct_add_keywords, direct_add_negatives, direct_update_ad, direct_resume_campaign	9 ₽
Пауза кампании или объявлений	direct_pause_campaign, direct_pause_ads	бесплатно
Анализ, поисковые запросы, слив бюджета, прогноз, отчёт	direct_analyze, direct_search_queries, direct_waste, direct_forecast, campaign_report	29–99 ₽

Кабинет Директа подключается один раз в кабинете Вайб-Маркетолога → «Подключения». Действие, которое у черновика не имеет смысла, отказывает без платы. При ручных ставках Директ считает дневной бюджет недельным — в отдельный день расход может быть выше. Второй заголовок объявления Директ сейчас не сохраняет — главное агент пишет в заголовок и текст. Номера объявлений приходят строками: они длиннее безопасного целого JavaScript.

Что внутри

Дизайн-системы

Токены	цвета светлой и тёмной темы по ролям, типографика для десктопа и телефона, радиусы, отступы, тени, движение
Контраст	каждая пара «текст — фон» проверена по WCAG в обеих темах: текст ≥ 7, остальное ≥ 4.5
Шрифты	только свободные OFL-шрифты с кириллицей из Fontsource — вместо фирменных, которые нельзя распространять
Лендинг	первый экран, порядок секций, форма заявки с согласием 152-ФЗ, мобильная раскладка
Медиа	что бренд ставит на первый экран, где видео ниже, уместен ли персонаж и аудиоверсия, чего избегать
A/B-тест	что можно менять между вариантами и что обязано остаться неизменным
Правила	do / don't и готовая инструкция верстальщику