3D बर्गर से कस्टम मर्च तक: AI से अपना स्टोर बनाएं

बन उठता है। अचार दिखाई देने लगता है। एक और चीज़ चीज़ का स्लाइस जोड़ें और बर्गर आपके सामने बदलता है, साथ ही रसीद भी। कहीं और, एक खरीदार एक इलस्ट्रेशन को हूडी पर ड्रॉप करता है, उसे थोड़ा ऊपर ले जाता है, फिर प्रोडक्ट को घुमाकर देखता है कि कैसा लगेगा। उस सरल इंटरैक्शन के पीछे, विक्रेता पहले ही तय कर चुका होता है कि आर्टवर्क कहाँ जा सकता है और कितना बड़ा हो सकता है। ये दोनों बहुत अलग शॉपिंग अनुभव हैं। फिर भी इनमें एक उपयोगी विचार साझा है: एक स्टोर उस चीज़ के चारों ओर ढल सकता है जो आप बेचते हैं — यहाँ तक कि उस तरीके तक जैसे कोई उसे चुनता है। हमने दोनों शुरुआती परियोजनाओं को Modern Shop संग्रह GitHub पर रखा है: बर्गरवाला, एक 3D फास्ट-फूड स्टोरफ़्रंट, और मॉकअप स्टूडियो, कस्टम मर्च के लिए एक प्रोडक्ट डिज़ाइनर। स्रोत MIT लाइसेंस के तहत उपलब्ध है, इसलिए आप इसे देख सकते हैं, अनुकूलित कर सकते हैं और इसके ऊपर नई चीज़ें बना सकते हैं। एक आइडिया, अपना ब्रांड और एक AI कोडिंग टूल जैसे Codex या Claude Code लाएँ। काम के लिए पहले से ही कुछ दिलचस्प मौजूद है।

बर्गरवाला: ग्राहकों को अपना लंच बनवाएँ

शुरू करें बर्गरवाला लाइव डेमो से। एक बर्गर चुनें, उसे घुमाएँ, और किसी सामग्री को बदलकर देखें। खाना नर्म-सा हिलता है। किसी परत को हाईलाइट करें और स्टैक खुल जाता है ताकि आप अंदर क्या है देख सकें। यह मज़ेदार है, पर इस इंटरैक्शन का व्यावहारिक उद्देश्य भी है। ग्राहक उन विकल्पों को देख पाते हैं जो वे चुन रहे हैं। अचार, सॉस, चीज़ और टॉपिंग्स ऑर्डर के दृश्यमान हिस्से बन जाते हैं, न कि विकल्पों की एक लंबी सूची जिसे उन्हें कल्पना करनी पड़े। पिज़्ज़ा बिल्डर उसी विचार को दूसरे तरीके से ले जाता है: आकार, क्रस्ट, सॉस और टॉपिंग्स चुनें, फिर पिज़्ज़ा के बनते हुए होते देखिए। एक लाइव रसीद उन निर्णयों के नतीजे दिखाती है। डेमो डिलीवरी या पिकअप, प्रमोशनल कोड, चेकआउट और ऑर्डर-ट्रैकिंग स्क्रीन भी दिखाता है। यहाँ एक छोटी बात मायने रखती है जब लोग अपना मन बदलते हैं। बिल्डिंग स्टेज पर जो आइटम होता है वह ग्राहक के चुनने तक ड्राफ्ट रहता है। तब उस कार्ट आइटम को फिर से 3D बिल्डर में लाया और संपादित किया जा सकता है। यह वही तरह का इंटरैक्शन है जिसे कोई रेस्टोरेंट अपने अनुरूप बना सकता है। 3D फास्ट-फूड स्रोत Vue, TypeScript और Three.js से बना है। डेमो आज़माने के लिये आपको उन नामों को नहीं जानने की ज़रूरत है — पर एक डेवलपर या कोडिंग एजेंट के लिए ये परिचित ब्राउज़र-आधारित परियोजना के संकेत हैं जिन्हें देखा और बढ़ाया जा सकता है। खाने के आकार को कोड में जनरेट किया गया है, जो दिखावट और व्यवहार बदलने के लिए एक ठोस शुरुआत देता है। एक बर्गर शॉप अपने मेन्यू को अपनी रेसिपीज़ और पैकेजिंग के हिसाब से अनुकूलित कर सकती है। एक पिज़्ज़ा ब्रांड अपनी सिग्नेचर संयोजनों को पहले रख सकता है। आप रंग, भाषा, कॉपी, सामग्री विकल्प और ऑर्डरिंग फ़्लो बदलकर बिज़नेस के अनुरूप बना सकते हैं। उदाहरण में अंग्रेज़ी और फ़ारसी लेआउट पहले से दिखाए गए हैं। एक सीमा समझना ज़रूरी है यदि आप इसे असली ऑर्डर्स के लिए इस्तेमाल करना चाहेंगे: वर्तमान डेमो वैम्प डेटा, ब्राउज़र-स्टोर्ड ऑर्डर्स और सिम्युलेटेड चेकआउट एवं ट्रैकिंग का उपयोग करता है। इसकी Selldone कनेक्शन अभी लागू होना बाकी है। विज़ुअल अनुभव खोजने के लिए है; अंतिम कैटलॉग और प्राइसिंग चेक सर्वर पर, पेमेंट और फुलफ़िलमेंट के लिए वास्तविक कॉमर्स एकीकरण चाहिए। 3D अनुभव के लिए WebGL 2-सक्षम ब्राउज़र चाहिए, इसलिए अपने ग्राहकों के फोन और ब्राउज़रों पर अनुकूलन की जाँच करें।

मॉकअप स्टूडियो: विक्रेता के लिए एक अनुभव, खरीदार के लिए अलग

कस्टम टी-शर्ट शॉप की समस्या अलग होती है। ग्राहक प्रयोग करने की आज़ादी चाहता है। प्रिंटर को ऐसा डिज़ाइन चाहिए जो वास्तविक प्रिंट एरिया में फिट बैठे। Mockup Studio उस समस्या के दोनों पक्षों के साथ काम करता है। लाइव प्रोडक्ट‑डिज़ाइनर डेमो खोलें और आप दो स्पष्ट मोड देखेंगे: seller (स्टोर एडमिन के लिए) और shopper (खरीदार के लिए)।

विक्रेता नियम एक बार सेट करता है

टेम्पलेट बिल्डर में विक्रेता प्रोडक्ट चुनता है, प्रोडक्ट व्यूज़ जोड़ता है और प्रिंटेबल एरिया को परिभाषित करता है। वे डायमेंशन्स मिलीमीटर में स्टोर होते हैं, साथ में रिज़ॉल्यूशन और ब्लीड सेटिंग्स जो ट्रिम किनारे के आसपास अतिरिक्त आर्टवर्क को दर्शाती हैं। विक्रेता फिर तय करता है कि खरीदार क्या बदल सकता है: आर्टवर्क को मूव करना, रिसाइज़ या रोटेट करना, इत्यादि। चेस्ट प्रिंट की अपनी सीमाएँ हो सकती हैं, जबकि स्लीव का अलग एरिया होगा। टेम्पलेट को होस्ट एप्लिकेशन को सौंपने से पहले खरीदार के नजरिए से टेस्ट किया जा सकता है। यह अलगाव एक टी‑शर्ट से आगे उपयोगी बनाता है। सैंपल गैलरी में टी‑शर्ट, हूडी, स्वेटर, कैप, मग, कुशन और हैंग टैग शामिल हैं। तैयार किए गए 3D एसेट्स को भी सपोर्टेड मॉडल फ़ॉर्मेट में इस्तेमाल किया जा सकता है। किसी अलग प्रोडक्ट शेप के लिए मॉडल और उसके प्रिंट‑एरिया मैपिंग तैयार करना पड़ेगा। स्टूडियो कॉन्फ़िगर किए गए 3D मॉडल से प्रारंभिक प्रोडक्ट फ़ोटो भी बना सकता है। यह विक्रेता को एडिटर के व्यूज़ तैयार करने का एक और तरीका देता है जबकि प्रोडक्ट अनुभव विकसित किया जा रहा हो।

ग्राहक के पास खेलने की जगह

खरीदार का एडिटर ज्यादा केंद्रित है। एक इमेज अपलोड करें, उसे पोज़िशन करें, उसका आकार समायोजित करें और प्रोडक्ट पर प्रीव्यू देखें। व्यापारी के नियम वहीं रहते हैं जबकि ग्राहक प्रयोग करता है। यहाँ फोटो‑आधारित 2D व्यूज़ और वैकल्पिक 3D व्यू हैं जिन्हें घुमाया जा सकता है। आर्टवर्क में बदलाव मॉडल पर दिखाई देते हैं। सपोर्टेड सॉफ्ट प्रोडक्ट्स पर एक पुल टूल भी है जो कपड़े को उठाकर उसे फिर से बैठते देखने देता है। यह एक प्रीव्यू इफ़ेक्ट है; यह प्रिंट के लिए भेजे जाने वाले आर्टवर्क को खींचता नहीं है। प्रोजेक्ट में एक स्पष्ट विभाजन है: एक मोड ग्राहक को दिखाता है कि आइटम कैसा दिख सकता है। दूसरा मोड प्रिंट सतह के लिए एक पारदर्शी PNG देता है, कॉन्फ़िगर की गई भौतिक डायमेंशन्स और रिज़ॉल्यूशन का उपयोग करते हुए। प्रिंट‑क्वॉलिटी संकेतक बताता है कि स्रोत इमेज के पिक्सल उसके चुने हुए आकार से कैसे सम्बन्ध रखते हैं। वास्तविक उत्पादन वर्कफ़्लो के लिए, प्रिंटर को फिर भी डायमेंशन्स, रंग और फ़ाइल आवश्यकताओं को मंज़ूर करना होगा। वर्तमान एक्सपोर्ट ब्राउज़र‑रेंडर्ड RGB PNG है, बिना प्रिंटर‑विशेष CMYK या कलर‑प्रोफ़ाइल कनवर्ज़न के। उत्पन्न प्रोडक्ट शेप्स उन हर परिधान के मापी गए प्रतिरूप नहीं हैं जिन्हें आप बेच सकते हैं; वे निरूपण (illustration) हैं। डेमो टेम्पलेट्स और डिज़ाइन्स को लोकल में रखता है। उन्हें किसी बिज़नेस में सेव करना, सही डिज़ाइन को ऑर्डर से जोड़ना, पेमेंट लेना और जॉब को प्रोडक्शन भेजना ये सभी फिनिश्ड स्टोर के इंटीग्रेशन कदम हैं। टेक्स्ट/फ़ॉन्ट टूल्स, प्रोडक्ट वेरिएंट्स और 3D सतह पर सीधे आर्टवर्क ड्रैग करने जैसी सुविधाएँ अभी प्रोजेक्ट रोडमैप पर हैं।

एक शुरुआती बिंदु AI के साथ बातचीत बदल देता है

"मुझे एक स्टोर बना कर दो" AI असिस्टेंट के लिए बहुत कुछ अनुमान छोड़ता है। "यह प्रोडक्ट एडिटर लें, हमारे ब्रांड का उपयोग करें, और हमारे प्रिंट शॉप के लिए कस्टमर फ्लो काम करे"—यह AI को कुछ ठोस देता है। इसीलिए हम स्रोत साझा कर रहे हैं। आप इंटरैक्शन देख सकते हैं, आज़मा सकते हैं और उन हिस्सों की ओर इशारा कर सकते हैं जिन्हें आप बदलना चाहते हैं। एक स्क्रीनशॉट चर्चा बन जाता है। एक डेमो काम करने वाला संदर्भ बन जाता है। कोड आपके डेवलपर या AI कोडिंग एजेंट को शुरू करने के लिए जगह देता है। ChatGPT का उपयोग व्यवसायिक विचार पर काम करने के लिए करें: कौन खरीद रहा है? कौन से विकल्प मायने रखते हैं? ग्राहकों को कहाँ संदेह होता है? कौन सी जानकारी किचन या प्रिंट टीम तक पहुंचनी चाहिए? फिर उस ब्रीफ को Codex, Claude Code या किसी अन्य AI डेवलपमेंट वातावरण में लाएँ जो प्रोजेक्ट का निरीक्षण और संपादन कर सकता है। AI टूल्स कंपोनेंट्स को अनुकूलित करने, डिज़ाइन संशोधित करने, सेवाएँ जोड़ने, टेस्ट लिखने और अनजान कोड को समझाने में मदद कर सकते हैं। एक अच्छा नतीजा फिर भी स्पष्ट ब्रीफ और वास्तविक अनुभव की जाँच पर निर्भर करता है। असिस्टेंट को एक‑एक उपयोगी माइलस्टोन दें, और उससे बताने को कहें कि क्या काम करता है।

Selldone MCP कहाँ फिट बैठता है

स्टोर का सामने वाला हिस्सा ग्राहक छूते हैं। पीछे उत्पाद, स्टॉक, भुगतान, शिपिंग और पूरे करने के लिए ऑर्डर्स होते हैं। Selldone MCP एक कनेक्टेड AI असिस्टेंट को अधिकृत Selldone शॉप तक संरचित पहुँच देता है। बिल्ड के दौरान, यह एजेंट को शॉप के कैटलॉग, सामग्री और समर्थित कॉन्फ़िगरेशन के साथ काम करने में मदद कर सकता है, बजाय इसके कि वह डेमो डेटा के अलग सेट का अन्दाजा लगाए। पहुँच शॉप और आपके द्वारा चुनी गई अनुमतियों के भीतर रहती है। डिप्लॉय किए गए स्टोर्फ्रंट को तब अपनी लागू की हुई Selldone API या सर्विस इंटीग्रेशन की ज़रूरत होती है। MCP असिस्टेंट को डेवलपमेंट और अनुमोदित शॉप कार्य करने में मदद करता है; यह अपने आप डेमो के चेकआउट बटन को लाइव पेमेंट फ्लो में नहीं बदल देता। बर्गरवाला के लिए इसका मतलब है मेन्यू और ऑर्डर फ्लो को वास्तविक कॉमर्स सेवाओं से जोड़ना। मॉकअप स्टूडियो के लिए, इसका मतलब है विक्रेता के टेम्पलेट और ग्राहक के चुने हुए डिज़ाइन को भरोसेमंद तरीके से स्टोर करना, फिर उस डिज़ाइन को सही प्रोडक्ट और ऑर्डर के साथ संलग्न करना। ग्राहक‑सामना अनुभव अलग बना रह सकता है जबकि Selldone कॉमर्स आधार प्रदान करता है। उस आधार पर विभिन्न तरीके से बनाया जा सकता है। पूरा स्टोर्फ्रंट Selldone Layout वर्कफ़्लो के माध्यम से अनुकूलित किया जा सकता है, जबकि ज्यादा विशेष कस्टम एप्लिकेशन एक अलग फ्रंटएंड उपयोग कर सकता है। Selldone Genesis अवलोकन उन रास्तों को समझाता है। सही विकल्प इस बात पर निर्भर करेगा कि आप मौजूदा स्टोर का कितना हिस्सा रखना चाहते हैं और ग्राहक यात्रा कितनी असामान्य होनी चाहिए।

अपने AI को बेहतर पहला ब्रीफ दें

आप कोडिंग वातावरण में निम्न अनुरोध के साथ शुरू कर सकते हैं। ब्रैकेट वाले हिस्सों को अपनी बिज़नेस डिटेल्स से बदल दें।

Inspect the two projects at https://github.com/Modern-Shop and recommend the better starting point for [मेरे बिज़नेस]. 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 [मेरे ब्रांड, प्रोडक्ट्स और आवश्यकताओं], keeping it usable on mobile.

एक बार जब आप दिशा चुन लें, अगले माइलस्टोन के लिए पूछें:

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.

ये प्रॉम्प्ट बिल्ड संवाद की शुरुआत हैं। एक अच्छा एजेंट प्रोजेक्ट का निरीक्षण करेगा, गायब हिस्सों की पहचान करेगा और आपके साथ उन्हें पूरा करेगा। पहले रेस्टोरेंट माइलस्टोन के लिए, आप एक पूरा ऑर्डर मांग सकते हैं: एक आइटम कस्टमाइज़ करें, सही कीमत देखें, सपोर्ट किए गए टेस्ट फ्लो में पेमेंट करें और बिज़नेस द्वारा ऑर्डर की पुष्टि सत्यापित करें। प्रिंट शॉप के लिए, अपलोड से प्रीव्यू तक और फिर ऑर्डर के साथ जुड़ी सही सहेजी हुई आर्टवर्क तक एक डिज़ाइन को ट्रेस करें। यहाँ एक कस्टम स्टोर्फ्रंट अधिक किफायती प्रोजेक्ट बन भी सकता है। मौजूद इंटरैक्शन कोड और एक कॉमर्स प्लेटफ़ॉर्म से आपको शून्य से बनाने की तुलना में कम बनाना होगा। अंतिम लागत फिर भी डिज़ाइन, इंटीग्रेशन, एसेट्स, होस्टिंग और टेस्टिंग पर निर्भर करती है। MIT लाइसेंस सैंपल स्रोत को पुन:उपयोगयोग्य बनाता है; यह उन सेवाओं को मुफ्त में शामिल नहीं करता है।

खुद बनाएं, या हमारी टीम को आइडिया दें

हम Modern Shop सैंपल्स को बार‑बार सुधारते रहेंगे और कलेक्शन विकसित करेंगे। आप अभी उपलब्ध वर्शन से शुरू कर सकते हैं, पूरे अनुभव को अनुकूलित कर सकते हैं, या उस हिस्से को उधार ले सकते हैं जो आपके खास समस्या का समाधान करता है। यदि आप चाहें कि विशेषज्ञ आपके ब्रांड के आसपास नतीजा आकार दें, तो आप Selldone की आधिकारिक सेटअप और डिज़ाइन टीम से एक कस्टम स्टोर्फ्रंट अनुमान का अनुरोध कर सकते हैं। मनपसंद डेमो, अपने प्रोडक्ट और वह अनुभव लाएँ जो आप चाहते हैं कि ग्राहक पाएं। हम प्रोजेक्ट शुरू होने से पहले डिज़ाइन और इम्प्लीमेंटेशन का स्कोप आपके साथ तय कर सकते हैं। शायद आपका स्टोर एक स्क्रीन पर अलग‑अलग होने वाला बर्गर से शुरू होता है। शायद यह एक मग पर छोटी सी इलस्ट्रेशन से शुरू होता है। डेमो खोलें, कुछ बदलें और देखें कौन सा आइडिया आपके बिज़नेस जैसा लगता है। Modern Shop GitHub पर एक्सप्लोर करें · 3D फूड बिल्डर आज़माएं · मॉकअप स्टूडियो आज़माएं