Forge की कहानी: वेबसाइट बनाने वाला AI कंपाइलर

हर AI वेबसाइट बिल्डर एक ही तरह से काम करता है: आप प्रॉम्प्ट लिखते हैं, LLM HTML लिखता है, और जो मिले वही आपके हाथ में। कभी वह अच्छा होता है। कभी नहीं। आप दोबारा “जनरेट” दबाते हैं और बिल्कुल अलग चीज़ मिलती है: अलग लेआउट, अलग रंग, अलग गुणवत्ता। नतीजा बुनियादी तौर पर अनिश्चित रहता है।

हमने भी वही मॉडल शुरू किया था। वह चला। लोगों ने उससे असली वेबसाइट बनाईं। लेकिन जैसे-जैसे हज़ारों साइट जनरेट होती देखीं, एक पैटर्न दिखा: LLM अपने ज़्यादातर टोकन उन चीज़ों को फिर से गढ़ने में ख़र्च कर रहा था जिनका फ़ैसला उसे करना ही नहीं चाहिए। नेविगेशन सिस्टम। रंगों का कंट्रास्ट। मोबाइल ब्रेकपॉइंट। एंकर लिंक। फ़ॉन्ट लोड करना। कॉन्टैक्ट फ़ॉर्म का मार्कअप।

हर जनरेशन उन समस्याओं पर पासा फेंकने जैसा था जिनके सही जवाब पहले से मौजूद हैं।

Forge हमारा जवाब है। यह कोई छोटा-मोटा सुधार नहीं है। यह इस बात का बुनियादी तौर पर नया ढाँचा है कि AI वेबसाइट कैसे बनाता है।

AI से कच्चा HTML लिखवाने की समस्या

जब आप LLM से कहते हैं कि “एक बारबरशॉप की वेबसाइट बनाओ”, तो उसे एक साथ हज़ारों फ़ैसले लेने पड़ते हैं: कौन-से सेक्शन रखने हैं। किस क्रम में रखने हैं। नेविगेशन कैसा दिखेगा। कौन-से रंग इस्तेमाल होंगे। मोबाइल लेआउट कैसे संभालना है। फ़ॉन्ट कैसे लोड करने हैं। एंकर लिंक कैसे जोड़ने हैं। HTML को अर्थपूर्ण ढंग से कैसे बनाना है। कंट्रास्ट रेशियो कैसे संभालना है। खुलने का समय किस रूप में लिखना है। फ़ोन नंबर को क्लिक करने लायक लिंक कैसे बनाना है।

इनमें से कुछ फ़ैसले रचनात्मक होते हैं: कौन-से सेक्शन रखें, बारबरशॉप के लिए कौन-सा रंग पैलेट जँचेगा, कुल मिलाकर माहौल कैसा हो।

ज़्यादातर फ़ैसले इंजीनियरिंग के होते हैं: नेविगेशन असली एंकर तक स्क्रोल करे, कंट्रास्ट रेशियो कम से कम 4.5:1 हो, फ़ोन नंबर E.164 फ़ॉर्मैट में हो, फ़ॉन्ट preconnect के साथ Google Fonts से लोड हो, और 480px से नीचे मोबाइल लेआउट ऊपर-नीचे सजे।

जब आप दोनों LLM पर छोड़ देते हैं, तो रचनात्मक फ़ैसले अच्छे निकलते हैं लेकिन इंजीनियरिंग वाले फ़ैसले बेतरतीब। किसी जनरेशन में कंट्रास्ट एकदम सही होता है, किसी में नहीं। किसी में एंकर लिंक काम करते हैं, किसी में ऐसे सेक्शन की ओर इशारा करते मरे हुए href होते हैं जो मौजूद ही नहीं। कोई फ़ॉन्ट ठीक से लोड करता है, कोई ऐसा font-face इनलाइन कर देता है जो कभी लोड ही नहीं होता।

Forge के पीछे की समझ यह है: रचनात्मक फ़ैसलों को इंजीनियरिंग फ़ैसलों से अलग कीजिए। रचनात्मकता AI को संभालने दीजिए। सही-गलत का ज़िम्मा कंपाइलर को दीजिए।

दो चरणों वाला ढाँचा

Forge वेबसाइट जनरेशन को दो अलग चरणों में बाँटता है:

चरण 1: AI तय करता है कि क्या बनाना है (SiteSpec)

कच्चा HTML लिखने के बजाय AI एक संरचित स्पेसिफ़िकेशन बनाता है, यानी एक JSON दस्तावेज़ जिसे हम SiteSpec कहते हैं। SiteSpec बताता है कि साइट में कौन-से सेक्शन होंगे, हर सेक्शन में क्या सामग्री होगी, रंग पैलेट और टाइपोग्राफ़ी क्या होगी, नेविगेशन कैसा दिखेगा, और कुल डिज़ाइन ट्रीटमेंट क्या होगा।

सारे रचनात्मक फ़ैसले AI लेता है: माहौल गहरा और शाही होगा या चमकदार और संपादकीय? हीरो में Bebas Neue जैसा संकरा हेडलाइन फ़ॉन्ट चलेगा या Cormorant Garamond जैसा सुरुचिपूर्ण सेरिफ़? सेक्शन में गैलरी, स्टैट बैंड, FAQ या टीम ग्रिड होगा?

लेकिन इनमें से कुछ भी कैसे रेंडर होगा, यह AI तय नहीं करता। वह HTML या CSS की एक भी लाइन नहीं लिखता। वह सिर्फ़ इरादा बताता है।

चरण 2: कंपाइलर उसे हर बार बेहतरीन ढंग से रेंडर करता है

SiteSpec एक डिटरमिनिस्टिक कंपाइलर में जाता है। यह एक शुद्ध फ़ंक्शन है जो स्पेसिफ़िकेशन और एक प्लेबुक (Playbook) लेकर पूरी तरह स्वतंत्र, प्रोडक्शन-ग्रेड HTML तैयार करता है। वही इनपुट हमेशा वही आउटपुट देता है।

हर इंजीनियरिंग फ़ैसला कंपाइलर का है:

• नेविगेशन एंकर: हर नेविगेशन लिंक एक असली सेक्शन की ओर जाता है। मरे हुए एंकर असंभव हैं, क्योंकि कंपाइलर हर #href को असली सेक्शन ID से मिलाकर देखता है।
• कंट्रास्ट की सुरक्षा: बैकग्राउंड पर टेक्स्ट का कंट्रास्ट जाँचा जाता है और WCAG AA (4.5:1) तक पहुँचाया जाता है। पैलेट AI चुनता है, पढ़ने लायक बनाना कंपाइलर का काम है।
• सतहों की अदला-बदली: पास-पास के दो सेक्शन का बैकग्राउंड एक जैसा नहीं होता। कंपाइलर बेस और सेकंडरी सतहों को बारी-बारी से लगाकर दृश्य लय बनाता है।
• संपर्क जानकारी का मानकीकरण: tel: लिंक के लिए फ़ोन नंबर E.164 में बदले जाते हैं, WhatsApp चैनल अपने आप पहचाने जाते हैं, खुलने का समय और पते सलीक़े से सजाए जाते हैं। संपर्क की हर जानकारी एक असली, क्लिक करने लायक लिंक की तरह काम करती है।
• फ़ॉन्ट लोडिंग: Google Fonts preconnect और display-swap के साथ लोड होते हैं। न टूटे font-face, न लेआउट में उछाल।
• रेस्पॉन्सिव लेआउट: हर ब्लॉक मोबाइल, टैबलेट और डेस्कटॉप ब्रेकपॉइंट पर सही रेंडर होता है। ब्रेकपॉइंट AI नहीं चुनता, कंपाइलर लागू करता है।
• फ़ुटर और नेविगेशन का निर्माण: अगर AI फ़ुटर या नेविगेशन छोड़ दे (जिससे टोकन बचते हैं), तो कंपाइलर मौजूद सेक्शन से उन्हें बना लेता है। अंतिम आउटपुट में कुछ भी कम नहीं रहता।

यह क्यों मायने रखता है: रफ़्तार और निश्चितता

रफ़्तार

AI कच्चे HTML के बजाय संरचित डेटा बनाता है, इसलिए आउटपुट काफ़ी छोटा होता है। पूरे पेज का HTML बनाने में LLM के 15,000 से 25,000 टोकन लगते हैं। उसी साइट के SiteSpec में 4,000 से 6,000 टोकन, यानी 3 से 4 गुना कम। इसका सीधा मतलब है तेज़ जनरेशन (पूरी साइट 90 सेकंड से कम में) और कम लागत।

निश्चितता

कंपाइलर एक शुद्ध फ़ंक्शन है। एक ही SiteSpec पर वह हमेशा वही HTML बनाता है। इसका मतलब:

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

सीमाओं में रचनात्मकता

यहाँ एक उलटी-सी लगने वाली बात है: बंदिशें AI को ज़्यादा रचनात्मक बनाती हैं, कम नहीं। जब LLM को बॉयलरप्लेट HTML और CSS लिखने से मुक्ति मिलती है, तो वह अपना पूरा टोकन बजट उन फ़ैसलों पर लगाता है जो सचमुच मायने रखते हैं: सेक्शन का चयन, कंटेंट की रणनीति, डिज़ाइन ट्रीटमेंट, रंगों का विज्ञान। रचनात्मक आउटपुट इसीलिए बेहतर होता है कि इंजीनियरिंग वाला हिस्सा कोई और संभाल रहा है।

प्लेबुक सिस्टम

कंपाइलर में यह तय नहीं होता कि कोई ब्लॉक कैसे रेंडर हो। इसके बजाय वह एक Playbook लेता है। यह एक मॉड्यूल है जो ब्लॉक लाइब्रेरी (हर सेक्शन टाइप HTML/CSS में कैसे रेंडर होगा), डिज़ाइन रिज़ॉल्यूशन सिस्टम (पैलेट और टाइपोग्राफ़ी कैसे तय होंगे) और बेस स्टाइलशीट तय करता है।

प्लेबुक बदल दीजिए और वही SiteSpec बिल्कुल अलग दृश्य भाषा में रेंडर होगा। इंजन वही रहता है। ब्लॉक बदल जाते हैं। इसी से Forge को बढ़ाना आसान होता है: नए सेक्शन टाइप, नए डिज़ाइन ट्रीटमेंट, नई रेंडरिंग रणनीतियाँ, सब कंपाइलर के मूल को छुए बिना।

आज साइट-जनरेटर प्लेबुक में 26 से ज़्यादा अलग ब्लॉक टाइप हैं: हीरो सेक्शन और सेवाओं की सूची से लेकर स्टैट बैंड, गैलरी, FAQ, टीम ग्रिड, मार्की, बुकिंग CTA और भी बहुत कुछ। AI बिज़नेस के प्रकार और कंटेंट के हिसाब से इस लाइब्रेरी से चुनता है, और कंपाइलर उन्हें बारीक़ी से रेंडर करता है।

Forge कैसे बना

Forge किसी बड़ी योजना से शुरू नहीं हुआ। यह एक प्रोटोटाइप से शुरू हुआ: एक अकेली compile.mjs फ़ाइल जो हाथ से लिखी JSON स्पेसिफ़िकेशन लेकर उसे HTML में बदल देती थी। सवाल सीधा था: अगर ब्लॉक हम ख़ुद तय करें और सामग्री AI भरे, तो क्या नतीजा AI के कच्चे HTML से बेहतर होगा?

हुआ। काफ़ी बेहतर। प्रोटोटाइप ने एक बारबरशॉप साइट बनाई जिसमें कंट्रास्ट एकदम सही था, नेविगेशन काम करता था, फ़ॉन्ट ठीक से लोड होते थे, और डार्क/गोल्ड का एक सधा हुआ अंदाज़ था। यह सब एक JSON स्पेसिफ़िकेशन से, जो बराबर के HTML के मुक़ाबले बहुत छोटी थी।

वहाँ से यह ढाँचा आकार लेता गया:

1. प्रोटोटाइप एक टाइप्ड, फ़्रेमवर्क-मुक्त इंजन बन गया, जिसे कोई भी JavaScript रनटाइम इम्पोर्ट कर सकता है और जो React, Next.js या SiteDrop के अंदरूनी हिस्सों पर निर्भर नहीं है।
2. हार्डकोड किए ब्लॉक रेंडरर एक प्लग करने लायक प्लेबुक सिस्टम बन गए। हर प्लेबुक अपने ब्लॉक, डिज़ाइन टोकन और CSS तय करती है।
3. LLM का इंटीग्रेशन कच्चे HTML आउटपुट से संरचित टूल-यूज़ पर चला गया (SiteSpec स्कीमा ही टूल स्कीमा है: वह मॉडल को सिखाती है कि क्या बनाना है और साथ ही आउटपुट का आकार बाँधती है)।
4. एक ख़ुद-समझाने वाली स्कीमा ने पारंपरिक सिस्टम प्रॉम्प्ट की जगह ले ली। स्कीमा के विवरण AI को सिखाते हैं कि हर फ़ील्ड का मतलब क्या है, इसलिए “व्याकरण” बस कुछ पंक्तियों का है।
5. क्वालिटी गेट (कंट्रास्ट की जाँच, एंकर का मिलान, सतहों की अदला-बदली, संपर्क जानकारी का मानकीकरण) कंपाइलर में ही बना दिए गए, ताकि वे हर जनरेशन पर चलें और बाद की वैकल्पिक प्रोसेसिंग न रहें।

नतीजा एक ऐसा इंजन है जो किसी एक प्रोवाइडर पर निर्भर नहीं है (यह Claude, GPT, Gemini, DeepSeek, xAI, यानी संरचित आउटपुट देने वाले किसी भी मॉडल के साथ चलता है), फ़्रेमवर्क-मुक्त है (अलग पैकेज के रूप में निकाला जा सकता है), और डिटरमिनिस्टिक है (वही स्पेसिफ़िकेशन, वही HTML, हमेशा)।

आपके लिए इसका मतलब

अगर आप SiteDrop इस्तेमाल करते हैं, तो साइट जनरेट करते समय Forge पहले से चल रहा होता है। आपको कुछ अलग नहीं करना है। फ़र्क़ आउटपुट की गुणवत्ता, रफ़्तार और एकरूपता में दिखता है:

• तेज़ जनरेशन: साइट 90 सेकंड से कम में बन जाती है, क्योंकि AI का आउटपुट 3 से 4 गुना छोटा होता है।
• एकसमान गुणवत्ता: हर जनरेशन में सही कंट्रास्ट, काम करता नेविगेशन, ठीक से लोड होते फ़ॉन्ट और सलीक़े से लिखी संपर्क जानकारी।
• बेहतर डिज़ाइन विविधता: AI 26+ ब्लॉक टाइप, 4+ डिज़ाइन आर्कीटाइप और टाइपोग्राफ़ी जोड़ियों के बड़े पैलेट से चुनता है। बारबरशॉप को गहरा, संकरे अक्षरों वाला अंदाज़ मिलता है। डेंटल क्लिनिक को साफ़, संपादकीय अंदाज़। और फ़ाइन-डाइनिंग रेस्तरां को शाही सेरिफ़ ट्रीटमेंट।
• ज़्यादा सुरक्षित एडिटिंग: विज़ुअल एडिटर SiteSpec बदलकर उसे कंपाइलर से दोबारा रेंडर करता है, इसलिए बदलाव अनुमान के मुताबिक़ होते हैं और कोई दुष्प्रभाव नहीं छोड़ते।

Forge आगे कहाँ जा रहा है

कंपाइलर वाला ढाँचा उस सब की नींव है जो हम बना रहे हैं। इंजन स्पेसिफ़िकेशन से चलता है, इसलिए हर नई क्षमता एक नया ब्लॉक टाइप, एक नई प्लेबुक या एक नया डिज़ाइन टोकन है, जनरेशन पाइपलाइन का दोबारा लिखा जाना नहीं। यही बँटवारे की ताक़त है: AI फ़ैसले लेने में बेहतर होता जाता है, कंपाइलर रेंडर करने में, और दोनों एक-दूसरे से अलग सुधरते हैं।

हमारा मानना है कि यही दो चरणों वाला पैटर्न, इरादे के लिए AI और अमल के लिए कंपाइलर, आगे वेब एप्लिकेशन बनाने का तरीक़ा होगा। सिर्फ़ एक पेज की वेबसाइटें नहीं, बल्कि मल्टी-पेज एप्लिकेशन, डैशबोर्ड और इंटरैक्टिव अनुभव भी। AI बताता है कि क्या होना चाहिए। कंपाइलर गारंटी देता है कि वह काम करे।