एजेंट्स के देखते हुए डिज़ाइन करना
AI एजेंट अब आपके प्रोडक्ट के फ़र्स्ट-क्लास यूज़र हैं। 2026 की डिज़ाइन शर्त: हर सतह पर एक ह्यूमन प्लेन और एक मशीन प्लेन चाहिए, वरना अगला एजेंट इंटीग्रेशन हाथ से जाएगा।
यूज़र अब स्क्रीन के पीछे अकेला नहीं है। जब इंसान हेडलाइन पढ़ रहा होता है, तब एक AI एजेंट DOM पार्स कर रहा होता है, बटनों के नाम पढ़ रहा होता है, सेलेक्टर्स को परख रहा होता है, और तय कर रहा होता है कि आपका प्रोडक्ट ऐसा है या नहीं जिसे वह किसी और की तरफ़ से चला सके। एक यूज़र के लिए डिज़ाइन करना 2024 की ऐयाशी थी।
यह बदलाव ढाँचागत है, ऊपरी नहीं। Cursor आपके बटनों को कॉल करता है। Claude आपके स्क्रीनशॉट पढ़ता है। Anthropic Computer Use आपके फ़ॉर्म में क्लिक करता चलता है। OpenAI Operator आपके चेकआउट पर ख़रीदारी करता है। जिस भी सतह को इंसान छूता है, उसे अब एजेंट भी छूता है, और अच्छे की उसकी कसौटी अलग है।
दो दर्शक, एक स्क्रीन
2026 में हर प्रोडक्ट सतह में एक ह्यूमन प्लेन और एक मशीन प्लेन होता है, दोनों एक ही DOM में एक के ऊपर एक रखे हुए।
ह्यूमन प्लेन वही है जो डिज़ाइनर हमेशा से शिप करते आए हैं। फ़्लो, टेस्ट, हायरार्की, और वह भरोसा जो यूज़र को तब महसूस होता है जब बटन वही करे जो लेबल वादा करता है। मशीन प्लेन वही सतह है, बस एक दूसरे यूज़र के पढ़ने के लिए। स्थिर सेलेक्टर्स, नाम वाले एफ़ोर्डेंस, सिमेंटिक HTML, मशीन-पठनीय स्टेटस, और ऐसा ढाँचा जिसे एजेंट बिना किसी उलझन के पार्स कर सके।
ज़्यादातर टीमें यह मान बैठती हैं कि दोनों प्लेन एक ही प्लेन हैं, बस प्राथमिकताएँ अलग हैं। ऐसा नहीं है। एक बटन इंसान को परफ़ेक्ट दिख सकता है और एजेंट के लिए अदृश्य हो सकता है, अगर उसका एक्सेसिबल नाम "click here" है या उसका DOM नोड क्लिक हैंडलर वाला div है।
पाँच लेयर जहाँ एजेंट का देखना दिखता है
एजेंट-वॉचिंग एक स्टैक है। पाँच लेयर, और हर एक वह जगह जहाँ ह्यूमन प्लेन और मशीन प्लेन या तो मेल खाते हैं या टकराते हैं: टूल सरफ़ेस, सेलेक्टर स्थिरता, मशीन-पठनीय संरचना, स्टेटस की पठनीयता, ट्रस्ट सिग्नल। ड्यूल यूज़र के लिए डिज़ाइन करने वाला हर प्रोडक्ट इन पाँचों पर फ़ैसले ले रहा होता है, भले वह इन्हें इन नामों से न बुलाए।
लेयर 1: टूल सरफ़ेस वे नामित बटन हैं जिन्हें एजेंट कॉल करते हैं
टूल सरफ़ेस प्रोडक्ट की वह हर क्षमता है जिसे एजेंट नाम लेकर चला सकता है। Cursor के टूल कॉल, Claude का टूल यूज़, Anthropic Computer Use के स्क्रीन एक्शन, Vercel Sandbox के रन कमांड। एजेंट पिक्सल में नहीं सोचता, वह नामित क्रियाओं में सोचता है।
आपके प्रोडक्ट का हर प्राइमरी एक्शन संभावित टूल सरफ़ेस है। Stripe इसका गोल्ड स्टैंडर्ड है, एजेंट के दौर से दशकों पहले का: हर एक्शन का एक नामित, दस्तावेज़ीकृत, अनुमान-योग्य एफ़ोर्डेंस है। customers.create वही करता है जो उसका नाम कहता है। जिस प्रोडक्ट के प्राइमरी एक्शन बिना लेबल के बटनों में दबे हैं, उसे एजेंट बिना अंदाज़ा लगाए चला ही नहीं सकता।
डिज़ाइन की चाल यह है कि हर अहम एक्शन को नामित टूल मानें। लेबल, ARIA डिस्क्रिप्शन, रूट, API एंडपॉइंट और Model Context Protocol हैंडलर, सबमें एक ही क्रिया होनी चाहिए। फिर एजेंट और इंसान अलग-अलग दरवाज़ों से एक ही एफ़ोर्डेंस तक पहुँचते हैं।
लेयर 2: सेलेक्टर स्थिरता एजेंट के साथ डिज़ाइनर का अनुबंध है
2024 में डिज़ाइनर <div onClick={handle}> शिप करके काम ख़त्म मान सकता था। 2026 में वही div उस दिन हर एजेंट इंटीग्रेशन तोड़ देता है जिस दिन कोई रैपर रिफ़ैक्टर करता है।
सेलेक्टर स्थिरता का मतलब है यह पक्का करना कि जो एफ़ोर्डेंस एजेंट ने कल सीखे, वे कल भी चलें। तीन फ़ैसले। जहाँ सिमेंटिक HTML है वहाँ उसे इस्तेमाल करें, <div> नहीं <button>। जिसे भी एजेंट या टेस्ट रनर को ढूँढना हो उस पर data-testid जोड़ें। एक्सेसिबल नाम रिलीज़ दर रिलीज़ स्थिर रखें, वैसे ही जैसे API फ़ील्ड के नाम स्थिर रखते हैं।
Linear इसमें असामान्य रूप से अच्छा है क्योंकि Linear को API-first बनाया गया था और UI उसकी कई सतहों में से एक है। हर प्राइमरी एक्शन का स्थिर सेलेक्टर और स्थिर नाम है। ज़्यादातर एंटरप्राइज़ SaaS रिफ़ैक्टर में एक क्लास का नाम बदल देते हैं और चुपचाप हर वह इंटीग्रेशन तोड़ देते हैं जो उसे छूता था। एजेंट को डिप्रिकेशन नोटिस नहीं मिलता। वह बस चलना बंद कर देता है।
लेयर 3: मशीन-पठनीय संरचना वह डिज़ाइन आर्टिफ़ैक्ट है जिसे आप छोड़ दिया करते थे
आपके प्रोडक्ट को पढ़ने वाला एजेंट आपके Open Graph टैग, JSON-LD, sitemap, और अब तेज़ी से आपकी llms.txt और AGENTS.md फ़ाइलें भी पढ़ रहा है। 2026 में इनमें से हर एक डिज़ाइन आर्टिफ़ैक्ट है, डेवलपर का बोझिल काम नहीं।
AGENTS.md नया README है, फ़र्क़ बस इतना कि पाठक एक मॉडल है। वह एजेंट को बताता है कि आपका प्रोडक्ट क्या करता है, कौन सी सतहें सुरक्षित हैं, और कौन से नियम मायने रखते हैं। JSON-LD एजेंट को बताता है कि हर पेज क्या है। Model Context Protocol एंडपॉइंट एजेंट को बताता है कि आपका प्रोडक्ट कौन से टूल देता है और उन्हें कैसे कॉल करना है।
जो डिज़ाइनर इसे इंजीनियरिंग का इलाक़ा समझते हैं, वे लीवरेज चूक रहे हैं। एजेंट सबसे पहले क्या देखता है उसकी हायरार्की, आपके टूल्स को दिए गए नाम, हर सतह के लिए लिखे गए विवरण, यह सब आपके प्रोडक्ट का एजेंट का मेंटल मॉडल वैसे ही गढ़ता है जैसे हेडिंग और माइक्रोकॉपी इंसान का गढ़ती हैं।
लेयर 4: स्टेटस की पठनीयता का मतलब है कि मशीन बता सके अभी क्या हुआ
लोडिंग स्पिनर इंसान के लिए ठीक है और स्क्रीन पर आँखें न रखने वाले एजेंट के लिए अदृश्य। जो सक्सेस स्टेट सिर्फ़ हरी चमक से बताई जाए, वह हर उस इंसान के लिए अपठनीय है जो हरा नहीं देख सकता। जो मोडल चुपचाप बंद हो जाए, एजेंट के हिसाब से वह ऐसा स्टेट बदलाव है जो हुआ ही नहीं।
स्टेटस पठनीयता का मतलब है हर स्टेट को ऐसा बनाना जिसे मशीन पकड़ सके। Linear की API हर एक्शन के लिए स्थिर रिस्पॉन्स ऑब्जेक्ट लौटाती है। Vercel की डिप्लॉय स्टेट मशीन में नामित स्टेट हैं, READY, BUILDING, ERROR, और हर ट्रांज़िशन पर संरचित पेलोड। Claude Code हर टूल कॉल और नतीजे को संरचित टेक्स्ट के रूप में स्ट्रीम करता है जिसे एजेंट पार्स कर सकता है।
डिज़ाइन की चाल है एक स्टेटस लेयर, जिसे एजेंट विज़ुअल लेयर के साथ-साथ पढ़े। नया स्टेट बताने वाला ARIA लाइव रीजन। संरचित role="status" वाला टोस्ट। टूल कॉल करने पर एजेंट को वापस मिलने वाला रिस्पॉन्स ऑब्जेक्ट। इंसान के पास स्पिनर रहता है, एजेंट को संरचित इवेंट मिलता है। यही रवैया AI लेटेंसी के लिए डिज़ाइन का भी है, जिसे दोनों प्लेन में एक साथ पढ़ा जाना होता है।
लेयर 5: एजेंट के कुछ करने के बाद ट्रस्ट सिग्नल लूप बंद करते हैं
जब एजेंट किसी यूज़र की तरफ़ से कुछ करता है, तो यूज़र को तुरंत दिखना चाहिए कि उसने क्या किया। ज़्यादातर प्रोडक्ट यह लेयर छोड़ देते हैं, और यही तय करती है कि कोई इंटीग्रेशन पर इतना भरोसा करेगा कि उसे दोबारा इस्तेमाल करे या नहीं।
Cursor का diff अप्रूवल इसका पाठ्यपुस्तकीय उदाहरण है। एजेंट फ़ाइलें एडिट करता है, diff इनलाइन दिखता है, यूज़र हर चंक पर स्वीकार या अस्वीकार करता है। Claude artifacts यही पैटर्न दूसरे रूप में देते हैं। GitHub Copilot Workspace दोहरे पैनल वाली प्लान-और-एक्ज़ीक्यूट सतह है जिसमें हर क़दम पर स्वीकार-अस्वीकार है।
ट्रस्ट सिग्नल सजावट नहीं है। वह भार उठाने वाली सतह है जो एजेंट की स्वायत्तता को झेलने लायक बनाती है। जिस प्रोडक्ट में एजेंट काम करता है और इंसान को सिर्फ़ बाद की हालत दिखती है, वह पहली बार कुछ गड़बड़ होते ही भरोसा खो देता है।
जो प्रोडक्ट इसे अच्छे से कर रहे हैं वे असल में क्या शिप करते हैं
ड्यूल-यूज़र फ़्रेम शिप हो चुके प्रोडक्ट में ज़्यादा आसानी से दिखता है। छोटे टियरडाउन, हर एक ठोस।
Cursor। एजेंट का diff अप्रूवल पूरा ट्रस्ट लूप है। हर चंक पर इनलाइन स्वीकार और अस्वीकार, पूरी फ़ाइल का diff दिखता हुआ, और एजेंट सहमति के बिना कभी कमिट नहीं करता।
Claude artifacts। आर्टिफ़ैक्ट प्रीव्यू पैनल एजेंट और इंसान के बीच का अनुबंध है। एजेंट बनाता है, इंसान समीक्षा करता है, आर्टिफ़ैक्ट का स्थिर URL है और एक संरचित आउटपुट है जिसे अगला एजेंट उठा सकता है।
Anthropic Computer Use। स्क्रीनशॉट एजेंट और प्रोडक्ट के बीच का अनुबंध हैं। हर विज़ुअल हायरार्की और लेबल का फ़ैसला अब एजेंट-पठनीयता का फ़ैसला है। बिना एक्सेसिबल नाम वाला आइकन बटन ऐसा बटन है जिसका एजेंट को अंदाज़ा लगाना पड़ता है।
Vercel v0। इंसान के प्रॉम्प्ट और एजेंट के रेंडर का अनुबंध ही पूरी सतह है। यूज़र वर्णन करता है, एजेंट रेंडर करता है, हर रेंडर समीक्षा-योग्य आर्टिफ़ैक्ट है।
Linear और Stripe। दोनों रवैये में AI-native हैं, आर्किटेक्चर में API-first। हर प्राइमरी एक्शन नामित, स्थिर और कॉल-योग्य है। दोनों ने एजेंट के दौर से पहले ही यह अनुशासन शिप कर दिया था, इसीलिए हर एजेंट प्रोडक्ट इनसे साफ़-सुथरे ढंग से जुड़ता है।
Replit Agent, Raycast और GitHub Copilot Workspace सूची पूरी करते हैं। Replit एजेंट के काम को लाइव एडिट-योग्य वर्कस्पेस के रूप में दिखाता है। Raycast का कमांड पैलेट ऐसी सतह है जिसे इंसान और एजेंट स्वाभाविक रूप से साझा करते हैं। Copilot Workspace का दोहरे पैनल वाला प्लान-और-एक्ज़ीक्यूट पैटर्न कार्रवाई से पहले प्लान को लिखित में पक्का कर देता है, जिससे बीच रन में सुधार संभव होता है।
इन प्रोडक्ट्स की साझा पूरी पैटर्न लाइब्रेरी के लिए AI एजेंट UI डिज़ाइन पैटर्न का ब्रेकडाउन उसे मैप करता है, और AI-native प्रोडक्ट डिज़ाइन वाला लेख नीचे की आर्किटेक्चर समझाता है।
वे एंटी-पैटर्न जो एजेंट इंटीग्रेशन तोड़ते हैं
पाँच विफलता तरीक़े बार-बार दिखते हैं। हर एक डिज़ाइन का फ़ैसला है, इंजीनियरिंग की चूक नहीं।
Div सूप। हर क्लिक होने वाली चीज़ <div> में लिपटी हुई क्योंकि स्टाइल करना आसान है। हर रिफ़ैक्टर हर सेलेक्टर तोड़ देता है। इलाज: डिफ़ॉल्ट रूप से सिमेंटिक HTML, और जिसे क्लास-नाम बदलने के बाद भी टिकना हो उस पर data-testid।
होवर माँगने वाले छिपे एफ़ोर्डेंस। वह "edit" बटन जो सिर्फ़ माउस ऊपर ले जाने पर दिखता है। एजेंट होवर नहीं करते। इलाज: कीबोर्ड से पहुँचने योग्य एफ़ोर्डेंस जो पॉइंटर की हालत से परे DOM में मौजूद रहें।
"Click here" लिंक। एक ही पेज पर पाँच "click here" लिंक, DOM पढ़ने वाली किसी भी चीज़ के लिए पाँच एक जैसे एफ़ोर्डेंस हैं। इलाज: ऐसा लिंक टेक्स्ट जो मंज़िल का नाम बताए।
सिर्फ़ रंग से बताई गई सक्सेस स्टेट। हरा बॉर्डर, हरी चमक, हरा आइकन। इनमें से कुछ भी विज़न मॉडल के बिना पकड़ में नहीं आता। इलाज: विज़ुअल संकेत के साथ संरचित इवेंट, ARIA लाइव रीजन या रिस्पॉन्स ऑब्जेक्ट।
ऐसे मोडल पॉपअप जिनका बंद करना ढूँढा न जा सके। वह "X" जो बिना लेबल का <svg> है। इलाज: हर मोडल पर एक्सेसिबल नाम वाला क्लोज़ बटन और दस्तावेज़ीकृत escape व्यवहार।
पाँचों में साझा पैटर्न: जो भी इंसानी आँख या पॉइंटर पर निर्भर है, वह आपके आधे यूज़र्स के लिए अदृश्य है।
ड्यूल-यूज़र ऑडिट
किसी भी सतह को शिप करने से पहले इसे चलाएँ। सात सवाल, तीन मिनट।
- नामित एक्शन। हर प्राइमरी एक्शन का स्थिर एक्सेसिबल नाम और स्थिर सेलेक्टर है।
- मशीन स्टेट। हर स्टेट बदलाव एक संरचित इवेंट भेजता है।
- दिखने वाला diff। एजेंट द्वारा किया गया हर बदलाव कमिट से पहले समीक्षा-योग्य आर्टिफ़ैक्ट के रूप में सामने आता है।
- कीबोर्ड रास्ता। हर होवर-ओनली एफ़ोर्डेंस पॉइंटर के बिना भी पहुँच में है।
- स्थिर सेलेक्टर। हर इंटरैक्टिव एलिमेंट में
data-testidया सिमेंटिक समकक्ष है जो रिफ़ैक्टर में बचा रहे। - इंसान लूप में। विनाशकारी एक्शन पर गेट, भयंकर एक्शन पर दोहरा गेट, और पलटने योग्य एक्शन undo के साथ चलें।
- दस्तावेज़ीकृत सतह। प्रोडक्ट
AGENTS.mdया समकक्ष शिप करता है जो एजेंट को बताए कि यहाँ क्या है, क्या सुरक्षित है, और कौन से नियम मायने रखते हैं।
जो सतह सातों में से सात पास करे वह ड्यूल-यूज़र पूर्ण है। जो तीन या ज़्यादा में फ़ेल हो, वह एजेंट को बाहर ताले में बंद करके शिप हो रही है, ह्यूमन प्लेन चाहे कितना ही अच्छा दिखे।
ऑडिट एक आदत है, एक बार की कसरत नहीं। हर नई सतह, हर रिफ़ैक्टर, हर ब्रांड रीडिज़ाइन शिप होने से पहले इन सात सवालों से गुज़रता है, वैसे ही जैसे हर रीडिज़ाइन एक्सेसिबिलिटी से गुज़रता है। एजेंट-पठनीयता नई एक्सेसिबिलिटी है, और वह भी उसी तरह चक्रवृद्धि होती है।
इस अनुशासन के इनपुट-लेयर संस्करण के लिए प्रॉम्प्ट सरफ़ेस देखें। एम्प्टी-स्टेट वाले निष्कर्ष के लिए एम्प्टी स्टेट ही प्रोडक्ट हैं देखें। नीचे की नींव के लिए वेब डिज़ाइन सिद्धांत बताता है कि संरचना अब सौंदर्य क्यों है।
FAQ
2026 में AI एजेंट्स के लिए डिज़ाइन करने का असल मतलब क्या है?
एजेंट को अपने प्रोडक्ट का फ़र्स्ट-क्लास यूज़र मानना, ऐसा बॉट नहीं जिससे बचाव करना है। एजेंट आपका DOM पढ़ता है, आपके बटन कॉल करता है, और आपके इंटरफ़ेस को उन कसौटियों पर परखता है जो इंसान कभी नहीं देखेगा। हर सतह को एक ह्यूमन प्लेन और एक मशीन प्लेन चाहिए जो वही एफ़ोर्डेंस, स्टेट और शब्दावली साझा करें।
यह एक्सेसिबिलिटी डिज़ाइन से कैसे अलग है?
ज़्यादातर हिस्सा मेल खाता है। स्थिर एक्सेसिबल नाम, सिमेंटिक HTML, कीबोर्ड से पहुँच, संरचित स्टेटस, यह सब एक्सेसिबिलिटी का अनुशासन है जो एक नए यूज़र पर लागू हुआ। नई परत टूल सरफ़ेस और मशीन-पठनीय संरचना की है, जिसमें MCP एंडपॉइंट, AGENTS.md फ़ाइलें और JSON-LD शामिल हैं। एक्सेसिबिलिटी को नींव मानें और एजेंट-पठनीयता को अगली मंज़िल।
एजेंट-रेडी होने के लिए क्या मुझे MCP सर्वर चाहिए?
पहले दिन नहीं। साफ़ DOM, नामित एक्शन, स्थिर सेलेक्टर, संरचित स्टेटस और समीक्षा-योग्य आर्टिफ़ैक्ट वाला प्रोडक्ट पहले ही 80 प्रतिशत एजेंट-रेडी है। MCP सर्वर एजेंट का काम तेज़ और ज़्यादा भरोसेमंद बनाता है, पर पहले संरचना शिप करें, प्रोटोकॉल बाद में।
दो यूज़र, एक स्क्रीन, एक काम
एजेंट डिज़ाइन के लिए ख़तरा नहीं है। वह अलग ज़रूरतों वाला दूसरा यूज़र है, और जो प्रोडक्ट उसे ऐसे ही बरत रहे हैं वे उनसे पहले ही आगे निकल रहे हैं जिन्होंने नहीं बरता।
ज़्यादातर टीमें अब भी एक यूज़र के लिए डिज़ाइन कर रही हैं। ब्रांड ब्रीफ़ इंसान की बात करता है, मूडबोर्ड इंसान की तस्वीर दिखाता है, रिसर्च इंटरव्यू इंसान के होते हैं। एजेंट लॉन्च के बाद आता है, जब कोई इंटीग्रेशन अनुरोध आता है, और टीम को सेलेक्टर, नाम, संरचना, भरोसा सब बाद में जोड़ना पड़ता है। बाद में जोड़ना हमेशा महँगा पड़ता है, पहले दिन से दोनों प्लेन के लिए डिज़ाइन करने के मुक़ाबले।
यह बदलाव तकनीकी नहीं, रवैये का है। हर सतह को ड्यूल-यूज़र मानें, शिप करने से पहले ऑडिट चलाएँ, एजेंट को वही परवाह दें जो इंसान को देते हैं। इनकार करेंगे, तो एजेंट ट्रैफ़िक, साझेदारी और रेवेन्यू किसी और के प्रोडक्ट को मिलेगा।
अगर आप ऐसी टीम चाहते हैं जो ब्रांड और प्रोडक्ट UI दोनों प्लेन एक साथ डिज़ाइन करके शिप करे, बाद में जोड़कर नहीं, तो Brainy को हायर करें। हम ह्यूमन प्लेन वैसे ही डिज़ाइन करते हैं जैसे हमेशा करते आए हैं, और मशीन प्लेन को उस दूसरे यूज़र की तरह जो वह असल में है।
Want a product where the agent loves your interface as much as the user does? Brainy ships AI-native product UI end to end, from the human plane to the machine plane and the trust handoff between them.
Get Started
