Vibe coding: як зробити сайт для бізнесу без розробника

Зробити простий сайт для свого бізнесу без розробника зараз реально. Ви описуєте потрібний результат звичайною мовою, ШІ-агент пише код і збирає сторінку. Новачок самостійно закриває лендинг, сайт-візитку та форму збору заявок. Далі йде межа: онлайн-оплата, персональні дані клієнтів і складна логіка вже потребують підрядника.

Vibe coding — це робота з ШІ-агентом словами: ви описуєте, який сайт потрібен, агент пише код і збирає сторінку. Без розробника реально зібрати лендинг, сайт-візитку та форму збору заявок. Код читати не обовʼязково, але роботу треба приймати за видимою поведінкою сайту: сторінка відкривається за публічною адресою, форма надсилає заявку, контакти клікабельні, вигляд коректний на телефоні. Закладайте вечір або вихідні, а не кілька хвилин. Онлайн-оплата, персональні дані клієнтів і складна бізнес-логіка вже потребують підрядника.

Короткий словник

• Vibe coding — робота з ШІ-агентом звичайною мовою: ви описуєте потрібний результат, агент пише код.
• Лендинг — одна довга сторінка під одну дію відвідувача, найчастіше під заявку.
• Сайт-візитка — невеликий сайт із кількох сторінок: послуги, про майстра, контакти.
• Хостинг — сервіс, на якому лежать файли сайту, щоб сторінка відкривалася в інтернеті.
• Домен — адреса сайту, яку набирають у браузері.

Що таке vibe coding і що це змінює для власника бізнесу

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

Приблизно так працює будь-який сучасний помічник для розробки. Якщо сама ідея агента у вас поки розмита, почніть з розбору, що таке Claude Code простими словами, а якщо ще не обрали помічника, допоможе порівняння Claude чи ChatGPT для новачка.

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

Чому код можна не читати, а результат перевіряти треба

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

Агент упевнено скаже, що все готово. Перевіряєте ви.

Що реально зібрати самому: лендинг, візитка, форма заявок

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

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

Завдання, які самороб не тягне

Межу задає ціна помилки. Поки вона вимірюється вашим часом, робіть самі. Щойно на сайті зʼявляються чужі гроші або персональні дані клієнтів, потрібен той, хто відповідає за результат.

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

Як поставити завдання агенту: що обовʼязково вказати у першому описі

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

Фактура про бізнес: без неї агент напише загальні слова

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

Перед тим як відкривати агента, витратьте пів години на нотатку про свій бізнес:

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

Ця нотатка потім піде і в тексти сайту, і в опис для реклами.

Маршрут від опису до опублікованого сайту

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

Якщо ви тільки збираєтесь ставити агента на свій компʼютер, для Windows є окремий покроковий розбір: встановлення Claude Code на Windows.

Правки по скріншотах: як показати агенту, що саме не так

Верстку важко описати словами. Простіше зробити знімок екрана з проблемним місцем, показати його агенту і назвати проблему конкретно: на телефоні кнопка заявки заїжджає за край екрана, блок з послугами розтягнувся на всю ширину, заголовок наліз на зображення.

одна правка за раз. Коли ви просите змінити пʼять речей одночасно, агент зробить чотири, а пʼяту тихо загубить, і ви не зрозумієте, на якому кроці зламався вигляд сторінки.

Публікація: коли сайт справді видно з чужого телефона

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

Перевірка займає хвилину. Попросіть знайомого відкрити адресу зі свого телефона, не підключеного до вашого Wi-Fi. Відкрилося і виглядає нормально: публікація відбулася. Не відкрилося: сайт поки живе тільки у вас, і це питання до налаштувань хостингу.

Куди приходять заявки з форми і як перевірити, що вони доходять

Форма надсилається візуально успішно навіть тоді, коли отримувач листів не налаштований. Кнопка спрацьовує, зʼявляється подяка, лист нікуди не йде. Саме тут новачки втрачають перші звернення і вирішують, що сайт нікому не цікавий.

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

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

повторюйте тестову заявку після кожної правки форми. Агент міг перейменувати поля або переписати обробник, і форма, яка вчора приносила звернення, сьогодні мовчить.

Чек-лист приймання без знання коду

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

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

Типові поломки новачка і що з ними робити

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

Лікуються вони однаково: показуєте агенту скріншот, називаєте симптом, отримуєте правку, перевіряєте ще раз.

Скільки це коштує часом і що буде із сайтом далі

Закладайте вечір або вихідні, а не кілька хвилин. Основний час іде на підготовку фактури про бізнес і на кола правок; сама генерація сторінки швидка.

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

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

Власний домен чи технічна адреса хостингу

На старті хостинг дає технічну адресу, і сайт на ній повністю працює. Щоб перевірити гіпотезу і показати сторінку першим клієнтам, цього досить.

Власний домен потрібен тоді, коли адресу треба комусь називати: друкувати на візитці, ставити в рекламу, вписувати в профіль соцмережі. Технічна адреса виглядає незрозуміло і погано запамʼятовується, а виглядати вона буде у клієнта перед очима.

Де межа саморобу: платежі, персональні дані, складна логіка

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

Порівняйте два збої. Зламалася форма заявок: ви втратили звернення і полагодили її наступного дня. Зламалася оплата: клієнт втратив гроші, а ви отримали розбір із банком і зіпсовану репутацію. Другий випадок вимагає підрядника, який відповідає за результат і супроводжує сайт після запуску.

Юридичний мінімум для сайту, що збирає заявки

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

Складні випадки віддавайте юристу. Для простої форми заявок вистачає базового набору вище, і зібрати його агент теж допоможе.