Сайт з AI у 2026 році - це не «один промпт», а пайплайн із шести кроків: мапа сайту і тексти, Skills-файл зі стилем, збірка сторінок у Claude, git-репозиторій, деплой на Cloudflare з доменом, а потім SEO, форми й аналітика. Обов'язкова витрата одна - підписка Claude, хостинг статичного сайту безкоштовний, а багатосторінковий сайт реально зібрати за 2-3 вечори.
Нижче - цей пайплайн крок за кроком на реальному кейсі. Сайт uxhero.design, на якому ви це читаєте, зібраний саме так: чистий HTML без конструктора, Claude як збирач, Cloudflare як хостинг. Тут понад 60 статей блогу, лендинги курсів, sitemap і розмітка для пошуку, і жодної агенції чи верстальника.
Чим сайт з AI відрізняється від лендинга за вечір?
Лендинг - це одна сторінка, яку можна зібрати і забути. Як це зробити, ми вже розбирали в матеріалі про лендинг з AI за вечір. Сайт живе довше, і тому має інші вимоги:
| Лендинг | Сайт | |
|---|---|---|
| Сторінок | 1 | 5-100+ |
| Головний ризик | слабкий текст | розсипаний стиль між сторінками |
| Що треба до старту | оффер і структура блоків | мапа сайту, Skills-файл, шаблон сторінки |
| SEO | title і description | sitemap, canonical, schema.org, перелінковка |
| Після запуску | майже нічого | нові сторінки щотижня, правки, редиректи |
Головна думка: на сайті AI не має права «вигадувати» дизайн для кожної нової сторінки. Він має відтворювати систему. Звідси і весь пайплайн.
Що потрібно, щоб зробити сайт з AI?
- Claude Pro (близько 20 доларів на місяць) - пише код, тексти і структуру. У підписку входить Claude Code, який працює прямо з файлами проєкту.
- GitHub - безкоштовне сховище, де живе історія кожної зміни. Ваша кнопка «скасувати» для всього сайту.
- Cloudflare - безкоштовний хостинг статики без плати за трафік, плюс DNS і SSL.
- Домен - 10-15 доларів на рік.
- Tally і GA4 - форми і аналітика, обидва з безкоштовним тарифом.
Знання коду в списку немає навмисно. Потрібне дизайнерське око і вміння чітко описати, що ви хочете отримати.
Крок 1. Як скласти мапу сайту з AI?
Почніть не з дизайну, а з діалогу з Claude. Опишіть, що ви продаєте, кому і яку дію має зробити відвідувач. Попросіть мапу сайту: список сторінок, мету кожної і головний заклик. За 10 хвилин у вас є sitemap, який інакше обговорювався б тиждень.
Далі - тексти для головної і ключових сторінок. Правило: тексти до дизайну, а не після. Коли AI верстає під готовий текст, сторінка тримає ритм. Коли текст вставляють у готову верстку, вона ламається на першому довгому заголовку.
Крок 2. Як зробити, щоб сайт з AI не виглядав як шаблон?
Тут провалюється більшість AI-сайтів: один і той самий фіолетовий градієнт, той самий шрифт, ті самі картки. Причина проста - промпт каже, що зробити, але не каже, як це має виглядати. AI заповнює прогалину середнім по інтернету.
Рішення - Skills-файл: звичайний .md-файл, який Claude читає перед кожною задачею. У ньому:
- Типографіка - шрифти, шкала розмірів, інтерліньяж
- Кольори - design tokens бренду з ролями, а не просто HEX
- Грід і відступи - колонки, кратність 4 або 8, ритм секцій
- Заборони - що ніколи не робити (наприклад, градієнти на тексті чи тіні на картках)
Це та сама логіка design tokens, що й у великих дизайн-системах, тільки в мініатюрі. Саме Skills-файл перетворює «згенерований сайт» на сайт з характером.
Крок 3. Як збирати сторінки, щоб стиль не розсипався?
Спочатку зберіть одну сторінку-еталон - найчастіше головну - і доведіть її до ідеалу. Винесіть спільні стилі в окремий CSS-файл. Потім кожну нову сторінку просіть робити «за зразком еталона, з тими самими класами і стилями».
На uxhero.design так працює блог: кожна стаття бере той самий шаблон і той самий ux.css. Нова сторінка не додає жодного нового кольору - і через це 60 статей виглядають як один сайт, а не як 60 експериментів.
Збирайте блоками, а не «весь сайт одним промптом». Один блок - один запит - одна перевірка в браузері. Як мислити блоками і говорити з AI мовою дизайнера, детально в матеріалі про vibe coding для дизайнерів.
Крок 4. Навіщо дизайнеру git, якщо код пише AI?
Бо AI іноді ламає те, що вже працювало. Без git ви дізнаєтесь про це від клієнта. З git кожна зміна - окремий знімок, і повернути вчорашню версію - одна команда, яку Claude виконає сам.
Друга причина - деплой. Коли репозиторій підключений до хостингу, публікація виглядає так: Claude зберіг зміни, відправив у GitHub, і за хвилину сайт оновився. Ніяких FTP і ручного завантаження файлів. Мінімум, який варто знати, зібраний у гайді з git для дизайнерів.
Крок 5. Де хостити сайт з AI: Cloudflare, Vercel чи Netlify?
| Хостинг | Безкоштовний тариф | Коли обирати |
|---|---|---|
| Cloudflare | статика без плати за трафік, SSL, DNS в одному місці | більшість сайтів дизайнера: портфоліо, студія, курси, блог |
| Vercel | Hobby тільки для некомерційних проєктів | сайт на Next.js або React з серверною логікою |
| Netlify | є, з лімітами на трафік і збірки | якщо вже звикли до його форм і інтерфейсу |
Моя рекомендація для статичного сайту - Cloudflare. Домен, DNS, SSL і хостинг в одному кабінеті, трафік не тарифікується, а Claude Code підключає деплой за кілька хвилин. uxhero.design живе саме там: push у головну гілку - і сайт оновлений по всьому світу.
Крок 6. Що зробити після запуску: SEO, форми, аналітика?
Сайт без цього кроку існує, але його ніхто не знайде і ви не знатимете, що на ньому відбувається. Чекліст, який Claude закриває за один підхід:
- SEO-база: унікальні
titleдо 60 символів іdescriptionдо 155, один H1 на сторінку, canonical, Open Graph для прев'ю в соцмережах - sitemap.xml і robots.txt - щоб пошук бачив усі сторінки, а чернетки ні
- Розмітка schema.org (JSON-LD) - Course, BlogPosting, FAQPage. Її читають і Google, і AI-асистенти на кшталт ChatGPT та Perplexity, коли шукають, кого процитувати
- Форми через Tally - без бекенду і без бази даних
- Аналітика GA4 плюс події на ключові кнопки, щоб бачити не тільки відвідування, а й кліки на «Купити»
Попросіть Claude пройтись цим чеклістом по всіх сторінках - це 15 хвилин роботи, яку вручну роблять днями.
Що AI робить сам, а що лишається за дизайнером?
| AI робить | Дизайнер вирішує |
|---|---|
| верстку, адаптив, анімації | структуру сайту і що на ньому головне |
| чернетки текстів | що лишити, а що вирізати (зазвичай третину) |
| SEO-теги, sitemap, розмітку | стиль і правила у Skills-файлі |
| деплой і git | коли сторінка достатньо добра, щоб її публікувати |
Це і є наш кут. Згенерувати картинку чи сторінку сьогодні вміє кожен. Довести сайт до продакшну, де він тримає стиль, індексується і продає, - вміють одиниці. Живі збірки сайтів я показую на YouTube-каналі UX Hero.
Які помилки роблять найчастіше?
- «Зроби мені сайт» одним промптом. Отримуєте кашу, яку неможливо правити частинами.
- Немає Skills-файлу. Кожна нова сторінка трохи інша, і через місяць сайт виглядає зшитим.
- Працювати без git. Перша невдала правка AI коштує вечора відновлення.
- Прив'язатись до конструктора з AI. Сайт в оренді: перестали платити - сайту нема, перенести код не можна.
- Пропустити SEO і аналітику. Сайт є, а відвідувачів і даних нема.
Часті питання
Чи можна зробити сайт з AI без знання коду?
Так. У 2026 році Claude пише весь HTML, CSS і JavaScript, а ви описуєте задачу словами і перевіряєте результат у браузері. Код читати не обов'язково, але варто розуміти структуру проєкту: де сторінки, де стилі, де налаштування деплою. Саме тому дизайнери справляються з цим швидше за інших - вони вже вміють описати, як має виглядати результат.
Скільки коштує зробити сайт з AI?
Обов'язкова витрата одна - підписка Claude Pro (близько 20 доларів на місяць). Хостинг статичного сайту на Cloudflare безкоштовний, форми через Tally і аналітика GA4 теж мають безкоштовні тарифи. Окремо ви платите тільки за домен, зазвичай 10-15 доларів на рік.
Скільки часу займає сайт з AI?
Лендинг з однієї сторінки реально зібрати за вечір. Багатосторінковий сайт з блогом, SEO і аналітикою - за 2-3 вечори, якщо до старту готові мапа сайту, тексти і Skills-файл зі стилем. Найдовший етап - не збірка, а рішення про структуру і контент.
Що краще для сайту з AI: Claude, v0 чи Webflow AI?
Для сайту, який ви хочете повністю контролювати і розвивати, краще Claude: він тримає контекст усього проєкту, пише чистий код без прив'язки до платформи і сам деплоїть. v0 зручний для швидкого перебору окремих блоків. Webflow AI підходить, якщо ви вже живете у Webflow і готові платити за платформу щомісяця.
Де навчитись робити сайти з AI українською?
У UX Hero є курс «Сайти з AI» від Dmytro Nikolaienko: 6 модулів і 2 бонуси, близько 3 годин. Сетап Claude і MCP, мапа сайту, Skills-файли зі стилем, збірка з нуля, AI-картинки і відео, деплой з доменом, формами й аналітикою. Результат - живий сайт у мережі, а не переглянуті відео.
Сайт з AI - це не магія одного промпту, а нормальний виробничий процес: мапа, стиль, еталонна сторінка, git, деплой, SEO. AI бере на себе всю ручну роботу, а за вами лишається те, що й робить сайт хорошим - рішення.