AI द्वारे तयार केलेले खराब UI मॅन्युअली दुरुस्त करणे थांबवा

तुमची AI कोडिंग टूल्स डिझाइनमध्ये अनेकदा अपयशी ठरतात.

तुम्ही एखादे बटण मागाल, तर AI तुम्हाला निळ्या रंगाची एक शेड देईल. तुम्ही दुसऱ्या एखाद्या कंपोनंटसाठी विचाराल, तर AI तुम्हाला निळ्या रंगाची दुसरी शेड देईल. असे घडते कारण AI कडे एक कडक डिझाइन सिस्टम नसते.

हे सोडवण्यासाठी Google Labs ने design.md लाँच केले आहे.

हे एक असे स्पेसिफिकेशन (specification) आहे जे Cursor, Claude Code आणि GitHub Copilot सारख्या टूल्सना तुमचे डिझाइन नियम वाचू देते. यामुळे विसंगत स्पेसिंग, चुकीचे फॉन्ट्स आणि रंगांमधील विसंगती टाळता येते.

ते कसे कार्य करते:

design.md ही दोन भागांची एक Markdown फाईल आहे.

  • YAML Front Matter: यामध्ये अचूक डिझाइन टोकन्स (design tokens) असतात. तुम्ही येथे रंग, टायपोग्राफी, स्पेसिंग आणि कॉर्नर रेडिअस (corner radii) परिभाषित करू शकता.
  • Markdown Body: यामध्ये डिझाइनचे तर्क (design rationale) असतात. तुम्ही एखादा रंग का वापरता आणि तो कधी टाळला पाहिजे, याचे स्पष्टीकरण यात दिले जाते.

ही रचना AI ला डेटा आणि लॉजिक दोन्ही समजून घेण्यास मदत करते. ते फक्त हेक्स कोड (hex code) पाहत नाही, तर त्याला हे समजते की एखादा विशिष्ट रंग हेडलाईन्ससाठी आहे आणि तो बॉडी टेक्स्टसाठी वापरला जाऊ नये.

design.md CLI ची प्रमुख वैशिष्ट्ये:

  • Linting: तुमचे टोकन्स बरोबर आहेत की नाही हे ते तपासते. ते अगदी WCAG AA ॲक्सेसिबिलिटी कॉन्ट्रास्ट देखील तपासते.
  • Diffing: जेव्हा तुम्ही तुमचे डिझाइन अपडेट करता, तेव्हा नेमके कोणते टोकन्स बदलले आहेत हे ते तुम्हाला दाखवते.
  • Exporting: हे तुमची डिझाइन फाईल Tailwind CSS, JSON किंवा W3C Design Tokens मध्ये रूपांतरित करते.
  • Spec: हे एक गाईड तयार करते जे तुम्ही तुमच्या AI ला तुमची फाईल कशी वाचायची हे शिकवण्यासाठी देऊ शकता.

हे महत्त्वाचे का आहे:

बहुतेक डेव्हलपर्स सामान्य नियमांसाठी CLAUDE.md किंवा AGENTS.md वापरतात. जरी हे उपयुक्त असले तरी, या फाईल्स प्रामुख्याने नैसर्गिक भाषेत (natural language) असतात. त्यामुळे AI ला अजूनही विशिष्ट व्हॅल्यूजचा अंदाज लावावा लागतो.

design.md तुमच्या डिझाइन सिस्टमला मशीन-रीडेबल डेटा मध्ये रूपांतरित करते.

वापरण्यासाठी:

  1. DESIGN.md तुमच्या प्रोजेक्टच्या रूट (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