Як зробити сайт за допомогою AI самостійно: інструменти, алгоритм і підводні камені

Ще кілька років тому, щоб зробити сайт, потрібно було вчити код або платити розробнику. Сьогодні AI пише код, тексти й навіть публікує сайт в інтернеті. Здається, що сайт тепер можна зробити за вечір. Частково це правда. Але є нюанс, про який рідко пишуть у рекламі AI-інструментів.

Я розробляю сайти з AI щодня, тож у цій статті поділюся реальним робочим процесом: які інструменти використовувати, де вони сильні, а де підводять, і покроковим алгоритмом із готовими промптами, за яким можна зібрати сайт самостійно.

Що змінилося: машина вже є, але права потрібні

AI-інструменти справді навчилися писати якісний код, адаптувати сайт під смартфони, підключати форми й публікувати сайт на хостингу. Те, на що раніше йшли тижні, тепер можна зробити за дні.

Настав час, коли сайт можна зробити самостійно. Але це той самий час, коли потрібно вміти керувати машиною.

Автомобіль теж може їхати сам по трасі, але куди їхати, як обійти яму й де повернути, вирішує водій. З AI так само: він виконає будь-яку команду, але якість результату визначає той, хто ці команди дає.

Якими AI-інструментами можна зробити сайт

У статті я розберу підхід із Claude Code: саме ним я користуюся в роботі, і він дає найбільше свободи — сайт не прив’язаний до конструктора, код належить вам, а змінювати можна будь-що.

Плюси й мінуси підходу

Головна пастка: AI робить «середній» сайт

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

• Немає позиціонування. AI не знає, чим ви кращі, якщо ви цього не сформулювали.
• Немає візуальної ідеї. Без референсів AI обирає найбезпечніший, тобто найнудніший варіант.
• Немає логіки продажу. Блоки стоять «як у всіх», а не в порядку, у якому клієнт ухвалює рішення.

Покроковий алгоритм: сайт з Claude Code

Найважливіший принцип — збирати сайт поекранно, а не просити «зроби весь сайт одразу». Чому це працює, поясню після алгоритму.

Крок 1. Структура й тексти — у звичайному чаті з AI

Почніть не з коду, а з того, що буде на сайті. Попросіть AI взяти у вас інтерв’ю про бізнес і скласти структуру сторінки. Детальніше про промпти для текстів — у статті «AI для текстів сайту».

Ти — маркетолог і копірайтер, який готує односторінковий сайт для бізнесу.

Мій бізнес: [чим займаєтеся, місто, для кого]
Головна дія відвідувача: [залишити заявку / записатися / подзвонити]

1. Постав мені 7–10 питань про бізнес, клієнтів, переваги, ціни й заперечення — по одному.
2. Після відповідей склади структуру сайту: список екранів (блоків) і мету кожного.
3. Напиши тексти для кожного екрана: заголовок, підзаголовок, основний текст, текст кнопки.

Пиши українською, коротко й конкретно, без кліше на кшталт «якісний» чи «індивідуальний підхід».
Не вигадуй цифри — якщо фактів бракує, пиши [ПОТРІБНО УТОЧНИТИ].

Крок 2. Референси для кожного екрана

Для кожного блоку зі структури знайдіть 1–2 приклади, які вам подобаються: перший екран, блок послуг, відгуки, форма заявки. Шукайте на Awwwards, Dribbble, Pinterest або на сайтах сильних компаній у вашій ніші. Робіть скриншоти й складайте в одну папку з назвами за порядком блоків.

Крок 3. Створіть проєкт у Claude Code

Встановіть Claude Code (він працює в терміналі, у редакторах коду й у застосунку Claude для комп’ютера) і створіть порожню папку для сайту. Потрібна підписка Claude або доступ через API. Перше повідомлення — про технології й загальні правила проєкту:

Створи в цій папці новий сайт на Next.js з TypeScript і Tailwind CSS.

Загальні правила проєкту:
- мова сайту — українська;
- адаптивність: спершу мобільна версія, потім планшет і комп’ютер;
- кольори: [основний колір], [акцентний колір], фон [колір];
- шрифт: [назва шрифту з Google Fonts];
- кожен блок — окремий компонент, щоб його можна було перевикористати на інших сторінках.

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

Крок 4. Збирайте сайт поекранно: референс + текст

Тепер для кожного блоку надсилайте в Claude Code скриншот референсу й готовий текст. Один екран — одне повідомлення. Переглянули результат, виправили, перейшли до наступного.

Зроби на головній сторінці блок «[назва блоку, напр. Перший екран]».

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

Тексти для блоку:
"""
[вставте заголовок, підзаголовок, текст і текст кнопки з кроку 1]
"""

Вимоги:
- на телефоні блок має виглядати охайно, без горизонтальної прокрутки;
- кнопка «[текст кнопки]» відкриває форму заявки;
- після змін покажи, що саме ти зробив, і запусти сайт для перегляду.

Чому поекранно — це важливо

• Помилки виправляються один раз. Якщо в блоці з’явився баг — наприклад, текст вилазить за край на телефоні, — ви виправляєте його в одному компоненті, а не на всіх сторінках.
• Блоки стають шаблонами. Готовий і відшліфований екран (картки послуг, відгуки, FAQ) потім використовується на інших сторінках без переробки.
• Економія лімітів. Короткі точні задачі витрачають значно менше ресурсу підписки, ніж прохання «переробити весь сайт».
• Ви контролюєте якість. Кожен екран проходить вашу перевірку, а не з’являється разом із десятком інших.

Сайт, зібраний поекранно, — як будинок із перевірених цеглин. Сайт «одним запитом» — як будинок, у якому тріщину знаходиш уже після переїзду.

Крок 5. Перевірка: телефон, швидкість, тексти

• Відкрийте сайт на телефоні — більшість відвідувачів прийде саме з нього.
• Попросіть Claude Code перевірити швидкість і оптимізувати зображення.
• Перечитайте тексти вголос: якщо так не сказали б клієнту наживо — переписуйте.

Крок 6. SEO-основа й форма заявки

Підготуй сайт до запуску:

1. SEO: унікальні title і description для кожної сторінки, один H1 на сторінці, alt для всіх зображень, sitemap.xml і robots.txt, мікророзмітка Schema.org для бізнесу.
2. Форма заявки: надсилай заявки мені в Telegram через бота. Поясни покроково, як створити бота й де взяти токен і chat id, і збережи їх як секрети, а не в коді сайту.
3. Захист форми від спаму та обмеження кількості відправок.

Після кожного пункту коротко поясни, що зроблено.

Крок 7. Домен і публікація

Купіть домен у реєстратора, а далі просто напишіть Claude Code: «Я хочу опублікувати сайт». Він запропонує хостинг, покроково пояснить, що натиснути у вашому акаунті, і сам виконає технічну частину. Вам залишиться підтверджувати дії, підключити домен і перевірити, що сайт відкривається.

Крок 8. Зміни після запуску

Далі все просто: відкриваєте проєкт у Claude Code, пишете, що змінити — «додай новий відгук», «зміни ціну на лендинг», — і просите опублікувати зміни. Порада: попросіть одразу налаштувати резервну копію на GitHub, щоб завжди можна було повернутися до попередньої версії.

Скільки часу це реально займає

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

• структуру й тексти — найчастіше на них іде найбільше часу;
• пошук референсів і рішення, що з них взяти;
• десятки ітерацій «не те — переробити», поки не навчитеся формулювати задачі;
• розбір реєстраторів, хостингу, DNS, ботів і аналітики;
• перевірку на телефонах, швидкість, SEO.

Коли робити самому, а коли замовити

Висновок: кожен має займатися своєю справою

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

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

AI — чудовий інструмент. Але результат завжди залежить від того, хто його тримає.