AI से ऑनलाइन स्टोर कैसे बनाएं
यह गाइड दिखाती है कि Moremade को एक व्यावहारिक उदाहरण के रूप में इस्तेमाल करके AI से ऑनलाइन स्टोर कैसे बनाया जाए। अंत तक आपके पास product pages, cart flow, और published site वाला एक छोटा स्टोर होगा। एक साधारण first version के लिए, अपने product list, images, और copy की स्पष्टता के हिसाब से लगभग 30 से 90 मिनट लग सकते हैं.
Prompt करने से पहले स्टोर की बुनियाद तय करें
एक छोटा स्टोर तब सबसे अच्छा काम करता है जब आप पहले बुनियादी बातें तय कर लें। AI code जल्दी generate कर सकता है, लेकिन उसे फिर भी एक साफ brief चाहिए।
यह लिखें:
- आप क्या बेच रहे हैं
- version one में कितने products चाहिए
- customer सीधे buy कर सकते हैं या सिर्फ enquiry भेजेंगे
- कौन-से pages चाहिए
- हर product में कौन-सी जानकारी चाहिए
एक simple store के लिए, first version में आमतौर पर ये चाहिए:
- home page
- shop या catalog page
- product detail page
- cart page या checkout button
- about या contact page
यह भी तय करें कि product data कैसे संभाला जाएगा। अगर आपके पास कुछ ही products हैं, तो शुरुआत site में hardcoded product content से की जा सकती है। अगर आप आगे चलकर products, customer accounts, या order data manage करना चाहते हैं, तब database की जरूरत पड़ेगी।
पहला build छोटा रखें। तीन से छह products flow साबित करने के लिए काफी हैं.
ऐसा पहला prompt लिखें जो पूरे store का वर्णन करे
Moremade में आप website को plain language में describe करते हैं और AI agent React और Tailwind code लिखता है। फिर आपको live preview मिलता है और आप chat के जरिए site बदलते रहते हैं।
आपका पहला prompt structure, style, और main interactions को कवर करना चाहिए। यह साफ बताएं कि page पर क्या होना चाहिए, लेकिन हर pixel specify करने की कोशिश न करें।
एक उपयोगी first prompt में शामिल होता है:
- store का प्रकार
- कौन-से pages generate करने हैं
- कौन-से product fields दिखाने हैं
- layout style
- checkout behaviour
- कोई content tone या brand constraints
उदाहरण:
Handmade candle brand के लिए एक छोटा online store बनाएं। एक home page, shop page, product detail page, cart page, और contact page बनाएं। Warm neutral colours और clear product cards के साथ clean minimal layout इस्तेमाल करें। Name, price, short description, scent notes, और product images as placeholders के साथ छह example products जोड़ें। Product page पर images, description, ingredients, और add-to-cart button दिखना चाहिए। Cart users को quantity बदलने और subtotal देखने दे। Site responsive हो और mobile पर easy to use हो.
Preview की समीक्षा करें और focused follow-up prompts से सुधारें
पहले build के बाद live preview को editing tool की तरह इस्तेमाल करें। अगर structure पूरी तरह गलत नहीं है, तो फिर से शुरू न करें। आम तौर पर छोटे, सीधे requests देना बेहतर होता है।
Moremade में आप changes पर chat कर सकते हैं, visual inspector से किसी element को point करके edit कर सकते हैं, और code view में जाकर देख सकते हैं कि क्या बदला।
अच्छे follow-up prompts specific और local होते हैं। एक बार में एक ही improvement मांगें।
उदाहरण:
- "Desktop पर product grid को 3 columns और tablet पर 2 columns कर दें। Product cards की height बराबर रखें और add-to-cart button को नीचे pinned रखें।"
- "Product page पर scent notes को ingredients से ऊपर ले जाएं, add-to-cart button के नीचे एक छोटा shipping note जोड़ें, और desktop पर main image को बड़ा करें।"
- "Home page hero को simplify करें। एक छोटा headline, एक supporting sentence, और shop page पर जाने वाला primary button इस्तेमाल करें।"
यहीं से ज़्यादातर quality आती है। spacing, product hierarchy, button labels, empty states, और cart flow स्पष्ट है या नहीं, यह जांचें.
Stripe या Supabase सिर्फ तब जोड़ें जब store को सच में उनकी जरूरत हो
हर first version को full backend की जरूरत नहीं होती।
अगर आप सिर्फ brochure-style shop या clickable demo चाहते हैं, तो products को front-end code में रख सकते हैं और वहीं रुक सकते हैं। अगर customers को pay करना है, तो Stripe जोड़ें। अगर sign-in, saved user data, या stored product records चाहिए, तो Supabase जोड़ें।
Moremade में दोनों के लिए built-in connectors हैं।
Stripe तब उपयोग करें जब आपको चाहिए:
- आपके तय किए हुए real prices के साथ checkout
- छोटे catalog के लिए सरल payment path
Supabase तब उपयोग करें जब आपको चाहिए:
- customer sign-in
- products या orders के लिए database
- file storage
कई छोटे stores के लिए Stripe पहली real integration होती है जो जोड़ी जाती है। एक practical follow-up prompt हो सकता है:
- "Checkout को site पर दिखाए गए product prices का उपयोग करके Stripe से connect करें। Cart page बनाए रखें, checkout से पहले order summary दिखाएं, और mobile पर checkout buttons साफ रखें।"
अगर बाद में customer accounts या inventory-related data चाहिए, तो उसे version one में ठूंसने के बजाय Supabase जोड़ना बेहतर है.
Publish करने से पहले mobile experience test करें
छोटे stores को अक्सर mobile पर पहले judge किया जाता है, भले ही आपने design desktop पर किया हो।
इन हिस्सों को ध्यान से जांचें:
- home page hero height और button visibility
- product card readability
- product pages पर image cropping
- cart quantity controls
- checkout button placement
- form fields और tap targets
Plain language में fixes मांगें। उदाहरण के लिए:
- "Mobile menu को बड़े tap targets के साथ simpler बनाएं और header में cart icon visible रखें।"
- "Phones पर product image को product details के ऊपर stack करें और side padding थोड़ा कम करें।"
अगर कुछ सही नहीं लग रहा लेकिन आप उसे ठीक से describe नहीं कर पा रहे, तो पहले visual inspector से उस element को point करें, फिर change request करें.
Store publish करें और domain connect करें
जब site सही दिखने लगे, तो उसे publish करें।
Moremade एक click में free yourname.moremade.ai subdomain पर publish कर सकता है। Paid plans पर आप custom domain connect कर सकते हैं। Domains को Moremade के अंदर भी खरीदा जा सकता है।
एक सरल launch path यह है:
- review के लिए free subdomain पर publish करें
- links, cart flow, और checkout test करें
- जब store तैयार हो, तब real domain connect करें
अगर आप platform के बाहर copy रखना चाहते हैं, तो किसी भी समय full source को ZIP के रूप में export कर सकते हैं या उसे GitHub पर push कर सकते हैं। Websites असली React और Tailwind code हैं, इसलिए आप किसी proprietary format में locked नहीं हैं.
आम गलतियाँ जिनसे बचना चाहिए
मुख्य failure mode है AI से बहुत जल्दी बहुत कुछ बनवाना।
इन गलतियों से बचें:
- simple catalog और checkout की बजाय 20 features से शुरू करना
- "make me an online store" जैसा vague prompt लिखना, जिसमें product या page detail न हो
- यह समझे बिना sign-in जोड़ना कि customers को accounts की जरूरत क्यों है
- एक ही request में कई design directions मिलाना
- mobile testing को अंत तक टालना
- किसी problem को debug करते समय structure और styling को एक ही prompt में बदलना
एक बेहतर pattern है layers में build करना:
- Basic store structure generate करें।
- Layout और content ठीक करें।
- अगर customers को अभी pay करना है, तो Stripe जोड़ें।
- अगर stored data या sign-in चाहिए, तभी Supabase जोड़ें।
- Publish करें, test करें, फिर iterate करें।
यह approach project को समझने योग्य रखती है और Build Units को avoidable rewrites पर खर्च होने से बचाती है.
यह प्रॉम्प्ट आज़माएँ
Handmade candle brand के लिए एक छोटा online store बनाएं। एक home page, shop page, product detail page, cart page, और contact page बनाएं। Warm neutral colours और clear product cards के साथ clean minimal layout इस्तेमाल करें। Name, price, short description, scent notes, और product images as placeholders के साथ छह example products जोड़ें। Product page पर images, description, ingredients, और add-to-cart button दिखना चाहिए। Cart users को quantity बदलने और subtotal देखने दे। Site responsive हो और mobile पर easy to use हो.
प्रश्न
Moremade में एक छोटा store बनाने की लागत कितनी है?
Moremade usage को Build Units में मापता है। एक first site build की लागत लगभग 8 units होती है, और एक छोटा edit लगभग 1 unit का होता है। Free plan $0 है और इसमें हर 30 days में 10 Build Units, moremade.ai subdomain पर publishing, और ZIP export शामिल है। Paid plans में अधिक units और custom domains, private hosting, और version history जैसी सुविधाएं मिलती हैं।
क्या मुझे coding आनी चाहिए?
नहीं। आप store को plain language में describe कर सकते हैं, live preview review कर सकते हैं, और chat से changes मांग सकते हैं। अगर आपको code आता है, तो आप generated code को inspect करके और सीधे काम कर सकते हैं।
क्या store के code का ownership मेरे पास रहती है?
आप किसी भी समय full source को ZIP के रूप में export कर सकते हैं या उसे GitHub पर push कर सकते हैं। Moremade websites के लिए असली React + Tailwind code generate करता है, इसलिए आप किसी बंद format में locked नहीं रहते।
क्या बाद में payments और user accounts जोड़े जा सकते हैं?
हाँ। आप simple front-end store से शुरू कर सकते हैं, फिर checkout के लिए Stripe जोड़ सकते हैं। अगर बाद में sign-in, database records, या file storage की जरूरत हो, तो आप Supabase जोड़ सकते हैं।
अगर बाद में store को scale करना हो तो क्या यह फिर भी काम करेगा?
एक छोटे first version के लिए, हाँ। समझदारी यह है कि सबसे छोटे working catalog और checkout flow से शुरू करें, फिर data, sign-in, और operational complexity केवल तब जोड़ें जब वास्तव में जरूरत हो। क्योंकि source code exportable है, जरूरत पड़ने पर आपके पास project को builder के बाहर आगे ले जाने की भी जगह रहती है।