Как сделать лендинг с помощью нейросети без шаблонного дизайна

Почему все AI-лендинги на одно лицо

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

Вот те самые штампы, из-за которых страница читается как «сгенерировано»:

По отдельности ни один из приёмов не преступление. Сетка бывает уместной, свечение иногда держит композицию. Но когда они идут комплектом, страница мгновенно читается как «сделано за вечер, ни во что не вникая». Это удешевляет сайт и вызывает у пользователя меньше доверия — люди уже насмотрелись и распознают такой шаблон за полсекунды.

И главная беда даже не в эстетике. Шаблон занимает место, где должен быть продукт. Три карточки и свечения стоят ровно там, где посетитель ждёт экран интерфейса, цифру или короткое демо.

Из той же серии, но словами:

• Заголовок в духе «Раскройте потенциал вашей команды» — подходит вообще кому угодно.
• Тройка «Быстро / Безопасно / Масштабируемо» без единой цифры.
• Блок «Нам доверяют» с логотипами, которых у тебя нет.
• Отзывы с аватарками-заглушками и подписью «CEO, Startup».
• Эмодзи вместо иконок и градиентный текст в заголовке.
• FAQ из четырёх вопросов, которых тебе никто никогда не задавал.

Референсы, референсы и ещё раз референсы

Это единственное, что реально вытаскивает лендинг из шаблона. Не «сделай красиво и современно», а «сделай вот так, вот в этом месте, вот по этой причине». Модель не знает твоего вкуса — она знает средний интернет. Всё, что ты не показал и не назвал, она добьёт этим средним.

Где я хожу за референсами:

• Pinterest — быстрый мудборд и общее настроение. Хорошо ловить цвет, типографику, плотность. Плохо — целые страницы: там много красивых картинок, которые в вебе не живут.
• awwwards.com — композиция, ритм, работа с крупным шрифтом. С оговоркой: половина работ там — арт, который ничего не продаёт. Бери приёмы, а не целиком макет.
• Land-book, Godly — уже ближе к делу, это живые продуктовые лендинги. Смотри, как люди показывают интерфейс и доказательства.
• Mobbin — паттерны реальных продуктов. Полезно, когда нужно показать сценарий, а не обещание.
• 21st.dev — готовые блоки на React и Tailwind. Отсюда удобно ткнуть модели в конкретный компонент: «вот такой хедер, вот такой прайсинг».

Возьми три-пять страниц и подпиши, какое решение берёшь у каждой. Слово «нравится» бесполезно: модель не поймёт, имеешь ты в виду шрифт, цвет, сетку или анимацию.

И обязательно добавь антиреференсы — что делать нельзя. «Без фона в сеточку», «без светящихся пятен», «без трёх одинаковых карточек», «без блока „нам доверяют“». Прямые запреты работают лучше, чем любые описания желаемого: они закрывают модели самые протоптанные дорожки.

Как скармливать референсы модели

Дай контекст «хочу так» и сразу конкретный вариант. Просто ссылка или скриншот работают плохо: модель видит картинку, но не знает, что именно тебе в ней понравилось. Назови это словами.

Что стоит приложить к запросу:

1. Три-пять скриншотов с подписью, что берём у каждого.
2. Список запретов — обычно он короче и полезнее списка пожеланий.
3. Свой материал: скриншоты продукта, цифры, цитаты пользователей, документацию.
4. Токены: шрифт, шкала размеров, радиусы, отступы, один акцент.

Дальше держи короткий цикл: собрал первый экран — посмотрел в браузере — назвал одну проблему — попросил починить именно её. Просить «сделай лучше» бесполезно, модель просто перетасует те же самые блоки.

Скиллы, ютуб и «сайт за 1000 долларов»

На ютубе полно видео вроде «как сделать сайт за 1000 долларов». Советую посмотреть, если ты совсем вне контекста вёрстки и ИИ: там нормально показывают сам процесс — от структуры до сборки. Например, вот это.

Но почти в каждом таком видео говорят про скиллы и забывают сказать главное: скилл делает не миллионный шаблон, а тысячный. По сути это те же копии, только чуть более универсальные. Планка поднимается, отличие — нет.

Что скилл реально даёт и чего не даёт:

• Даёт: нижнюю планку. Не будет совсем уж дичи с контрастом, отступами и мобильной вёрсткой.
• Даёт: консистентность. Блоки внутри одной страницы будут выглядеть роднёй.
• Не даёт: отличия. Два человека с одним скиллом и похожим промптом получат один и тот же сайт.
• Не даёт: смысла. Скилл не знает, что у тебя за продукт и чем ты лучше соседа.

Отсюда простой вывод: скилл — это фундамент, а не дом. Отличие приносишь ты — своими референсами, своим материалом и своими запретами.

Figma, дизайн-инструменты или сразу код

Я пробовал и Figma, и дизайн-режимы у самих моделей, и связки «макет → код». Для лендингов в итоге от них ушёл: сразу делаю в коде. Причина простая — макет всё равно переживает две-три итерации в браузере, а перекладывать эти правки обратно в макет означает делать работу дважды.

В коде сразу видно настоящую типографику, реальные переносы строк, настоящий мобайл и то, как блок ведёт себя при длинном тексте. Половина «красивых» макетных решений разваливается именно здесь.

Но если проект большой — не одна страница, а продукт — лучше сначала построить дизайн-систему. Токены цвета, шкала шрифтов и отступов, состояния компонентов, правила для кнопок и форм. Иначе через месяц у тебя пять оттенков серого, четыре радиуса и три разные кнопки «Отправить».

Иконки и картинки: не проси их у текстовой модели

Отдельная боль. Текстовые модели пишут SVG руками, по координатам, и результат почти всегда «вроде похоже, но не то»: кривые кубические кривые, разная толщина линий в соседних иконках, разный оптический размер, скруглённые углы в одной и острые в другой. На макете в 200 пикселей выглядит терпимо, в реальных 20 — разваливается.

Так что иконки текстовым моделям я не доверяю вообще. Есть два нормальных пути.

1. Взять готовый набор. Lucide, Phosphor, Tabler, Heroicons — бесплатные, консистентные, с единой сеткой и толщиной. Один набор на весь сайт, без «доберу пару штук из другого» — и ты уже аккуратнее девяноста процентов AI-лендингов.
2. Отдать генерацию модели для изображений. Например Recraft: он умеет векторные стили и отдаёт SVG, а не картинку, которую потом стыдно масштабировать. Для своих иллюстраций и первого экрана это правильный инструмент — там, где текстовая модель считает координаты, картиночная реально рисует.

Что проверить у любой сгенерированной иконки, прежде чем ставить её на страницу:

• Одна сетка на весь набор — обычно 24×24, и все иконки нарисованы внутри неё.
• Одинаковая толщина обводки. Разнобой в 1,5 и 2 пикселя видно даже неподготовленным глазом.
• Читается ли в 16–20 пикселях, а не только в макете.
• Чистый SVG: без лишних групп, масок и зашитого fill, если цвет задаётся через currentColor.
• Прозрачный фон и одинаковые отступы внутри вьюбокса, иначе иконки «пляшут» в ряду.

Текст, который не звучит как любой SaaS

Заголовок должен говорить, что это за продукт, кому он нужен и что станет проще. Обороты вроде «раскройте потенциал» или «измените подход к работе» не дают представить результат.

Во втором варианте есть предметы и действия — его можно проверить и можно показать на экране. Есть простой тест: подставь в свой заголовок название конкурента. Если ничего не сломалось, заголовок пустой.

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

Как собирать: блоки и проходы

Большинству продуктовых страниц хватает пяти смысловых шагов:

1. Обещание. Что это за продукт и кому он помогает.
2. Доказательство. Интерфейс, демо или измеримый результат.
3. Сценарий. Что пользователь делает от начала до результата.
4. Условия. Возможности, ограничения, безопасность, интеграции, цена.
5. Следующий шаг. Один основной призыв к действию.

Не раскладывай каждую функцию в отдельную карточку — именно так и рождается каталог компонентов вместо страницы. Группируй детали вокруг задач пользователя.

И не поручай модели всю страницу одним запросом. Ошибка в первом экране потом повторится в тексте, дизайне и коде. Работай короткими проходами:

1. Структура: заголовки блоков и одна цель для каждого.
2. Факты: подписи кнопок, доказательства, ответы на возражения.
3. Референсы, визуальные правила и прямые запреты.
4. Первый экран — сразу вместе с ближайшим доказательством, а не отдельно.
5. Перенос правил на остальные секции и состояния.
6. Отдельно: мобильная версия, клавиатура, формы.

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

SEO и скорость

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

• Один поисковый интент на страницу — не мешай главную со справочной статьёй.
• Описательный title, один заметный h1, полезный meta description.
• Ссылки на документацию, кейсы и материалы, которые отвечают на следующие вопросы.
• Alt-тексты у содержательных картинок, пустой alt у декоративных.
• Canonical, Open Graph, картинка для превью и отсутствие случайного noindex.

Скорость тоже считается. Core Web Vitals смотрят на загрузку, отзывчивость и визуальную стабильность через LCP, INP и CLS. Укажи размеры изображений, не откладывай загрузку главной картинки и не запускай анимацию, которая сдвигает текст. Кстати, те самые свечения на полэкрана — ещё и лишняя работа для браузера.

Источники: рекомендации Google по полезному контенту, руководство по SEO и описание Core Web Vitals.

Что проверить перед публикацией

• За пять секунд понятно, что это за продукт, кому он нужен и что делать дальше.
• Первый экран показывает продукт или доказательство, а не только обещание.
• Ни одного штампа из первой части: сеточки, свечений, тройки одинаковых карточек.
• Каждая секция добавляет новую мысль, а кнопки называют конкретное действие.
• Мобильная версия сохраняет приоритеты и не прячет главный призыв.
• Формы подписаны, страница работает с клавиатуры, контраст позволяет читать текст.
• Ссылки открываются, тестовых данных нет, метаданные и аналитика настроены.

И финальная проверка: открой страницу на телефоне и дай человеку из целевой аудитории. Спроси не «нравится ли дизайн», а «что это, для кого и зачем пробовать». Если он пересказывает своими словами — страница работает.

Частые вопросы

Можно ли сделать лендинг нейросетью без дизайнера?

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

Как понять, что лендинг выглядит нейронным?

Фон в сеточку, размытые свечения по углам, три одинаковые карточки с бейджами, тройка «быстро / безопасно / масштабируемо» и заголовок, который подойдёт любому конкуренту.

Сколько нужно референсов?

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

Помогают ли готовые скиллы и шаблоны?

Они поднимают нижнюю планку, но не дают отличия: тот же шаблон, просто более универсальный. Отличие приносишь ты — материалом, референсами и запретами.

Откуда брать иконки?

Из готового набора вроде Lucide или Phosphor, либо из модели для картинок — например Recraft, она умеет вектор и отдаёт SVG. Текстовой модели рисовать SVG не поручай: толщина линий и сетка поедут почти наверняка.

Подходит ли AI-лендинг для SEO?

Да. Важны не инструменты сборки, а полезный ответ, понятная структура, доступность, корректные метаданные и скорость страницы.

Если ещё выбираешь, чем всё это собирать, есть сравнение Cursor, Codex и Claude Code.