तुम्ही final_FINAL_v3 टॅग केलेली Figma फाईल उघडता आणि तुम्हाला तीस बिननावाचे फ्रेम्स, एक लॉक केलेला बॅकग्राउंड लेयर आणि एका ग्रुपमध्ये नेस्टेड असलेले बटण दिसते ज्यामध्ये एक रँडम डेकोरेटिव्ह सर्कल देखील आहे. हे मान्य करण्यापेक्षाही अधिक सामान्य आहे. जेव्हा तुम्ही हे गोंधळ Codex सारख्या AI कोडिंग टूलमध्ये फीड करता, तेव्हा आउटपुट इनपुटसारखेच असते. 'Garbage in, garbage out' हे तत्त्व लार्ज लँग्वेज मॉडेल्ससाठी देखील लागू होते.

विस्कळीत हँडऑफचे स्वरूप

डिझाइनर्स वेगाने काम करतात. ते फ्रेम्स डुप्लिकेट करतात, जुने एक्सप्लोरेशन्स दिसू देतात आणि स्ट्रक्चर्ड ऑटो-लेआउटऐवजी केवळ डोळ्यांनी पाहून अलाइनमेंटवर अवलंबून राहतात. यामुळे "Frame 3827" सारखी लेयर नावे फंक्शनल बटणांच्या शेजारी येतात. डेकोरेटिव्ह ग्रेडियंट ब्लॉब्स तुमच्या मुख्य कॉल-टू-ॲक्शन (call-to-action) सोबतच एकाच ग्रुपमध्ये असतात. डिव्हाइस मॉकअप्स खऱ्या इंटरफेसला अशा क्रोममध्ये वेढतात जे कंटेंटसारखे वाटते. हिडन लेयर्स फाईलमध्ये दृश्यमान राहतात, जे कोणत्याही ऑटोमेटेड पार्सरला गोंधळात टाकण्यासाठी तयार असतात.

Codex वापरणाऱ्या डेव्हलपरसाठी, ही समस्या कोणाच्याही आळशीपणामुळे नसते. AI कडे मानवी पॅटर्न रिकग्निशन (pattern recognition) नसते. ते लेयर ट्री (layer tree) अक्षरशः वाचते. जेव्हा एखादा डिझाइनर एक बटण, हेडलाईन आणि बॅकग्राउंड ब्लर एकाच फ्लॅटन्ड ग्रुपमध्ये ठेवतो, तेव्हा Codex त्यांना समान स्ट्रक्चरल वेट असलेले 'सिबलिंग्स' (siblings) मानतो. परिणामी, तुम्ही रंगांची तपासणी करण्यापूर्वीच फ्रंटएंड स्ट्रक्चरलदृष्ट्या तुटलेले दिसते.

तुम्हाला जवळ घेऊन जाणारी कार्यपद्धती

जर तुम्ही केवळ कन्व्हर्टर म्हणून काम करण्याऐवजी एडिटरप्रमाणे काम केले, तर तुम्ही विस्कळीत सोर्समधूनही स्वच्छ कोड पाठवू (ship) शकता. ध्येय असे आहे की Codex ला पुरेसा संदर्भ (context) देणे जेणेकरून तो माहितीपूर्ण अंदाज लावू शकेल आणि नंतर त्या अंदाजांना मर्यादित करणे जेणेकरून ते योग्य फ्रंटएंड आर्किटेक्चरमध्ये राहतील.

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

तुमच्या प्रॉम्प्ट्समध्ये लेआउट सिस्टमबद्दल स्पष्ट राहा. Codex ला फक्त "ही पेज कोड करा" असे कधीही सांगू नका. त्याला नेमके काय वापरायचे आहे ते सांगा: "नेव्हिगेशन CSS Flexbox ने आणि डॅशबोर्ड ग्रिड CSS Grid ने बनवा. जोपर्यंत तुम्ही आयकॉनच्या सापेक्ष नोटिफिकेशन बॅज ठेवत नाही, तोपर्यंत ॲब्सोल्युट पोझिशनिंग (absolute positioning) वापरू नका." AI टूल्स अनेकदा ॲब्सोल्युट पोझिशनिंग वापरतात कारण ते डिझाइन फाईलमधून थेट फिक्स्ड x-y कोऑर्डिनेट्स वाचतात. स्पष्ट सूचना या प्रवृत्तीला रोखतात.

स्क्रीनशॉट्सचा वापर गार्डरेल्स (guardrails) म्हणून करा. फ्रेम्स 2x रिझोल्यूशनवर एक्सपोर्ट करा. तुमच्या टेक्स्ट कॉन्टेक्स्टसोबत ते अपलोड करा. जेव्हा Codex त्याचा पहिला पास जनरेट करतो, तेव्हा निकाल ब्राउझरमध्ये स्क्रीनशॉटच्या शेजारी उघडा. स्पेसिंगमधील फरक (spacing drift), हरवलेले बॉर्डर्स आणि फॉन्ट वेटमधील विसंगती तपासा. AI सहसा व्यापक रचना (broad composition) योग्यरित्या कॅप्चर करते, परंतु विशिष्ट पॅडिंगमध्ये चूक करते.

दुरुस्तीसाठी नियोजन करा. रेंडर केलेल्या आउटपुटची तुमच्या व्हिज्युअल रेफरन्सशी तुलना करा आणि त्रुटी हाताने सुधारा. AI कदाचित टेक्स्ट लेबलला इमेज टॅगमध्ये बदलू शकते किंवा कार्डला <article> किंवा <section> ऐवजी जेनेरिक div मध्ये वेढू शकते. ही रिव्ह्यू प्रक्रिया ऐच्छिक नाही. ही ती पायरी आहे जिथे तुम्ही जनरेट केलेला कोड प्रोडक्शन कोडमध्ये रूपांतरित करता.

AI कुठे चुकते

काळजीपूर्वक कार्यपद्धती असूनही, काही विस्कळीत पॅटर्न सातत्याने Codex ला गोंधळात टाकतात.

डेकोरेटिव्ह नॉईज (Decorative noise) हा सर्वात मोठा अडथळा आहे. Figma फाईल्समध्ये अनेकदा बॅकग्राउंड ग्लो, स्टेटस बार टेम्पलेट्स आणि इलस्ट्रेटिव्ह आयकॉन्स समाविष्ट असतात जे फंक्शनल इंटरफेसचा भाग नसतात. स्पष्ट लेबल्सशिवाय, AI त्यांना कायमस्वरूपी DOM एलिमेंट्स म्हणून कोड करते. यामुळे अशा ब्लर केलेल्या सर्कल्ससाठी समर्पित div टॅग्स तयार होतात ज्यांना CSS background किंवा box-shadow असायला हवे होते.

फ्लॅटन्ड हायरार्की (Flattened hierarchy) कंपोनंट डिटेक्शनमध्ये अडथळा आणते. एका स्वच्छ फाईलमध्ये, कार्ड म्हणजे इमेज, टायटल आणि ॲक्शन असलेले ऑटो-लेआउट फ्रेम असते. विस्कळीत फाईलमध्ये, हे तीन घटक रूट लेव्हलवर असू शकतात, जे व्हिज्युअली अलाइन केलेले असतात पण स्ट्रक्चरलदृष्ट्या अनाथ (orphaned) असतात. Codex कार्डची सीमा पूर्णपणे चुकवते आणि कोणताही सामायिक पेरेंट नसलेले घटकांचा एक सपाट क्रम (flat sequence) आउटपुट करते.

सिग्नल आणि नॉईज वेगळे करणे

डिझाइन आणि AI-जनरेटेड कोडमधील दुवा साधताना प्रत्येक डेव्हलपरला भेडसावणारे काही विशिष्ट प्रश्न हा मसुदा उपस्थित करतो.

तुम्ही Figma मेटाडेटावर जास्त विश्वास ठेवता की स्क्रीनशॉट्सवर?

दोन्हीवर विश्वास ठेवा, पण वेगवेगळ्या कामांसाठी. अचूक मूल्यांसाठी Figma metadata वापरा: रंग (colors), फॉन्ट आकार (font sizes), स्पेसिंग टोकन्स (spacing tokens) आणि एक्सपोर्ट केलेले असेट्स (exported assets). स्ट्रक्चर आणि व्हिज्युअल हायरार्कीसाठी (visual hierarchy) स्क्रीनशॉट्स सरस ठरतात. जर मेटाडेटा सांगत असेल की एखादा लेयर x: 120, y: 300 वर आहे, पण स्क्रीनशॉटमध्ये तो कार्डच्या मध्यभागी दिसत असेल, तर लेआउटसाठी स्क्रीनशॉटवर आणि स्टाईलिंगसाठी मेटाडेटावर विश्वास ठेवा. स्क्रीनशॉटला तुमचा 'ग्राउंड ट्रुथ' (ground truth) मानून घ्या. अचूक मूल्ये भरण्यासाठी 'इन्स्पेक्ट पॅनेल'चा (inspect panel) वापर करा.

तुम्ही UI ला डिव्हाइस फ्रेम्सपासून (device frames) कसे वेगळे करता?

काहीही एक्सपोर्ट करण्यापूर्वी, प्रत्येक non-UI लेयर लपवा (hide करा). फोन मॉकअप (phone mockup) किंवा डेस्कटॉप क्रोम (desktop chrome) निवडा आणि व्हिजिबिलिटी (visibility) बंद करा. जर फाईल इतकी गोंधळलेली असेल की टेम्पलेट आणि कंटेंटमध्ये काय फरक आहे हे समजत नसेल, तर अनेक स्क्रीन्सवर पुन्हा पुन्हा येणाऱ्या घटकांकडे (repeating elements) लक्ष द्या. स्टेटस बार, होम इंडिकेटर आणि नेव्हिगेशन शेल सहसा एकाच जागी असतात. प्रत्यक्ष बटणे, फॉर्म्स आणि कंटेंट हे बदलत्या मध्यभागी (variable middle) असतात. प्रत्येक स्क्रीनवर जे स्थिर (fixed) दिसते ते सर्व लपवून टाका. जे उरेल ते तुमचे खरे इंटरफेस असेल.

एका खराब फाईलमध्ये तुम्ही कंपोनंट बाउंड्रीज (component boundaries) कशा शोधता?

व्हिज्युअल क्लस्टरिंग (visual clustering) शोधा आणि नंतर स्पेसिंगद्वारे त्याची पडताळणी करा. जर चार घटक सुसंगत 16px अंतरासह एकत्र असतील आणि त्यांचा बॅकग्राउंड फिल (background fill) एकच असेल, तर डिझायनरने त्यांना कधीही ग्रुप केले नसले तरी ते बहुधा एकाच कंटेनरचा भाग असतील. सलग स्टॅकिंगसाठी (consecutive stacking) Figma लेयर लिस्ट तपासा.