ब्लॉग
AI 2 मिनट में एक पूरी वर्डप्रेस साइट कैसे जेनरेट करता है
PAGEnza के साइट बिल्डर को पावर देने वाले डिज़ाइन मैंडेट सिस्टम, पैलेट जनरेशन और गुटेनबर्ग ब्लॉक असेंबली में एक गहरी डुबकी।
हर बार जब कोई PAGEnza में व्यावसायिक विवरण टाइप करता है और जेनरेट दबाता है, तो पृष्ठभूमि में कुछ काफी जटिल होता है — लगभग 90 सेकंड में। यह पोस्ट बताता है कि वह वास्तव में क्या है।
टेम्प्लेट के साथ समस्या
अधिकांश AI वेबसाइट बिल्डर इस तरह काम करते हैं: वे एक टेम्प्लेट चुनते हैं, उसमें आपका टेक्स्ट डालते हैं, और इसे "AI-जेनरेटेड" कहते हैं। परिणाम उस प्लेटफ़ॉर्म पर बने हर दूसरे साइट जैसा दिखता है।
PAGEnza अलग तरह से काम करता है। कोई टेम्प्लेट नहीं हैं। हर साइट एक खाली गुटेनबर्ग कैनवास से शुरू होती है और डिज़ाइन नियमों के एक सेट से एल्गोरिथम रूप से बनाई जाती है जिसे हम डिज़ाइन मैंडेट कहते हैं।
डिज़ाइन मैंडेट क्या है?
डिज़ाइन मैंडेट एक संरचित प्रॉम्प्ट है — लगभग 8,000 टोकन — जो किसी विशिष्ट साइट के लिए हर दृश्य और संरचनात्मक निर्णय का वर्णन करता है। यह किसी भी AI कॉल से पहले पायथन में बनाया जाता है, आपके इनपुट के आधार पर।
इसमें छह भाग होते हैं:
भाग ए — ब्रांड पहचान: उद्योग, व्यवसाय का नाम, टोन (जैसे "पेशेवर" बनाम "चंचल"), लक्षित दर्शक।
भाग बी — रंग प्रणाली: 4-रंग पैलेट (स्याही, bg1, bg2, एक्सेंट) जो एल्गोरिथम रूप से उत्पन्न होता है और WCAG AA कंट्रास्ट नियमों के विरुद्ध मान्य होता है। हर पैलेट को वास्तविक ल्यूमिनेंस गणित के साथ जांचा जाता है — अनुमानों के साथ नहीं।
भाग सी — टाइपोग्राफी: 80+ Google फ़ॉन्ट्स से चुना गया एक फ़ॉन्ट ट्रियो (हेडिंग / बॉडी / एक्सेंट), उद्योग आर्किटाइप द्वारा फ़िल्टर किया गया और latin-ext कैरेक्टर सपोर्ट शामिल करने के लिए सत्यापित किया गया।
भाग डी — लेआउट ब्लूप्रिंट: पृष्ठ संरचना — कौन से अनुभाग दिखाई देते हैं, किस क्रम में, और किस प्रकार के साथ (जैसे फुल-विड्थ इमेज वाला हीरो बनाम स्प्लिट लेआउट वाला हीरो)।
भाग ई — डिज़ाइन बाधाएं: बॉर्डर रेडियस स्टाइल (शार्प / सॉफ्ट / राउंडेड), सेक्शन डिवाइडर आकार, इमेज ट्रीटमेंट, स्पेसिंग सिस्टम।
भाग एफ — सामग्री नियम: कहाँ कौन सा टेक्स्ट जाता है, हेडलाइन कैसे संरचित होती हैं, कौन से CTA दिखाई देते हैं।
पैलेट कैसे जेनरेट होते हैं
रंग वह जगह है जहाँ अधिकांश AI उपकरण विफल होते हैं। LLM से रंग चुनने के लिए कहने पर आपको रैंडम हेक्स कोड मिलते हैं जो अलग-अलग ठीक लग सकते हैं लेकिन एक्सेसिबिलिटी परीक्षणों में विफल हो जाते हैं — या बस सामान्य दिखते हैं।
हम एक अलग दृष्टिकोण अपनाते हैं। हमारी पैलेट प्रणाली इस तरह काम करती है:
- आपके उद्योग और आर्किटाइप (जैसे "लक्जरी", "बोल्ड", "अर्थी") के आधार पर, हम 20 पूर्व-ऑडिटेड पैलेट समूहों में से चुनते हैं
- प्रत्येक समूह के भीतर, हम एक पैलेट चुनते हैं जहाँ
स्याहीमें सभी पृष्ठभूमि के मुकाबले ≥4.5:1 कंट्रास्ट होता है - हम सत्यापित करते हैं कि
एक्सेंटमेंbg1औरbg2के मुकाबले ≥3.0:1 कंट्रास्ट है - हम सुनिश्चित करते हैं कि दो पृष्ठभूमि रंगों में विपरीत रंग तापमान (एक गर्म, एक ठंडा) हो ताकि अनुभाग अलग महसूस हों
यदि कोई पैलेट किसी भी जांच में विफल रहता है, तो उसे स्वचालित रूप से बदल दिया जाता है। इस चरण में कोई LLM शामिल नहीं है — यह शुद्ध गणित है।
गुटेनबर्ग ब्लॉक कैसे असेंबल होते हैं
एक बार डिज़ाइन मैंडेट तैयार हो जाने के बाद, यह Gemini Flash के पास जाता है जिसमें एक सख्त प्रॉम्प्ट होता है जो निर्दिष्ट करता है:
- कौन से ब्लॉक अनुमत हैं (लगभग 40 गुटेनबर्ग ब्लॉक प्रकारों की एक श्वेतसूची)
- प्रत्येक ब्लॉक प्रकार के लिए आवश्यक विशेषताएँ
- आउटपुट के लिए सटीक JSON प्रारूप
AI रॉ गुटेनबर्ग ब्लॉक JSON लौटाता है — HTML नहीं, React नहीं, वास्तविक WP ब्लॉक मार्कअप। वह JSON फिर कई सत्यापन पास से गुजरता है:
- स्कीमा सत्यापन — आवश्यक विशेषताएँ मौजूद हैं, कोई अज्ञात ब्लॉक प्रकार नहीं
- CSS क्लास सैनिटाइजेशन — आविष्कारित क्लास नामों को हटा दिया जाता है, उन्हें हमारे डिज़ाइन सिस्टम क्लास से बदल दिया जाता है
- हीलर पास — स्पेसिंग विशेषताएँ सिंक की जाती हैं, कवर ब्लॉक ग्रेडिएंट सामान्य किए जाते हैं, आकार डिवाइडर इंजेक्ट किए जाते हैं
परिणाम सीधे WP REST API के माध्यम से वर्डप्रेस पर अपलोड किया जाता है और साइट के होमपेज के रूप में सक्रिय किया जाता है।
हर साइट अनोखी क्या बनाती है
हर जनरेशन के बीच कई चीजें भिन्न होती हैं, एक ही उद्योग के लिए भी:
- पैलेट: 20+ समूह, प्रत्येक में कई पैलेट हैं
- फ़ॉन्ट ट्रियो: प्रति आर्किटाइप 6+ संयोजन
- अनुभाग क्रम और प्रकार: हीरो लेआउट, आँकड़े शैली, फ़ीचर कार्ड व्यवस्था
- आकार डिवाइडर: ऑर्गेनिक बनाम ज्यामितीय, आयाम/आवृत्ति भिन्नताएँ
- ब्लॉब आकार: ऑर्गेनिक उद्योगों के लिए, इमेज और कार्ड ब्लॉब 12 वेरिएंट से रैंडमाइज्ड होते हैं
परिणाम यह है कि एक ही दिन जेनरेट किए गए दो पिज़्ज़ा रेस्तरां के रंग, फ़ॉन्ट, लेआउट अलग-अलग होंगे — और दोनों WCAG AA के अनुरूप होंगे।
आगे क्या है
हम वर्तमान में काम कर रहे हैं:
- मल्टी-पेज जनरेशन — एक ही मैंडेट से
/about,/services, और/contactपेज जेनरेट करना - लाइव प्रीव्यू — वर्डप्रेस पर डिप्लॉय होने से पहले साइट देखना
- स्टाइल ट्रांसफर — आपको पसंद की गई साइट के स्क्रीनशॉट को अपलोड करना और उसके डिज़ाइन DNA को निकालना
यदि आप सिस्टम को एक्शन में देखना चाहते हैं, तो जेनरेटर आज़माने के लिए मुफ़्त है — पहले साइट के लिए किसी खाते की आवश्यकता नहीं है।