जेनरेटिव यूआई रेलिंग: आपके डिज़ाइन सिस्टम को तोड़े बिना इरादे के लिए डिज़ाइन करना
जब AI तुरंत इंटरफ़ेस बनाता है तो UX कैसे बदलता है, और घटकों, टोकन और चेक की संरचना कैसे की जाती है ताकि उत्पन्न UI सुलभ और ऑन-ब्रांड बना रहे।
कोर टेकअवे
जेनरेटिव यूआई का मतलब है कि एक एआई मॉडल प्रत्येक अनुरोध के लिए इंटरफ़ेस का हिस्सा इकट्ठा करता है। इसे प्रयोग करने योग्य बनाए रखने के लिए, मॉडल को कच्ची शैलियों को लिखने के बजाय घटकों की अनुमोदित सूची से चुनने दें, इसे अपने डिज़ाइन टोकन पास करें, रेंडर करने से पहले इसके आउटपुट (कंट्रास्ट, टाइप स्केल, फोकस ऑर्डर, कम गति) को मान्य करें, और उत्पन्न क्षेत्र के चारों ओर नेविगेशन और नियंत्रण का एक निश्चित फ्रेम रखें।
निश्चित लेआउट से लेकर इरादे के लिए डिज़ाइनिंग तक
एक निश्चित लेआउट में, डिज़ाइनर प्रत्येक स्क्रीन को पहले से तय करते हैं। जेनरेटिव यूआई के साथ, एक एआई मॉडल तय करता है कि किसी विशिष्ट अनुरोध के लिए कौन सा इंटरफ़ेस दिखाया जाए। Google जेनरेटिव यूआई को न केवल सामग्री बल्कि संपूर्ण अनुभव उत्पन्न करने वाले मॉडल के रूप में वर्णित करता है, और अब यह जेमिनी ऐप और Google खोज में एआई मोड में इसके आधार पर प्रयोगों को शिप करता है। डेवलपर टूल में, वर्सेल एआई एसडीके एक सरल संस्करण का वर्णन करता है: मॉडल एक टूल को कॉल करता है, और उस टूल कॉल का परिणाम React घटक के रूप में प्रस्तुत किया जाता है।
UX के लिए क्या परिवर्तन होता है
डिज़ाइनर प्रत्येक स्क्रीन बनाना बंद कर देते हैं और नियम डिज़ाइन करना शुरू कर देते हैं: कौन से घटक मौजूद हैं, प्रत्येक कब उपयुक्त है, और क्या कभी नहीं बदलना चाहिए। जेनरेट की गई सामग्री, जैसे नेविगेशन, इनपुट, पूर्ववत करें और सेटिंग्स के आसपास का फ्रेम स्थिर रहना चाहिए ताकि लोग कभी भी अपना स्थान न खोएं। उत्पन्न क्षेत्रों को स्पष्ट रूप से चिह्नित किया जाना चाहिए, और लोगों को एक सादे, पूर्वानुमानित दृश्य पर स्विच करने में सक्षम होना चाहिए।
रेलिंग 1: एक अनुमोदित घटक सूची
सबसे सुरक्षित पैटर्न मॉडल को घटकों को चुनने और भरने देना है, न कि उनका आविष्कार करना। A2UI, Google द्वारा बनाया गया एक खुला प्रोटोकॉल, इस तरह से काम करता है: एजेंट घोषणात्मक घटक विवरण भेजते हैं, और क्लाइंट उन्हें एजेंट से मनमाना कोड चलाए बिना, अपने स्वयं के मूल विजेट के साथ प्रस्तुत करता है। आपका कैटलॉग छोटा हो सकता है: टेबल, कार्ड, चार्ट, फॉर्म, सूचियाँ, प्रत्येक आपकी टीम द्वारा निर्मित और परीक्षण किया गया।
रेलिंग 2: कच्चे मूल्यों के बजाय टोकन
मॉडल सिमेंटिक टोकन दें, जैसे कि color.text.primary या space.4, और कच्चे हेक्स मानों या मनमाने फ़ॉन्ट आकारों का उपयोग करने वाले आउटपुट को अस्वीकार करें। इससे सिस्टम के अंदर कंट्रास्ट, टाइपोग्राफी और स्पेसिंग बनी रहती है और डार्क मोड या हाई कंट्रास्ट जैसी थीम अपने आप काम करती रहती हैं।
रेलिंग 3: रेंडर करने से पहले सत्यापित करें
इसे दिखाने से पहले जेनरेट किए गए आउटपुट पर स्वचालित जांच चलाएं: आवश्यक फ़ील्ड मौजूद, रंग कंट्रास्ट, हेडिंग ऑर्डर, इनपुट पर लेबल, फोकस ऑर्डर, स्पर्श लक्ष्य आकार और कम-गति समर्थन। यदि कोई चेक विफल हो जाता है, तो टूटे हुए यूआई को दिखाने के बजाय एक सरल, ज्ञात-अच्छे लेआउट पर वापस आएं।
- स्कीमा सत्यापन: केवल ज्ञात घटक और गुण
- अभिगम्यता: कंट्रास्ट, लेबल, भूमिकाएँ, फोकस क्रम
- सामग्री सीमाएँ: अधिकतम आइटम, पाठ की लंबाई, छवि आकार
- फ़ॉलबैक: सत्यापन विफल होने पर एक सादा सूची या पाठ उत्तर
याद रखने योग्य कुंजी Principle
- जेनरेटिव यूआई = मॉडल प्रत्येक अनुरोध के लिए इंटरफ़ेस असेंबल करता है
- उत्पन्न क्षेत्रों के चारों ओर एक निश्चित फ्रेम (नेविगेशन, इनपुट, पूर्ववत) रखें
- मॉडल को रॉ यूआई लिखने के बजाय किसी स्वीकृत कैटलॉग से चुनने दें
- सिमेंटिक टोकन पास करें और कच्चे मूल्यों को अस्वीकार करें
- रेंडर करने से पहले पहुंच की पुष्टि करें और फ़ॉलबैक रखें
अक्सर पूछे जाने वाले प्रश्नों
स्रोत
- Generative UI: A rich, custom, visual interactive user experience for any prompt — गूगल रिसर्च
- A2UI: A Protocol for Agent-Driven Interfaces — a2ui.org
- Generative User Interfaces — वर्सेल एआई एसडीके डॉक्स
- Design tokens overview — Material Design 3