जनरेटिव यूआई डिज़ाइन: 2026 के लिए व्यावहारिक पुस्तिका

2026 में आप जो स्क्रीन लॉन्च करेंगे, हो सकता है कि उपयोगकर्ता द्वारा अनुरोध किए जाने तक वह अस्तित्व में ही न हो। यही जनरेटिव यूआई का मूल सिद्धांत है, और यह डिज़ाइन की वास्तविक परिभाषा को बदल देता है।

यह लेख जनरेटिव यूआई के लिए एक व्यावहारिक मार्गदर्शिका है। यह इस शब्द को परिभाषित करता है, उत्पादन में उपयोग हो रहे चार आर्किटेक्चरों के नाम बताता है, पैटर्न शब्दावली प्रदान करता है, विफलता के विभिन्न रूपों का नाम से वर्णन करता है, और उन डिज़ाइनरों के लिए नई कार्यसूची प्रस्तुत करता है जो प्रासंगिक बने रहना चाहते हैं। यह जानबूझकर अपने विचारों पर आधारित है।

प्रचार के दौर में विक्रेताओं के कई पृष्ठ तैयार हो चुके हैं। डिज़ाइनरों को अब ऐसे सिद्धांतों की आवश्यकता है जो अगले मॉडल रिलीज़ के बाद भी कायम रहें।

जनरेटिव यूआई वास्तव में क्या है

जनरेटिव यूआई एक ऐसा इंटरफ़ेस है जो उपयोगकर्ता के इरादे के अनुसार रनटाइम पर स्वयं को संयोजित करता है। सिस्टम में मूलभूत तत्वों की एक शब्दावली, उन्हें संयोजित करने का तरीका जानने वाला एक मॉडल और अनुमत संयोजनों को बताने वाला एक अनुबंध होता है। उपयोगकर्ता टाइप करता है, बोलता है या क्लिक करता है। इंटरफ़ेस बनता है।

जनरेटिव यूआई का ठीक उल्टा वह डिज़ाइन है जिसे हम दो दशकों से करते आ रहे हैं, जहाँ हर स्क्रीन एक स्थिर संरचना होती है जिसे पहले से ही तैयार करके एक निश्चित प्रवाह के रूप में भेजा जाता है। जनरेटिव यूआई स्थिर स्क्रीन की जगह नहीं लेता। यह उपयोगकर्ताओं के अंतिम चरण को समाहित करता है। अधिकांश उत्पादों का वह नीरस मध्य भाग, जहाँ उपयोगकर्ता एक विशिष्ट उत्तर और उसके आसपास थोड़ी-बहुत इंटरैक्टिविटी चाहते हैं, साइटमैप में एक मार्ग के बजाय एक जनरेटेड सतह बन जाता है।

एक उपयोगी परीक्षण: यदि दो उपयोगकर्ताओं द्वारा पूछे गए एक ही प्रश्न के लिए दो अलग-अलग लेआउट उपयुक्त हो सकते हैं, तो वह सतह जनरेटिव यूआई के लिए उपयुक्त है। यदि उत्तर हमेशा तिथि के अनुसार क्रमबद्ध ऑर्डर की सूची हो, तो यह उपयुक्त नहीं है।

यह 2026 में क्यों हो रहा है, 2022 में क्यों नहीं

तीन चीजें एक साथ होनी थीं। मॉडल्स को संरचित आउटपुट देने में इतना कुशल होना था कि वे टूल्स को कॉल कर सकें और पैराग्राफ के बजाय मान्य कंपोनेंट ट्री उत्सर्जित कर सकें। फ्रेमवर्क्स को उन ट्री को चल रहे ऐप में स्ट्रीम करने का एक तरीका उपलब्ध कराना था। कंपोनेंट लाइब्रेरीज़ को ऐसी शब्दावली में विकसित होना था जिसे मॉडल वास्तव में समझ सकें।

2026 की शुरुआत तक ये तीनों ही हकीकत बन जाएंगे। v0 आपके कोडबेस में ऐसे कंपोनेंट जोड़ता है जो पहले से ही shadcn और आपके टोकन से मेल खाते हैं। Vercel AI SDK आपको सर्वर रूट से React कंपोनेंट को मॉडल द्वारा तैयार किए जाने पर स्ट्रीम करने की सुविधा देता है। Claude Artifacts चैट सेशन के अंदर एक स्व-निहित इंटरैक्टिव प्रोग्राम प्रस्तुत करता है।

ChatGPT Canvas दस्तावेज़ और उसके आसपास के UI को एक संपादन योग्य सतह के रूप में मानता है। Bolt और Same.new एक प्रॉम्प्ट से चलने वाले एप्लिकेशन तैयार करते हैं। Anthropic और Cursor के कंपोज़र के टूल एजेंटों को संरचित सिस्टम तक पहुँचने और उनके विरुद्ध इंटरफ़ेस उत्सर्जित करने की सुविधा देते हैं।

इनमें से कोई भी एक ही उत्पाद नहीं है। ये इस बात का प्रमाण हैं कि अंततः आधारभूत संरचना मौजूद है, और डिज़ाइन संबंधी चर्चा जनरेटिव UI के काम करने या न करने से आगे बढ़कर इसे बेहतर तरीके से कैसे बनाया जाए, इस पर केंद्रित हो सकती है।

उत्पादन में उपयोग किए जा रहे चार आर्किटेक्चर

उत्पादन में उपयोग किए जा रहे अधिकांश जनरेटिव यूआई चार में से किसी एक प्रकार के होते हैं। सोच-समझकर चुनाव करें, क्योंकि यह चुनाव आपके डिज़ाइन सिस्टम, आपके मूल्यांकन और आपके लेटेंसी बजट को सीमित करता है।

1. एलएलएम-रेंडर्ड कंपोनेंट्स। मॉडल आपके कोडबेस में मौजूद कंपोनेंट्स की एक निश्चित शब्दावली से चयन करता है और एक टाइप्ड ट्री उत्पन्न करता है। Vercel एआई एसडीके पैटर्न। पूर्वानुमान योग्य, ब्रांड के अनुरूप, मूल्यांकन में आसान, और आपकी लाइब्रेरी की क्षमता पर निर्भर करता है।

2. संरचित टूल कॉल। मॉडल एक टूल को कॉल करता है जो संरचित डेटा लौटाता है, और एक स्थिर लेआउट उसे रेंडर करता है। अधिकांश चैट उत्पाद सुविधाएँ इसी तरह काम करती हैं, जिसमें एक निश्चित इंटरफ़ेस और गतिशील सामग्री होती है। सस्ता, सुरक्षित, और सीमित लचीलापन।

3. मांग पर कोड जनरेशन। यह मॉडल Claude आर्टिफैक्ट्स, v0, बोल्ट, Same.new और ChatGPT कैनवास जैसे पैटर्न में कोड मोड में इंटरफ़ेस बनाने वाला कोड लिखता है। अधिकतम रेंज, अधिकतम जोखिम, ब्रांड के अनुरूप और सुलभ बनाए रखना सबसे कठिन।

4. हाइब्रिड। यह सबसे दिलचस्प श्रेणी है और यहीं पर अधिकांश गंभीर उत्पाद समाप्त होते हैं। स्थिर UI का एक विश्वसनीय ढांचा, गतिशील मध्य भाग के लिए LLM-रेंडर्ड घटकों की शब्दावली, और दुर्लभ कस्टम मामलों के लिए कोड-जनरेशन का विकल्प।

यदि आप नहीं जानते कि आप किस आर्किटेक्चर का उपयोग कर रहे हैं, तो आप गलत आर्किटेक्चर का उपयोग कर रहे हैं।

इनमें से कैसे चुनें

तीन प्रश्न आर्किटेक्चर का निर्धारण करते हैं।

| प्रश्न | LLM-रेंडर्ड | टूल कॉल | कोड-जनरेशन | हाइब्रिड |

|---|---|---|---|---| | क्या ब्रांड की निरंतरता महत्वपूर्ण है? | मज़बूत | सबसे मज़बूत | कमज़ोर | मज़बूत |

क्या सतह को नए लेआउट की ज़रूरत है? | कुछ हद तक | लगभग कभी नहीं | हाँ | हाँ |

क्या आप जनरेशन में कुछ सेकंड की देरी बर्दाश्त कर सकते हैं? | नहीं | नहीं | अक्सर हाँ | मिश्रित |

गलती होने पर सबसे पहले क्या टूटता है? | कंपोज़िशन त्रुटियाँ | गलत सामग्री | टूटा हुआ कोड | सीमा त्रुटियाँ |

अधिकांश टीमों के लिए LLM-रेंडर्ड कंपोनेंट्स सही डिफ़ॉल्ट विकल्प हैं। कोड-जेनरेशन तब उपयोगी होता है जब सतह वास्तव में एक बार में तैयार की जाती है, जैसे कि कस्टम विश्लेषण या जल्दबाजी में बनाया गया प्रोटोटाइप, और जहाँ उपयोगकर्ता समझता है कि वह एक ड्राफ्ट देख रहा है। टूल कॉल उन मामलों को संभालते हैं जहाँ लेआउट तय हो चुका होता है और केवल डेटा गतिशील होता है। बारह महीने के प्रोडक्शन ट्रैफ़िक के बाद आप हाइब्रिड पर पहुँचते हैं।

पैटर्न भाषा: डिज़ाइनर वास्तव में क्या डिज़ाइन करते हैं

जेनरेटिव UI डिज़ाइन कार्य को समाप्त नहीं करता है। यह उसे आगे बढ़ाता है। आप जो आर्टिफैक्ट भेजते हैं वह एक शब्दावली है, स्क्रीन नहीं।

एक कार्यशील शब्दावली में पाँच परतें होती हैं।

1. प्रिमिटिव्स मॉडल द्वारा उपयोग किए जा सकने वाले एटॉमिक कंपोनेंट्स। कार्ड, टेबल, चार्ट, फॉर्म, लिस्ट, इमेज, कॉलआउट, कोड ब्लॉक। इनमें से प्रत्येक को टाइप किए गए प्रॉप्स की आवश्यकता होती है जिन्हें मॉडल संतुष्ट कर सके।

2. इंटेंट स्लॉट्स उपयोगकर्ता के इरादे के आधार पर मॉडल द्वारा भरे जाने वाले नामित क्षेत्र। "सारांश," "सबूत," "कार्रवाई," "फॉलो-अप।" स्लॉट्स संरचना को सीमित करते हैं लेकिन उसे स्थिर नहीं करते।

3. फॉलबैक स्टेट्स प्रत्येक प्रिमिटिव को एक सहज खाली, लोडिंग, आंशिक और अस्वीकृत स्थिति की आवश्यकता होती है। मॉडल लगातार इन चारों को उत्पन्न करेगा। इन्हें प्रथम श्रेणी के आर्टिफैक्ट के रूप में डिज़ाइन करें।

4. रिकवरेबिलिटी अफोर्डेंस एडिट-इन-प्लेस, रीजेनरेट, "मुझे एक अलग संस्करण दिखाएं," अनडू। जनरेटिव इंटरफेस बातचीत की तरह होते हैं, और बातचीत में बैक बटन की आवश्यकता होती है।

5. साइटेशन और सोर्स यूआई डेटा कहां से आया, इसे कब प्राप्त किया गया, और सिस्टम कितना आश्वस्त है। इसके बिना, जनरेटिव यूआई एक आत्मविश्वासी झूठे की तरह दिखता है। इसके साथ, वही आउटपुट ईमानदार लगता है।

यदि कोई डिज़ाइनर अपने उत्पाद में शब्दावली की प्रत्येक परत का अर्थ स्पष्ट नहीं कर पाता है, तो शब्दावली अभी अस्तित्व में ही नहीं है, और मॉडल केवल अनुमान लगा रहा है।

व्यवहार में इंटेंट स्लॉट

इंटेंट स्लॉट वह हिस्सा है जिसे अधिकांश टीमें छोड़ देती हैं और बाद में पछताती हैं। इन्हें नए वायरफ्रेम की तरह समझें।

एक स्लॉट एक नामित, टाइप किया हुआ क्षेत्र होता है जिसमें यह निर्धारित होता है कि वहां क्या आ सकता है। "प्राथमिक उत्तर" में कॉलआउट, टेबल या चार्ट स्वीकार किए जा सकते हैं, लेकिन फॉर्म कभी नहीं। "सुझाया गया अगला चरण" में एक बटन या एक CTA वाला कार्ड स्वीकार किया जा सकता है, लंबा पैराग्राफ कभी नहीं।

मॉडल को उसके सिस्टम प्रॉम्प्ट में स्लॉट के बारे में जानकारी दी जाती है, ठीक उसी तरह जैसे आप किसी जूनियर डिज़ाइनर को देते हैं। फ्रंटएंड स्लॉट को एक स्थिर लेआउट ग्रिड में रेंडर करता है ताकि सतह एक ही उत्पाद की तरह लगे, भले ही उसकी सामग्री हर बार बदलती रहे।

परिणामस्वरूप, यह एक डिज़ाइन किया हुआ इंटरफ़ेस दिखता है जो बदलता रहता है, न कि एक जनरेटेड अव्यवस्थित इंटरफ़ेस जो बस रेंडर हो जाता है। यही अंतर पूरी लड़ाई है।

विफलता के वे तरीके जिनका आपको सामना करना पड़ेगा और उनसे बचाव के लिए डिज़ाइन कैसे करें

जेनरेटिव यूआई कुछ खास, बार-बार दोहराए जाने वाले तरीकों से विफल होता है। इन्हें अभी पहचानें या उत्पादन के दौरान इन्हें फिर से खोजें।

• भ्रमित यूआई। मॉडल एक ऐसा बटन बनाता है जो कुछ नहीं करता, एक ऐसा टैब जिसमें कोई सामग्री नहीं होती, या संख्याओं का एक ऐसा चार्ट बनाता है जो उसने खुद बनाया है। इससे निपटने के लिए सख्त कंपोनेंट कॉन्ट्रैक्ट, हर एमिटेड ट्री का सर्वर-साइड वैलिडेशन और उन सभी कंट्रोल्स पर डिसेबल्ड स्टेट्स लागू करें जिनका हैंडलर कनेक्टेड नहीं है।

• विलंबता का डर। मॉडल के सोचने के दौरान उपयोगकर्ता स्पिनर को देखता रहता है। आंशिक परिणाम स्ट्रीम करें, सामग्री से पहले लेआउट स्पेस आरक्षित करें और डेटा आने से पहले मॉडल का इरादा (तुलना तालिका बनाना) दिखाएं।

• अनंत कैनवास का जाल। कोड-जेन सतहें असीमित लगती हैं और अंततः अनुपयोगी हो जाती हैं। कैनवास को सीमित करें। उपयोगकर्ता को पहले से ही दिखाएं कि किस प्रकार के आउटपुट संभव हैं। शुरुआती संकेतों की ग्रिड खाली टेक्स्ट एरिया से हर बार बेहतर होती है।

• एकल-मॉडल लॉक-इन। किसी एक प्रदाता की विशिष्टताओं के अनुरूप बनाई गई शब्दावली मॉडल बदलते ही विफल हो जाती है। ऐसे घटक अनुबंध लिखें जिन्हें कोई भी उपयुक्त मॉडल पूरा कर सके, और उत्पाद जारी करने से पहले कम से कम दो प्रदाताओं के विरुद्ध मूल्यांकन करें।

• संवाद विस्मृति। इंटरफ़ेस भूल जाता है कि उसने अभी क्या उत्पन्न किया है। उत्पन्न कलाकृतियों को प्रथम-श्रेणी की वस्तुओं के रूप में सहेजें जिन्हें उपयोगकर्ता नाम दे सकते हैं, सहेज सकते हैं, साझा कर सकते हैं और वापस देख सकते हैं। ChatGPT Canvas ने इसे सही ढंग से किया है। अधिकांश चैट-आधारित उत्पाद इसमें चूक जाते हैं।

स्थायी जनरेटिव UI को सफलतापूर्वक जारी करने वाली टीमें वे हैं जो इन्हें पहले दिन से ही आर्किटेक्चर संबंधी समस्याओं के रूप में देखती हैं, न कि QA में ठीक करने के लिए बग के रूप में।

जनरेटिव UI सतह का मूल्यांकन कैसे करें

आप जनरेटिव UI सुविधा की समीक्षा उस तरह से नहीं कर सकते जिस तरह से आप एक स्थिर पृष्ठ की समीक्षा करते हैं। आउटपुट एक एकल कलाकृति नहीं है, यह एक वितरण है।

एक कार्यशील मूल्यांकन में तीन स्तर होते हैं। पहला चरण एक निश्चित मानदंड है जो प्रत्येक उत्सर्जित ट्री पर कोड के रूप में चलता है: क्या मॉडल ने केवल अनुमत घटकों का उपयोग किया, क्या इसने आशय संबंधी आवश्यकताओं को पूरा किया, क्या इसमें स्कीमा की आवश्यकता के अनुसार उद्धरण शामिल किया गया, क्या कोई नियंत्रण बिना वायर्ड हैंडलर के लागू हुआ?

ये जाँचें उत्तीर्ण या असफल होती हैं। ये प्रॉम्प्ट, घटकों या मॉडल में प्रत्येक परिवर्तन पर चलती हैं। यदि ये विफल होती हैं, तो सतह रेंडर होने से इनकार कर देती है और एक सुरक्षित स्थिति में वापस आ जाती है। इन्हें उसी तरह से संभालें जैसे बैकएंड टीम एकीकरण परीक्षणों को संभालती है, परिनियोजन पर समान अवरोधक शक्ति के साथ।

दूसरा चरण नमूनाकृत मानव समीक्षा है। एक छोटा पैनल, जिसमें आदर्श रूप से एक ब्रांड डिज़ाइनर और एक डोमेन विशेषज्ञ शामिल होते हैं, प्रति सप्ताह दस से बीस उत्पन्न आउटपुट को टोन, ब्रांड अनुकूलता और उपयोगिता पर पाँच-बिंदु मानदंड के आधार पर स्कोर करता है।

समय के साथ स्कोर पर नज़र रखें। जिस दिन यह गिरता है, आपको एक प्रतिगमन (रिग्रेशन) मिलता है। जिस दिन यह बढ़ता है, आपके द्वारा किए गए किसी परिवर्तन ने काम किया है, और आपको यह जानने की आवश्यकता है कि क्या।

तीसरा चरण उत्पाद-आधारित प्रतिक्रिया है। प्रत्येक जनरेट किए गए इंटरफ़ेस के साथ एक थम्स-अप, एक थम्स-डाउन और एक फ्री-टेक्स्ट कमेंट आता है। इस सिग्नल को शब्दावली के मालिक टीम को भेजें, न कि किसी सामान्य फीडबैक इनबॉक्स में जहाँ यह बेकार हो जाए। जनरेटिव UI उत्पाद तभी बेहतर होते हैं जब उनके मालिक पहले तीन महीनों तक हर कमेंट को पढ़ते हैं।

जनरेटिव UI प्रोजेक्ट का दायरा कैसे तय करें

अधिकांश जनरेटिव UI प्रोजेक्ट कार्यान्वयन चरण में नहीं, बल्कि दायरा तय करने के चरण में ही विफल हो जाते हैं। टीमें एक ऐसा इंटरफ़ेस चुन लेती हैं जो बहुत महत्वपूर्ण, बहुत विनियमित या बहुत जटिल होता है, और फिर छह सप्ताह बाद उसे वापस लेने की कहानी इस बात पर आधारित होती है कि AI तैयार नहीं है।

सही पहला इंटरफ़ेस तीन विशेषताओं वाला होता है: उपयोगकर्ता को स्पष्ट रूप से अनुकूलित उत्तर से लाभ होता है, जनरेशन विफल होने पर स्थिर बैकअप स्वीकार्य होता है, और गलत उत्तर विनाशकारी होने के बजाय सुधार योग्य होता है।

आंतरिक डैशबोर्ड इन तीनों को पूरा करते हैं। सहायता केंद्र के उत्तर इन तीनों को पूरा करते हैं। वैयक्तिकृत एनालिटिक्स सारांश इन तीनों को पूरा करते हैं। खाता निर्माण, भुगतान प्राधिकरण और चिकित्सा सलाह इनमें से किसी को भी पूरा नहीं करते हैं।

इस कार्य को फ़ीचर रिलीज़ के बजाय शब्दावली रिलीज़ के रूप में परिभाषित करें। डिलिवरेबल यह नहीं है कि "जनरेटेड डैशबोर्ड Q3 में शिप होगा", बल्कि यह है कि "v1 शब्दावली, v1 इवैल सूट और v1 जनरेटेड सरफेस तीनों Q3 में एक साथ शिप होंगे, और इसके बाद किसी भी उत्पाद में v2 जनरेटेड सरफेस उसी शब्दावली का उपयोग करेगा।" शब्दावली को प्लेटफ़ॉर्म निवेश के रूप में मानें। यही एकमात्र दृष्टिकोण है जो इस कार्य के लिए आवश्यक डिज़ाइन सिस्टम प्रयास को उचित ठहराता है।

डिज़ाइनर का नया काम: शब्दावलियाँ, मूल्यांकन और उद्देश्य

रिस्पॉन्सिव डिज़ाइन के बाद से जनरेटिव UI ने डिज़ाइनर के कार्य विवरण को सबसे अधिक बदल दिया है।

कार्य की इकाई स्क्रीन से सिस्टम में स्थानांतरित हो जाती है। डिज़ाइनर प्रत्येक स्थिति को बनाना बंद कर देते हैं और मॉडल में शामिल प्रिमिटिव, स्लॉट और फ़ॉलबैक को क्यूरेट करना शुरू कर देते हैं। Figma फ़ाइल शब्दावली के लिए एक संदर्भ बन जाती है, न कि कार्य का गंतव्य।

स्पेसिफिकेशन मूल्यांकन बन जाते हैं। जनरेटिव सरफेस का एक्सेप्टेंस टेस्ट किसी एक मॉकअप के आधार पर नहीं किया जा सकता, क्योंकि एक ही प्रॉम्प्ट से कई मान्य आउटपुट प्राप्त होते हैं।

डिजाइनर इसके बजाय मानदंड बनाते हैं: "परिणाम में संदर्भ शामिल होना चाहिए, ब्रांड चार्ट पैलेट का उपयोग होना चाहिए, अनुवर्ती कार्रवाई प्रदर्शित होनी चाहिए, और किसी भी प्रतिस्पर्धी उत्पाद की अनुशंसा नहीं करनी चाहिए।" ये मानदंड प्रत्येक मॉडल रिलीज़ पर स्वचालित मूल्यांकन के रूप में चलते हैं। डिज़ाइन की गुणवत्ता मापने योग्य हो जाती है।

दस्तावेज़ीकरण अब केवल प्रॉम्प्टिंग बन जाता है। सिस्टम प्रॉम्प्ट जो यह बताता है कि मॉडल को आपकी शब्दावली कैसे बनानी चाहिए, अब एक डिज़ाइन आर्टिफैक्ट है। इसका वर्ज़निंग और समीक्षा की जाती है, और कई उत्पादों में यह टीम द्वारा लिखे गए "डिज़ाइन कॉपी" का सबसे महत्वपूर्ण हिस्सा होता है।

शिपिंग उत्पादों में अच्छा क्या दिखता है

सिद्धांतों को स्पष्ट करने के लिए कुछ उदाहरण, समर्थन के रूप में नहीं।

Vercel AI SDK जनरेटिव UI प्रिमिटिव घटकों को एक टाइप की गई शब्दावली के रूप में मानता है जिसे मॉडल सर्वर-रेंडर्ड रूट में स्ट्रीम करता है। इसका लाभ ब्रांड की निरंतरता और पूर्वानुमानशीलता है। लागत आपके द्वारा लिखी गई लाइब्रेरी द्वारा सीमित है।

Claude आर्टिफैक्ट्स चैट सत्र के भीतर ऑन-डिमांड कोड जनरेशन को प्रदर्शित करता है, जिसमें निरंतरता और संपादन की सुविधा है। यह रिकवरेबिलिटी और आर्टिफैक्ट-एज़-ऑब्जेक्ट पैटर्न पर मज़बूती से काम करता है। यह स्पष्ट है कि यह एक ड्राफ्ट सतह है, कोई परिष्कृत उत्पाद नहीं।

ChatGPT कैनवास एक हाइब्रिड है। वार्तालाप उद्देश्य प्रदान करता है, कैनवास एक स्थिर, संपादन योग्य आर्टिफैक्ट प्रदान करता है, और मॉडल इसमें टेक्स्ट या कोड जनरेट कर सकता है। इससे यह सीख मिलती है कि जनरेट की गई सामग्री को एक स्थायी कैनवास पर पिन करने से मॉडल के साथ काम करने की संज्ञानात्मक लागत में काफी कमी आती है।

v0 और बोल्ट प्रोडक्शन हैंडऑफ़ के लिए अनुकूलित कोड जनरेशन हैं। वे साबित करते हैं कि विफलता के तरीके तब प्रबंधनीय होते हैं जब आउटपुट किसी ऐसे डेवलपर को दिया जाता है जो इसकी समीक्षा कर सकता है, और तब अव्यवहार्य होते हैं जब आउटपुट सीधे अंतिम उपयोगकर्ता को दिखाया जाता है।

Same.new दिखाता है कि क्या होता है जब आप पूरे ऐप को जनरेट किए गए आर्टिफैक्ट के रूप में मानते हैं। प्रोटोटाइपिंग के लिए उपयोगी, लेकिन लोड-बेयरिंग किसी भी चीज़ के लिए खतरनाक। Anthropic के टूल्स और कर्सर के कंपोज़र अगले चरण की ओर इशारा करते हैं, जहाँ एजेंट जनरेटेड यूआई को संरचित बैकएंड में एकीकृत करते हैं।

इन सभी में एक ही पैटर्न है। कोर सरफेस जितना अधिक जनरेटिव होगा, आसपास की सुविधाओं की भूमिका उतनी ही अधिक होगी, और मॉडल के आसपास का डिज़ाइन सिस्टम ब्रांड, एक्सेसिबिलिटी और भरोसे का भार उतना ही अधिक वहन करेगा। जनरेटिव यूआई केवल मॉडल नहीं होता। यह मॉडल के साथ-साथ टीम द्वारा इसके लिए बनाए गए रेल्स भी होते हैं।

इस तिमाही में शुरुआत कैसे करें

ठोस कदम, क्रमानुसार, जिन्हें कोई भी उत्पाद टीम अभी लागू कर सकती है।

1. एक सरफेस चुनें। एक ऐसी सुविधा चुनें जहाँ उपयोगकर्ताओं को आज एक स्थिर पृष्ठ मिलता है, जिसे संभवतः गतिशील होना चाहिए। रिपोर्ट, डैशबोर्ड, अनुशंसाएँ, सारांश इसके लिए उपयुक्त विकल्प हैं। चेकआउट, प्रमाणीकरण और किसी भी विनियमित प्रक्रिया को छोड़ दें।

2. शब्दावली का विवरण तैयार करें। अपने डिज़ाइन सिस्टम में मौजूद हर उस मूलभूत घटक की सूची बनाएं जिसमें टाइप किए गए प्रॉप्स हों और जिसकी खाली/लोडिंग/त्रुटि स्थिति का परीक्षण किया गया हो। यदि सूची में दस से कम आइटम हैं, तो कुछ भी जनरेट करने से पहले इसे ठीक कर लें।

3. तीन इंटेंट स्लॉट परिभाषित करें। सबसे सरल और व्यवहार्य लेआउट "उत्तर, प्रमाण, अगला चरण" है। जब तक कोई कारण न हो, तब तक इसका उपयोग करें।

4. एक सिस्टम प्रॉम्प्ट लिखें जो शब्दावली का नाम बताए। केवल संकेत नहीं। घटक नाम, प्रॉप प्रकार, स्लॉट नियम और मॉडल द्वारा क्या उत्पन्न नहीं किया जा सकता, इस पर स्पष्ट प्रतिबंध।

5. फीचर बनाने से पहले मूल्यांकन करें। प्रत्येक के लिए एक रूब्रिक के साथ पांच से दस परीक्षण प्रॉम्प्ट बनाएं। प्रॉम्प्ट, घटकों या मॉडल में हर बदलाव पर उन्हें चलाएं।

6. दस प्रतिशत ट्रैफ़िक के लिए एक फ्लैग के साथ शिप करें, और प्रत्येक जनरेट किए गए सरफेस पर फीडबैक सुविधा प्रदान करें। पहले महीने हर सुबह फीडबैक पढ़ें।

7. अपना दूसरा मॉडल तय करें। एक बैकअप प्रदाता चुनें और प्राथमिक मॉडल पर निर्भर होने से पहले उस पर समान मूल्यांकन करें। जिस दिन कोई मॉडल रिलीज़ आपकी शब्दावली को बिगाड़ दे, आपको केवल एक पंक्ति का कॉन्फ़िगरेशन बदलना होगा, न कि पूरी संरचना को फिर से बनाना।

यह सैद्धांतिक नहीं है। तीन लोगों की एक टीम इस प्रक्रिया को छह सप्ताह में पूरा कर सकती है और जनरेटिव यूआई के बारे में उतना सीख सकती है जितना एक साल पढ़ने से भी नहीं सीख सकती।

अगले तीन वर्षों के लिए इसका क्या अर्थ है

जो डिज़ाइनर इसे एक टूल चक्र के रूप में देखते हैं, वे गलत होंगे। जो डिज़ाइनर इसे एक श्रेणी परिवर्तन के रूप में देखते हैं, वे अभी भी शुरुआती चरण में हैं।

स्थिर स्क्रीन खत्म नहीं हो रही है। वेब ऐप लॉगिन फ़ॉर्म, सेटिंग्स पेज, चेकआउट प्रक्रिया, ये सब उसी कारण से बने रहते हैं जिस कारण से राजमार्ग पक्के रहते हैं। जो बदलता है वह हर उत्पाद के मध्य में मौजूद वह हिस्सा है, वह सतह जहाँ उपयोगकर्ता एक विशिष्ट उत्तर को अच्छी तरह से प्रस्तुत देखना चाहता है। वह हिस्सा जनरेट होता है, और वह हिस्सा सतह क्षेत्र का अधिकांश भाग होता है।

जो डिज़ाइन सिस्टम टिके रहेंगे, वे दो पाठकों, मनुष्यों और मॉडलों के लिए लिखे गए होंगे। स्पष्ट नामों वाले टोकन, टाइप किए गए प्रॉप्स वाले कंपोनेंट, प्रॉम्प्ट के रूप में काम करने वाले डॉक्यूमेंटेशन, और यूनिट टेस्ट की तरह लॉजिक की जाँच करने वाले इवैल्यूएशन। जो टीमें पहले से ही इस तरीके से काम कर रही हैं, वे हर तिमाही में और आगे बढ़ रही हैं। जो टीमें अभी भी किसी मॉडल द्वारा कंपोज़ किए जा सकने वाले सरफेस के लिए पिक्सेल-परफेक्ट Figma फ़ाइलें भेज रही हैं, उन्हें जल्द ही अप्रासंगिकता के अंतिम चरण का अनुभव होने वाला है।

गहरा दांव सरल है। इंटरफ़ेस अब डिज़ाइन का गंतव्य नहीं रह गए हैं, बल्कि डिज़ाइन का आउटपुट बन गए हैं। डिज़ाइनर का कौशल एक स्तर ऊपर चला गया है, उन सिस्टम, रूब्रिक और शब्दावलियों में जो इंटरफ़ेस बनाते हैं। काम कठिन हो जाता है, प्रभाव व्यापक हो जाता है, और जो डिज़ाइनर इसे अभी सीख लेंगे, वे 2029 तक इस क्षेत्र पर राज करेंगे।

यही असाइनमेंट है। इस सप्ताह एक सरफेस चुनें, एक शब्दावली भेजें, इवैल्यूएशन लिखें और शुरू करें।

hero: key: hero prompt: "Voxel illustration, isometric, soft pastel palette aligned with Brainy ink/paper aesthetic. Composition: a building made of components assembling itself in mid-air, with floating UI fragments (cards, charts, forms) snapping into a layout grid below. Editorial, calm, precise. The composition does not include any human figures." alt: "Voxel building made of UI components assembling itself mid-air" width: 1600 height: 900 inline-1: key: gen-ui-architectures prompt: "Voxel illustration showing four distinct architectures as four floating panels arranged in a 2x2 grid: LLM-rendered components, structured tool calls, code-gen-on-demand, and a hybrid panel showing parts of all three. Soft pastel palette. The composition does not include any human figures." alt: "Four floating voxel panels showing the four generative UI architectures" width: 1400 height: 900 inline-2: key: pattern-vocabulary prompt: "Voxel grid of UI primitives like card, table, chart, form, list, arranged neatly with subtle arrows showing how an LLM picks among them. Soft pastel palette, editorial. The composition does not include any human figures." alt: "Voxel grid of UI primitives with arrows showing model selection" width: 1400 height: 900 inline-3: key: failure-modes prompt: "Voxel illustration of broken or glitching UI: hallucinated buttons floating with no labels, a loading spinner stretched into infinity, an infinite scroll collapsing into a tangle. Soft pastel palette with a hint of chaos. The composition does not include any human figures." alt: "Voxel scene of broken generative UI with hallucinated and stuck states" width: 1400 height: 900 inline-4: key: how-to-start prompt: "Voxel illustration of a designer's desk: a small library of labeled components on a shelf, an eval rubric printed on a tablet, and a model card pinned to a board. Soft pastel palette, calm and methodical. The composition does not include any human figures." alt: "Voxel desk with component library, eval rubric, and model card" width: 1400 height: 900