AI से डायरेक्टरी वेबसाइट कैसे बनाएं
यह गाइड दिखाता है कि Moremade का उपयोग करके AI से डायरेक्टरी वेबसाइट कैसे बनाई जाए। अंत तक, आपके पास listing pages, search या filters, एक detail page, और एक live URL वाली working directory site होनी चाहिए। एक साधारण version के लिए, पहले build में लगभग 30 से 90 minutes लग सकते हैं, और उसके बाद एक round edits का।
पहले तय करें कि डायरेक्टरी को वास्तव में क्या चाहिए
Builder खोलने से पहले, साइट के सबसे छोटे useful version को लिख लें।
अधिकांश डायरेक्टरी वेबसाइटों के लिए, इसका मतलब होता है:
- एक homepage जो niche को समझाए
- cards वाला एक listing page
- search और कुछ filters
- हर item के लिए एक detail page
- अगर लोग listings suggest कर सकें, तो एक submission या contact page
- basic navigation और footer pages
साथ ही data structure भी तय करें। एक directory मूल रूप से records का collection होती है, इसलिए fields को साफ़-साफ़ define करें। उदाहरण fields:
- name
- category
- city or region
- short description
- website URL
- image
- pricing tier
- tags
- contact email
फिर तय करें कि कौन क्या कर सकता है:
- visitors browse और search कर सकते हैं
- editors listings add या update कर सकते हैं
- businesses अपनी listing submit कर सकते हैं
अगर पहला version सिर्फ curated directory है, तो शायद अभी sign-in की जरूरत नहीं है। अगर लोगों को accounts, saved items, या listing submissions चाहिए, तो build करने से पहले यह plan कर लें।
एक साफ़ first prompt लिखें
पहला prompt महत्वपूर्ण होता है, क्योंकि वही project की structure, tech choices, और tone तय करता है। Moremade में आप साइट को plain language में describe करते हैं, और AI agent source code लिखता है, फिर live preview दिखाता है।
एक अच्छा first prompt इन बातों को कवर करना चाहिए:
- directory का type
- आपको कौन-कौन से pages चाहिए
- हर listing के मुख्य fields
- visual style
- content अभी static है या बाद में data से जुड़ना है
- कोई mobile requirements
इसे concrete रखें। अगर workflow अभी तय नहीं है, तो एक बार में सब कुछ न मांगें।
Build a React + Tailwind directory website for independent coffee shops in Lisbon. Include a homepage, a browse page with searchable listing cards, filters for neighbourhood and price, and a detail page for each shop. Each listing should show name, photo, short description, address, opening hours, website, and tags like wifi or brunch. Use a clean editorial layout with simple navigation and a mobile-friendly card grid. Start with sample data. Add a submit-a-shop page with a form layout, but no backend yet.
Preview का उपयोग करें, फिर targeted follow-up prompts से refine करें
पहले build के बाद, live preview को वैसे ही देखें जैसे किसी teammate के front-end draft को review करते हैं। page hierarchy, spacing, filter behavior, card readability, और detail page सही जानकारी दिखा रहा है या नहीं, यह जांचें।
Moremade में आप chat करके बदलाव कर सकते हैं, और इसमें visual inspector और code view भी है। पूरे brief को फिर से लिखने के बजाय छोटे, specific requests दें।
तीन उपयोगी follow-up prompts:
- "listing cards में image को 4:3 करो, tags को description के नीचे ले जाओ, और website link को secondary button बनाओ।"
- "browse page पर search, neighbourhood, और price filters के साथ एक sticky filter bar जोड़ो। मोबाइल पर filters को drawer में collapse करो।"
- "homepage hero और intro copy को और neutral और practical बनाकर rewrite करो। यह बताने वाला section जोड़ो कि shops कैसे चुनी जाती हैं।"
यह stage आमतौर पर कुछ rounds लेती है। एक समय में एक तरह के बदलाव पर ध्यान दें:
- layout और navigation
- filter logic और card content
- copy और labels
- mobile spacing
- accessibility details जैसे button text और contrast
अगर एक page अच्छी तरह काम कर रहा है, तो builder से वही pattern बाकी साइट में दोहराने को कहें।
Data, sign-in, या payments तभी जोड़ें जब directory को उनकी जरूरत हो
कई directories शुरुआत में sample या curated content के साथ लॉन्च हो सकती हैं। Backend pieces तभी जोड़ें जब वास्तव में जरूरत हो।
Supabase का उपयोग करें अगर आपको चाहिए:
- listings के लिए database
- admin या user sign-in
- images के लिए file storage
- user-submitted listings
Example cases:
- एक local business directory जहाँ editors database में records जोड़ते हैं
- एक member directory जहाँ users अपनी profile manage करने के लिए log in करते हैं
- एक directory जिसमें submission workflow हो
Stripe का उपयोग करें अगर directory किसी चीज़ के लिए charge करती है, जैसे:
- paid listing submissions
- sponsored placements
- premium data के लिए subscription access
Scope छोटा रखें। अगर आपका पहला version सिर्फ public browsing है, तो अभी account systems या payments न जोड़ें। Moremade में Supabase और Stripe के connectors शामिल हैं, इसलिए product model साफ़ होने पर आप उन्हें जोड़ सकते हैं।
एक common pattern है:
- पहले public browsing experience बनाएं
- listings और admin editing के लिए Supabase connect करें
- अगर paid submission flow हो, तो बाद में Stripe जोड़ें
Publish करने से पहले mobile version जांचें
Directory sites desktop पर ठीक और phones पर awkward दिख सकती हैं। आम समस्याएँ लंबी cards, cramped filters, और detail pages पर बहुत सारे sections का खराब तरीके से stack होना होती हैं।
Preview में इन points की review करें:
- search bar की width और tap targets
- filters सही तरीके से collapse हो रहे हैं या नहीं
- cards में image cropping
- addresses, tags, और metadata की readability
- buttons और forms के आसपास spacing
- detail page में सबसे उपयोगी जानकारी ऊपर बनी रहती है या नहीं
ज़रूरत हो तो ऐसे precise mobile changes माँगें:
- card text को दो lines तक सीमित करना
- secondary metadata को fold के नीचे ले जाना
- filter chips को horizontal scroll row में बदलना
- छोटे screens पर call-to-action button को full width बनाना
यह visual inspector का उपयोग करके किसी element पर click करने और उसे सीधे adjust करने का भी अच्छा समय है।
Site publish करें और domain connect करें
जब structure और content पर्याप्त stable हों, तो publish करें। Moremade एक click में free yourname.moremade.ai subdomain पर publish कर सकता है। अगर आप paid plan पर हैं, तो custom domain connect कर सकते हैं। Domains Moremade के अंदर खरीदे भी जा सकते हैं।
Launch करने का practical तरीका है:
- पहले free subdomain पर publish करें
- links, forms, और page titles test करें
- कुछ लोगों के साथ feedback के लिए share करें
- site ready होने पर custom domain connect करें
अगर आप platform के बाहर एक copy रखना चाहते हैं, तो full source को ZIP के रूप में export करें या GitHub पर push करें। Websites असली React + Tailwind code के रूप में बनती हैं, इसलिए आप किसी proprietary format में फँसते नहीं हैं।
AI-built directory sites में आम गलतियों से बचें
अधिकतर समस्याएँ builder से नहीं, बल्कि unclear structure से आती हैं।
इन गलतियों से बचें:
- बहुत जल्दी बहुत सारे filters। पहले उन दो या तीन fields से शुरू करें जिनका लोग सच में चुनाव सीमित करने के लिए उपयोग करते हैं।
- कोई data model नहीं। अगर listing fields अस्पष्ट हैं, तो हर page inconsistent हो जाएगा।
- curation और submissions को बिना rules के मिलाना। तय करें कि listings editorial हैं, user-submitted हैं, या दोनों।
- जरूरत से पहले sign-in जोड़ना। Public directories अक्सर launch पर बिना accounts के भी ठीक काम करती हैं।
- हर feature के लिए एक giant prompt लिखना। पहले core flow बनाएं, फिर छोटे steps में refine करें।
- mobile review को ignore करना। Directory browsing का बड़ा हिस्सा phones पर होता है।
- ownership planning के बिना launch करना। बाद में साफ़ handoff चाहिए तो code export करें या GitHub पर push करें।
Version history यहाँ मदद करती है। अगर बदलाव का कोई round site को खराब कर दे, तो revert करें और एक narrower instruction आज़माएँ।
यह प्रॉम्प्ट आज़माएँ
Build a React + Tailwind directory website for independent coffee shops in Lisbon. Include a homepage, a browse page with searchable listing cards, filters for neighbourhood and price, and a detail page for each shop. Each listing should show name, photo, short description, address, opening hours, website, and tags like wifi or brunch. Use a clean editorial layout with simple navigation and a mobile-friendly card grid. Start with sample data. Add a submit-a-shop page with a form layout, but no backend yet.
प्रश्न
Moremade में AI से directory website बनाने का cost कितना है?
Moremade usage को Build Units में मापता है। Free plan $0 है और हर 30 days में 10 Build Units देता है, जो एक छोटे first build और कुछ edits के लिए पर्याप्त है। पहला site build लगभग 8 units का होता है, और एक छोटा edit लगभग 1 unit का। Standard $17 per month billed yearly है, या $20 monthly, और हर 30 days में 100 Build Units देता है। Pro $167 per month billed yearly है, या $200 monthly, और हर 30 days में 750 Build Units देता है।
क्या मुझे code जानना जरूरी है?
नहीं। आप साइट को plain language में describe कर सकते हैं, live preview देख सकते हैं, और chat से बदलाव कर सकते हैं। फिर भी pages, data fields, और user flows को स्पष्ट रूप से सोचना मदद करता है। अगर आपको front-end basics आती हैं, तो code view review को आसान बना सकता है।
क्या directory website का code मेरा होता है?
आप किसी भी समय full source code को ZIP के रूप में export कर सकते हैं या GitHub पर push कर सकते हैं। Websites असली React + Tailwind code के रूप में बनती हैं। इसका मतलब है कि चाहें तो आप Moremade के बाहर भी project पर काम जारी रख सकते हैं।
क्या बाद में database या user accounts जोड़ सकता हूँ?
हाँ, अगर directory static या sample content से आगे बढ़ती है। Moremade में database, sign-in, और file storage के लिए Supabase शामिल है, इसलिए आप बाद में listings data या account flows जोड़ सकते हैं, बजाय इन्हें पहले version में ठूँसने के।
क्या site बाद में और complex होने पर भी काम करेगी?
कई projects के लिए हाँ, क्योंकि output standard code होता है जिसे आप export कर सकते हैं। एक समझदार path यह है कि public browsing experience से शुरू करें, फिर directory के उपयोगी साबित होने पर structured data, admin tools, sign-in, या payments जोड़ें।