Як створити AI-продукт для маркетингу за 40 хвилин

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

Що таке MVP-продукт і чому аі маркетинг починається саме з нього

MVP, або мінімально життєздатний продукт, — це найпростіша робоча версія сервісу, яка виконує одну ключову функцію і дозволяє перевірити гіпотезу на реальних користувачах ще до того, як у продукт вкладено гроші на розробку, дизайн чи серверну інфраструктуру. У прикладі з відео команда придумала сервіс «Луксі» — умовний бренд одягу, у якому користувач завантажує власне фото в повний зріст, обирає одяг із колекції бренду і одразу бачить, як він буде виглядати в конкретному образі та на конкретному фоні: пляж, місто, коворкінг чи студія. Для маркетолога це не просто технічна вправа, а спосіб протестувати ідею продукту, воронку продажів чи фічу лояльності без місяців розробки і без команди програмістів. Важливо й те, що вся ця схема доступна власнику каталогу товарів чи інтернет-магазину — достатньо підключити фотографії наявних позицій, і сервіс одразу починає працювати з реальним асортиментом, а не з тестовими зображеннями. Так гіпотезу перевіряють не на паперовому макеті, а на живому продукті, яким користувач може скористатися прямо зараз.

Саме тут аі маркетинг проявляється найпрактичніше: замість того щоб замовляти технічне завдання розробникам і чекати тижнями, сучасний ai маркетолог формулює промт нейромережі та отримує робочий прототип за годину. Історія переглядів і приміряних товарів — це готова база для email-розсилок чи ретаргетингу, тому такий MVP одразу дає матеріал для подальших кампаній, а не лише красиву демонстрацію. Кожен приміряний образ по суті стає кроком у воронці продажів, яку можна відстежувати й аналізувати ще до запуску платної реклами. Наприклад, бренд одягу бачить, які саме комбінації користувачі приміряють найчастіше, і може адаптувати рекламні креативи чи асортимент під реальний попит, а не під припущення. Це змінює саму логіку роботи маркетолога: рішення приймаються на основі поведінки реальних відвідувачів прототипу, а не на основі гіпотез, перевірених лише в презентації.

Яка технологічна схема потрібна для продукту без єдиного рядка коду

Технологічна схема такого AI-продукту складається із шести елементів: бекенду на Supabase, фронтенду, згенерованого в Lovable, сховища коду на GitHub, хостингу на Vercel, AI-агента Claude Code для правок і нейромережі GPT Image для генерації фото — і всі елементи, крім токенів на генерацію зображень, використовуються безкоштовно. Бекенд потрібен для того, щоб зберігати інформацію про користувачів, історію їхніх приміряних образів і завантажені фотографії товарів, — без нього сайт скидає всі дані щоразу, коли користувач оновлює сторінку. Фронтенд — це те, що бачить відвідувач: форма завантаження фото, каталог одягу, кнопка «приміряти» і калькулятор вартості образу. GitHub у цій схемі виконує роль архіву коду, до якого можна підключити і хостинг, і AI-агента для подальших правок, а Vercel відповідає за те, щоб сайт залишався доступним цілодобово без ручного перезапуску серверів. Останній елемент, GPT Image, безпосередньо генерує фінальне зображення — саме він накладає обраний одяг на фото користувача і додає фон обраної сценарії.

Як створити дизайн продукту в Lovable за одним промтом

Дизайн майбутнього продукту зручно писати одним детальним текстовим промтом у Lovable — сервіс одразу генерує і візуал, і код сторінки, готовий для подальшого підключення до бекенду. У прикладі з відео перший варіант дизайну для порівняння створили напряму в чаті Claude, використавши той самий промт: результат вийшов схематичним і візуально сирим — форма для фото, блок із товарами, та без стилю бренду. Другий варіант того самого промта пропустили через Lovable, і різниця виявилася відчутною: продукт отримав охайну структуру, читабельні блоки і вигляд, який реально можна показати клієнту чи інвестору без сорому. При цьому Lovable не просто малює картинку — він одразу віддає повноцінний код сторінки, який можна редагувати, доповнювати і вивантажувати далі в GitHub. Це принципова відмінність від класичних дизайн-макетів у графічних редакторах, де готовий візуал ще потрібно окремо верстати і перетворювати на робочий сайт.

Такий підхід підтверджує ключову ідею аі маркетинг: сучасні digital інструменти варто обирати під конкретне завдання, а не використовувати один сервіс для всього поспіль. Загалом ринок такий, що діджитал інструменти для генерації дизайну, тексту чи зображень постійно множаться, і навичка швидко тестувати нові сервіси стає такою ж важливою, як і класичні маркетингові компетенції. Для генерації тексту чи логіки бекенду краще підходить Claude, а для першого чорнового дизайну — інструмент, спеціалізований саме на верстці, як-от Lovable. Коли базовий інтерфейс влаштовує хоча б на рівні MVP, можна рухатися далі — вивантажувати код у GitHub і підключати хостинг.

Курс

Digital Маркетинг Стратег

SEO, SMM, Email, аналітика і стратегія — комплексний маркетинг від А до Я.

Дивитись програму →

Як підключити GitHub і Vercel, щоб зміни публікувалися самі

Код, згенерований у Lovable, підключається до GitHub у три кроки: в налаштуваннях проєкту вибрати розділ Git, обрати GitHub, авторизуватися і підтвердити доступ до потрібного репозиторію. Після підключення весь код автоматично вивантажується в новий репозиторій, і саме туди в подальшому потрапляють усі правки, внесені через AI-агента. Наступний крок — підключити Vercel, який відповідає за те, щоб сайт працював онлайн цілодобово і сім днів на тиждень, а не лежав мертвим файлом на диску. Обидва сервіси, GitHub і Vercel, безкоштовні для проєктів такого масштабу, тож на цьому етапі жодних витрат не виникає. Головна перевага такого підключення — автоматизація: після того як обидва сервіси синхронізовано, будь-яка наступна правка коду публікується сама, без ручного завантаження файлів.

1. Зареєструватися у Vercel і підключити свій обліковий запис GitHub.
2. Обрати потрібний репозиторій зі списку, який Vercel підтягує автоматично.
3. Натиснути «Import» і дочекатися першого деплою.
4. Перевірити робочу лінку — сайт має бути доступний онлайн, навіть якщо бекенд ще не підключений.

На цьому етапі сайт уже відкривається за посиланням, але реєстрація чи примірка одягу ще не працюють — бекенду з базою даних поки немає, тому будь-яка дія користувача просто зникає після оновлення сторінки. Це нормальний і очікуваний стан MVP на середині шляху: інтерфейс уже живий, публічний і доступний для показу, а логіка з даними додається наступним кроком. Саме на цьому етапі зручно показувати проміжну версію команді або клієнту — вони бачать реальний вигляд продукту, навіть якщо функціональність ще не повна. Наступний крок логічно продовжує цю схему: підключити AI-агента, який зможе вносити подальші правки прямо в репозиторій без участі розробника.

Як налаштувати Claude Code для редагування фронтенду і бекенду

Claude Code підключається безпосередньо до GitHub-репозиторію через розділ «Код» застосунку і після авторизації бачить увесь код проєкту, з яким можна працювати текстовими запитами замість ручного написання рядків. Перевірити зв’язок просто: достатньо попросити агента внести невелику косметичну зміну, наприклад перефарбувати інтерфейс у певну кольорову гаму за прикладом фотографії, і подивитися, чи зміни зʼявилися і в репозиторії, і на живому сайті після повторного деплою. Коли ця правка проходить успішно, стає зрозуміло, що весь ланцюжок «Claude → GitHub → Vercel» працює коректно і подальші зміни можна вносити тим самим способом без залучення розробника. Далі саме через Claude Code зручно додавати нові фічі: новий фільтр сценарію фотосесії, зміну тексту кнопки чи навіть нову сторінку — все це формулюється звичайним текстовим запитом, який агент перетворює на конкретні правки в коді. Це і є ключова ідея підходу: маркетолог керує продуктом через діалог, а не через технічну документацію.

Як підключити Supabase і токен GPT Image для генерації зображень

Supabase підключається до проєкту через розділ інтеграцій Vercel: у маркетплейсі потрібно знайти Supabase, натиснути «Install» і обрати — підтягнути наявну базу даних або створити нову з чистого аркуша, що зручніше для абсолютно нового продукту. Далі в кабінеті OpenAI генерується окремий API-ключ, який додається як змінна середовища або в Supabase, або у Vercel — конкретне місце залежить від того, як саме Claude Code налаштував проєкт, і сама нейромережа може підказати правильну назву змінної. Коли ключ додано і збережено, лишається зробити ще один деплой, щоб зміни підхопилися на продакшні, і перевірити генерацію: завантажити фото, обрати товар зі сценарієм фону (наприклад, коворкінг) і натиснути «приміряти». Вибір між створенням нової бази і підключенням наявної залежить від стадії проєкту: для абсолютно нового MVP простіше почати з чистого аркуша, а для продукту, який уже тестувався раніше, зручніше підтягнути наявні дані про товари й користувачів.

Перша генерація рідко виходить ідеальною — зображення може вийти кумедним, з дещо спотвореними пропорціями чи фоном, який лише частково відповідає задуму. Це нормальний етап для будь-якого MVP: якість покращується, коли товару додають кілька фотографій з різних ракурсів замість одного знімка, а промт для нейромережі стає деталізованішим із кожною ітерацією. Саме тому в кінці процесу варто додати фільтр «вайб фотосету» — простий текстовий запит до Claude з переліком сценаріїв (пляж, місто, коворкінг, студія за замовчуванням) дозволяє користувачу самостійно обирати атмосферу майбутнього фото, не чіпаючи код руками. Для реального продакшну варто закладати час на доопрацювання промта — пояснювати нейромережі, як саме має лягати одяг, які пропорції зберігати і на що звертати увагу при різних типах фігур.

Скільки коштує і скільки часу займає запуск такого AI-продукту

Запуск подібного MVP займає в середньому тридцять-сорок хвилин активної роботи, а платити доводиться лише за токени генерації зображень у GPT Image — Supabase, GitHub, Vercel і Claude Code на старті залишаються безкоштовними для такого обсягу навантаження. Вартість однієї генерації зображення варто перевіряти безпосередньо в кабінеті OpenAI до масового тестування, бо ціна залежить від моделі, роздільної здатності й кількості запитів, а невелика команда легко може недооцінити бюджет, якщо тестує продукт на десятках фотографій поспіль. На практиці кілька тестових генерацій обходяться відчутно дешевше, ніж місяць роботи розробника над таким самим прототипом, і саме ця різниця у вартості й швидкості робить аі маркетинг настільки привабливим для перевірки гіпотез — особливо для команд, де немає штатного розробника чи бюджету на аутсорс. Якщо гіпотеза підтверджується і продукт варто розвивати далі, схема легко масштабується: додаються нові категорії товарів, підключається платіжна система чи повноцінна CRM, а базова інфраструктура (GitHub, Vercel, Supabase) залишається тією самою.

Спробувати такий підхід можна вже на наступному проєкті — детальніше про побудову комплексної стратегії з AI-інструментами розповідаємо на курсі Digital Маркетинг Стратег.

Часті запитання

🎁

Бонус для тих, хто читає до кінця

130 AI-сервісів + 2 відео по запуску реклами

Добірка перевірених AI-інструментів для маркетологів + відео: запуск реклами в Meta Ads і LinkedIn з нуля.

Отримати →