Design.md फ़ाइल के साथ AI कोडिंग टूल्स के डिज़ाइन डेब्ट (Design Debt) को हल करना
makedream2026年5月8日
0
Computing/Software
Comments (0)
Log in to leave a comment
No posts yet
makedreammakedreamLog in to leave a comment
No posts yet
AI कोडिंग टूल्स के साथ कुछ प्रॉम्प्ट्स देकर एक अच्छा दिखने वाला पेज बनाना आसान है। समस्या उसके बाद आती है। नए बनाए गए बटन की वक्रता (curvature) बगल वाले पेज से अलग होती है, और ब्रांड के रंगों की सैचुरेशन (saturation) में मामूली अंतर होता है। विकास की गति तेज़ है, लेकिन परिणाम अधूरा सा लगता है। ऐसा इसलिए है क्योंकि यदि AI के पास संदर्भ (context) नहीं है, तो वह सबसे सामान्य औसत मान (average values) प्रदान करता है। इस समस्या को हल करने के लिए, आपको प्रोजेक्ट रूट में Design.md फ़ाइल डालनी होगी और AI पर सख्त बाधाएं (constraints) लागू करनी होंगी।
AI से “सुरुचिपूर्ण नीला” (sophisticated blue) रंग उपयोग करने के लिए कहना समय की बर्बादी है। AI विशेषणों पर नहीं, बल्कि सामान्यीकृत डेटा (normalized data) पर चलता है। अपने डिज़ाइन सिस्टम को तीन परतों में विभाजित करें: प्रिमिटिव (Primitive), सिमेंटिक (Semantic), और कंपोनेंट (Component)।
blue-500: #3B82F6 जैसे पूर्ण मान घोषित करें।bg-primary: var(--blue-500) जैसे कार्यात्मक भूमिकाएँ सौंपें।[category]-[property]-[modifier] प्रारूप को लागू करें ताकि वह $color-background-hover जैसे नामों का उपयोग करे।2025 के UI सहयोग केस स्टडी के अनुसार, इस तरह के संरचित टोकन का उपयोग करने वाली टीमों ने UI बग की दर को प्रति स्प्रिंट 14 से घटाकर 4 कर दिया। जब AI रंग कोड के बजाय फ़ंक्शन के आधार पर क्लासेस चुनना शुरू करता है, तो डिज़ाइन संशोधन का 70% समय बच जाता है। यदि आप Tailwind CSS का उपयोग कर रहे हैं, तो AI को इन टोकन को tailwind.config.js के साथ वन-टू-वन मैप करने का निर्देश दें।
AI को जितनी अधिक स्वतंत्रता मिलती है, वह उतने ही मूर्खतापूर्ण चुनाव करता है। प्रत्येक पृष्ठ के लिए अलग-अलग मार्जिन को रोकने के लिए, आपको विनिर्देशों (specifications) में मानों को एक तालिका के रूप में दर्ज करना होगा।
| गुण (Property) | मान (Value) | लागू नियम (Application Rule) |
|---|---|---|
| बटन वक्रता (Button Radius) | 8px | rounded-lg फिक्स्ड, कोई मनमाना बदलाव नहीं |
| सेक्शन स्पेसिंग | 64px | सभी मुख्य सेक्शन के बीच वर्टिकल स्पेसिंग |
| अधिकतम चौड़ाई | 1280px | मुख्य सामग्री की सेंटर अलाइनमेंट सीमा |
दूरी की इकाइयों को 8px के गुणकों (multiples) तक सीमित करें और कार्ड पैडिंग को 24px पर फिक्स करें। विशेष रूप से, एक “एंटी-पैटर्न” सेक्शन बनाना प्रभावी है। “एक स्क्रीन पर 3 से अधिक CTA बटन न रखें” या “शेडो के बजाय 1px बॉर्डर का उपयोग करें” जैसे निषेधों को शामिल करके, AI गलत विकल्पों को पहले ही हटाकर काम शुरू कर देता है। यह सरल तालिका मैन्युअल सुधारों की संख्या को आधे से अधिक कम कर देती है।
यदि हर फीचर की टोन अलग है और आइकन स्टाइल मिश्रित हैं, तो ऐप सस्ता दिखता है। Design.md में अपने ब्रांड व्यक्तित्व (brand persona) को स्पष्ट करें। आपको पहले से तय करना होगा कि सफलता संदेश के लिए “अपडेट पूर्ण” का उपयोग करना है या “तैयार!” का।
आइकन के लिए, इन प्रोटोकॉल का पालन करें:
stroke-width को 1.5px पर फिक्स करें।डार्क मोड के लिए भी यही लागू होता है। केवल रंगों को उलटने से पठनीयता (readability) खराब हो जाती है। जैसा कि Google मटेरियल डिज़ाइन दिशानिर्देश अनुशंसा करते हैं, बैकग्राउंड के लिए शुद्ध काले के बजाय गहरे भूरे (#121212) का उपयोग करने के लिए कहें, और कंट्रास्ट अनुपात को पर बनाए रखने का फॉर्मूला शामिल करें ताकि एक्सेसिबिलिटी बग्स से बचा जा सके।
भले ही आप विनिर्देशों को अच्छी तरह से लिखें, यदि AI उन्हें नहीं पढ़ता है तो उनका कोई मतलब नहीं है। .cursor/rules/ डायरेक्टरी में UI-विशिष्ट नियम बनाएं और AI को किसी भी काम से पहले Design.md को संदर्भित करने के लिए मजबूर करें। 2025 के विकास डेटा के अनुसार, इस रूटीन को अपनाने वाली टीमों ने फीचर विकास के औसत समय को 12.5 घंटे से घटाकर 8.1 घंटे कर दिया।
अब, डेवलपर्स कोड को ठीक नहीं करते हैं, बल्कि केवल दस्तावेज़ में मानों को समायोजित करके पूरी सेवा के स्वरूप को बदलते हैं। गति प्राप्त करने के लिए डिज़ाइन को केवल अंतर्ज्ञान के बजाय सटीक इंजीनियरिंग का क्षेत्र होना चाहिए। शुरुआती 30 मिनट का दस्तावेज़ीकरण बाद के दर्जनों घंटों की मेहनत को बचाता है।