Від ChatGPT-прототипу до реального інтернет-магазину: кейс Airkod × «Доска & Брус»

Головна сторінка інтернет-магазину «Доска & Брус»

Що, якби замість звичайного технічного завдання клієнт приніс вам сайт, який уже сам створив за допомогою ChatGPT?

Саме так почалася наша співпраця з «Доска & Брус», компанією з Одеси, яка займається продажем пиломатеріалів і будівельних матеріалів.

І найцікавіше, що замовник прийшов не просто з ідеєю. Він уже самостійно, за допомогою ChatGPT, підготував технічне завдання, структуру майбутнього магазину та HTML-прототипи основних сторінок.

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

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

Саме на цьому етапі до проєкту долучився Airkod.

З чим прийшов клієнт

У «Доска & Брус» уже був діючий магазин на Prom.ua, сформований асортимент товарів і досить чітке бачення майбутнього сайту.

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

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

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

Крім того, сайт мав бути підготовлений до SEO, Google Ads, розвитку каталогу та подальшого масштабування.

Що ми зробили

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

Далі команда Airkod:

Підготувала три варіанти дизайну головної сторінки та разом із замовником обрала напрям подальшої роботи.
Доопрацювала UI/UX, навігацію та адаптацію для мобільних пристроїв.
Побудувала повноцінний каталог із категоріями, підкатегоріями та картками товарів.
Реалізувала логіку роботи з різними одиницями вимірювання, кількістю та вартістю матеріалів.
Організувала перенесення товарного каталогу з Prom.ua.
Реалізувала кошик, пошук товарів і форми отримання розрахунку.
Підготувала українську та російську версії сайту.
Попрацювала над технічною SEO-структурою та перенесенням сайту на робочий домен.
Налаштувала сервер, HTTPS і процес публікації оновлень.

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

Клієнт може сам розвивати сайт за допомогою AI

Ми вирішили не обмежуватися стандартною передачею готового проєкту. Наш розробник Едуард допоміг замовнику налаштувати середовище для роботи з кодом через Claude Code.

Показав, як правильно формулювати завдання для ШІ, вносити зміни в проєкт, перевіряти результат та публікувати оновлення на сайті.

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

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

Результат

Сьогодні новий сайт «Доска & Брус» уже працює на власному домені.

doskabrus.com.ua

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

Категорія каталогу: покрівельні матеріали

Швидкість сайту за Google PageSpeed Insights

Окремо перевірили швидкодію. На комп’ютері сайт отримав 100 зі 100 балів за продуктивність, а також по 100 за доступність, рекомендації та SEO. На мобільному телефоні продуктивність становить 99 зі 100, а решта показників теж 100.

Найбільший елемент сторінки на комп’ютері з’являється за 0,4 секунди, на мобільному за 1,2 секунди, а зсуву макета немає зовсім. Ці цифри можна перевірити самостійно.

PageSpeed Insights, комп’ютер: 100 зі 100

PageSpeed Insights, мобільний: 99 зі 100

Відкрити результати в PageSpeed Insights

Окремо приємно отримати від власника компанії Віктора позитивний відгук: він підтвердив, що команда дуже задоволена результатом і продовжує вдосконалювати сайт.

Що цей кейс означає для інших бізнесів

Сьогодні за допомогою ChatGPT, Claude, Lovable, Replit, Codex та інших AI-інструментів можна самостійно створити дизайн, прототип сайту або навіть першу робочу версію продукту. І вам зовсім не обов’язково відмовлятися від того, що вже зроблено, щоб перейти до професійної розробки.

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

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

Уже створили щось за допомогою AI й хочете рухатися далі? Покажіть нам свій проєкт. Подивимося, що вже готово і як найкраще довести його до повноцінного запуску.

Розробка сайтів з AI-прототипу

АвторАртем ПурлоКеруючий партнер AirkodLinkedIn