AI के खराब UI को मैन्युअल रूप से ठीक करना बंद करें

आपके AI कोडिंग टूल्स अक्सर डिज़ाइन के मामले में विफल हो जाते हैं।

आप एक बटन मांगते हैं। AI आपको नीले रंग का एक शेड देता है। आप किसी अन्य कंपोनेंट के लिए पूछते हैं। AI आपको नीले रंग का एक अलग शेड दे देता है। ऐसा इसलिए होता है क्योंकि AI के पास एक सख्त डिज़ाइन सिस्टम की कमी होती है।

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 को अभी भी विशिष्ट मानों (values) का अनुमान लगाना पड़ता है।

design.md आपके डिज़ाइन सिस्टम को मशीन-रीडेबल डेटा (machine-readable data) में बदल देता है।

इसका उपयोग करने के लिए:

  1. DESIGN.md को अपने प्रोजेक्ट रूट (project root) में रखें।
  2. अपने CLAUDE.md या Cursor नियमों में, यह लाइन जोड़ें: "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