Як зробити сайт за допомогою Claude Code за 30 хвилин

Коротко (TL;DR)

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

Що отримаєте на виході: живий сайт за власною адресою в інтернеті. Що знадобиться: платний план Claude (Pro — $20/міс, або $17/міс за річної оплати; безкоштовний тариф Claude Code не включає), встановлений Claude Code і приблизно 30 хвилин.

Одне чесне застереження одразу, бо саме воно визначає все інше: 30 хвилин — це правда лише для простого статичного сайту (звичайні HTML, CSS і трохи JavaScript, без фреймворків). Той самий Claude Code на «дорослому» стеку (Next.js плюс система керування контентом) у реального нетехнічного користувача забрав три дні (за його розповіддю, листопад 2025). Для першого сайту беремо простий шлях — до складнішого повернетесь, коли освоїтесь.

Що знадобиться

Три речі перед стартом:

1. Акаунт із платним планом. Claude Code входить у підписку Claude Pro ($20/міс, або $17/міс за річної оплати) або Max (від $100/міс) — ціни на 10 липня 2026. Безкоштовний Claude.ai доступу до Claude Code не дає. Як влаштовані плани і як оплатити — тема окремого гайда про підписку на Claude Code.
2. Встановлений Claude Code. Встановлення — одна команда в терміналі: на macOS/Linux curl -fsSL https://claude.ai/install.sh | bash, на Windows у PowerShell irm https://claude.ai/install.ps1 | iex. Вимоги мінімальні: macOS 13+, Windows 10 1809+ або актуальний Linux, 4 ГБ пам’яті.
3. Півгодини часу й ідея сайту. Навіть приблизне уявлення — «лендинг для моєї кав’ярні з меню й контактами» — вже достатньо, щоб почати.

Термінал тут — це текстове вікно, куди вводять команди (на Mac — «Термінал», на Windows — PowerShell). Далі майже все відбуватиметься всередині діалогу з Claude Code звичайними словами.

Як влаштовані ліміти Claude Code і як їх розтягнути

Як диктувати промпти та вставляти скріншоти в Claude Code

Скільки коштує Claude Code і як оплатити підписку

Як встановити Claude Code: повний гайд для всіх систем

Чому ШІ забуває й плутається в довгому діалозі: контекстне вікно простими словами

Обираємо стек для початківця

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

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

Створіть порожню папку під проєкт (наприклад, my-site), відкрийте її в терміналі й запустіть:

claude

Корисний перший крок усередині — команда /init: вона створює файл CLAUDE.md, куди Claude Code записує домовленості щодо проєкту і читає їх на початку кожної сесії. Офіційний гайд називає це «найціннішим кроком налаштування» — з ним агент краще тримає контекст вашого сайту.

Перший промпт: описуємо сайт

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

«Зроби односторінковий сайт для кав’ярні Bean There. Розділи: шапка з назвою і кнопкою Меню, блок Про нас, меню з 6 позицій із цінами, галерея на 3 фото-заглушки, футер з адресою і мапою. Стиль теплий, кремово-коричнева палітра, великий сучасний шрифт. Лише HTML, CSS і ванільний JavaScript, без фреймворків.»

Claude Code створить файл index.html (і, за потреби, стилі й скрипти), пояснить ухвалені рішення і запитає уточнення, якщо чогось не вистачає. Далі ви працюєте ітеративно — виправляєте словами.

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

Дивимось результат локально

Перш ніж публікувати, погляньте на сайт у себе. Два способи:

• Відкрити створений index.html подвійним кліком у браузері.
• Попросити Claude Code запустити локальний сервер: «Запусти локальний сервер, щоб я подивився сайт». Зазвичай це npx serve . і адреса на кшталт http://localhost:3000.

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

Приклад: як виглядає цикл роботи

Щоб було зрозуміліше, ось як проходить типова збірка лендинга кав’ярні за промптом вище.

Claude Code відповідає планом і створює файли: index.html зі структурою (шапка, меню, галерея, футер), style.css з теплою палітрою і, за потреби, script.js для плавної прокрутки до розділів. Він пояснює рішення — наприклад, чому обрав гнучку розкладку для меню — і запитує, якщо чогось не вистачає: «Додати форму бронювання?»

Далі правки йдуть словами, а Claude Code перекладає їх у код:

• «Меню у дві колонки на широкому екрані і в одну — на телефоні» — агент додасть медіазапит (правило, за яким верстка змінюється залежно від ширини екрана).
• «Зроби шапку липкою під час прокрутки» — виправить CSS.
• «Заміни текст у футері на Відкриті з 8:00 до 22:00» — оновить вміст.

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

Публікуємо сайт в інтернет

Локальний сайт бачите тільки ви. Щоб отримати живе посилання (деплой, тобто розгортання сайту в інтернеті), є три шляхи:

Найпростіший шлях — прямо в діалозі написати: «Опублікуй цей сайт на Vercel». Claude Code створить репозиторій на GitHub, завантажить файли, підключить Vercel — безкоштовний хостинг сайту, з яким працює за замовчуванням цей конвеєр, — збере проєкт і поверне живий URL: деплой у нього не окремий «складний етап», а одна фраза. Знадобиться лише безкоштовний акаунт Vercel, агент проведе через підключення.

Якщо не хочете зв’язуватися з Git узагалі — є Vercel Drop (vercel.com/drop): це розгортання сайту без коду і без встановлення чого-небудь — перетягуєте папку чи zip прямо у вікно браузера і одразу отримуєте посилання. Ідеальний варіант для зовсім нетехнічного старту.

Безкоштовні альтернативи — Netlify (схожий безкоштовний тариф) і GitHub Pages (хостинг прямо з GitHub-репозиторію, версіювання в комплекті). GitHub Pages вмикається вручну: у репозиторії відкрийте Settings → Pages і в розділі джерела оберіть «Deploy from a branch» — сайт стане доступний за адресою на кшталт ваш-логін.github.io/назва-репозиторію. Це зручно, якщо код і так лежить на GitHub і вам не потрібні функції збірки Vercel.

Який шлях обрати? Якщо хочете мінімум дій — просіть Claude Code задеплоїти на Vercel. Якщо боїтеся термінала і Git — Vercel Drop. Якщо вже тримаєте проєкт на GitHub — Pages. Усі три дають живе посилання безкоштовно; різниця лише в тому, скільки кроків робите руками.

Власний домен

Адресу на кшталт my-site.vercel.app можна замінити на власний домен. Підключення до Vercel залежить від типу адреси:

• Apex-домен (example.com) — прописуєте в реєстратора A-запис на адресу Vercel.
• Субдомен (www.example.com, blog.example.com) — прописуєте CNAME на унікальну vercel-адресу проєкту.

Якщо власний домен потрібен одразу і не хочеться налаштовувати записи вручну, частина бюджетних хостингів дає домен безкоштовно в комплекті з тарифом (наприклад, хмарний тариф Hostinger — від ~$3.99/міс на травень 2026, з безкоштовним доменом у плані). Це альтернатива зв’язці «Vercel + окремо куплений домен».

Просунуті прийоми

Коли база готова, кілька речей понад мінімум, які Claude Code зробить за одним проханням:

• Адаптивність під телефон. «Перевір, як сайт виглядає на мобільному, і полагодь, що ламається» — агент додасть медіазапити і виправить відступи під маленький екран.
• SEO-розмітка. «Додай title, meta description і Open Graph-теги» — сайт стане акуратно виглядати під час надсилання посилання в месенджері і зрозумілішим для пошукових систем.
• Форма зворотного зв’язку без сервера. «Додай форму через Formspree» — на статичному сайті з’явиться робоча форма, якій не потрібен власний бекенд.
• Єдиний стиль через CLAUDE.md. Занесіть у файл проєкту палітру, шрифт і тон — і нові сторінки Claude Code робитиме в тому самому стилі, не перепитуючи щоразу.
• Аналітика. «Підключи лічильник відвідувань» — агент вставить потрібний код у розмітку, і ви бачитимете, скільки людей заходить.

Усі ці кроки — теж звичайні фрази в діалозі, а не окрема наука. Починати з них не потрібно: спочатку живий сайт, потім покращення.

Часті помилки та ризики безпеки

Найнебезпечніша помилка новачка в AI-кодингу — не зламана верстка, а секрет, що витік. Розберемо головні граблі:

• API-ключі та паролі у публічному репозиторії. Якщо випадково закомітити файл .env із ключем у відкритий GitHub, просте видалення файлу новим комітом не врятує: секрет лишається в історії Git (вона влаштована як «лише додавання»). Правильний порядок — спершу відкликати чи змінити ключ у провайдера, потім додати .env у .gitignore. Масштаб проблеми серйозний: за звітом GitGuardian за 2026 рік, у публічних комітах за 2025-й знайшли близько 28,65 млн нових захардкоджених секретів, а витоки ключів AI-сервісів зросли на 81% за рік.
• Секрети у frontend-коді. Ключ, вставлений у клієнтський JavaScript «на хвилинку для тесту», фактично публічний — його видно через інструменти розробника, мережеві запити та збірку. Секретам місце лише на бекенді, у змінних середовища.
• Занадто розпливчастий промпт — втрачаєте час на переробки; конкретика економить хвилини.
• Забули про відкат. Поки правка не закомічена, історія Git незаймана, і невдалу зміну скасовує команда git checkout — це ваша «кнопка скасування», а не привід лагодити все руками.

Хороший інструмент для порівняння можливостей — Claude Design, окремий продукт Anthropic для дизайну і прототипів сайтів; для коду ж лишається Claude Code. Claude вміє й інше — наприклад, працювати як ШІ-колега в Slack.

Що далі

Коли перший сайт в інтернеті, логічні наступні кроки: підключити власний домен з поштою, налаштувати автоматичний деплой на кожну зміну (CI/CD), додати блог чи каталог на фреймворку. Усе це — теж через Claude Code, але вже окремими темами. Для першого заходу достатньо того, що у вас є живе посилання, яке не соромно показати. Головну навичку ви вже отримали: описувати результат словами і доводити його правками до потрібного вигляду — далі це працює і для набагато складніших проєктів.

FAQ

Чи потрібно вміти програмувати, щоб зробити сайт на Claude Code? Ні. Ви описуєте сайт словами, а код пише агент. Корисно розуміти базові поняття (файл, папка, деплой) — але програмувати самому не потрібно.

Чи вистачить безкоштовного Claude? Ні. Claude Code не входить у безкоштовний тариф Claude.ai — потрібен Pro ($20/міс, або $17/міс за річної оплати) або Max. Для одного простого сайту вистачає Pro.

Що робити, якщо Claude Code видав помилку під час деплою? Опишіть помилку прямо в діалозі — агент найчастіше сам запропонує виправлення. Якщо правка погіршила результат, відкотіться через git checkout до останнього робочого стану.

Чи можна потім ускладнити сайт? Так. Почніть зі статики, а коли захочете блог, каталог чи динаміку — попросіть Claude Code перевести проєкт на фреймворк. Це вже займе більше часу, ніж півгодини.

Чи безпечно давати Claude Code доступ до термінала? За замовчуванням агент запитує підтвердження перед діями. Головне правило безпеки — не зберігати ключі й паролі в коді і не публікувати їх у відкритий репозиторій.

За скільки реально зібрати перший сайт? Близько 30 хвилин для простого статичного сайту, включно з публікацією. Складний стек із фреймворком і CMS — це вже дні роботи, не для першого разу.

Чи потрібен мені одразу власний домен? Ні. Vercel, Netlify і GitHub Pages одразу дають безкоштовну адресу (наприклад, my-site.vercel.app), на якій сайт повноцінно працює. Власний домен підключають пізніше, коли сайт устоявся і хочеться гарного посилання.

Що робити, якщо сайт вийшов не таким, як я уявляв? Опишіть словами, що не так: «шапка занадто велика», «кольори бляклі», «прибери галерею». Claude Code переробить конкретний шматок, не ламаючи решту. Це нормальна частина процесу — рідко коли перший варіант ідеальний, і переробка правками займає хвилини.