MarkupGen में AI: कोड जनरेशन से लेकर क्वालिटी स्कोरिंग तक

MarkupGen में AI कोई एक अकेला फ़ीचर नहीं है — यह वर्कफ़्लो के तीनों स्टेज में मौजूद रहता है: डिज़ाइन से कोड बनाना, उस आउटपुट की क्वालिटी परखना, और जब रिज़ल्ट पूरी तरह मेल न खाए तो उसे बेहतर करने का सुझाव देना। यह पोस्ट हर लेयर को बारी-बारी से समझाती है, और यह भी कि इन्हें डेवलपर की समझ-बूझ की जगह लेने के बजाय उसे सपोर्ट करने के लिए क्यों बनाया गया है।

डिज़ाइन की स्ट्रक्चर से कोड बनाना

पहले स्टेज में, AI स्क्रीनशॉट से डिज़ाइन को "दोबारा नहीं बनाता" — यह Figma प्लगइन से भेजी गई असली स्ट्रक्चर पढ़ता है: Auto Layout, स्पेसिंग, लेयर हायरार्की, रीसाइज़िंग कॉन्स्ट्रेंट्स। इसके बाद, यह पिक्सेल-दर-पिक्सेल अंदाज़ा लगाने के बजाय सीधे उसी स्ट्रक्चर को फ़ॉलो करते हुए HTML/CSS जनरेट करता है:

• Auto Layout प्रॉपर्टीज़ (डायरेक्शन, गैप, पैडिंग, अलाइनमेंट) एक बराबर CSS Flexbox रूल्स में मैप होती हैं।
• लेआउट के रीसाइज़िंग कॉन्स्ट्रेंट्स एक ही फ़िक्स्ड-चौड़ाई वाले पेज की बजाय रेस्पॉन्सिव ब्रेकपॉइंट्स में बदल जाते हैं।
• आउटपुट गहराई से नेस्टेड, बिना लेबल वाले <div> के बजाय मतलब वाले HTML एलिमेंट्स को प्राथमिकता देता है।

इमेज से अंदाज़ा लगाने के बजाय स्ट्रक्चर से बनाने की वजह से ही रिज़ल्ट ओरिजिनल डिज़ाइन की हायरार्की और स्पेसिंग बनाए रखता है — न कि सिर्फ़ ऊपर से "सही दिखने वाला" कुछ, जबकि अंदर का CSS पूरी तरह अलग हो।

काम के हिसाब से सही AI मॉडल चुनना

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

आउटपुट क्वालिटी की ऑटोमेटेड स्कोरिंग

कोड जनरेट होने के बाद, AI लाइव प्रीव्यू के स्क्रीनशॉट की तुलना ओरिजिनल डिज़ाइन से करता है और यह 1–10 के स्केल पर स्कोर करता है कि दोनों कितने मिलते हैं। यह कोई अमूर्त आँकड़ा भर नहीं है — इसके साथ एक डिटेल्ड इवैल्यूएशन भी आता है कि क्या मैच हो रहा है और क्या नहीं, ताकि आपको फ़ौरन पता चल जाए कि एक्सपोर्ट प्रोडक्शन-रेडी है या अभी काम बाक़ी है। जब स्कोर एक क़रीब-क़रीब परफ़ेक्ट थ्रेशोल्ड पार कर लेता है, तो सिस्टम मान लेता है कि अब AI के सुधारने लायक कुछ बचा नहीं है, और बेवजह की रीजनरेशन सलाह छिपा देता है।

फ़ीडबैक लूप: विश्लेषण और रीजनरेशन

अगर कोई एक्सपोर्ट उम्मीद पर खरा नहीं उतरता, तो MarkupGen सिर्फ़ एक नंबर थमाकर रुक नहीं जाता। इवैल्यूएशन व्यू ओरिजिनल डिज़ाइन और लाइव प्रीव्यू को साथ-साथ दिखाता है, बारीकी से देखने के लिए ज़ूम के साथ, एक ख़ास सुधार का सुझाव जनरेट करता है, और "Regenerate with this change" दबाने से पहले आपको उस सुझाव को एडिट करने देता है — ताकि AI आपकी असली फ़ीडबैक के हिसाब से कोड दोबारा बनाए, न कि किसी बेतरतीब जगह से फिर शुरू करे।

यह क्यों मायने रखता है

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