آپ نے final_FINAL_v3 ٹیگ والی ایک Figma فائل کھولی ہے، صرف یہ دیکھنے کے لیے کہ اس میں تیسرے بے نام فریمز، ایک لاک شدہ بیک گراؤنڈ لیئر، اور ایک بٹن ہے جو ایک ایسے گروپ کے اندر ہے جس میں ایک بے مقصد سجاوٹی دائرہ بھی موجود ہے۔ یہ اس سے کہیں زیادہ عام ہے جتنا کوئی تسلیم کرنا چاہتا ہے۔ جب آپ اس افراتفری کو Codex جیسے AI کوڈنگ ٹول میں ڈالتے ہیں، تو آؤٹ پٹ ان پٹ کا عکس ہوتا ہے۔ "Garbage in, garbage out" کا اصول اب بھی لاگو ہوتا ہے، چاہے وہ بڑے لینگویج ماڈلز ہی کیوں نہ ہوں۔

ایک بے ترتیب ہینڈ آف (Handoff) کی ساخت

ڈیزائنرز تیزی سے کام کرتے ہیں۔ وہ فریمز کو ڈپلیکیٹ کرتے ہیں، پرانے تجربات کو نظر آنے والا چھوڑ دیتے ہیں، اور منظم auto-layout کے بجائے صرف آنکھ کے اندازے پر بھروسہ کرتے ہیں۔ آپ کے پاس "Frame 3827" جیسے لیئر کے نام فنکشنل بٹنز کے ساتھ پڑے ہوتے ہیں۔ سجاوٹی گریڈینٹ بلاپس (blobs) آپ کے بنیادی کال-ٹو-ایکشن (call-to-action) کے ساتھ ایک ہی گروپ میں ہوتے ہیں۔ ڈیوائس موک اپس (Device mockups) اصل انٹرفیس کو ایسے کروم (chrome) میں لپیٹ دیتے ہیں جو مواد (content) معلوم ہوتا ہے۔ چھپی ہوئی لیئرز فائل میں نظر آتی رہتی ہیں، جو کسی بھی خودکار پارسر (parser) کو الجھانے کے لیے تیار رہتی ہیں۔

Codex استعمال کرنے والے ڈویلپر کے لیے، مسئلہ کسی بھی طرف سے سستی کا نہیں ہے۔ AI میں انسانی پیٹرن کی پہچان (pattern recognition) کی کمی ہوتی ہے۔ یہ لیئر ٹری (layer tree) کو لفظی طور پر پڑھتا ہے۔ جب ایک ڈیزائنر ایک بٹن، ایک ہیڈ لائن، اور ایک بیک گراؤنڈ بلر کو ایک ہی فلیٹ شدہ گروپ کے اندر رکھتا ہے، تو Codex انہیں برابر ساختی وزن کے ساتھ ہم پلہ (siblings) سمجھتا ہے۔ نتیجہ ایک ایسا فرنٹ اینڈ ہوتا ہے جو رنگوں کا جائزہ لینے سے پہلے ہی ساختی طور پر ٹوٹا ہوا نظر آتا ہے۔

ایک ورک فلو جو آپ کو قریب لے آئے گا

اگر آپ محض ایک کنورٹر کے بجائے ایک ایڈیٹر کی طرح کام کریں، تو آپ اب بھی ایک بے ترتیب ذریعے سے صاف ستھرا کوڈ تیار کر سکتے ہیں۔ مقصد Codex کو اتنے سیاق و سباق (context) فراہم کرنا ہے کہ وہ باخبر اندازے لگا سکے، اور پھر ان اندازوں کو محدود کرنا ہے تاکہ وہ معقول فرنٹ اینڈ آرکیٹیکچر کے اندر رہیں۔

AI کے دیکھنے سے پہلے ہی سب کچھ نکال لیں۔ اگر آپ کے پاس رسائی ہے تو Dev Mode آن کریں۔ انسپیکٹ پینل سے خام CSS پراپرٹیز کاپی کریں۔ کلر ویری ایبلز اور ٹیکسٹ اسٹائلز ایکسپورٹ کریں۔ اس منظم ڈیٹا کو اپنے پرامپٹ (prompt) کے ساتھ Codex میں ڈالیں۔ اسکرین شاٹس مکانی حقیقت (spatial truth) دکھاتے ہیں؛ میٹا ڈیٹا آپ کو درست hex codes، فونٹ اسٹیکس، اور لائن ہائٹس فراہم کرتا ہے۔ ایک کے بغیر دوسرا ماڈل کو آدھی مساوات پر اندازہ لگانے پر مجبور کر دیتا ہے۔

اپنے پرامپٹس میں لے آؤٹ سسٹم کے بارے میں سخت رہیں۔ Codex سے کبھی یہ نہ کہیں کہ صرف "اس پیج کا کوڈ لکھو"۔ اسے بالکل بتائیں کہ کیا استعمال کرنا ہے: "نیویگیشن کو CSS Flexbox کے ساتھ اور ڈیش بورڈ گرڈ کو CSS Grid کے ساتھ بنائیں۔ جب تک آپ آئیکن کے حوالے سے نوٹیفکیشن بیج (notification badge) نہیں رکھ رہے، تب تک absolute positioning استعمال نہ کریں۔" AI ٹولز اکثر absolute positioning کو ڈیفالٹ کے طور پر استعمال کرتے ہیں کیونکہ وہ ڈیزائن فائل سے براہ راست فکسڈ x-y کوآرڈینیٹس کو پڑھتے ہیں۔ واضح ہدایات اس رجحان کو ختم کر دیتی ہیں۔

اسکرین شاٹس کو حفاظتی حدود (guardrails) کے طور پر استعمال کریں۔ فریمز کو 2x ریزولوشن پر ایکسپورٹ کریں۔ انہیں اپنے ٹیکسٹ سیاق و سباق کے ساتھ اپ لوڈ کریں۔ جب Codex اپنا پہلا پاس تیار کرے، تو نتیجے کو براؤزر میں اسکرین شاٹ کے ساتھ کھولیں۔ سپیسنگ ڈرفٹ (spacing drift)، غائب بارڈرز، اور فونٹ ویٹ کے فرق کو دیکھیں۔ AI عام طور پر مجموعی ساخت کو درست طریقے سے پکڑ لیتا ہے جبکہ مخصوص پیڈنگ (padding) میں غلطی کر دیتا ہے۔

اصلاح کے لیے منصوبہ بندی کریں۔ رینڈر شدہ آؤٹ پٹ کا اپنے ویژول ریفرنس سے موازنہ کریں اور غلطیوں کو خود درست کریں۔ AI کسی ٹیکسٹ لیبل کو امیج ٹیگ میں بدل سکتا ہے یا کسی کارڈ کو <article> یا <section> کے بجائے ایک عام div میں لپیٹ سکتا ہے۔ یہ ریویو پاس اختیاری نہیں ہے۔ یہ وہ مرحلہ ہے جہاں آپ تیار شدہ کوڈ کو پروڈکشن کوڈ میں تبدیل کرتے ہیں۔

AI کہاں کھو جاتا ہے

محتاط ورک فلو کے باوجود، کچھ بے ترتیب پیٹرنز مستقل طور پر Codex کو الجھا دیتے ہیں۔

سجاوٹی شور (Decorative noise) سب سے بڑا مسئلہ ہے۔ Figma فائلوں میں اکثر بیک گراؤنڈ گلو، اسٹیٹس بار ٹیمپلیٹس، اور تصویری آئیکنز شامل ہوتے ہیں جو فنکشنل انٹرفیس کا حصہ نہیں ہوتے۔ واضح لیبلز کے بغیر، AI انہیں مستقل DOM عناصر کے طور پر کوڈ کرتا ہے۔ آپ کے پاس ان دھندلے دائروں کے لیے مخصوص div ٹیگز ہوں گے جنہیں CSS background یا box-shadow ہونا چاہیے تھا۔

فلیٹ شدہ ہائیرارکی (Flattened hierarchy) کمپوننٹ کی شناخت کو توڑ دیتی ہے۔ ایک صاف فائل میں، ایک کارڈ ایک auto-layout فریم ہوتا ہے جس میں ایک تصویر، ایک عنوان، اور ایک ایکشن ہوتا ہے۔ ایک بے ترتیب فائل میں، وہ تینوں عناصر روٹ لیول پر ہو سکتے ہیں، جو بصری طور پر ترتیب میں ہوں لیکن ساختی طور پر الگ تھلگ ہوں۔ Codex کارڈ کی حد کو مکمل طور پر نظر انداز کر دیتا ہے اور بغیر کسی مشترکہ پیرنٹ کے عناصر کا ایک فلیٹ تسلسل آؤٹ پٹ کرتا ہے۔

شور سے سگنل کو الگ کرنا

یہ ڈرافٹ مخصوص سوالات اٹھاتا ہے جن کا سامنا ہر ڈویلپر کو ڈیزائن اور AI سے تیار کردہ کوڈ کے درمیان پل بناتے وقت کرنا پڑتا ہے۔

کیا آپ Figma میٹا ڈیٹا پر زیادہ بھروسہ کرتے ہیں یا اسکرین شاٹس پر؟

دونوں پر بھروسہ کریں، لیکن مختلف کاموں کے لیے۔ درست اقدار کے لیے Figma metadata کا استعمال کریں: رنگ، فونٹ سائز، اسپیسنگ ٹوکنز، اور ایکسپورٹ شدہ اثاثے۔ ڈھانچے اور بصری درجہ بندی (visual hierarchy) کے معاملے میں اسکرین شاٹس بہتر ہوتے ہیں۔ اگر metadata کہتا ہے کہ ایک لیئر x: 120, y: 300 پر ہے، لیکن اسکرین شاٹ اسے کارڈ کے اندر مرکز (centered) میں دکھاتا ہے، تو لے آؤٹ کے لیے اسکرین شاٹ پر بھروسہ کریں اور اسٹائلنگ کے لیے metadata پر۔ اسکرین شاٹ کو اپنی اصل حقیقت (ground truth) کے طور پر استعمال کریں۔ انسپیکٹ پینل کو درست اقدار فراہم کرنے دیں۔

آپ UI کو ڈیوائس فریمز سے کیسے الگ کرتے ہیں؟

کچھ بھی ایکسپورٹ کرنے سے پہلے، ہر غیر-UI لیئر کو چھپا دیں۔ فون موک اپ یا ڈیسک ٹاپ کروم کو منتخب کریں اور اس کی ویزیبلٹی (visibility) بند کر دیں۔ اگر فائل اتنی الجھی ہوئی ہے کہ یہ بتانا مشکل ہو کہ کیا ٹیمپلیٹ ہے اور کیا مواد، تو متعدد اسکرینوں پر بار بار آنے والے عناصر کو دیکھیں۔ اسٹیٹس بار، ہوم انڈیکیٹر، اور نیویگیشن شیل عام طور پر ایک جیسی جگہوں پر ہوتے ہیں۔ اصل بٹن، فارمز اور مواد متغیر درمیانی حصے میں ہوتے ہیں۔ ہر اس چیز کو چھپا دیں جو ہر اسکرین پر مستقل نظر آتی ہے۔ جو باقی بچ جائے گا، وہی آپ کا اصل انٹرفیس ہے۔

آپ ایک خراب فائل میں کمپوننٹ کی حدود کیسے تلاش کرتے ہیں؟

بصری کلسٹرنگ (visual clustering) تلاش کریں، پھر اسپیسنگ سے اس کی تصدیق کریں۔ اگر چار عناصر مستقل 16px کے فاصلے کے ساتھ ایک ساتھ ہیں اور ایک ہی بیک گراؤنڈ فل شیئر کرتے ہیں، تو غالباً وہ ایک ہی کنٹینر کا حصہ ہیں، چاہے ڈیزائنر نے انہیں گروپ نہ بھی کیا ہو۔ مسلسل اسٹیکنگ (consecutive stacking) کے لیے Figma لیئر لسٹ چیک کریں۔