AI کے خراب UI کو دستی طور پر ٹھیک کرنا بند کریں

آپ کے AI کوڈنگ ٹولز اکثر ڈیزائن میں ناکام ہو جاتے ہیں۔

آپ ایک بٹن مانگتے ہیں۔ AI آپ کو نیلے رنگ کا ایک شیڈ دیتا ہے۔ آپ کسی دوسرے کمپوننٹ کے لیے کہتے ہیں۔ AI آپ کو نیلے رنگ کا ایک مختلف شیڈ دے دیتا ہے۔ ایسا اس لیے ہوتا ہے کیونکہ AI کے پاس ایک سخت ڈیزائن سسٹم (design system) کی کمی ہوتی ہے۔

Google Labs نے اس مسئلے کو حل کرنے کے لیے design.md جاری کیا ہے۔

یہ ایک ایسی وضاحت (specification) ہے جو Cursor، Claude Code، اور GitHub Copilot جیسے ٹولز کو آپ کے ڈیزائن کے اصول پڑھنے کی اجازت دیتی ہے۔ یہ غیر مستقل اسپیسنگ (spacing)، غلط فونٹس، اور بدلتے ہوئے رنگوں کو روکتی ہے۔

یہ کیسے کام کرتا ہے:

design.md دو حصوں پر مشتمل ایک Markdown فائل ہے۔

  • YAML Front Matter: اس میں درست ڈیزائن ٹوکنز (design tokens) ہوتے ہیں۔ آپ یہاں رنگ، ٹائپوگرافی، اسپیسنگ، اور کارنر ریڈیائی (corner radii) کی تعریف کرتے ہیں۔
  • Markdown Body: اس میں ڈیزائن کی منطق (rationale) ہوتی ہے۔ یہ وضاحت کرتا ہے کہ آپ کوئی رنگ کیوں استعمال کرتے ہیں اور کب اس سے پرہیز کرنا چاہیے۔

یہ ساخت AI کو ڈیٹا اور منطق دونوں سمجھنے میں مدد دیتی ہے۔ یہ صرف ایک hex code نہیں دیکھتا، بلکہ یہ سمجھتا ہے کہ ایک مخصوص رنگ ہیڈ لائنز کے لیے ہے اور اسے باڈی ٹیکسٹ کے لیے استعمال نہیں کیا جانا چاہیے۔

design.md CLI کی اہم خصوصیات:

  • Linting: یہ چیک کرتا ہے کہ آیا آپ کے ٹوکنز درست ہیں۔ یہ WCAG AA accessibility contrast کو بھی چیک کرتا ہے۔
  • Diffing: جب آپ اپنا ڈیزائن اپ ڈیٹ کرتے ہیں تو یہ آپ کو بالکل صحیح دکھاتا ہے کہ کون سے ٹوکنز تبدیل ہوئے ہیں۔
  • Exporting: یہ آپ کی ڈیزائن فائل کو Tailwind CSS، JSON، یا W3C Design Tokens میں تبدیل کر دیتا ہے۔
  • Spec: یہ ایک ایسی گائیڈ تیار کرتا ہے جو آپ اپنے AI کو دے سکتے ہیں تاکہ اسے سکھایا جا سکے کہ آپ کی فائل کیسے پڑھی جائے۔

یہ کیوں اہم ہے:

زیادہ تر ڈویلپرز عمومی اصولوں کے لیے CLAUDE.md یا AGENTS.md استعمال کرتے ہیں۔ اگرچہ یہ مددگار ہیں، لیکن یہ فائلیں زیادہ تر قدرتی زبان (natural language) میں ہوتی ہیں۔ AI کو پھر بھی مخصوص ویلیوز کا اندازہ لگانا پڑتا ہے۔

design.md آپ کے ڈیزائن سسٹم کو مشین کے قابلِ خواندگی ڈیٹا (machine-readable data) میں بدل دیتا ہے۔

اسے استعمال کرنے کے لیے:

  1. DESIGN.md کو اپنے پروجیکٹ روٹ (project root) میں رکھیں۔
  2. اپنی CLAUDE.md یا Cursor rules میں یہ لائن شامل کریں: "For UI tasks, read DESIGN.md first and strictly follow the tokens and rationale."

اپنے AI کو بار بار "wrong color" کہنا بند کریں۔ اسے سچائی کا ایک واحد ذریعہ (single source of truth) دیں۔

ماخذ: https://dev.to/isray_notarray/designmd-if-your-ai-generated-ui-keeps-drifting-youre-missing-googles-designmd-4abh

اختیاری لرننگ کمیونٹی: https://t.me/GyaanSetuAi