Аі маркетинг у дії: як безкоштовно створити сайт або інтернет-магазин за допомогою Lovable, GitHub, Claude і Vercel
Сучасний аі маркетинг дає можливість запускати сайти й інтернет-магазини за лічені години навіть без команди розробників. У цій статті ми розберемо конкретний робочий стек з чотирьох безкоштовних сервісів, який дозволяє не просто швидко створити сайт, а й потім необмежено редагувати, покращувати й підтримувати його без платних підписок.
Що таке аі маркетинг у створенні сайтів і чому це змінює правила гри
Аі маркетинг у контексті створення сайтів — це підхід, коли текстовий запит («промт») перетворюється на робочий сайт, інтернет-магазин чи веб-застосунок буквально за кілька хвилин, без написання коду вручну. У Lovable, наприклад, достатньо написати: «Мені треба сайт для кабінету масажу» — і сервіс за пару хвилин видає готову мобільну версію з усіма потрібними розділами. Ми в ADSchool регулярно використовуємо саме такий підхід у роботі з лендингами: прості односторінкові сайти реально зібрати з контентом, піксельним трекінгом і формою заявки за чотири-п’ять годин замість кількох днів розробки. Для порівняння, класична розробка того ж лендингу з нуля силами верстальника й дизайнера зазвичай займає кілька робочих днів навіть на найпростіших задачах.
Такий аі маркетинг сайт будується на нейромережі, яка одразу генерує і дизайн, і структуру, і навіть контент розділів. По суті, людина, яка ставить такі завдання алгоритму й перевіряє результат, поступово перетворюється на своєрідного ai маркетолога — фахівця, що керує процесом генерації, а не пише код вручну. Ми показуємо студентам, що інструмент може самостійно додати розділи, які взагалі не були в запиті, — наприклад, унісекс-категорію чи блок бестселерів, якщо визначить, що це логічно для теми магазину. Це заощаджує години роботи дизайнера й копірайтера на етапі чернетки, хоча фінальне шліфування деталей все одно лишається за людиною.
Сайти й лендинги
Односторінкові сторінки під конкретну пропозицію чи послугу.
↳ від 20 хвилин на генерацію
Інтернет-магазини
Каталог товарів, картки, категорії й фільтри без ручного верстання.
↳ каталог на 50+ позицій за хвилини
Веб-застосунки
Інтерфейси з логікою, формами і збереженням даних користувача.
↳ підходить для внутрішніх інструментів
SaaS-платформи
Продукти з підпискою, кабінетом користувача і оплатою.
↳ основа для подальшого масштабування
MVP-версії продукту
Перша робоча версія ідеї для тестування гіпотези на реальних людях.
↳ швидка перевірка попиту
Проблема лімітів: чому no-code сайти швидко впираються у платну підписку
Сайт на Lovable справді можна зробити з нуля буквально з одного промта, але підтримка цього сайту — це вже зовсім інша історія. Кожна правка, кожна нова картка товару чи зміна тексту витрачає платні токени сервісу, і ці ліміти закінчуються значно швидше, ніж здається на старті. Для малого бізнесу чи фрилансера, який веде кілька проєктів одночасно, це означає, що вже за кілька тижнів редагування доведеться або платити за розширений тариф, або зупинити роботу над сайтом до оновлення ліміту. Особливо гостро це відчувається в інтернет-магазинах, де нові картки товару, зміна цін чи додавання категорій відбуваються практично щотижня.
Рішення цієї проблеми — розділити етапи роботи: Lovable використовувати лише як інструмент для створення фундаменту (візуальної основи), а всі подальші правки й доповнення переносити в окремий безкоштовний інструмент. Технічно це можливо, тому що Lovable віддає не просто картинку сайту, а повний вихідний код — HTML, CSS і скрипти, — який можна забрати із собою й розвивати без обмежень платформи. Далі в статті ми покроково розберемо, куди саме передавати цей код і як з ним працювати вже без прив’язки до платних лімітів однієї платформи. Порівняння цих двох сценаріїв — коротко нижче.
Тільки Lovable
Кожна правка й нова картка товару списує платні токени. За кілька тижнів активного редагування ліміти закінчуються, і доводиться купувати платну версію сервісу, щоб продовжити роботу над сайтом.
Lovable + GitHub + Claude + Vercel
Lovable створює лише фундамент, а весь подальший код зберігається в GitHub і редагується через Claude безкоштовно. Vercel публікує зміни автоматично, тож сайт залишається доступним 24/7 без жодних платних підписок.
Крок 1 — створюємо фундамент сайту в Lovable
Створення фундаменту сайту в Lovable починається з одного детального промта, у якому варто одразу вказати нішу, кількість позицій каталогу й референс дизайну. У прикладі з відео запит виглядав так: «Створи інтернет-магазин парфумів на 50 позицій для чоловіків і жінок, зроби сайт схожим на цей», з посиланням на скріншот із Pinterest як референс стилю. Уже за кілька хвилин сервіс генерує повноцінний магазин з розділами для жінок, чоловіків і навіть унісекс-категорією, картками товарів, тегами й базовою структурою навігації. У прикладі з відео сервіс самостійно додав ще й розділ бестселерів, хоча про нього в запиті взагалі не йшлося.
На цьому етапі задача — не намагатися одразу довести дизайн до ідеалу, а зафіксувати основу, яка візуально й структурно влаштовує. Дрібні недоліки на кшталт обрізаних іконок чи накладених елементів набагато вигідніше виправляти вже на наступному кроці через Claude, ніж витрачати на них платні токени Lovable. Тому як тільки фундамент виглядає прийнятно, переходимо до передачі коду в GitHub. Саме цей момент — коли сайт вже подобається візуально, але потребує доопрацювання деталей — і є правильною точкою переходу до наступного кроку стека.
Крок 2 — передаємо код у GitHub, щоб він не залежав від одного сервісу
GitHub — це сховище коду, у якому зберігається все, що Lovable згенерував під капотом: HTML-розмітка, стилі, скрипти й логіка сайту. Реєстрація займає кілька хвилин через звичайну пошту чи Google-акаунт, після чого в налаштуваннях Lovable потрібно знайти вкладку інтеграцій, підключити новий GitHub-акаунт і обрати репозиторій, куди передаватиметься код проєкту. Після підключення будь-яка зміна, зроблена в Lovable, автоматично синхронізується з основною гілкою репозиторію в GitHub. Ця гілка називається production і відповідає за фінальну, опубліковану версію сайту, на відміну від чорнових робочих гілок, де тестуються зміни.
Цей крок принципово важливий, бо саме він розриває залежність від платних токенів Lovable. Код більше не існує лише всередині однієї платформи — він стає активом, яким можна керувати через будь-який зовнішній інструмент, включно з безкоштовним AI-асистентом на кшталт Claude. Без цього кроку весь подальший стек просто не спрацює, тому пропускати реєстрацію в GitHub не варто навіть тим, хто ніколи раніше не працював з кодом. Реєстрація акаунта відбувається так само, як у будь-якому іншому сервісі, — через пошту чи Google-профіль, без спеціальних технічних навичок.
Крок 3 — підключаємо Claude як безкоштовного розробника
Claude в цій схемі виконує роль умовного програміста, який приймає звичайні текстові інструкції українською мовою й перетворює їх на коректний код. Підключення відбувається за спеціальним лінком інтеграції з GitHub: після встановлення потрібно надати доступ до потрібних репозиторіїв і зареєструвати з’єднання. Далі в самому GitHub-акаунті створюється персональний токен доступу з правами на читання і запис — саме права на запис дозволяють Claude не лише переглядати код, а й реально вносити в нього зміни. Без прав на запис Claude бачитиме репозиторій, але не зможе змінити в ньому жодного рядка, тож цей крок не варто пропускати навіть заради економії часу.
Після того як токен згенеровано й переданий у чат із Claude, можна одразу перевірити з’єднання простим запитом на кшталт «чи бачиш ти код і чи можеш його редагувати». Далі вся подальша робота зводиться до простих формулювань: «тут обрізані іконки, поправ це в коді», «зроби мені блог на чотири статті по темі сайту» чи «зміни кольорову схему сайту на зелену». Кожна така правка автоматично потрапляє в GitHub і чекає на публікацію. Якщо Claude за замовчуванням відповідає англійською, достатньо просто написати запит українською — мова спілкування не впливає на якість генерованого коду.
Персональний токен доступу до GitHub дає повний контроль над репозиторієм — тобто над усім кодом сайту. Його не можна показувати стороннім, зберігати в загальнодоступних нотатках чи випадково залишати на скріншотах і відео: якщо токен потрапить не в ті руки, репозиторієм зможе керувати будь-хто.
Крок 4 — публікуємо сайт через Vercel і отримуємо доступ 24/7
Vercel відповідає за публікацію готового проєкту в інтернеті так, щоб він працював цілодобово, а не лише під час локальної розробки. Реєстрація безкоштовна за умови вибору персонального (не комерційного) типу використання проєкту — комерційний варіант одразу передбачає платний тариф. Після реєстрації Vercel підключається до того самого GitHub-репозиторію, куди Lovable й Claude вносять зміни, і кожен новий коміт автоматично збирається та публікується на робочому домені без ручного втручання. За замовчуванням Vercel видає технічний піддомен, але за потреби до нього легко підключити власне доменне ім’я через стандартні DNS-налаштування, як і на будь-якому іншому конструкторі сайтів.
Головна перевага такої автопублікації в тому, що правки, зроблені через Claude вранці по дорозі на зустріч чи ввечері з мобільного телефону, з’являються на сайті вже за кілька секунд після завершення збірки. Це замінює традиційний цикл «розробник → тестування → деплой», який зазвичай займає дні, на процес, що вкладається в лічені хвилини. Практично це означає, що можна поставити задачу Claude, відійти на каву, а повернувшись — побачити вже опублікований результат на робочому сайті. Такий цикл однаково працює як за ноутбуком в офісі, так і з телефону з будь-якої кав’ярні.
Чекліст підключення безкоштовного стеку:
- Створити фундамент сайту в Lovable за одним детальним промтом
- Зареєструватися в GitHub і підключити акаунт до Lovable
- Синхронізувати весь код проєкту в основну гілку репозиторію
- Підключити Claude до GitHub і згенерувати токен доступу з правами читання й запису
- Зареєструватися у Vercel і підключити той самий репозиторій для автопублікації
Якщо після налаштування всього стека виникло бажання одразу протестувати результат на реальному трафіку — саме тут варто підключати аналітику й запускати рекламу через Google Ads, щоб перевірити, чи конвертує сайт відвідувачів у заявки чи покупки.
Що ще можна редагувати в цьому стеку і навіщо семантика для AI-пошуку
У межах цього стека Claude здатний вносити практично будь-які зміни: додавати нові товари з таблиці Excel, генерувати блог зі статтями, змінювати кольорову палітру чи виправляти верстку окремих блоків. У прикладі з відео Claude за кілька хвилин створив чотири статті по дві тисячі символів і одразу опублікував сторінку блогу, якої раніше на сайті не було. Проблема в тому, що згенеровані «навмання» статті рідко приносять трафік з пошуку — для цього потрібна робота з ключовими фразами. Так само легко Claude додає нові товари з готової таблиці — достатньо передати йому Excel-файл з фотографіями, назвами й описами, і картки з’являться на сайті без ручного заповнення кожної позиції.
Саме тому будь-який аі маркетинг сайт, зроблений через подібний стек, варто доповнювати продуманою семантикою, а не рандомним контентом. Ґрунтовний підбір ключів і структури статей підвищує шанси, що матеріал індексується в Google й потрапляє у видачу поруч зі звичним ai seo-контентом, а не губиться серед мільйонів схожих сторінок. У ADSchool ми окремо розбираємо, як складати таку семантику за допомогою AI-інструментів, щоб контент дійсно працював на позиції в пошуку, а не просто заповнював розділ блогу. Без цієї роботи новий блог технічно існує на сайті, але залишається практично невидимим для пошукових систем і потенційних клієнтів.
Часті запитання
Скільки коштує весь цей стек інструментів?
Базові версії Lovable, GitHub, Claude та Vercel безкоштовні — платити доведеться лише за платний тариф Lovable, якщо активно редагувати сайт саме в ньому, чого весь описаний підхід і дозволяє уникнути.
Чи потрібно вміти програмувати, щоб це налаштувати?
Ні, усі кроки — реєстрація акаунтів, підключення інтеграцій і генерація токена — виконуються через звичайний веб-інтерфейс, а подальші правки описуються Claude звичайною мовою без коду.
Чому Claude пише, що не має доступу до репозиторію?
Найчастіша причина — репозиторій приватний і токен доступу ще не згенеровано або згенеровано без прав на читання й запис для потрібного репозиторію.
Чи можна так само створити не сайт, а SaaS-продукт?
Так, увесь стек — Lovable, GitHub, Claude, Vercel — однаково підходить і для лендингів, і для інтернет-магазинів, і для повноцінних SaaS-платформ чи MVP-версій продукту.
Головний результат такого підходу — це фактично безлімітний «розробник», доступний 24/7, який редагує сайт за текстовим запитом і не витрачає бюджет на щомісячну підписку.
Якщо ви ведете кілька клієнтських проєктів одночасно, цей самий принцип економії часу й бюджету варто застосовувати і в просуванні — системний підхід до digital-маркетингу допомагає планувати роботу над сайтом, рекламою і контентом як єдину стратегію, а не розрізнені завдання.
Отримати →