Как вайбкодить красивые лендинги с ИИ

Поставьте Visual Studio Code и внутрь Claude или Codex

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

Внутрь Visual Studio Code ставите платный Claude или Codex (т.е. платный ChatGPT). Установить поможет любой ИИ: выдаст строчку, которую надо вставить в View - Terminal и нажать Enter. И все установится. Или вот, давайте я вам прямо тут дам, какую строчку нужно ввести в терминале для установки.

Сейчас, конечно, в России с Claude стало сложно. Если вы за границей или у вас пока есть платный Claude, вам повезло, сайты лучше делать им. Лимитов в разы больше, такой лендинг делается за одну сессию, а с Codex за 3-4. И дизайн Claude теперь отлично соображает (раньше было хуже).

Но все сайты до этого я делала с Codex, и в целом все было отлично. Просто дольше. Зато он менее требователен к IP и прочему. Насчет остальных ИИ пока не знаю, что у них с дизайном сайтов и плагином, который далее.

Ставите плагин Impeccable. В нем вся суть!

Код для установки внутрь Claude или Codex берете на сайте плагина. Есть и другие подобные, но Impeccable лучше. Эту фишку почти никто не знает.

Именно этот плагин помогает делать красивые лендинги, а не такие «клодовские» и «иишные», как у многих сейчас. Вы ведь не скажете, что этот лендинг сделан с ИИ? Как будто обычный дизайнер делал.

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

Берете референс по дизайну

Любой сайт или лендинг, который вам нравится, или пачку похожих. Где взять? Где угодно: Pinterest, Dribbble, Themeforest, любые дизайнерские сайты и сайты с шаблонами. В поиске можно вбивать цветовую гамму или тему вашей компании, например медицина или сельхоз.

Дальше 2 пути.

1. Можно попросить ИИ четко описать дизайн и составить главный файл по дизайну, дальше брать его за основу.
2. Можно просто кинуть ссылку на референс (или несколько сайтов) или референс в картинках, скриншотах и сказать «Скопируй полностью сайт» или «Сделай наш вот этот лендинг, который мы с тобой делали - в этом стиле».

Блоки лендинга

Берите за образец другой лендинг, на котором вам прям хочется купить. Еще лучше, если у вас есть скилл для лендингов: хорошие обычно раздают на платных тренингах, есть на GitHub и т.п.

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

Тексты лендинга

В идеале сделайте описание ЦА: их боли, хочухи, нужные результаты и результаты от результатов, возражения, как они уже решали проблему и т.п. Промпты для этого тоже гуляют по платным курсам, или опишите сами хоть как-то, попросите ИИ помочь вам - от самих вопросов до заполнения ответов.

Скормите все, что у вас есть: положите в папочку, в которой он работает, тексты, из которых делать. Можно скрестить чужие лендинги с вашими текстами.

Я обычно делаю Claude и скрещиваю со своим «Профилем автора»: сгрузила ему просто вагон из десятков тысяч моих сообщений из канала, книги, курсы, разговоры и прочее.

И все, пусть заполняет

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

Никогда не останавливайтесь на первом предложенном дизайне. Он может быть сильно, сильно красивее.

А первый дизайн он вам наверняка предложит «клодовский», «иишный», даже если у вас стоит плагин Impeccable (если вы не задали ему ваш четкий дизайн).

Если фигня, попросите задействовать Impeccable, поменять, перерисовать, дайте другой референс, что угодно.

Залейте на любой хостинг

Если у вас уже есть Тильда, код вставляется в блок HTML. Если лендинг длинный, мне отдельно ИИ режет на 3-5-7 HTML-кусков, и я вставляю HTML-блоки в Тильде на странице один под другим. Картинки с лендинга, сайта залейте отдельно на любую страничку, тип - «Галерея», Тильда выдаст там в списке адреса картинок, подставьте их в HTML-файл вместо локальных. Все просто. У меня Тильда проплачена на год, поэтому я сделала на ней и лендинг, и гайд.

А так любой хостинг дешевле. Я заливала по SSH, по API тоже можно. Еще лучше, ИИ сам зальет.