Так, повноцінний лендинг реально зібрати з AI за один вечір — і йдеться не про шаблон із конструктора, а про власний сайт із кодом, який можна безкінечно доробляти. Порядок дій простий: спочатку структура й копірайт, потім стилі й дизайн-токени, далі збірка через AI-інструмент (Claude, v0 або Cursor) і наприкінці — деплой на Vercel чи Netlify з формою й аналітикою. Нижче — точний маршрут, яким я зібрав uxhero.design і всі лендінги під свої курси. Без агенцій, без «замовте сайт за $2000», без коду з нуля.

Важлива обіцянка одразу: AI не зробить за вас думання. Він зробить за вас набивання. Різниця величезна — і саме вона відрізняє гарний лендінг за вечір від generic-сторінки, якою нікого не зачепиш.

Що потрібно перед стартом?

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

  • Claude Pro або Max — мозок процесу, генерує структуру, копірайт і код. Базовий елемент, без нього нічого не запрацює.
  • v0 або Cursor — для швидкої візуальної збірки й правок коду. Опційно, якщо любите бачити результат одразу.
  • Vercel або Netlify — безкоштовний хостинг із деплоєм за хвилини.
  • Tally — форми без бекенду. GA4 — безкоштовна аналітика. Cloudflare — домен і DNS.

Усе, крім Claude, має безкоштовний тариф. Тобто реальна собівартість вечора — це підписка на Claude, яку ви й так, імовірно, вже маєте.

Крок 1: структура і мапа екрана

Не відкривайте редактор. Відкрийте діалог із Claude. Опишіть: що продаєте, кому, яка головна дія (лід, продаж, запис). Попросіть запропонувати структуру лендінга блоками — hero, проблема, рішення, соціальний доказ, оффер, FAQ, фінальний заклик. Це фундамент: якщо структура слабка, жоден дизайн її не витягне.

Мій прийом — попросити Claude обґрунтувати кожен блок: навіщо він, яке заперечення знімає, що читач має відчути. Так ви одразу відсіюєте блоки «бо в усіх так» і лишаєте ті, що працюють на конверсію.

Крок 2: копірайт, який продає

Найчастіша причина слабкого лендінга — не дизайн, а текст. Тому копірайт іде до дизайну, а не після. По кожному блоку просіть у Claude 2–3 варіанти заголовка й підзаголовка, а тоді ріжте до кістки. Правило: заголовок говорить про вигоду читача, а не про вас.

Промпт: «Ти — прямий копірайтер у стилі коротких, конкретних речень. Напиши hero-заголовок для лендінга [продукт] для [аудиторія]. Головна вигода — [вигода]. Дай 3 варіанти без води й без прикметників на кшталт "інноваційний".»

Ключова навичка тут — редагувати, а не генерувати. AI дає сирий матеріал; ваш смак вирішує, що лишити. Генерований текст майже завжди на 30% довший, ніж треба.

Крок 3: стилі й дизайн-токени (щоб не вийшло generic)

Ось де 90% AI-лендінгів провалюються: вони виглядають однаково — той самий фіолетовий градієнт, той самий шрифт, ті самі закруглення. Причина в тому, що люди просять «зроби красиво» й отримують середнє по інтернету. Рішення — задати систему до генерації.

Перш ніж збирати, домовтеся з AI про токени: палітру (2–3 кольори з чіткими ролями), типографіку (один-два шрифти з Google Fonts), сітку відступів (кратну 4), радіуси й тіні. Передайте це як «дизайн-константи, яких дотримуйся в усьому сайті». Тоді результат виглядатиме як цілісний продукт, а не як зшиті докупи блоки. Це та сама логіка токенів, що й у великих дизайн-системах — просто в мініатюрі.

Крок 4: збірка сайту з AI

Тепер збірка. Два шляхи. Перший — v0: описуєте блок, отримуєте візуальний компонент, правите ітеративно, збираєте сторінку з блоків. Швидко й наочно. Другий — Claude + Cursor: просите згенерувати цілу сторінку одним HTML/React-файлом із вашими токенами, потім доводите деталі в редакторі. Гнучкіше й дає чистіший код.

Головний принцип — збирати блоками, а не «весь сайт одним промптом». Один блок = один зрозумілий запит = легко перевірити й поправити. Коли просите все одразу, отримуєте кашу, у якій важко щось змінити, не зламавши сусіднє.

Який AI-інструмент обрати: Claude, v0 чи Cursor?

Питання, на якому застрягають новачки. Коротка відповідь: не «або-або», а «в різних ролях». Кожен інструмент сильний у своєму.

  • Claude — стратег і копірайтер. Найкраще тримає контекст усього сайту, продумує структуру, пише текст і генерує чистий код одним файлом. Це ядро, з якого починається кожен проєкт.
  • v0 — візуальний складач. Коли хочете бачити блок одразу й правити його наживо, не читаючи код. Ідеальний, щоб швидко перебрати кілька варіантів hero-секції.
  • Cursor — редактор для доведення. Коли база вже є, а треба точково поправити верстку, додати анімацію чи полагодити адаптив під мобільний.

Мій типовий маршрут: Claude планує й пише кістяк → v0 або Cursor доводить візуал → знову Claude, коли треба переписати текст чи додати блок. Не прив'язуйтесь до одного інструмента — прив'язуйтесь до результату. Той, хто вміє перемикатися між ними за задачею, зробить лендінг удвічі швидше за того, хто мучить один інструмент там, де він слабкий.

Крок 5: деплой, форми й аналітика

Сайт на локальній машині — ще не сайт. Фінальні 20 хвилин перетворюють код на живий URL:

  1. Деплой. Заливаєте проєкт у Vercel чи Netlify — пару кліків, і є публічне посилання.
  2. Домен. Купуєте через Cloudflare, підключаєте до хостингу. 10 хвилин на DNS.
  3. Форма. Tally-форма вставляється як ембед — заявки падають вам на пошту без жодного бекенду.
  4. Аналітика. GA4-скрипт у <head> — і ви бачите трафік та конверсії з першого дня.

Повний walkthrough цього кроку — від порожнього файлу до сайту в проді з аналітикою — я показую на екрані в YouTube-каналі, щоб було видно кожен клік, а не лише результат.

Скільки це коштує і скільки триває?

Час: перший лендінг — вечір, якщо структура й текст готові; далі — 2–3 години, коли набʼєте руку й матимете свої промпти. Гроші: підписка Claude плюс, за бажання, домен (кілька доларів на рік). Порівняйте з агенцією: $500–2000 і два тижні очікування правок. Різниця не лише в грошах — власний код означає, що будь-яку зміну ви робите самі за п'ять хвилин, а не пишете лист «а можна пересунути кнопку».

Чому не просто Tilda чи Webflow?

Резонне заперечення: навіщо AI, якщо є конструктори. Відповідь залежить від того, що вам потрібно. Конструктор чудовий для типового сайту в межах його шаблонів — але щойно ви хочете нестандартний layout, свою анімацію чи специфічну взаємодію, ви впираєтесь у стелю платформи й починаєте боротися з нею. AI-підхід дає код, а код не має стелі: будь-яку ідею можна довести до кінця.

Друга різниця — власність і швидкість змін. Сайт на власному коді ви деплоїте будь-де, він не зникне разом із тарифом платформи, і будь-яку правку робите самі за хвилини. Плюс продуктивність: коли ви навчились збирати лендінг промптами, наступний коштує вам вечора, а не місячної підписки на конструктор. Для разового сайту-візитівки конструктор ок; для людини, яка робитиме сайти регулярно — собі й клієнтам — AI-воркфлоу окупається з другого проєкту.

Типові помилки новачків

Три граблі, на які наступають майже всі:

  • «Зроби красивий сайт» одним промптом. Отримаєте generic. Задавайте структуру, токени й блоки окремо.
  • Дизайн до тексту. Гарний блок з порожнім текстом не продає. Спершу копірайт.
  • Нескінченне доведення. Лендінг живий у проді краще за ідеальний у чернетці. Запустіть, а тоді покращуйте на реальних даних.

Ще одна пастка — не міряти. Без GA4 ви не знаєте, який заголовок працює. Запустили — дивіться цифри — міняйте гіпотезу. Це і є перевага власного сайту: цикл покращень у ваших руках, а не в чужому беклозі.

Перший лендінг завжди найповільніший — бо ви вчитеся не інструментам, а способу думати блоками й промптами. Другий буде вдвічі швидшим, третій зробите на автоматі. А далі «зібрати сайт» перестає бути проєктом і стає звичайною дією, як написати листа. І це, мабуть, головна зміна: ви більше ніколи не залежите від чужого графіка, щоб втілити свою ідею в інтернеті — від задуму до живого URL вас відділяє один вечір і кілька правильних промптів.