Від 3D-бургерів до індивідуального мерчу: створіть магазин за допомогою штучного інтелекту

Булочка піднімається. Мариновані огірки з'являються в полі зору. Додайте ще один шматок сиру — і бургер змінюється прямо перед вами, так само як і чек. Десь інше покупець перетягує ілюстрацію на худі, трохи піднімає її вгору, а потім повертає продукт, щоб відчути, як виглядає. За цією простою взаємодією продавець уже вирішив, куди можна поміщати зображення й яким має бути його розмір. Це два дуже різні досвіди покупок. Вони поділяють корисну ідею: магазин може бути збудований навколо того, що ви продаєте, аж до способу, яким покупець це вибирає. Ми зібрали обидві відправні точки в колекцію Modern Shop на GitHub: , 3D‑вітрина фастфуду, і , редактор продуктів для індивідуального мерчу. Вихідний код доступний під ліцензією MIT, тож ви можете вивчати його, адаптувати й розвивати. Принесіть ідею, власний бренд і інструмент AI для кодування, такий як Codex або Claude Code. Уже є цікава база, з якою можна працювати.

Jelly Bites: дозвольте клієнтам складати свій обід

Почніть з прямої демонстрації Jelly Bites. Виберіть бургер, перетягніть, щоб повернути його, і спробуйте змінити інгредієнт. Їжа відгукується м’яким коливанням. Виділіть шар — і стопка розкривається, щоб ви бачили, що всередині. Це грайливо, але взаємодія має практичну мету. Клієнти бачать вибір, який вони роблять. Мариновані огірки, соус, сир і топінги стають видимими частинами замовлення, а не низкою опцій, які треба уявити. Конструктор піци переносить ту ж ідею в інший бік: оберіть розмір, корж, соус і топінги — і дивіться, як формується піца. Живий чек робить наслідки цих рішень помітними. Демонстрація також досліджує доставку або самовивіз, промокоди, оформлення замовлення та екран відстеження замовлення. Є невелика деталь, яка важлива, коли люди змінюють думку. Предмет на етапі складання — це чернетка, поки клієнт не натисне Додати. Елемент кошика потім можна повернути назад у 3D‑конструктор і відредагувати. Це той тип взаємодії, який ресторан може зробити своїм. Вихідний код 3D‑вітрини фастфуду створений з використанням Vue, TypeScript і Three.js. Вам не потрібно знати ці назви, щоб спробувати демо. Для розробника або кодувального агента вони вказують на знайомий браузерний проєкт для огляду й розширення. Форми їжі генеруються в коді, даючи конкретну відправну точку для зміни їхнього вигляду та поведінки. Наприклад, київська бургерна може адаптувати меню під свої рецепти та пакування. Львівська піцерія може поставити свої фірмові комбінації першими. Ви можете змінити кольори, мову, тексти, опції інгредієнтів і процес оформлення замовлення під бізнес. У прикладі вже представлені макети англійською та перською мовами. Одна межа варта розуміння перед використанням для реальних замовлень: поточне демо використовує зразкові дані каталогу, замовлення зберігаються в браузері, а оформлення й відстеження імітовані. Його підключення до Selldone ще потрібно реалізувати. Візуальний досвід тут для дослідження; остаточні перевірки каталогу й цін на сервері, платіж та виконання замовлення потребують реальної інтеграції з комерцією. 3D‑досвід вимагає браузера з підтримкою WebGL 2 — протестуйте адаптацію на телефонах і браузерах, якими користуються ваші клієнти.

Mockup Studio: один інтерфейс для продавця, інший — для покупця

Магазин індивідуальних футболок має іншу проблему. Покупець хоче свободу експериментувати. Друкарю потрібен дизайн, що точно вміщується в область друку. Mockup Studio підходить до обох боків проблеми. Відкрийте пряму демонстрацію редактора продуктів, і ви побачите два чітко позначені режими: seller для адміністраторів магазину і shopper для покупців.

Продавець задає правила один раз

У конструкторі шаблонів продавець обирає продукт, додає вигляди продукту й визначає область, придатну для друку. Ці розміри зберігаються в міліметрах із налаштуваннями роздільної здатності й обтиску (bleed) — додаткової частини зображення навколо краю обрізки. Продавець потім вирішує, що покупець може змінювати: пересувати, змінювати розмір або повертати зображення, наприклад. Друк на грудях може мати одні межі, рукав — інші. Шаблон можна протестувати з точки зору покупця перед передачею в хост‑додаток. Це розділення робить ідею корисною не лише для однієї футболки. У прикладній галереї представлені футболка, худі, светр, кепка, чашка, подушка та бирка. Підготовлені 3D‑активи також можуть використовуватися у підтримуваному форматі моделі. Для продукту з іншою формою слід підготувати модель і її відображення області друку. Студія також може створювати початкові фото продукту з налаштованої 3D‑моделі. Це дає продавцеві ще один спосіб підготувати вигляди для редактора під час розробки продуктового досвіду.

Покупець отримує простір для гри

Редактор покупця більш сфокусований. Завантажте зображення, розмістіть його, відрегулюйте розмір і перегляньте попередній вигляд на продукті. Правила продавця лишаються в силі, поки покупець експериментує. Є фотобазовані 2D‑вигляди й опційний 3D‑вигляд, який можна повертати. Зміни в зображенні відображаються на моделі. Для підтримуваних м’яких товарів інструмент «підтягування» навіть дозволяє підняти тканину й спостерігати, як вона опускається назад. Це ефект попереднього перегляду; він не розтягує зображення, яке відправляється на друк. У проєкті проходить чітке розмежування: Один режим показує клієнту, як може виглядати товар. Інший режим генерує прозорий PNG для поверхні друку, використовуючи налаштовані фізичні розміри і роздільну здатність. Індикатор якості друку допомагає пояснити, як пікселі вихідного зображення співвідносяться з обраним розміром. Для реального виробничого робочого процесу друкарю все одно потрібне затвердження розмірів, кольорів і вимог до файлів. Поточний експорт — це браузерно згенерований RGB PNG, без конвертації в CMYK або профілі кольору, специфічні для друкарні. Згенеровані форми продуктів — це ілюстрації, а не виміряні копії кожного одягу, який ви можете продавати. Демо також зберігає шаблони й дизайни локально. Збереження їх у бізнесі, прикріплення точного дизайну до замовлення, прийом платежу й відправлення роботи в виробництво — це кроки інтеграції для готового магазину. Інструменти тексту/шрифту, варіанти продуктів і пряме перетягування артворку по 3D‑поверхні — серед функцій, що ще в дорожній карті проєкту.

Відправна точка змінює розмову з AI

«Побудуй мені магазин» лишає багато для припущень помічника AI. «Візьми цей редактор продуктів, використовуй наш бренд і зроби потік клієнта зручним для нашої друкарні» дає йому конкретику. Ось чому ми ділимося вихідним кодом. Ви можете побачити взаємодію, спробувати її і вказати частини, які хочете змінити. Скриншот стає предметом обговорення. Демо — робочим референсом. Код дає вашому розробнику або AI‑агенту місце, з якого почати. Скористайтеся ChatGPT, щоб пропрацювати бізнес‑ідею: хто купує? Які опції важливі? Де клієнти вагаються? Яку інформацію слід передати на кухню або в друкарню? Потім занесіть цей бриф у Codex, Claude Code або інше середовище AI‑розробки, яке може інспектувати й редагувати проєкт. AI‑інструменти допоможуть адаптувати компоненти, переглянути дизайн, підключити сервіси, написати тести й пояснити незнайомий код. Успіх усе одно залежить від чіткого брифу й перевірки реального досвіду. Давайте помічнику по одному корисному мілестону й просіть показати, що працює.

Де вписується Selldone MCP

Вітрина магазину — це та частина, з якою взаємодіють клієнти. За нею стоять продукти, залишки на складі, платежі, доставка та замовлення, які потрібно виконати. Selldone MCP дає пов’язаному AI‑помічнику структурований доступ до авторизованого магазину Selldone. Під час розробки це може допомогти агенту працювати з каталогом магазину, контентом і підтримуваними налаштуваннями замість припущень на основі демонстраційних даних. Доступ залишається в межах магазину й прав, які ви задасте. Розгорнута вітрина тоді потребує власної реалізації Selldone API або сервісної інтеграції. MCP допомагає помічнику виконувати розробку й роботу з дозволеного магазину; він не автоматично перетворює кнопку «оплатити» в демо на живий платіжний потік. Для Jelly Bites це означає підключити меню й потік замовлень до реальних комерційних сервісів. Для Mockup Studio — надійно зберігати шаблон продавця та обраний дизайн покупця, а потім прикріпити цей дизайн до правильного продукту й замовлення. Клієнтський досвід може залишатися унікальним, поки Selldone забезпечує комерційну основу. Існують різні шляхи побудови на цій основі. Повна вітрина може бути налаштована через робочий процес Selldone Layout, а більш спеціалізований кастомний додаток може використовувати окремий фронтенд. Огляд Selldone Genesis пояснює ці шляхи. Правильний вибір залежить від того, скільки зі стандартного магазину ви хочете залишити і наскільки незвичайною має бути подорож клієнта.

Дайте вашому AI кращий перший бриф

Ви можете почати з такого запиту в середовищі для кодування. Замініть у дужках свої бізнес‑деталі.

Огляньте два проєкти на https://github.com/Modern-Shop і порадьте, який з них краще підходить як відправна точка для [мій бізнес]. Прочитайте документацію, потім клонуючи обраний проєкт у нову папку, покажіть, які функції працюють сьогодні, а які потребують інтеграції. Адаптуйте шлях клієнта під [мій бренд, продукти й вимоги], зберігаючи зручність на мобільних пристроях.

Коли ви обрали напрямок, попросіть наступний мілестон:

Підключіть призначений магазин Selldone через MCP з правами, необхідними для цього завдання. Сплануйте й реалізуйте реальний каталог, збереження дизайнів де це потрібно, кошик, оформлення замовлення й інтеграцію замовлень, використовуючи підтримувані сервіси Selldone. Замініть демонстраційні припущення реальними даними магазину. Протестуйте повний потік і покажіть попередній перегляд перед розгортанням.

Ці підказки — початок будівельної розмови. Хороший агент огляне проєкт, виявить відсутні частини й пропрацює їх з вами. Для першого мілестону ресторану ви можете попросити один повний замовлення: налаштувати один товар, побачити правильну ціну, оплатити в підтримуваному тестовому потоці і перевірити, що бізнес отримав замовлення. Для друкарні — простежити один дизайн від завантаження до попереднього перегляду і до збереженого файлу, прикріпленого до замовлення. Саме тут кастомна вітрина може стати більш економічним проєктом. Існуючий код взаємодії й платформа комерції можуть зменшити обсяг роботи, який потрібно створювати з нуля. Остаточна вартість усе одно залежить від дизайну, інтеграцій, активів, хостингу і тестування, які потрібні вашому бізнесу. Ліцензія MIT робить зразковий код повторно використовуваним; вона не включає ті послуги безкоштовно.

Зробіть самі або довірте команді

Ми продовжимо удосконалювати приклади Modern Shop і розвивати колекцію. Ви можете почати з доступних версій зараз, адаптувати весь досвід або запозичити ту частину, яка вирішує вашу конкретну задачу. Якщо ви віддаєте перевагу, щоб фахівці сформували результат під ваш бренд, ви можете попросити індивідуальну оцінку в офіційної команди з налаштування й дизайну Selldone. Принесіть демо, яке вам подобається, ваші продукти й досвід, який ви хочете дати клієнтам. Ми можемо узгодити обсяг робіт і дизайн разом перед початком проєкту. Можливо, ваш магазин починається з бургера, що розкладається на екрані. А може — з маленької ілюстрації на чашці. Відкрийте демо, змініть щось і побачте, яка ідея відчувається ближчою до вашого бізнесу. Досліджуйте Modern Shop на GitHub · Спробуйте 3D‑конструктор їжі · Спробуйте Mockup Studio