КодінгНовачокБезкоштовно

Сайт без коду за вечір

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

⏱ 26 хв5 кроків

Для кого

Потрібен сайт (портфоліо, візитка, невеликий проєкт), але немає часу вчити код
Пробував/пробувала AI-білдери, але результат розсипався або не публікувався
Хочеш зрозуміти логіку вайбкодингу, а не просто одну генерацію

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

AI-асистент для коду (Claude / Cursor / Lovable)
Акаунт для деплою (Vercel/Netlify)

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

01
Сформулюй сайт у три речення
Перш ніж писати промпт AI-асистенту, відповідай собі:
- Що це за сайт (портфоліо, лендінг, візитка)?
- Хто його дивиться і що вони мають зробити (написати, купити, зберегти контакт)?
- З яких секцій він складається (наприклад: хедер, про мене, роботи, контакти)?
Це твій бриф — без нього AI будуватиме навмання.
Порада Якщо не можеш описати сайт трьома реченнями — ти ще не готовий/готова генерувати. Спочатку структура в голові, потім промпт.

Задай технічний каркас одним промптом

Перший промпт до AI-асистента — не про дизайн, а про структуру проєкту. Так ти отримуєш скелет, який потім наповнюєш по секціях.

Готовий промпт

Створи новий проєкт простого одно- або багатосторінкового сайту на Next.js із Tailwind CSS. Структура: [перелічи секції/сторінки з попереднього кроку]. Зроби мінімалістичний темний дизайн, багато повітря, сильна типографіка, без градієнтів і зайвих анімацій. Спочатку створи структуру файлів і порожні секції-заглушки з підписами, без фінального контенту — я наповню їх наступними промптами.

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

03
Наповнюй сайт секція за секцією
Тепер проходь по кожній секції окремим промптом — так AI не «губить» контекст і ти бачиш прогрес:
- «Наповни секцію Hero: заголовок, підзаголовок, кнопка CTA — ось текст: [встав]»
- «Зроби секцію Про мене з фото-плейсхолдером і трьома пунктами»
- «Додай секцію Контакти з формою (ім'я, email, повідомлення)»
Після кожного промпту — перевіряй результат у браузері, перш ніж рухатись далі.
04
Перевір на телефоні й виправ дрібниці
90% реальних відвідувачів зайдуть із телефону — тому мобільна версія важливіша за десктопну.
- Зменш вікно браузера або відкрий сайт на телефоні.
- Перевір: текст не вилазить за краї, кнопки натискаються пальцем, немає горизонтального скролу.
Якщо щось «пливе» — попроси AI: «зроби секцію Х адаптивною для мобільних, зараз на вузькому екрані ламається [опиши що саме]».
Порада Не проси «зроби гарніше» — це занадто розмито. Проси конкретно: що не так і де саме.
05
Опублікуй сайт
Останній крок — деплой, щоб сайт мав реальну адресу в інтернеті:
- Заведи акаунт на Vercel або Netlify (безкоштовно для старту).
- Підключи проєкт (через GitHub або пряме завантаження — залежно від інструменту).
- Дочекайся білду й отримай посилання.
Звір фінальний сайт на живому лінку з телефону і десктопу — це і є фінальна перевірка.

Очікуваний результат

Опублікований сайт із реальним посиланням: структурований, адаптивний під мобільні, зроблений без жодного рядка коду, написаного вручну — весь код написав AI-асистент за твоїми покроковими промптами.

Головна помилка

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