The Kit: ब्राउज़िंग, प्रीव्यू और मॉड्यूल जोड़ना

एक्सप्लोरर में बिल्कुल तीन स्तर हैं, और हर स्तर पेज के अपने पते में रहता है, सिर्फ़ कंपोनेंट की स्थिति में नहीं: श्रेणी ग्रिड (/projects/kit या /projects/<id>/kit), किसी एक श्रेणी की मॉड्यूल सूची (?cat=<key> जोड़ें), और एक मॉड्यूल का पूरा विवरण पेज (&module=<id> जोड़ें)। इसका मतलब है कि ब्राउज़र का Back बटन हमेशा सही काम करता है, और किसी मॉड्यूल का विवरण पेज एक असली, साझा किया जा सकने वाला लिंक है — किसी को यह बताने के बजाय सीधे भेजें कि "Quote या Estimate Request Form से आपको ठीक क्या मिलता है"। Escape भी Back की तरह एक-एक स्तर पीछे ले जाता है।

किसी प्रोजेक्ट के भीतर से (/projects/<id>/kit) खोलने पर, पेज जानता है कि आप कौन सा प्रोजेक्ट देख रहे हैं, इसलिए वह दिखा सकता है कि उस पर पहले से क्या है और सीधे उसी में जोड़ने देता है। अकेले खोलने पर (/projects/kit, Kit टैब के लिंक से या सीधे), वही तीन स्तर होते हैं पर कोई प्रोजेक्ट-विशिष्ट जानकारी नहीं होती — यह तब उपयोगी है जब आप तय करने से पहले ब्राउज़ करना चाहें, या किसी को बिना किसी एक प्रोजेक्ट को खोले कैटलॉग दिखाना हो।

श्रेणी ग्रिड के ऊपर, aiKit में हर जगह की तरह एक दो-तरफ़ा टॉगल पूरे कैटलॉग को बाँटता है: Site kit में वे सेक्शन और फ़ीचर हैं जो वेबसाइट या ऐप का हिस्सा बनते हैं (पेज, फ़ॉर्म, गैलरी, स्टोर, बुकिंग, SEO); Business tools kit में वे टूल हैं जो प्रोजेक्ट के अंदर नहीं, बल्कि उसके साथ चलते हैं (मार्केटिंग ऑटोमेशन, इनवॉइसिंग, CRM, स्टाफ़ टूल, रिपोर्टिंग)। हर श्रेणी टाइल दिखाती है कि उसमें कितने मॉड्यूल हैं, और जब भी उनमें कम से कम एक Ready now मॉड्यूल हो तो "N ready now" बैज (नीचे देखें)।

श्रेणियों के ऊपर का खोज बॉक्स मॉड्यूल के नाम या विवरण से पूरे कैटलॉग में एक साथ मिलान करता है — Site kit और Business tools kit दोनों में, चाहे कौन सा टॉगल चुना हो — इसलिए Site kit देखते समय भी "invoice" खोजने पर वह मिल जाता है।

किसी प्रोजेक्ट के भीतर से खोलने पर, और केवल तब जब आप खोज नहीं कर रहे हों, श्रेणी ग्रिड के ऊपर "Recommended for this project" पंक्ति दिखती है, जब aiKit के पास सही सुझाव हों: प्रोजेक्ट के प्रकार पर आधारित सरल, गैर-AI नियम (वेबसाइट को quote फ़ॉर्म, contact फ़ॉर्म, reviews showcase, local SEO और FAQ पेज सुझाए जाते हैं; ऑनलाइन स्टोर को cart और checkout, cart-abandonment recovery और product reviews; और यही लैंडिंग पेज, ऐप, admin systems, dashboards, client portals, blogs और marketing-automation प्रोजेक्ट के लिए) साथ ही प्रोजेक्ट के लक्ष्य टेक्स्ट से कुछ कीवर्ड मिलान ("quote", "booking", "review", "email", "invoice" या "sell online" लिखने पर संबंधित मॉड्यूल अपनी एक-पंक्ति की वजह के साथ आता है)। जो पहले से प्रोजेक्ट में है उसे छोड़ दिया जाता है, और सूची छह तक सीमित है।

हर मॉड्यूल पर दो स्थिति टैग में से एक होता है, और शब्द जानबूझकर सीधे और सटीक हैं, मार्केटिंग भाषा नहीं। "Ready now" का मतलब है कि मॉड्यूल बिल्ड इंजन के परीक्षित मॉड्यूल में से एक है — असली कोड जो नमूना डेटा के साथ एक वास्तविक पेज दिखाता है, वही टेम्पलेट जो एक लाइव साइट को मिलता है। "Built for you" का मतलब है कि मॉड्यूल कैटलॉग का असली, योजनाबद्ध हिस्सा है जिसे अभी कुछ भी रेंडर नहीं होता: इसे चुनने पर वह योजना में जुड़ता है और एक असली कार्य आइटम बनता है, और मॉड्यूल साइट के अपने कोड में, उसके अपने ब्रांड और शब्दों के साथ बनाया जाता है, जैसे किसी भी दूसरे AI संपादन में होता है — बस आज इसका कोई परीक्षित टेम्पलेट तैयार नहीं है।

कोई भी स्थिति "असली नहीं" या "काल्पनिक" नहीं दर्शाती। दोनों वे चीज़ें हैं जिन्हें aiKit वास्तव में आपके लिए बनाएगा। टैग बस यह बताता है कि आप इसका तैयार रूप अभी देख सकते हैं या इसे एक विवरण और आरेख से कल्पना करनी होगी।

किसी श्रेणी को खोलने पर उसका हर मॉड्यूल एक कार्ड के रूप में दिखता है: एक थंबनेल, मॉड्यूल का नाम, उसका स्थिति टैग, एक छोटा एक-पंक्ति विवरण, "Works best for" चिप पंक्ति (अधिकतम तीन), और अगर वह पहले से जुड़ चुका है तो "On this project" (जब आप किसी प्रोजेक्ट के भीतर ब्राउज़ कर रहे हों)। Ready now मॉड्यूल का थंबनेल पेज का एक छोटा लाइव पूर्वावलोकन है — यह तभी लोड होता है जब वह स्क्रीन में आता है, और स्क्रीन पर एक साथ अधिकतम छह लाइव थंबनेल रहते हैं ताकि लंबी श्रेणी पेज को धीमा न करे; उससे आगे वाले सिर्फ़ एक साधारण लोडिंग प्लेसहोल्डर दिखाते हैं जब तक वे सचमुच दिखाई न दें। Built for you मॉड्यूल का थंबनेल नीचे बताए गए जैसा ही एक चित्रात्मक आरेख होता है, बस छोटा — सिवाय उन मॉड्यूल के जिनका कोई काम करने वाला पूर्वावलोकन है (नीचे देखें), जिनके कार्ड पर असली नमूना साइट छोटी करके दिखती है, "Working preview · N variations" बैज, और "See details" की जगह "See it work" बटन। "See details" उस मॉड्यूल का अपना पेज खोलता है।

Ready now मॉड्यूल के लिए, पूर्वावलोकन उस असली टेस्ट किए गए पेज का एक वास्तविक iframe है, पूरे आकार में, एक छोटी ब्राउज़र विंडो जैसे फ़्रेम में, जिसमें डेस्कटॉप/फ़ोन टॉगल है जो फ़्रेम का आकार सचमुच बदलता है ताकि आप देख सकें कि वह फ़ोन पर कैसा दिखता है (असली फ़ोन पर टॉगल की जगह एक सादा "फ़ोन पूर्वावलोकन" लेबल आता है और फ़्रेम सीधे फ़ॉर्म तक स्क्रॉल होकर खुलता है, ताकि आप सिर्फ़ हीरो नहीं, फ़ील्ड भी देख सकें)। फ़्रेम नीचे की ओर धुंधला होकर गायब होता है; उसके नीचे "पूरा पूर्वावलोकन खोलें" पूरा पेज एक नए टैब में खोलता है, और नीचे का कैप्शन बताता है कि किस नमूना व्यवसाय का डेटा इस्तेमाल हो रहा है। किसी प्रोजेक्ट के अंदर खोलने पर, "इस साइट के रंगों में दिखाएँ" टॉगल उसी पूर्वावलोकन को प्रोजेक्ट के अपने ब्रांड रंगों के साथ फिर से लाता है (जो ब्रीफ़ के ब्रांड नोट्स में लिखे किसी भी #hex कोड से सीधे पढ़े जाते हैं) और प्रोजेक्ट का नाम बदल दिया जाता है, so आप अपनी असली साइट कैसी दिखेगी उसके करीब कुछ देखते हैं, किसी सामान्य नमूने जैसा नहीं।

Built for you मॉड्यूल के लिए कोई लाइव iframe नहीं होता — इसके बजाय आपको श्रेणी सूची जैसा ही उदाहरणात्मक वायरफ़्रेम मिलता है, बस बड़े आकार में बना हुआ: लेआउट के आकार का एक सादा, मोनोलाइन SVG आरेख (फ़ॉर्म के फ़ील्ड, कैलेंडर का ग्रिड, डैशबोर्ड की टाइलें, जो भी स्क्रीन उस मॉड्यूल के लिए ठीक हो) जिसमें मॉड्यूल के अपने पूर्वावलोकन डेटा से लिए कुछ छोटे लेबल हों। इनमें से हर एक के नीचे एक कैप्शन अनिवार्य है और कभी हटाया नहीं जाता: "लेआउट का चित्रण। आपका संस्करण आपकी साइट से मेल खाने के लिए डिज़ाइन किया गया है।" यह खास तौर पर इसलिए है ताकि आकार के स्केच को कभी तैयार, ब्रांड-अनुरूप पूर्वावलोकन न समझ लिया जाए।

कार्यशील पूर्वावलोकन (2026-10-04): Built for you मॉड्यूल का एक बढ़ता हुआ सेट स्केच छोड़कर एक पूरी, क्लिक करने योग्य नमूना साइट खोलता है, जो विवरण के ऊपर पूरी चौड़ाई में दिखती है। ई-कॉमर्स / ऑनलाइन स्टोर के सभी बारह मॉड्यूल एक ही नमूना मिट्टी के बर्तनों की दुकान, Juniper Kiln खोलते हैं, हर एक उस हिस्से पर जो उस मॉड्यूल से जुड़ा है: कैटलॉग (फ़िल्टर, क्रम, खोज, किसी उत्पाद को खोलना और ग्लेज़ व आकार चुनना — तस्वीर और कीमत बदल जाती है), कार्ट और चेकआउट (मात्रा बदलें, आइटम हटाएँ, WELCOME10, FREESHIP या GIFT-2580 डालें, ZIP कोड से डिलीवरी का अनुमान लगाएँ, और पुष्टि पेज तक चेकआउट करें), भुगतान विकल्प (कार्ड, Pay in 4 और वॉलेट बटन), शिपिंग दरें, छूट कोड और गिफ़्ट कार्ड, उत्पाद समीक्षाएँ (सितारों या फ़ोटो से फ़िल्टर करें, सहायक चिह्नित करें, एक लिखें), बंडल और ऐड-ऑन, बिक्री कर (डिलीवरी राज्य बदलें और कर की पंक्ति बदल जाती है), ग्राहक खाते (साइन इन करें, फिर से खरीदें, पैकेज ट्रैक करें, वापसी शुरू करें), ऑर्डर ईमेल (पुष्टि, भेजे गए और डिलीवर हुए ईमेल, काम करने वाले ट्रैकिंग पेज के साथ), वापसी और बदलाव (ऑर्डर खोजें, आइटम और कारण चुनें, वापसी लेबल पाएँ), और इन्वेंटरी (Owner व्यू जिसमें स्टॉक बदलने से खरीदारों को दिखने वाली चीज़ बदल जाती है)। ऑनलाइन कोर्स और डिजिटल उत्पादों के सभी दस मॉड्यूल एक नमूना ब्रेड स्कूल, Rise & Crumb खोलते हैं: पाठ चलाएँ (गति, कैप्शन), उसे पूरा चिह्नित करें, प्रगति रिंग को भरते देखें, क्विज़ दें, मुफ़्त पूर्वावलोकन से नामांकन करें, प्रमाणपत्र देखें, किसी पाठ के नीचे सवाल पूछें, डिजिटल डाउनलोड खरीदें, कोर्स बंडल चुनें या चेकआउट ऐड-ऑन चुनें, और Owner व्यू पर जाकर पाठों के नाम बदलें, क्रम बदलें, जोड़ें या अप्रकाशित करें और हर हफ़्ता कब खुलेगा यह तय करें। रिलीज़-शेड्यूल मॉड्यूल पर, फ़्रेम के ऊपर की "पूर्वावलोकन समय" पंक्ति में एक हफ़्ता आगे बढ़ें (और आज पर वापस जाएँ) है, ताकि आप बंद पाठों को उनकी तारीखों पर खुलते देख सकें।

फ़्रेम के ऊपर: मॉड्यूल जो हर वैरिएशन देता है उसके लिए विकल्पों की एक पंक्ति (जैसे शॉप लेआउट: Grid, List या Featured; Cart: Slide-out cart या Cart page और Checkout: One page या Step by step; रिलीज़ नियम: On set dates, Days after joining या After finishing the last lesson)। कोई विकल्प चुनने पर नमूना साइट तुरंत उस वैरिएशन में दोबारा बन जाती है और पेज पते (?v=…) में सहेजी जाती है, ताकि किसी खास वैरिएशन का लिंक साझा किया जा सके। Desktop और Phone फ़्रेम का आकार बदलते हैं ताकि नमूना साइट वैसे ही दोबारा व्यवस्थित हो जैसे फ़ोन पर होती (असली फ़ोन पर यह एक सादा "फ़ोन व्यू" लेबल होता है)। Reset नमूना साइट को उसकी शुरुआती हालत में लौटा देता है। एक छोटी "करने योग्य बातें" पंक्ति बताती है कि पहले क्या क्लिक करें, और हर चुने गए वैरिएशन का विवरण फ़्रेम के नीचे दिखता है। ब्रीफ़ में ब्रांड रंगों वाले प्रोजेक्ट के अंदर, "इस साइट के रंगों में दिखाएँ" नमूना साइट का मुख्य रंग प्रोजेक्ट के अपने रंग से बदल देता है (केवल तब जब वह रंग इतना गहरा हो कि सफ़ेद बटन टेक्स्ट पढ़ने योग्य रहे)।

कार्यशील पूर्वावलोकन में कुछ भी सर्वर तक नहीं पहुँचता। कोई भुगतान कनेक्शन नहीं है: चेकआउट पर लिखा होता है "पूर्वावलोकन — कुछ भी चार्ज नहीं होता और कोई ऑर्डर नहीं भेजा जाता," कार्ड नंबर एक तय, केवल-पढ़ने योग्य नमूना है, और वॉलेट बटन (Apple Pay, Google Pay, PayPal) केवल एक नोट दिखाते हैं। कोई ईमेल नहीं भेजा जाता, कोई समीक्षा पोस्ट नहीं होती, और कुछ सहेजा नहीं जाता; पेज छोड़ने पर सब भूल जाता है। नमूना व्यवसाय, उत्पाद, लोग और कीमतें काल्पनिक हैं। फ़्रेम के नीचे का कैप्शन यह बताता है: "एक काल्पनिक व्यवसाय के लिए नमूना डेटा वाला कार्यशील पूर्वावलोकन। आपका संस्करण आपके अपने उत्पाद, कीमतें, शब्द और ब्रांड इस्तेमाल करता है। यहाँ कुछ भी चार्ज, सहेजा या भेजा नहीं जाता।" Built for you के बाकी हर मॉड्यूल में अब भी लेआउट का चित्रण दिखता है।

• विज़िटर क्या देखता है — क्रम से लिखा, सरल भाषा में एक चरण-दर-चरण मार्गदर्शिका कि मॉड्यूल इस्तेमाल करने वाला व्यक्ति असल में क्या अनुभव करता है।
• आपको क्या मिलता है — मॉड्यूल प्रोजेक्ट के मालिक को क्या सौंपता है (कहीं असली जगह दर्ज की गई लीड, एक स्थिति जिसे आप अपडेट कर सकें, और इसी तरह की चीज़ें)।
• विशेषताएँ, और — केवल उन मॉड्यूल के लिए जिनमें कैटलॉग में असली नाम वाले वैरिएंट परिभाषित हों — इस सेक्शन में ही सीधे चुनने योग्य कार्डों का "वैरिएंट चुनें" सेट (पहला डिफ़ॉल्ट रूप से चुना होता है, एक छोटे निशान से चिह्नित), ताकि एक असली "या तो-या" विकल्प यहीं चुना जाए, न कि हाथ से लिखा जाए (केवल मुक्त-लेखन अनुकूलन नहीं)।
• यह क्यों मायने रखता है — किसी व्यवसाय को इसकी ज़रूरत क्यों है, इसका ईमानदार कारण।
• यह कैसे अनुकूलित होता है (Ready now) या आप कौन से वैरिएंट चुन सकते हैं (Built for you) — इसमें वास्तव में क्या अलग बनाया जा सकता है।
• सबसे अच्छा किसके लिए है — कार्ड वाले वही व्यवसाय-प्रकार चिप, पूरी तरह दिखाए गए।
• यह मॉड्यूल कैसे बनता है — एक सरल वाक्य जिसमें साफ़ बताया गया हो कि यह मॉड्यूल कैसे तैयार होता है (एक परखा हुआ पेज जिसे इंजन अभी दिखाता है, या किसी बिल्ड के दौरान AI द्वारा साइट में बनाया गया), और अगर इसके लिए भुगतान या मैप्स जैसे किसी थर्ड-पार्टी खाते की ज़रूरत है तो उसका नोट।

सबसे नीचे "इसे <project name> में जोड़ें" लिखा होता है (या अगर कोई प्रोजेक्ट चुना नहीं गया है तो "आपका प्रोजेक्ट")। अगर इस मॉड्यूल के लिए कस्टमाइज़ेशन के कोई सुझाव सेव हैं, तो वे पहले चेकलिस्ट में दिखते हैं — तैयार मॉड्यूल के लिए "सुझाए गए कस्टमाइज़ेशन" और बनाया हुआ मॉड्यूल के लिए "जो वैरिएंट चाहिए वे चुनें" लेबल के साथ — और इनमें से कोई भी चुनने पर वही पंक्ति भेजी जाने वाली जानकारी में जुड़ जाती है, सिर्फ़ चुपचाप लगा चेकबॉक्स नहीं।

जिस मॉड्यूल का काम करने वाला प्रीव्यू है, उसके लिए पैनल प्रीव्यू के नीचे बाएँ कॉलम में होता है और "आपका वैरिएशन" से शुरू होता है — यानी प्रीव्यू की चॉइस पंक्तियों में चुना गया वैरिएशन (जैसे "Cart: Cart page · Checkout: Step by step")। जब आप जोड़ें दबाते हैं, तब प्रीव्यू में जो दिख रहा होता है, वही दर्ज होता है: वह प्रोजेक्ट के ब्रीफ़ में मॉड्यूल के साथ सेव होता है, और वर्क आइटम में "Variant: …" लिखा आता है, ताकि बनाने वाला वही लेआउट बनाए। जिस मॉड्यूल में फ़ीचर्स सेक्शन में नाम वाले विकल्प भी हैं, वहाँ "आपके लिए सबसे ज़रूरी क्या है?" पूछा जाता है, ताकि दोनों चुनाव आपस में न मिलें।

"आपके लिए क्या अलग होना चाहिए?" एक मुक्त-लिखित नोट है, जिसमें aiKit में हर जगह वाला वही डिक्टेशन बटन है, साथ ही "फ़ोटो या PDF अटैच करें" बटन है (सिर्फ़ इमेज और PDF, हर फ़ाइल 2.5 MB तक) — लोगो, रेफ़रेंस फ़ोटो या स्पेक शीट के लिए। अटैच की गई फ़ाइलें वहीं हटाए जा सकने वाले चिप्स में दिखती हैं। अगर मॉड्यूल को ठीक से बनाने के लिए कुछ असली, खास सवालों के जवाब चाहिए, तो वे "हम आपसे क्या पूछेंगे" के नीचे दिखते हैं, हर एक के साथ अपना वैकल्पिक टेक्स्ट फ़ील्ड होता है, ताकि आप बाद में पूछे जाने का इंतज़ार करने के बजाय पहले ही जवाब दे सकें।

एक असली प्रोजेक्ट पर होते ही "प्लान में जोड़ें" हमेशा उपलब्ध रहता है: यह चुनाव प्रोजेक्ट के ब्रीफ़ में दर्ज करता है (वही प्लान जिसे साइट प्लान स्क्रीन और प्रोजेक्ट पेज पढ़ते हैं) और फ़ीडबैक टैब में एक असली, स्टाफ़ के लिए वर्क आइटम बनाता है, जिस पर "हमारे जवाब का इंतज़ार" लिखा होता है, ठीक वैसे ही जैसे कोई भी दूसरा अनुरोध। "जोड़ें और अभी बनाएँ" उसके बगल में तभी दिखता है जब प्रोजेक्ट में बदलने योग्य असली फ़ाइलें पहले से हों — यानी उसका पहला बिल्ड पूरा हो चुका हो, या वह पहले से लाइव हो। यह वही दो काम करता है और फिर वह वर्क आइटम उसी AI एडिटर से तुरंत चलाता है जिसे Fix with AI इस्तेमाल करता है, कोई अलग कतार नहीं। जो मॉड्यूल प्रोजेक्ट में पहले से है, उसे जोड़ने से साफ़ "पहले से इस प्रोजेक्ट में है" संदेश के साथ सीधे मना कर दिया जाता है, डुप्लीकेट नहीं जुड़ता।

भेजने के बाद बटनों की जगह एक पुष्टि संदेश आता है, जिसमें असल में जो हुआ वह दिखता है — सादा "प्लान में वर्क आइटम के रूप में जोड़ा गया" संदेश, या बिल्ड-अभी अनुरोध के लिए असली स्थिति (शुरू हुआ, या वह क्यों नहीं हो सका, जैसे पहले समीक्षा की मंज़ूरी के लिए रुका होना) — साथ ही सीधे दो लिंक: "प्लान खोलें" और "अनुरोध देखें", ताकि आप कभी यह सोचते न रहें कि चीज़ कहाँ गई।

/projects/kit पर — होस्टेड प्रोजेक्ट्स डैशबोर्ड के बाकी हिस्से जैसा ही असली साइन-इन, और कोई प्रोजेक्ट ज़रूरी नहीं — सब कुछ बिल्कुल वैसे ही काम करता है, जब तक आप कुछ जोड़ने की कोशिश न करें। "प्रोजेक्ट में जोड़ें" दबाने पर (जब कोई प्रोजेक्ट लोड न हो, तब बटन "प्लान में जोड़ें" की जगह यही लिखा होता है) "किस प्रोजेक्ट में जोड़ें?" खुलता है, एक छोटा चयन-बॉक्स जिसमें आपके खाते के हर प्रोजेक्ट की सूची होती है। कोई एक चुनें, तो आप सीधे उसी प्रोजेक्ट के अपने Kit Explorer में पहुँच जाते हैं, और वही मॉड्यूल खुला मिलता है, जोड़ना पूरा करने के लिए तैयार। अगर आपके पास अभी कोई प्रोजेक्ट नहीं है, तो चयन-बॉक्स साफ़ बताता है और सीधा "प्रोजेक्ट शुरू करें →" लिंक देता है, ताकि आप अटके न रहें।