Magerko/landing-skill

Лендинг

Я собрал этот скилл после того, как несколько раз сравнил лендинги, сделанные по одному и тому же ТЗ со скиллом и без него. Главное, что я из этого вынес: лендинг выглядит сгенерированным не из-за конкретного шрифта или цвета. Он выглядит так, когда решения никто не принимал: каждое пустое место заполнилось самым частым вариантом, и сумма этих вариантов узнаётся с первого экрана.

Поэтому списка запретов здесь нет в начале. Я пробовал: если запретить фиолетовый градиент и Inter, вместо них встаёт следующий по частоте шаблон, кремовый фон с зелёным и другой модный гротеск. Работает другое: каждое заметное решение выводить из предмета страницы, а не из привычки.

Если есть ТЗ, оно главнее скилла. Там, где ТЗ прямо задаёт решение (цвета, шрифт, тексты, состав страниц, стек), делай по ТЗ, даже если это расходится с советами ниже. Скилл применяется ко всему, что ТЗ оставляет на твоё усмотрение. На подробном ТЗ я почти не увидел разницы между вариантами, на коротком она видна с первого экрана: чем меньше задано, тем больше решений принимаешь ты.

Соразмеряй объём работы с задачей. По моим замерам полный проход занимает примерно вдвое больше времени, чем сборка без скилла. Страница на сдачу или публикацию проходит все семь шагов. Если пользователь прямо просит черновик, набросок или быстрый прототип, делай шаги 1–5 и короткий просмотр в браузере, а шаг 6 (юридические страницы, 404, картинка для превью) пропусти и перечисли пропущенное в отчёте. Шаги 1–3 я не разрешаю сокращать никогда: именно они отличают результат от шаблона, и стоят они меньше всего.

Отсюда порядок работы. Сначала понять, о чём страница, потом собрать настоящий контент, потом принять дизайн-решения, и только после этого верстать. Список типовых признаков из references/tells.md читается в конце, на аудите, а не в начале.

1. Бриф

До любого кода сформулируй для себя в нескольких строках:

• что продаётся или предлагается, одним предложением, словами покупателя;
• кто приходит на страницу и с каким вопросом в голове;
• одно действие, ради которого страница существует (заявка, покупка, запись, скачивание);
• что из ТЗ является фактом (цены, сроки, цифры, отзывы, контакты, фото), а чего в ТЗ нет.

Всё бери из ТЗ. Чего не хватает, решай сам и записывай как допущение для итогового отчёта. Спрашивать пользователя стоит только тогда, когда без ответа непонятно, что вообще продаётся или какое действие целевое.

2. Контент раньше дизайна

Напиши тексты страницы до вёрстки, простым документом. Дизайн потом строится вокруг них, а не наоборот.

Не выдумывай факты. Отзывы, имена клиентов, логотипы, счётчики ("10 000+ пользователей"), рейтинги, проценты, сроки, цены, адреса, лица команды попадают на страницу только из ТЗ. Выдуманное доказательство хуже отсутствующего: посетитель его распознаёт, а владельцу сайта оно создаёт юридический риск. На моих тестах модель и без этого правила отзывов не сочиняла, но я его оставил: ошибка здесь стоит дороже всего остального.

Если данных нет:

• убери секцию целиком. Лендинг без блока отзывов нормален, лендинг с придуманными отзывами нет;
• или замени её тем, что правда: как устроен процесс, что именно входит в цену, что будет после заявки;
• если без значения не обойтись (реквизиты, телефон, адрес), поставь видимую заглушку вида [ЗАПОЛНИТЬ: телефон] и перечисли все заглушки в отчёте.

Тексты. Заголовок первого экрана отвечает на вопрос "что это и для кого" так, чтобы человек понял без подзаголовка. Проверка для любой фразы: мог бы конкурент или компания из другой отрасли поставить её к себе без изменений? Если да, фраза пустая, замени её конкретикой: числом из ТЗ, названием, сроком, примером. Кнопка называет то, что произойдёт после нажатия ("Записаться на замер", а не "Начать"), и одно и то же действие везде называется одинаково. Без этого правила у меня на одной странице выходило по три разных названия для одной и той же кнопки.

В русском и украинском тексте соблюдай обычную типографику: кавычки-ёлочки, тире, неразрывные пробелы после коротких предлогов. Совет "убрать длинные тире, потому что так пишет ИИ" я сюда не взял: он про английский, а у нас тире обычный знак.

3. Дизайн-решения

Прими решения до вёрстки и зафиксируй их как CSS-переменные в начале стилей:

• палитра: 4–6 цветов, у каждого роль (фон, текст, приглушённый текст, акцент, граница);
• типографика: одно или два семейства и шкала размеров;
• шкала отступов, из которой берутся все расстояния на странице;
• радиусы, толщина линий, характер теней или их отсутствие;
• движение: где оно есть и зачем.

Каждое решение выводи из мира предмета. Посмотри, как выглядят вещи вокруг этого продукта: материалы, инструменты, упаковка, вывески, среда, в которой живёт аудитория. Оттуда берутся цвет, фактура, характер шрифта, форма элементов. Проверка та же, что для текста: подошло бы это решение любому другому лендингу так же хорошо? Если да, оно ещё не принято.

Три направления. Прежде чем выбрать, запиши три направления, по одной-две строки на каждое, и пусть они различаются по сути, а не оттенком: разные источники образа, разная плотность, разный главный элемент. Тут я заметил ловушку самого скилла: в первых версиях он два раза подряд приводил к одному и тому же образу "бумажного документа" (смета, чек, распечатка). То есть у скилла появился собственный шаблон. Поэтому первое пришедшее в голову направление считай подозрительным, а "бумажный документ" бери только тогда, когда два других честно слабее для этого продукта. Отвергнутые направления назови в отчёте одной строкой.

Критерий выбора. Выбирай из трёх не самое необычное, а то, которому целевой посетитель быстрее поверит и с которым ему будет приятно иметь дело. Это правило я добавил после теста на клининге: остроумный вариант с тёмным полем "плиток" получился суше и продавал хуже, чем обычный тёплый лендинг без всякого скилла. Оригинальность здесь средство, а не цель. Представь конкретного человека из аудитории и спроси, что он почувствует в первые секунды. Для бытовых и локальных услуг (уборка, ремонт, доставка, салон, клиника) обычно выигрывает тёплая, светлая и знакомая подача, в которой своё лицо создают детали. Холодная или концептуальная подача уместна там, где аудитория сама так мыслит: инструменты для профессионалов, технические продукты, дизайн.

Узнаваемость услуги и бренда. Это требование появилось, когда я посмотрел на два аккуратных лендинга клининговой компании и понял, что точно так же мог бы выглядеть сайт кофейни. По одному виду страницы, ещё до чтения текста, должно быть понятно, чем занимается компания. Проверка подменой: мысленно замени название и тексты на кофейню, стоматологию или сервис доставки. Если дизайн подошёл бы им без изменений, он не принят, какими бы аккуратными ни были палитра и сетка. Абстрактной идеи для этого мало: посетитель должен увидеть саму услугу.

Узнаваемость создают три слоя, и нужны все три:

• изображение предмета на первом экране: то, что компания делает, чем и где. Для уборки это чистая комната, ведро и швабра, перчатки, распылитель; для кофейни чашка, зёрна, стойка. Это может быть собственная иллюстрация или набор SVG-рисунков в едином стиле, либо фотография с понятной лицензией, подписанная как иллюстративная;
• мотив бренда, который повторяется по всей странице: знак в логотипе, взятый из мира услуги, и тот же мотив в иконках, маркерах списков, разделителях, фоне секций. Одного логотипа в шапке недостаточно;
• цвет, фактура и форма, которые ассоциируются именно с этой услугой, а не просто "приятные".

Отдельно про четырёхконечную звёздочку-"искру" (✦). Я поймал её на кнопке "Оставить заявку" в почти готовом лендинге: модель взяла её как "блеск чистоты", и по смыслу это даже подходило. Но этот значок стоит на каждой ИИ-кнопке в каждом продукте и выдаёт страницу сильнее любого градиента. Не используй его нигде: ни мотивом, ни в кнопках, ни в иллюстрации. Чистоту и блеск показывай бликом-полосой на стекле, каплей, мыльным пузырём. Кнопки вообще оставляй текстовыми, без декоративных значков.

Выбери один запоминающийся элемент, в который уходит вся смелость: необычная сетка первого экрана, крупная типографика, собственная иллюстрация, способ показать продукт. Остальное делай тихим и аккуратным. Страница, где выделено всё, читается так же шаблонно, как страница, где не выделено ничего.

Если пользователь на связи, покажи ему концепцию до вёрстки: пять-семь строк с выбранным направлением, палитрой, шрифтом, главным элементом и порядком секций, и дождись ответа. Поправить идею на этом шаге в разы дешевле, чем переделывать готовую страницу, и это единственный момент, когда вкус заказчика попадает в результат. Если работаешь автономно (как подзадача, или пользователь просил не спрашивать), не останавливайся: прими решение сам и приведи ту же концепцию в отчёте.

Для русскоязычного или украиноязычного лендинга проверь, что у выбранного шрифта есть кириллица, включая і, ї, є, ґ. У многих популярных гарнитур её нет, и текст молча отрисуется запасным шрифтом.

4. Структура

Не начинай с набора "первый экран, три преимущества, отзывы, тарифы, призыв". Составь список вопросов, которые посетитель задаёт по порядку (что это, мне ли это, как работает, сколько стоит, почему верить, что дальше), и оставь только те, на которые есть содержательный ответ.

Первый экран обязан содержать три вещи, видимые без прокрутки и на десктопе, и на телефоне: заголовок, который говорит, что это и для кого; главное действие (кнопку или форму); и что-то наглядное, что показывает предложение: сам продукт, пример результата, пример расчёта с настоящими цифрами из ТЗ, иллюстрацию услуги. Правило я вписал после варианта, где первый экран состоял из одного текста без кнопки: он выглядел пустым и терял тех, кто уже готов оставить заявку. Иллюстрация при этом не должна выталкивать главное действие за пределы экрана.

Форма секции следует из содержимого: процесс показывается шагами, сравнение таблицей, цена прайсом, продукт самим продуктом. Если три секции подряд выглядят как ряд одинаковых карточек, значит форма выбрана по привычке.

5. Вёрстка

Стек берётся из ТЗ. Если он не задан, делай статический HTML и CSS с минимумом JavaScript, без сборки: лендингу этого достаточно, и результат открывается двойным щелчком.

• Семантическая разметка, один h1, заголовки по порядку.
• Работает от 360 px ширины без горизонтальной прокрутки. Проверяй на узком экране, а не предполагай.
• У интерактивных элементов есть состояния: наведение, видимый фокус с клавиатуры, нажатие, неактивность.
• Форма: подписи к полям, понятные ошибки, состояние отправки и состояние успеха. Если бэкенда нет, не изображай успешную отправку молча: оставь явное место подключения и напиши об этом в отчёте.
• Контраст текста не ниже 4,5:1, в тёмных участках тоже.
• Анимация только там, где она что-то объясняет или подтверждает действие. Уважай prefers-reduced-motion.
• Изображения в первую очередь берутся из ТЗ. Если их нет, страница всё равно должна показывать предмет услуги (см. "Узнаваемость" в шаге 3): нарисуй собственные SVG-иллюстрации в едином стиле или возьми фотографию с понятной лицензией, подпиши её на странице как иллюстративную и запиши источник и лицензию в отчёт. В первой версии я запрещал любые стоковые фото и советовал обходиться типографикой, и страницы выходили безликими. Запрет теперь один: нельзя выдавать чужие или сгенерированные снимки за работы, команду, офис или клиентов компании. У картинок указаны размеры и осмысленный alt.
• Пока страница является прототипом или использует демонстрационные контакты, она не должна собирать настоящие персональные данные: не сохраняй введённые имя, телефон и почту, даже локально. Пометку тестового режима делай спокойной: одна строка обычным приглушённым текстом рядом с формой. Сначала у меня это была красная рамка под каждой формой, и на показе она читалась как поломка. Подробное сообщение о том, что данные никуда не ушли, показывай после нажатия кнопки, а не заранее. Если форм на странице несколько, постоянная пометка нужна у одной.

6. Законченность

Недоделанные мелочи выдают страницу быстрее, чем стиль. Перед сдачей:

• title и meta description написаны под эту страницу, указан lang;
• есть favicon (SVG достаточно) и Open Graph разметка с картинкой;
• есть страница 404;
• если страница собирает данные (форма, аналитика), политика конфиденциальности существует как страница и доступна из подвала и рядом с формой. Пиши её по тому, что сайт реально собирает, реквизиты оператора оставляй заглушками и в отчёте отметь, что это черновик для проверки юристом;
• условия использования нужны, когда на сайте есть оплата, регистрация или публичная оферта. Если ТЗ ограничивает состав страниц и их там нет, не добавляй, а упомяни в отчёте;
• нет мёртвых ссылок (href="#"), текста-рыбы, чужих названий, неработающих якорей;
• контакты, год и название в подвале настоящие или помечены заглушками.

7. Аудит

Открой готовую страницу в браузере и посмотри на скриншоты в десктопной и мобильной ширине. Смотри как посетитель: что понятно за пять секунд, куда уходит взгляд, что выглядит сломанным. Отдельно повтори проверку подменой на скриншоте первого экрана: если закрыть заголовок и логотип, понятно ли, чем занимается компания? Если нет, вернись к шагу 3 и добавь изображение предмета и мотив бренда.

Мобильный экран проверяй отдельным проходом, как самостоятельную композицию, а не как сжатый десктоп. Отсутствие горизонтальной прокрутки ещё не значит, что страница удобна. Пролистай её целиком на ширине 390 px и ответь:

• что видно на первом экране без прокрутки: понятно ли, что это, и есть ли главное действие;
• можно ли попасть пальцем в каждую кнопку и ссылку (не меньше 44 × 44 px) и не стоят ли они вплотную;
• читаются ли таблицы, схемы и главный элемент или они стали мелкими и требуют другой формы на узком экране;
• не превратилась ли страница в бесконечную ленту одинаковых блоков: возможно, часть содержимого на телефоне стоит свернуть или сократить;
• не перекрывают ли закреплённые панели содержимое и поля формы при вводе.

Затем прочитай references/tells.md и пройдись по странице. Найденный признак исправляется возвратом к шагу 3 или 4 и принятием решения, а не заменой на ближайший аналог.

Заверши отчётом: какие дизайн-решения приняты и из чего они выведены, какие направления отвергнуты, какие допущения сделаны, какие заглушки нужно заполнить, что не проверено.

Аудит чужого лендинга

Если просят оценить существующую страницу, порядок обратный: открой её, сними скриншоты, прочитай тексты и код, сверь с references/tells.md. Находки отдавай по приоритету:

1. неправда (выдуманные отзывы, цифры, логотипы);
2. непонятно, что предлагается и что делать;
3. сломано (мобильная вёрстка, контраст, форма, ссылки);
4. не доделано (шаг 6);
5. шаблонность и безликость.

К каждой находке предложи конкретную замену, а не только диагноз.