आपने final_FINAL_v3 टैग वाली एक Figma फ़ाइल खोली है, लेकिन आपको केवल तीस बिना नाम वाले फ्रेम्स, एक लॉक किया हुआ बैकग्राउंड लेयर, और एक ग्रुप के अंदर छिपा हुआ बटन मिलता है जिसमें एक रैंडम सजावटी सर्कल भी है। यह जितना कोई स्वीकार करना चाहता है, उससे कहीं अधिक सामान्य है। जब आप उस अराजकता को Codex जैसे AI कोडिंग टूल में डालते हैं, तो आउटपुट भी वैसा ही होता है। "जैसा इनपुट, वैसा आउटपुट" (Garbage in, garbage out) का सिद्धांत बड़े लैंग्वेज मॉडल्स के साथ भी लागू होता है।

एक अव्यवस्थित हैंडऑफ (Handoff) की संरचना

डिज़ाइनर तेज़ी से काम करते हैं। वे फ्रेम्स को डुप्लिकेट करते हैं, पुराने एक्सप्लोरेशन को खुला छोड़ देते हैं, और स्ट्रक्चर्ड ऑटो-लेआउट के बजाय केवल आँखों से देखकर एलाइनमेंट पर भरोसा करते हैं। अंत में आपके पास "Frame 3827" जैसे लेयर नाम होते हैं जो फंक्शनल बटनों के बगल में पड़े होते हैं। सजावटी ग्रेडिएंट ब्लॉब्स (gradient blobs) आपके प्राइमरी कॉल-टू-एक्शन के साथ एक ही ग्रुप में होते हैं। डिवाइस मॉकअप वास्तविक इंटरफ़ेस को ऐसे क्रोम (chrome) में लपेट देते हैं जो कंटेंट जैसा दिखता है। छिपे हुए लेयर्स फ़ाइल में दिखाई देते रहते हैं, जो किसी भी ऑटोमेटेड पार्सर को भ्रमित करने के लिए तैयार रहते हैं।

Codex का उपयोग करने वाले डेवलपर के लिए, समस्या किसी भी पक्ष की आलस नहीं है। AI में मानवीय पैटर्न पहचानने की क्षमता की कमी होती है। यह लेयर ट्री को शाब्दिक रूप से पढ़ता है। जब एक डिज़ाइनर एक बटन, एक हेडलाइन और एक बैकग्राउंड ब्लर को एक ही फ्लैटन किए गए ग्रुप के अंदर रखता है, तो Codex उन्हें समान संरचनात्मक महत्व वाले 'सिबलिंग्स' (siblings) के रूप में मानता है। परिणाम एक ऐसा फ्रंटएंड होता है जो रंगों की समीक्षा करने से पहले ही संरचनात्मक रूप से टूटा हुआ लगता है।

एक वर्कफ़्लो जो आपको लक्ष्य के करीब ले जाए

यदि आप एक साधारण कन्वर्टर के बजाय एक एडिटर की तरह काम करते हैं, तो आप अभी भी एक अव्यवस्थित स्रोत से साफ कोड तैयार कर सकते हैं। लक्ष्य Codex को पर्याप्त संदर्भ (context) देना है ताकि वह सही अनुमान लगा सके, और फिर उन अनुमानों को सीमित करना है ताकि वे समझदारी भरे फ्रंटएंड आर्किटेक्चर के भीतर रहें।

AI के देखने से पहले ही सब कुछ निकाल लें। यदि आपके पास एक्सेस है, तो Dev Mode चालू करें। इंस्पेक्ट पैनल से रॉ CSS प्रॉपर्टीज़ कॉपी करें। कलर वेरिएबल्स और टेक्स्ट स्टाइल्स को एक्सपोर्ट करें। इस स्ट्रक्चर्ड डेटा को अपने प्रॉम्प्ट के साथ Codex में डालें। स्क्रीनशॉट स्थानिक सत्य (spatial truth) दिखाते हैं; मेटाडेटा आपको सटीक हेक्स कोड, फ़ॉन्ट स्टैक और लाइन हाइट देता है। एक के बिना दूसरा मॉडल को आधे समीकरण पर अनुमान लगाने के लिए छोड़ देता है।

अपने प्रॉम्प्ट्स में लेआउट सिस्टम को लेकर सख्त रहें। Codex से कभी भी केवल "इस पेज को कोड करें" ऐसा न कहें। उसे सटीक रूप से बताएं कि क्या उपयोग करना है: "नेविगेशन को CSS Flexbox के साथ और डैशबोर्ड ग्रिड को CSS Grid के साथ बनाएं। जब तक आप आइकन के सापेक्ष नोटिफिकेशन बैज नहीं रख रहे हैं, तब तक एब्सोल्यूट पोजिशनिंग (absolute positioning) का उपयोग न करें।" AI टूल्स अक्सर एब्सोल्यूट पोजिशनिंग का उपयोग करते हैं क्योंकि वे डिज़ाइन फ़ाइल से सीधे फिक्स्ड x-y कोऑर्डिनेट्स को पढ़ते हैं। स्पष्ट निर्देश उस प्रवृत्ति को बदल देते हैं।

स्क्रीनशॉट का उपयोग गाइडलाइन्स (guardrails) के रूप में करें। फ्रेम्स को 2x रेजोल्यूशन पर एक्सपोर्ट करें। उन्हें अपने टेक्स्ट संदर्भ के साथ अपलोड करें। जब Codex अपना पहला पास जनरेट करे, तो परिणाम को ब्राउज़र में स्क्रीनशॉट के बगल में खोलें। स्पेसिंग में अंतर, गायब बॉर्डर और फ़ॉन्ट वेट के बेमेल होने की जाँच करें। AI आमतौर पर व्यापक संरचना को सही ढंग से कैप्चर कर लेता है, लेकिन विशिष्ट पैडिंग में गलती कर देता है।

सुधार की योजना बनाएं। रेंडर किए गए आउटपुट की तुलना अपने विजुअल रेफरेंस से करें और त्रुटियों को मैन्युअल रूप से ठीक करें। AI किसी टेक्स्ट लेबल को इमेज टैग में बदल सकता है या किसी कार्ड को <article> या <section> के बजाय एक जेनेरिक div में लपेट सकता है। यह रिव्यू पास वैकल्पिक नहीं है। यह वह चरण है जहाँ आप जनरेट किए गए कोड को प्रोडक्शन कोड में बदलते हैं।

जहाँ AI भटक जाता है

सावधानीपूर्वक वर्कफ़्लो के बावजूद, कुछ अव्यवस्थित पैटर्न लगातार Codex को भ्रमित करते हैं।

डेकोरेटिव नॉइज़ (Decorative noise) सबसे बड़ी समस्या है। Figma फ़ाइलों में अक्सर बैकग्राउंड ग्लो, स्टेटस बार टेम्पलेट्स और इलस्ट्रेटिव आइकन शामिल होते हैं जो कार्यात्मक इंटरफ़ेस का हिस्सा नहीं होते हैं। स्पष्ट लेबल के बिना, AI उन्हें स्थायी DOM तत्वों के रूप में कोड करता है। अंत में आपके पास उन ब्लर्ड सर्कल्स के लिए समर्पित div टैग होते हैं जिन्हें CSS background या box-shadow होना चाहिए था।

फ्लैटन की गई पदानुक्रम (Flattened hierarchy) कंपोनेंट डिटेक्शन को बाधित करती है। एक साफ फ़ाइल में, एक कार्ड एक ऑटो-लेआउट फ्रेम होता है जिसमें एक इमेज, एक टाइटल और एक एक्शन होता है। एक अव्यवस्थित फ़ाइल में, वे तीन तत्व रूट लेवल पर हो सकते हैं, जो दिखने में तो एलाइन हों लेकिन संरचनात्मक रूप से अलग-थलग हों। Codex कार्ड की सीमा को पूरी तरह से मिस कर देता है और बिना किसी साझा पैरेंट के तत्वों का एक फ्लैट सीक्वेंस आउटपुट करता है।

सिग्नल को नॉइज़ से अलग करना

यह ड्राफ्ट उन विशिष्ट प्रश्नों को उठाता है जिनका सामना हर डेवलपर को डिज़ाइन और AI-जनरेटेड कोड के बीच सेतु बनाते समय करना पड़ता है।

क्या आप Figma मेटाडेटा पर अधिक भरोसा करते हैं या स्क्रीनशॉट पर?

दोनों पर भरोसा करें, लेकिन अलग-अलग कार्यों के लिए। सटीक मानों (values) के लिए Figma metadata का उपयोग करें: रंग, फ़ॉन्ट आकार, स्पेसिंग टोकन और एक्सपोर्ट की गई संपत्तियां (assets)। संरचना और विज़ुअल पदानुक्रम (visual hierarchy) के मामले में स्क्रीनशॉट बेहतर होते हैं। यदि metadata कहता है कि एक लेयर x: 120, y: 300 पर स्थित है, लेकिन स्क्रीनशॉट उसे एक कार्ड के अंदर केंद्रित (centered) दिखाता है, तो लेआउट के लिए स्क्रीनशॉट पर भरोसा करें और स्टाइलिंग के लिए metadata पर। स्क्रीनशॉट को अपना आधार (ground truth) मानें। सटीक मानों को भरने के लिए inspect panel का उपयोग करें।

आप UI को डिवाइस फ्रेम से कैसे अलग करते हैं?

कुछ भी एक्सपोर्ट करने से पहले, हर non-UI लेयर को छिपा दें। फोन मॉकअप या डेस्कटॉप क्रोम (desktop chrome) को चुनें और विज़िबिलिटी (visibility) को बंद कर दें। यदि फ़ाइल इतनी अव्यवस्थित है कि यह बताना मुश्किल हो कि क्या टेम्पलेट है और क्या कंटेंट, तो कई स्क्रीन पर दोहराए जाने वाले तत्वों (elements) को देखें। स्टेटस बार, होम इंडिकेटर और नेविगेशन शेल आमतौर पर एक ही स्थान पर होते हैं। वास्तविक बटन, फॉर्म और कंटेंट बीच के बदलते हिस्से में होते हैं। हर स्क्रीन पर जो चीज़ स्थिर (fixed) दिखाई देती है, उसे छिपा दें। जो बचता है, वही आपका असली इंटरफ़ेस है।

आप एक खराब फ़ाइल में कंपोनेंट की सीमाएं (boundaries) कैसे ढूंढते हैं?

विज़ुअल क्लस्टरिंग (visual clustering) देखें, फिर स्पेसिंग से उसकी पुष्टि करें। यदि चार तत्व एक समान 16px के अंतराल के साथ एक साथ हैं और उनका बैकग्राउंड फिल (background fill) एक जैसा है, तो वे संभवतः एक ही कंटेनर का हिस्सा हैं, भले ही डिज़ाइनर ने उन्हें कभी ग्रुप न किया हो। लगातार स्टैकिंग (consecutive stacking) की जांच के लिए Figma लेयर लिस्ट देखें।