3D Burgerlardan Özel Ürünlere: Yapay Zeka ile Mağaza Kurun

Ekmeğin üst katı kalkıyor. Turşular görünmeye başlıyor. Bir dilim daha peynir ekleyin ve burger, fişle birlikte gözünüzün önünde değişiyor.Başka bir yerde, bir müşteri bir illüstrasyonu kapüşonlunun üzerine bırakıyor, biraz yukarı taşıyor, sonra ürünün nasıl durduğunu görmek için çeviriyor. Bu basit etkileşimin arkasında, satıcı zaten görselin nereye sığabileceğine ve ne kadar büyük olabileceğine karar vermiş durumda.Bunlar iki çok farklı alışveriş deneyimi. Ancak paylaştıkları faydalı bir fikir var: bir mağaza, sattığınız ürüne ve müşterinin onu seçme biçimine göre şekillenebilir.Her iki başlangıç noktasını da Modern Shop koleksiyonunda GitHub'da paylaştık: 3D hızlı yemek vitrini ve özelleştirilebilir ürün tasarımcısı. Kaynak kod MIT lisansı altında erişilebilir; inceleyebilir, uyarlayabilir ve üzerine inşa edebilirsiniz.Bir fikir, kendi markanız ve Codex veya Claude Code gibi bir AI kodlama aracı getirin. Üzerinde çalışılacak ilginç şeyler zaten hazır.

Jelly Bites: müşterilerin öğle yemeklerini kendi başlarına hazırlamasına izin verin

Jelly Bites canlı demosu ile başlayın. Bir burger seçin, döndürmek için sürükleyin ve bir malzemeyi değiştirin. Yemek yumuşakça salınıyor gibi tepki veriyor. Bir katmanı vurgulayın ve yığılma açılıyor, içindekileri görebiliyorsunuz.Bu eğlenceli bir deneyim, ancak etkileşimin pratik bir amacı da var. Müşteriler yaptıkları seçimleri görebiliyor. Turşular, sos, peynir ve malzemeler, müşterinin hayal etmesi gereken bir dizi seçenek yerine siparişin görünür parçaları haline geliyor.Pide/pizza oluşturucu aynı fikri başka bir yöne götürüyor: boyutu, hamuru, sosu ve malzemeleri seçin, ardından pizzanın şekillenmesini izleyin. Canlı bir fiş, bu kararların sonuçlarını görünür kılıyor. Demo ayrıca teslimat veya getir-al, promosyon kodları, ödeme ve sipariş takibi ekranını da keşfediyor.İnsanlar fikrini değiştirdiğinde önemli olan küçük bir detay var. Oluşturma sahnesindeki ürün, müşteri onaylayana kadar taslaktır. Ardından bir sepet öğesi tekrar 3D oluşturucuya getirilip düzenlenebilir. Bu, bir restoranın kendi deneyimine dönüştürebileceği türden bir etkileşimdir.3D hızlı yemek vitrini kaynağı Vue, TypeScript ve Three.js ile inşa edildi. Demoyu denemek için bu isimleri bilmenize gerek yok. Bir geliştirici veya kodlama ajanı için, tarayıcı tabanlı tanıdık bir projeyi inceleyip genişletmek için uygun bir başlangıç noktasıdır. Yiyecek şekilleri kod içinde üretiliyor, bu da görünüşlerini ve davranışlarını değiştirmek için somut bir başlangıç noktası sunuyor.Bir burgerci menüyü kendi tariflerine ve ambalajına göre uyarlayabilir. Bir pizza markası imza kombinasyonlarını öne koyabilir. Renkleri, dili, metinleri, malzeme seçeneklerini ve sipariş akışını işletmeye göre değiştirebilirsiniz. Örneklerde İngilizce ve Farsça düzenler zaten mevcut.Gerçek siparişler için kullanmadan önce anlaşılması gereken bir sınır var: mevcut demo örnek katalog verisi, tarayıcıda saklanan siparişler ve simüle edilmiş ödeme/takip kullanıyor. Selldone bağlantısı henüz uygulanmadı. Görsel deneyim keşfetmek için orada; son katalog ve fiyat doğrulamaları sunucuda, ödeme ve sipariş yönetimi ise gerçek bir ticaret entegrasyonuna ihtiyaç duyuyor. 3D deneyimi WebGL 2 destekli bir tarayıcı gerektirir, bu yüzden uyarlamayı müşterilerinizin kullandığı telefonlar ve tarayıcılarda test edin.

Mockup Studio: satıcı için bir, müşteri için başka bir deneyim

Özel bir tişört dükkânının farklı bir sorunu vardır. Müşteri deneme özgürlüğü ister. Baskı atölyesinin ise gerçek baskı alanına uygun bir tasarıma ihtiyacı vardır.Mockup Studio bu problemin her iki tarafına da yaklaşım getiriyor. canlı ürün tasarımcısı demosunu açın; iki açıkça işaretlenmiş modu göreceksiniz: satıcı için "template builder" ve müşteri için "designer".

Satıcı kuralları bir kere belirler

Şablon oluşturucuda satıcı ürünü seçer, ürün görünümleri ekler ve baskı alanını tanımlar. Bu ölçüler milimetre cinsinden saklanır; çözünürlük ve trim kenarı etrafındaki taşma (bleed) ayarları da bulunur.Satıcı daha sonra müşterinin neyi değiştirebileceğine karar verir: görseli taşımak, yeniden boyutlandırmak veya döndürmek örneğin. Göğüs baskısının kendi sınırları olurken, kol baskısının başka bir alanı kullanması sağlanabilir. Şablon, host uygulamaya verilmeden önce müşterinin bakış açısından test edilebilir.Bu ayrım fikri tek bir tişörtten öteye taşıyor. Örnek galeride tişört, kapüşonlu, kazak, şapka, kupa, yastık ve asma etiket bulunuyor. Hazırlanmış 3D varlıklar da desteklenen model formatı içinde kullanılabiliyor. Farklı bir ürün formu için modelin ve baskı-alanı eşlemesinin hazırlanmasını planlayın.Stüdyo ayrıca yapılandırılmış bir 3D modelden başlangıç ürün fotoğrafları oluşturabilir. Bu, satıcıya ürün deneyimini geliştirirken editör için görünümler hazırlamanın başka bir yolunu verir.

Müşteri oynayacak alan bulur

Müşterinin editörü daha odaklıdır. Bir görsel yükleyin, konumlandırın, boyutunu ayarlayın ve üründe önizleyin. Satıcının kuralları müşterinin denemeleri sırasında geçerli kalır.Fotoğrafa dayalı 2D görünümler ve isteğe bağlı döndürülebilen 3D görünüm vardır. Görselde yapılan değişiklikler modele yansır. Desteklenen yumuşak ürünlerde, bir çekme aracı kumaşı kaldırıp geri yerleşmesini izlemenize bile izin verir. Bu bir önizleme efekti; baskıya gönderilen görseli uzatmaz.Projede net bir ayrım var: Bir taraf müşteriye ürünün nasıl görünebileceğini gösterir. Diğer taraf ise yapılandırılmış fiziksel ölçüler ve çözünürlük kullanarak baskı yüzeyi için şeffaf bir PNG üretir. Baskı kalitesi göstergesi, kaynak görselin piksellerinin seçilen boyutla nasıl ilişkili olduğunu açıklamaya yardımcı olur.Gerçek bir üretim iş akışı için baskı atölyesinin yine boyutları, renkleri ve dosya gereksinimlerini onaylaması gerekir. Mevcut dışa aktarma tarayıcıda oluşturulmuş RGB PNG olarak yapılır; yazıcıya özel CMYK veya renk profili dönüşümü içermez. Üretilen ürün şekilleri, satabileceğiniz her giysinin ölçülmüş birebir kopyaları değil, illüstrasyon niteliğindedir.Demo ayrıca şablonları ve tasarımları yerelde tutar. Bunları bir işletmeye kaydetmek, doğru tasarımı bir siparişe eklemek, ödeme almak ve işi üretime göndermek bitmiş bir mağaza için entegrasyon adımlarıdır. Metin/yazı tipi araçları, ürün varyantları ve 3D yüzey üzerinde doğrudan görsel sürükleme gibi özellikler proje yol haritasında yer alıyor.

Bir başlangıç noktası, yapay zekayla görüşmeyi değiştirir

“Bana bir mağaza kur” demek, bir yapay zeka asistanının tahmin etmesi için çok şey bırakır. “Bu ürün düzenleyiciyi al, markamızı kullan ve müşterinin baskı atölyemize uygun akışı çalışır hale getir” demek ise ona somut bir başlangıç verir.Bu yüzden kaynağı paylaşıyoruz. Etkileşimi görebilir, deneyebilir ve değiştirmek istediğiniz kısımlara işaret edebilirsiniz. Bir ekran görüntüsü tartışma başlatır. Bir demo çalışan bir referansa dönüşür. Kod, geliştiricinize veya bir AI kodlama ajanına başlayacak bir yer verir.İş fikrini ChatGPT ile çalışın: Kim satın alıyor? Hangi seçenekler önemli? Müşteriler nerede tereddüt ediyor? Hangi bilgiler mutfak veya baskı ekibine ulaşmalı? Sonra bu brifi Codex, Claude Code veya projeyi inceleyip düzenleyebilecek başka bir AI geliştirme ortamına taşıyın.AI araçları bileşenleri uyarlamada, tasarımı revize etmede, servisleri bağlamada, test yazmada ve tanıdık olmayan kodu açıklamada yardımcı olabilir. Yine de sağlam bir sonuç net bir brife ve gerçek deneyimin kontrolüne bağlıdır. Asistanınıza bir kerede bir işe yarar kilometre taşı verin ve neyin çalıştığını göstermesini isteyin.

Selldone MCP nerede devreye girer

Bir mağazanın ön yüzü müşterinin dokunduğu kısımdır. Arkada ise ürünler, stok, ödemeler, gönderim ve yerine getirilecek siparişler bulunur.Selldone MCP, yetkilendirilmiş bir Selldone mağazasına bağlı bir AI asistanına yapılandırılmış erişim verir. Bir geliştirme sırasında, ajan mağazanın katalogu, içeriği ve desteklenen yapılandırması ile çalışmak için ayrı bir demo verisi seti tahmin etmek zorunda kalmaz. Erişim, seçtiğiniz mağaza ve izinler içinde kalır.Yayınlanan storefront’un kendi uygulanmış Selldone API'si veya servis entegrasyonuna ihtiyacı vardır. MCP, asistana geliştirme ve onaylı mağaza işi yapmada yardımcı olur; bir demodaki ödeme düğmesini otomatik olarak canlı bir ödeme akışına çevirmez.Jelly Bites için bu, menüyü ve sipariş akışını gerçek ticaret servislerine bağlamak anlamına gelir. Mockup Studio içinse satıcının şablonunu ve müşterinin seçtiği tasarımı güvenilir şekilde saklamak ve ardından bu tasarımı doğru ürün ve sipariş ile korumaktır. Müşteri odaklı deneyim ayırt edici kalırken Selldone ticaret altyapısını sağlar.Bu temelin üzerinde farklı yollarla inşa edilebilir. Tam bir storefront, Selldone Layout iş akışıyla özelleştirilebilirken, daha özel bir uygulama ayrı bir frontend kullanabilir. Selldone Genesis genel bakışı bu yolları açıklar. Doğru seçim, mevcut mağazanın ne kadarını korumak istediğinize ve müşteri yolculuğunun ne kadar sıra dışı olması gerektiğine bağlıdır.

Yapay zekanıza daha iyi bir ilk brif verin

Aşağıdaki istekle bir kodlama ortamında başlayabilirsiniz. Köşeli parantezli kısımları kendi işletme bilgilerinizle değiştirin.

Inspect the two projects at https://github.com/Modern-Shop and recommend the better starting point for [my business]. Read its documentation, then clone the chosen project into a new folder. Show which features work today and which need integration. Adapt the customer journey to [my brand, products, and requirements], keeping it usable on mobile.

Bir yön seçtikten sonra bir sonraki kilometre taşını isteyin:

Connect the intended Selldone shop through MCP with the permissions this task needs. Plan and implement the real catalog, design-storage where relevant, cart, checkout, and order integration using supported Selldone services. Replace demo assumptions with actual shop data. Test the complete flow and show a preview for review before deployment.

Bu istemler bir inşa konuşmasının başlangıcıdır. İyi bir ajan projeyi inceleyecek, eksik parçaları belirleyecek ve bunları sizinle birlikte çözecektir.İlk bir restoran kilometre taşı için, bir tamamlanmış sipariş isteyebilirsiniz: bir ürünü özelleştirin, doğru fiyatı görün, desteklenen test akışında ödeme yapın ve işletmenin siparişi aldığını doğrulayın. Bir baskı atölyesi içinse bir tasarımı yüklemeden önizlemeye ve ardından tam kaydedilmiş tasarımın siparişe eklendiğini doğrulamaya kadar izleyin.Bu aynı zamanda özel bir storefront’un daha ekonomik bir proje olabileceği anlamına gelir. Mevcut etkileşim kodu ve bir ticaret platformu, sıfırdan inşa etmeniz gerekenleri azaltır. Nihai maliyet yine tasarım, entegrasyonlar, varlıklar, barındırma ve işletmenizin ihtiyaç duyduğu testlere bağlıdır. MIT lisansı örnek kaynağı yeniden kullanılabilir kılar; bu hizmetleri otomatik olarak ücretsiz sunmaz.

Kendiniz inşa edin veya fikri ekibimize getirin

Modern Shop örneklerini geliştirmeye ve koleksiyonu zenginleştirmeye devam edeceğiz. Mevcut sürümlerle başlayabilir, tüm bir deneyimi uyarlayabilir veya belirli sorununuzu çözen parçayı ödünç alabilirsiniz.Uzmanların son sonucu markanız etrafında şekillendirmesini tercih ederseniz, Selldone’un resmi kurulum ve tasarım ekibi aracılığıyla özel bir storefront teklifi talep edebilirsiniz. Beğendiğiniz demoyu, ürünlerinizi ve müşterilerinizin yaşamasını istediğiniz deneyimi getirin. Proje başlamadan önce tasarım ve uygulamayı birlikte kapsamlandırabiliriz.Mağazanız belki ekranda parçalanan bir burger ile başlayacaktır. Belki de küçük bir illüstrasyonla bir kupada başlar. Demoları açın, bir şeyi değiştirin ve hangi fikrin işletmenize daha uygun hissettirdiğini görün.Modern Shop'u GitHub'da keşfedin · 3D yemek oluşturucuyu deneyin · Mockup Studio'yu deneyin