Figma के बिना मेरा AI प्रोडक्ट डिज़ाइन वर्कफ़्लो

Figma के बिना उत्पाद डिज़ाइन तब काम करता है जब किसी उत्पाद में पहले से ही एक परिपक्व डिज़ाइन प्रणाली होती है। मेरा AI उत्पाद डिज़ाइन वर्कफ़्लो तीन एजेंट कौशल का उपयोग करता है: ui-design नौ दिशाओं का पता लगाता है, ui-implement चयनित दिशा को उत्पाद में बदल देता है, और ui-walkthrough अंतर्निहित Agent Browser के माध्यम से हर स्थिति की समीक्षा करता है। मैं अब भी निर्णय लेता हूँ; एजेंट दोहराए जाने वाले उत्पादन और जाँच को संभालता है।

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

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

1. एक डिजाइन प्रणाली के साथ Figma के बिना उत्पाद डिजाइन शुरू करें

Figma के बिना काम करने का मतलब डिज़ाइन नियमों के बिना काम करना नहीं है। इसके लिए स्पष्ट नियमों की आवश्यकता है।

Zero के लिए, एजेंट निरीक्षण कर सकता है:

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

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

इससे एजेंट को एक सीमा मिल जाती है. यह प्रत्येक स्क्रीन के लिए एक नई दृश्य भाषा का आविष्कार किए बिना किसी फीचर की संरचना का पता लगा सकता है।

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

2. नौ उत्पाद डिज़ाइन दिशाओं का पता लगाने के लिए ui-design का उपयोग करें

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

मैं ui-design से प्रारंभ करता हूं। मैं एजेंट को वर्तमान स्क्रीन, उपयोगकर्ता समस्या, लक्ष्य और मुख्य बाधाएँ देता हूँ। एजेंट मौजूदा उत्पाद पैटर्न को पढ़ता है और एक अनुशंसित दिशा और नौ विकल्प लौटाता है।

सरल भाषा में, कौशल वर्तमान स्क्रीन को कैप्चर करता है, एक अनुशंसित दिशा बनाता है, नौ अलग-अलग विकल्पों की खोज करता है, ट्रेडऑफ़ प्रस्तुत करता है, और मानव विकल्प की प्रतीक्षा करता है।

इस निर्देश के अंदर डिज़ाइन सोच है

यह निर्देश केवल दृश्य नियमों की सूची नहीं है. यह एक डिज़ाइनर की सामान्य प्रक्रिया को दोहराए जाने योग्य अनुक्रम में बदल देता है:

1. प्रस्ताव करने से पहले समझें। कुछ भी करने से पहले वर्तमान स्क्रीन कैप्चर करें और आसपास के उत्पाद को पढ़ें।
2. सिस्टम के बारे में सोचें। मौजूदा घटकों, टेम्पलेट पेजों, इंटरेक्शन पैटर्न और कॉपी नियमों को शुरुआती सामग्री मानें।
3. पुनर्निवेश को रोकें। संकेत अस्पष्ट होने पर एआई एक नया पैटर्न बनाता है। निर्देश इसे निकटतम शिप किए गए घटक या पृष्ठ को ढूंढने और मेमोरी से अनुमान लगाने के बजाय इसका पुन: उपयोग करने के लिए कहता है।
4. चुनने से पहले अन्वेषण करें। आफ्टर एंकर एक प्रशंसनीय दिशा देता है। नौ प्रकार लेआउट, पदानुक्रम, घनत्व, प्रवेश बिंदु और प्रकटीकरण के बारे में अलग-अलग निर्णय लेते हैं।
5. अन्वेषण को प्रतिबद्धता से अलग करें। एजेंट विकल्प प्रस्तुत करने के बाद रुक जाता है। एक इंसान कोड शुरू होने से पहले ट्रेडऑफ़ की तुलना करता है और चुनता है।
6. पूरे अनुभव की समीक्षा करें। कॉपी, होवर फीडबैक, स्थिति, मोबाइल व्यवहार और दृश्य स्थिरता डिज़ाइन का हिस्सा हैं, कार्यान्वयन के बाद सफाई नहीं।

यह वह प्रणाली है जो सोचती है कि मैं कौशल से चाहता हूं: मौजूदा उत्पाद को समझें, उसके भीतर अन्वेषण करें, और फिर एक स्पष्ट विकल्प चुनें।

यहां पूर्ण मूल निर्देश है, जिसे लाइव वर्कफ़्लो से शब्दशः पुन: प्रस्तुत किया गया है:

ui-design का पूरा मूल निर्देश

# vm0 / Zero यूआई डिज़ाइन नियम

## वर्कफ़्लो - पहले दृश्य, बाद में कोड

**कोड पर न जाएं।** जब इस कौशल को लागू किया जाता है, तो पहला डिलिवरेबल हमेशा मिंग को देखने के लिए प्रस्तुत किए गए मॉकअप का एक सेट होता है। दिशा चुनने के बाद ही कार्यान्वयन होता है।

### चरण 1 - "पहले" को कैप्चर करें

- यदि कोई स्क्रीन पहले से मौजूद है, तो उसकी वर्तमान स्थिति को **पहले** छवि के रूप में प्रस्तुत करें (चल रहे ऐप का स्क्रीनशॉट लें, या मौजूदा घटक को स्थिर पूर्वावलोकन के रूप में प्रस्तुत करें)।
- यदि अनुरोध बिल्कुल नई स्क्रीन के लिए है, तो "पहले" या तो निकटतम मौजूदा स्क्रीन है या रिक्त स्थिति है - इसे कैप्शन में स्पष्ट करें।

### चरण 2 - एक एकल "आफ्टर" एंकर तैयार करें

- एक मॉकअप जो अनुरोध की आपकी सर्वोत्तम-अनुमानित व्याख्या का प्रतिनिधित्व करता है, नीचे दिए गए प्रत्येक नियम (घटक, वाक्य केस, एजेंट-विस्तार इनपुट/ड्रॉपडाउन, चैट-कंपोजर कार्ड रेडी, ऐड-शेड्यूल बटन, आइकनबटन होवर, ग्रे -50 सतह) का पूरी तरह से पालन करता है।
- इसे **पहले** के साथ अगल-बगल जोड़ें। उन्हें स्पष्ट रूप से लेबल करें: `Before` / `After`।

### चरण 3 - 9 प्रकार के अन्वेषण उत्पन्न करें

पहले/बाद की जोड़ी के बाद, एक ही स्क्रीन के लिए **9 अलग-अलग प्रकार के मॉकअप** तैयार करें। प्रत्येक संस्करण को एक सार्थक रूप से भिन्न डिज़ाइन अक्ष का पता लगाना चाहिए - न कि 9 रंग बदलावों का। एक फैलाव को कवर करें जैसे:

1. लेआउट - सिंगल कॉलम बनाम स्प्लिट/साइडबार/ग्रिड
2. घनत्व - कॉम्पैक्ट बनाम विशाल
3. पदानुक्रम - कौन सा तत्व दृष्टिगत रूप से नेतृत्व करता है
4. भूतल उपचार - फ्लैट बनाम कार्ड-समूहीकृत बनाम विभाजित अनुभाग
5. प्रवेश बिंदु - इनलाइन एक्शन बनाम समर्पित सीटीए बनाम खाली-स्टेट हीरो
6. कॉपी फ़्रेमिंग - शिक्षाप्रद बनाम न्यूनतम बनाम संवादात्मक
7. प्रकटीकरण - सब कुछ दृश्यमान बनाम प्रगतिशील प्रकटीकरण/समझौता
8. रचना - सामग्री-आधारित बनाम नियंत्रण-आधारित
9. जानबूझकर अपरंपरागत / "वाइल्ड कार्ड" दिशा एक बार देखने लायक है

प्रत्येक संस्करण को अभी भी गैर-परक्राम्य (वाक्य मामला, पुन: उपयोग घटक, एजेंट-विस्तार इनपुट/ड्रॉपडाउन शैली, चैट-कंपोजर रेडी, ऐड-शेड्यूल बटन, आइकनबटन होवर, ग्रे -50 न्यूट्रल) का सम्मान करना चाहिए। वेरिएंट *लेआउट और जोर* का पता लगाते हैं, न कि "क्या होगा अगर हमने डिज़ाइन सिस्टम को नजरअंदाज कर दिया।"

### चरण 4 - प्रस्तुत करें, फिर प्रतीक्षा करें

- मिंग को एक संदेश में सभी छवियां दिखाएं: पहले `Before / After` जोड़ी, फिर 9 वेरिएंट की संख्या 1-9 है, प्रत्येक एक पंक्ति के कैप्शन के साथ अन्वेषण की जा रही धुरी का वर्णन करता है।
- पूछें कि किस दिशा में (या कौन सा मिश्रण) आगे बढ़ना है।
- जब तक मिंग कोई दिशा नहीं चुन लेता तब तक कार्यान्वयन शुरू न करें।

### छवियों का प्रतिपादन

- पसंदीदा पथ: स्थिर HTML/React पूर्वावलोकन बनाएं जो `turbo/apps/platform` से वास्तविक टेलविंड टोकन का उपयोग करें, उनका स्क्रीनशॉट लें और `okou web upload-file` के माध्यम से अपलोड करें।
- त्वरित अन्वेषण के लिए: `v0` कौशल एक प्रॉम्प्ट से भिन्न मॉकअप उत्पन्न कर सकता है - लेकिन प्रॉम्प्ट को स्पष्ट रूप से नीचे दिए गए नियमों (वाक्य केस, एजेंट-विस्तार इनपुट, चैट-कंपोजर त्रिज्या, आदि) की गणना करनी चाहिए ताकि v0 सामान्य SaaS UI का उत्पादन न करे।
- यदि सत्र के लिए छवि निर्माण अनुपलब्ध है, तो सभी 11 फ़्रेमों (पहले, बाद, 9 वेरिएंट) के लिए स्पष्ट रूप से लेबल किए गए ASCII / टेक्स्टुअल वायरफ्रेम पर वापस जाएं और इसे कॉल करें - विज़ुअल चरण को कभी भी चुपचाप न छोड़ें।

---

# डिज़ाइन नियम

ये vm0 प्लेटफ़ॉर्म (`turbo/apps/platform`) के अंदर भेजे गए किसी भी नए यूआई के लिए गैर-परक्राम्य डिज़ाइन परंपराएं हैं। घटकों को लिखने से पहले उन्हें लागू करें, और समीक्षा के दौरान उनके विरुद्ध मौजूदा पीआर का ऑडिट करें।

## मूल सिद्धांत

1. **पुन: उपयोग करें, दोबारा आविष्कार न करें।** किसी नए घटक को पेश करने से पहले हमेशा `turbo/apps/platform/src/components/` में मौजूदा प्रिमिटिव और `src/views/` के तहत व्यू-लेवल पैटर्न की जांच करें। यदि एक समान इंटरैक्शन पहले से ही एजेंट विवरण, शेड्यूल या चैट कंपोज़र में शिप होता है, तो समानांतर पैटर्न डिज़ाइन करने के बजाय उस पैटर्न को कॉपी करें।
2. **Zero डिजाइन भाषा से मेल खाता है।** नरम सतह, तटस्थ ग्रे, उदार त्रिज्या, सूक्ष्म सीमाएं, कोई कठोर छाया नहीं। दृश्य आधार रेखा "शांत, विचारशील, थोड़ा संपादकीय" है - कभी भी SaaS-डिफ़ॉल्ट नहीं।
3. **उपयोगकर्ता की सीट से बोलें।** कॉपी में यह वर्णन होना चाहिए कि *वे* क्या करने वाले हैं या देखने वाले हैं, न कि सिस्टम क्या कर रहा है। इसे छोटा रखें - आमतौर पर एक वाक्य, अधिकतम दो।

## संदर्भ पैटर्न (इन्हें सीधे कॉपी करें)

| तत्व             | संदर्भ स्रोत                                  | क्यों |
|---------------------|---------------------------------------------------|-----|
| पाठ/पाठक्षेत्र इनपुट | एजेंट विवरण पृष्ठ इनपुट (`src/views/agent-detail/`) | स्थापित पैडिंग, बॉर्डर, फोकस स्थिति, प्लेसहोल्डर उपचार |
| ड्रॉपडाउन/चयन करें     | एजेंट विवरण पृष्ठ ड्रॉपडाउन                         | स्थापित ट्रिगर शैली, मेनू त्रिज्या, आइटम होवर, चेक मार्क प्लेसमेंट |
| कार्ड/पैनल त्रिज्या   | चैट कंपोज़र कार्ड (`composer` घटकों को देखें) | पूरे ऐप में कैनोनिकल कार्ड त्रिज्या और सतह शैली सेट करता है |
| प्राथमिक पृष्ठ बटन   | शेड्यूल पेज पर "शेड्यूल जोड़ें" बटन          | न्यूट्रल-डार्क प्राइमरी का उपयोग मोडल्स के *बाहर* हर जगह किया जाता है |
| मॉडल प्राथमिक बटन  | ब्रांड प्राथमिक रंग (केवल संवाद/पॉपओवर के अंदर) | मॉडल्स ब्रांड-रंग प्राथमिक को बरकरार रखते हैं; पेज नहीं |
| केवल चिह्न बटन      | होवर पृष्ठभूमि के साथ मौजूदा आइकनबटन           | प्रत्येक क्लिक करने योग्य आइकन में एक दृश्यमान होवर स्थिति होनी चाहिए |

जब संदेह हो, तो कोडबेस में संदर्भ घटक खोलें, इसके प्रॉप्स और क्लास नाम पढ़ें, और उन्हें मिरर करें। स्मृति से अनुमान न लगाएं.

## कॉपी संबंधी दिशानिर्देश

- **उपयोगकर्ता-परिप्रेक्ष्य वाक्यांश।** "अपना इनबॉक्स कनेक्ट करें" बीट्स "इनबॉक्स कनेक्शन आवश्यक"। "अभी तक कोई एजेंट नहीं" धड़कता है "एजेंट सूची खाली है"।
- **पूर्णता की अपेक्षा संक्षिप्तता।** एक छोटी पंक्ति पूरे वाक्य से बेहतर प्रदर्शन करती है। फिलर ट्रिम करें ("बस", "कृपया", "क्रम में")।
- **हर चीज़ के लिए वाक्य केस।** लेबल, शीर्षक, बटन, मेनू आइटम, तालिका कॉलम - सभी वाक्य केस ("मॉडल प्रदाता", "एपीआई कुंजी", "शेड्यूल जोड़ें")। कभी शीर्षक प्रकरण नहीं. सेक्शन हेडर पर CSS के माध्यम से कभी भी `uppercase` न करें। यदि आपको टाइटल-केस या ऑल-कैप्स लेबल मिलता है, तो उसे ठीक करें।
- **फ़ील्ड या सेक्शन के ऊपर कोई कैप्शन-केस "सजावटी" लेबल नहीं है - वे फॉर्म-वाई और दिनांक के रूप में पढ़े जाते हैं। यदि फ़ील्ड स्व-स्पष्ट है तो सामान्य लेबल का उपयोग करें या लेबल छोड़ दें।
- **स्टैंडअलोन लेबल या बटन पर कोई पिछला विराम चिह्न नहीं**। पीरियड्स बॉडी कॉपी और हेल्पर टेक्स्ट के लिए हैं।
- किसी स्ट्रिंग का नाम बदलते समय, पुरानी स्ट्रिंग के लिए कोडबेस को ग्रेप करें और उसके लिए परीक्षण करें - परीक्षण और अनुवाद में लेबल का संदर्भ दिया जाता है।

## घटक और संरचना

- हमेशा मौजूदा घटकों (`Button`, `Input`, `Select`, `Card`, `IconButton`, डायलॉग प्रिमिटिव आदि) से पेज बनाएं। नए घटक अंतिम उपाय हैं और इसके लिए कारण की आवश्यकता होती है।
- किसी मौजूदा लेआउट/टेम्पलेट (सेटिंग्स पृष्ठ, सूची पृष्ठ, विवरण पृष्ठ) को देखें और उसका मचान प्राप्त करें। पृष्ठ संरचना दोबारा प्राप्त न करें.
- सेटिंग्स-शैली पृष्ठ में जोड़ते समय, पड़ोसी अनुभागों द्वारा उपयोग की जाने वाली अनुभाग रिक्ति, विभाजक उपचार और फॉर्म-पंक्ति चौड़ाई का मिलान करें।

## बटन

- **पेज प्राथमिक** (पेज पर मुख्य सीटीए) → शेड्यूल पेज पर "शेड्यूल जोड़ें" बटन से मिलान करें। यह न्यूट्रल डार्क/सॉलिड प्राथमिक उपयोग किया जाने वाला ऐप-व्यापी बाहरी संवाद है।
- **मोडल प्राथमिक** (संवाद/पॉपओवर के अंदर पुष्टि बटन) → ब्रांड प्राथमिक रंग का उपयोग करता है। पन्ने नहीं.
- **माध्यमिक / भूत बटन** → मौजूदा वेरिएंट का पुन: उपयोग करें; नये आविष्कार मत करो.
- **आइकन बटन** → में एक होवर पृष्ठभूमि होनी चाहिए (आमतौर पर `hover:bg-gray-50` या स्थापित IconButton होवर टोकन)। क्लिक लक्ष्य के रूप में कभी भी नंगे होवर रहित आइकन को शिप न करें।
- सभी बटनों को मौजूदा ऊंचाई के टोकन का सम्मान करना चाहिए - एकमुश्त आकार का परिचय न दें।

## इनपुट

- एजेंट विवरण इनपुट को मिरर करें: समान पैडिंग, समान बॉर्डर, समान फोकस रिंग (या उसकी कमी - फोकस रिंग जोड़ने से पहले संदर्भ की जांच करें), समान प्लेसहोल्डर रंग।
- मल्टी-लाइन: एजेंट विवरण टेक्स्टएरिया पैटर्न (संदर्भ के अनुसार ऑटो-ग्रो या निश्चित पंक्तियाँ) का उपयोग करें।
- फ़ील्ड लेबल के अंत में कोलन न लगाएं.
- इनपुट के नीचे सहायक पाठ, म्यूट ग्रे, एकल पंक्ति में।

## ड्रॉपडाउन/चयन

- एजेंट विवरण ड्रॉपडाउन को मिरर करें: समान ट्रिगर उपस्थिति, समान मेनू त्रिज्या, समान आइटम पैडिंग, समान होवर/चयनित स्थिति।
- जब तक सामग्री इसकी मांग न करे, मेनू को उसके ट्रिगर से अधिक चौड़ा नहीं होना चाहिए।
- नेस्टेड सबमेनू से बचें जब तक कि कोई मौजूदा ड्रॉपडाउन पहले से ही उनका उपयोग न करे।

## कार्ड और सतहें

- कार्ड की त्रिज्या और सतह की शैली चैट कंपोज़र कार्ड से मेल खाती है। बिना किसी कारण के छोटे या बड़े दायरे का परिचय न दें।
- बॉर्डर सूक्ष्म हैं (मौजूदा बॉर्डर टोकन में सिंगल हेयरलाइन)। जब तक चैट कंपोजर इसका उपयोग नहीं करता तब तक कोई छाया नहीं गिरती।
- मोबाइल पर तटस्थ सतहें / हल्के भूरे रंग की भरण (सक्रिय गोली पृष्ठभूमि, आइकन कंटेनर भरण, आदि) → `bg-gray-50`। `gray-100` और `gray-200` को बार-बार बहुत अंधेरा कहा गया है - `gray-50` से शुरू करें।

## फोकस और इंटरेक्शन

- नेव/मार्केटिंग तत्वों में कस्टम `:focus-visible` बॉक्स-शैडो या आउटलाइन न जोड़ें - इसके बजाय होवर कलर शिफ्ट का पुन: उपयोग करें। (समान संयम आम तौर पर प्लेटफ़ॉर्म के अंदर लागू होता है जब तक कि किसी संदर्भ घटक में स्पष्ट फ़ोकस रिंग न हो।)
- प्रत्येक इंटरैक्टिव तत्व (बटन, आइकन बटन, पंक्ति, लिंक) को एक दृश्यमान होवर स्थिति की आवश्यकता होती है। डिज़ाइन पर विचार करने से पहले प्रत्येक पर मँडरा कर परीक्षण करें।
- अक्षम राज्य मौजूदा अक्षम टोकन का उपयोग करते हैं; फीके रंग को हाथ से न रोल करें।

## चेकलिस्ट की समीक्षा करें

यूआई तैयार घोषित करने से पहले, निम्नलिखित पर गौर करें:

1. क्या मैंने नए घटकों के निर्माण के बजाय मौजूदा घटकों का पुन: उपयोग किया?
2. क्या मैंने मौजूदा पेज टेम्पलेट/लेआउट से मिलान किया?
3. क्या इनपुट दृश्यतः एजेंट विवरण इनपुट के समान हैं?
4. क्या ड्रॉपडाउन दृश्यतः एजेंट विवरण ड्रॉपडाउन के समान हैं?
5. क्या कार्ड चैट कंपोज़र त्रिज्या और सतह से मेल खाते हैं?
6. क्या प्रत्येक लेबल वाक्य केस है? कोई बचा हुआ टाइटल केस या ऑल-कैप्स?
7. क्या प्रतिलिपि छोटी है और उपयोगकर्ता की सीट से लिखी गई है?
8. क्या पृष्ठ प्राथमिक रूप से "शेड्यूल जोड़ें"-शैली बटन है? क्या ब्रांड प्राइमरी का उपयोग केवल मॉडल्स के अंदर किया जाता है?
9. क्या प्रत्येक आइकन बटन में होवर पृष्ठभूमि होती है?
10. क्या मैंने फीडबैक की पुष्टि के लिए प्रत्येक इंटरैक्टिव तत्व पर होवर किया?

यदि कोई उत्तर "नहीं" है, तो पीआर खोलने से पहले इसे ठीक कर लें।

## जब संदेह हो

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

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

एक वास्तविक उदाहरण: Zero का नेविगेशन

Zero में मूल रूप से एक 300-पिक्सेल साइडबार था जिसमें उत्पाद गंतव्य, पिन किए गए एजेंट और चैट थ्रेड शामिल थे। यह एक साथ तीन काम कर रहा था। मैं वार्तालाप क्षेत्र को बदले बिना उन नौकरियों को अलग करना चाहता था।

अन्वेषण के लिए उत्पाद संक्षिप्त था:

/ui-design

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

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

दूसरे रन ने वास्तव में नौ अलग-अलग दिशाएँ लौटा दीं। मैंने उन्हें 3 × 3 तालिका में समूहित किया ताकि लेख को लंबी छवि पट्टी में बदले बिना उनकी तुलना करना आसान हो। प्रत्येक थंबनेल ब्लॉग के छवि व्यूअर में खुलता है।

1. शीर्ष नेविगेशन	2. बंधनेवाला दराज	3. पहला धागा
गंतव्यों को वार्तालाप के ऊपर ले जाएँ	आवश्यकता पड़ने तक गंतव्यों को छिपाएँ	बातचीत को मुख्य नेविगेशन ऑब्जेक्ट बनाएं
4. एजेंट पहले	5. बातचीत पहले	6. कमांड लॉन्चर
इसके थ्रेड्स से पहले एक एजेंट चुनें	सक्रिय वार्तालाप के ऊपर पिन किए गए एजेंटों को रखें	खोजने योग्य मेनू से गंतव्य खोलें
7. विस्तार योग्य रेल	8. डैशबोर्ड प्रविष्टि	9. निचला गोदी
जरूरत पड़ने पर ही संकीर्ण रेल का विस्तार करें	हाल के काम से शुरुआत करें	गंतव्यों को नीचे ले जाएँ

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

ui-design का महत्वपूर्ण आउटपुट केवल छवि नहीं थी। यह एक संक्षिप्त निर्णय रिकॉर्ड था:

• 68-पिक्सेल गंतव्य रेल और 300-पिक्सेल चैट रेल रखें
• पाँच पिन किए गए-एजेंट स्लॉट दिखाएँ
• चयन को शांत लेकिन पठनीय रखें
• केवल खींचते समय पुन: व्यवस्थित मार्गदर्शन दिखाएं
• बातचीत और मौजूदा मोबाइल ड्रॉअर को अपरिवर्तित रखें

कार्यान्वयन शुरू करने के लिए यह पर्याप्त था।

3. चयनित डिज़ाइन को कोड में बदलने के लिए ui-implement का उपयोग करें

जब मैं एक दिशा चुनता हूं और उत्पाद कोडबेस कनेक्ट करता हूं, तो एजेंट सीधे कोड में काम करता है। मैं पहले Figma में चयनित फ़्रेम को दोबारा नहीं बनाता।

सरल भाषा में, ui-implement अन्वेषण को छोड़ देता है क्योंकि दिशा पहले ही चुनी जा चुकी है। यह निकटतम वास्तविक घटकों और पृष्ठ संरचना को ढूंढता है, उनके साथ निर्माण करता है, परिणाम का ऑडिट करता है, और ब्राउज़र में सुविधा का सत्यापन करता है।

यह निर्देश किसकी सुरक्षा करता है

• कार्यान्वयन के दौरान चुनी गई दिशा को दोबारा डिज़ाइन नहीं किया जाना चाहिए।
• एजेंट को निकटतम मौजूदा घटक और टेम्पलेट पेज से शुरू करना होगा।
• जब तक उत्पाद में वास्तविक अंतर न हो तब तक पुन: उपयोग एक नए घटक पर विजय प्राप्त करता है।
• सेल्फ-ऑडिट और ब्राउज़र चेक असंगत प्रतिलिपि, स्थिति और इंटरैक्शन को पकड़ते हैं।
• यदि कोई उत्पाद निर्णय अभी भी अनसुलझा है, तो कार्य ui-design पर वापस आ जाता है।

इस प्रकार डिज़ाइन प्रणाली कार्यान्वयन के दौरान सक्रिय रहती है। यह कोई दस्तावेज़ नहीं है जिसे एजेंट एक बार पढ़ लेता है। यह आकार देता है कि यह कौन से घटकों को चुनता है और यह तैयार अनुभव की जांच कैसे करता है।

यहां पूर्ण मूल निर्देश है, जिसे लाइव वर्कफ़्लो से शब्दशः पुन: प्रस्तुत किया गया है:

ui-implement का पूरा मूल निर्देश

# vm0 / Zero यूआई कार्यान्वयन नियम

## वर्कफ़्लो - सीधे लागू करें

जब यह कौशल लागू किया जाता है, तो **मॉकअप और वैरिएंट अन्वेषण चरण को छोड़ दें**। नीचे दिए गए प्रत्येक डिज़ाइन नियम को लागू करते हुए तुरंत `turbo/apps/platform` में कार्यान्वयन शुरू करें।

### चरण 1 - संदर्भ घटकों का पता लगाएँ

एक पंक्ति लिखने से पहले, उन संदर्भ घटकों को खोलें जिन्हें आप प्रतिबिंबित करेंगे:

- इनपुट/टेक्स्टक्षेत्र → `src/views/agent-detail/` इनपुट
- ड्रॉपडाउन / चयन करें → `src/views/agent-detail/` ड्रॉपडाउन
- कार्ड/पैनल त्रिज्या → चैट कंपोज़र कार्ड
- पृष्ठ प्राथमिक बटन → शेड्यूल पृष्ठ पर "शेड्यूल जोड़ें" बटन
- केवल-आइकन बटन → होवर पृष्ठभूमि के साथ मौजूदा `IconButton`

उनके प्रॉप्स और क्लास के नाम पढ़ें. उन्हें दर्पण में देखें - स्मृति से अनुमान न लगाएं।

### चरण 2 - निकटतम मौजूदा पेज टेम्पलेट ढूंढें

समान आकार (सेटिंग्स, सूची, विवरण) के निकटतम मौजूदा पृष्ठ को खोलें और इसकी मचान प्राप्त करें: अनुभाग रिक्ति, विभाजक उपचार, फॉर्म-पंक्ति चौड़ाई। पृष्ठ संरचना दोबारा प्राप्त न करें.

### चरण 3 - निर्माण करें, फिर स्वयं-ऑडिट करें

`turbo/apps/platform/src/components/` से मौजूदा प्राइमेटिव के साथ स्क्रीन को लागू करें। जब आपको लगे कि यह हो गया है, तो वापस रिपोर्ट करने से पहले इस कौशल के नीचे **समीक्षा चेकलिस्ट** पर चलें। कार्य पूर्ण घोषित करने से पहले प्रत्येक "नहीं" उत्तर को ठीक करें।

### चरण 4 - ब्राउज़र में सत्यापित करें

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

### ui-design पर कब वापस आना है

यदि अनुरोध ओपन-एंडेड है ("एक्स के लिए एक सेटिंग पेज डिज़ाइन करें") और कोई चुनी हुई दिशा नहीं है, तो रोकें और इसके बजाय `ui-design` कौशल चलाएं - ठीक उसी स्थिति के लिए पहले/बाद + 9 वेरिएंट मौजूद हैं। `ui-implement` तब के लिए है जब दिशा पहले से ही तय हो।

---

# डिज़ाइन नियम

ये vm0 प्लेटफ़ॉर्म (`turbo/apps/platform`) के अंदर भेजे गए किसी भी नए यूआई के लिए गैर-परक्राम्य डिज़ाइन परंपराएं हैं। निर्माण करते समय उन्हें लागू करें, और पीआर खोलने से पहले उनके मुकाबले अपने अंतर का ऑडिट करें।

## मूल सिद्धांत

1. **पुन: उपयोग करें, दोबारा आविष्कार न करें।** किसी नए घटक को पेश करने से पहले हमेशा `turbo/apps/platform/src/components/` में मौजूदा प्रिमिटिव और `src/views/` के तहत व्यू-लेवल पैटर्न की जांच करें। यदि एक समान इंटरैक्शन पहले से ही एजेंट विवरण, शेड्यूल या चैट कंपोज़र में शिप होता है, तो समानांतर पैटर्न डिज़ाइन करने के बजाय उस पैटर्न को कॉपी करें।
2. **Zero डिज़ाइन भाषा से मेल खाता है।** नरम सतह, तटस्थ ग्रे, उदार त्रिज्या, सूक्ष्म सीमाएं, कोई कठोर छाया नहीं। दृश्य आधार रेखा "शांत, विचारशील, थोड़ा संपादकीय" है - कभी भी SaaS-डिफ़ॉल्ट नहीं।
3. **उपयोगकर्ता की सीट से बोलें।** कॉपी में यह वर्णन होना चाहिए कि *वे* क्या करने वाले हैं या देखने वाले हैं, न कि सिस्टम क्या कर रहा है। इसे छोटा रखें - आमतौर पर एक वाक्य, अधिकतम दो।

## संदर्भ पैटर्न (इन्हें सीधे कॉपी करें)

| तत्व             | संदर्भ स्रोत                                  | क्यों |
|---------------------|---------------------------------------------------|-----|
| पाठ/पाठक्षेत्र इनपुट | एजेंट विवरण पृष्ठ इनपुट (`src/views/agent-detail/`) | स्थापित पैडिंग, बॉर्डर, फोकस स्थिति, प्लेसहोल्डर उपचार |
| ड्रॉपडाउन/चयन करें     | एजेंट विवरण पृष्ठ ड्रॉपडाउन                         | स्थापित ट्रिगर शैली, मेनू त्रिज्या, आइटम होवर, चेक मार्क प्लेसमेंट |
| कार्ड/पैनल त्रिज्या   | चैट कंपोज़र कार्ड (`composer` घटकों को देखें) | पूरे ऐप में कैनोनिकल कार्ड त्रिज्या और सतह शैली सेट करता है |
| प्राथमिक पृष्ठ बटन   | शेड्यूल पेज पर "शेड्यूल जोड़ें" बटन          | न्यूट्रल-डार्क प्राइमरी का उपयोग मोडल्स के *बाहर* हर जगह किया जाता है |
| मॉडल प्राथमिक बटन  | ब्रांड प्राथमिक रंग (केवल संवाद/पॉपओवर के अंदर) | मॉडल्स ब्रांड-रंग प्राथमिक को बरकरार रखते हैं; पेज नहीं |
| केवल चिह्न बटन      | होवर पृष्ठभूमि के साथ मौजूदा आइकनबटन           | प्रत्येक क्लिक करने योग्य आइकन में एक दृश्यमान होवर स्थिति होनी चाहिए |

जब संदेह हो, तो कोडबेस में संदर्भ घटक खोलें, इसके प्रॉप्स और क्लास नाम पढ़ें, और उन्हें मिरर करें। स्मृति से अनुमान न लगाएं.

## कॉपी संबंधी दिशानिर्देश

- **उपयोगकर्ता-परिप्रेक्ष्य वाक्यांश।** "अपना इनबॉक्स कनेक्ट करें" बीट्स "इनबॉक्स कनेक्शन आवश्यक"। "अभी तक कोई एजेंट नहीं" धड़कता है "एजेंट सूची खाली है"।
- **पूर्णता की अपेक्षा संक्षिप्तता।** एक छोटी पंक्ति पूरे वाक्य से बेहतर प्रदर्शन करती है। फिलर ट्रिम करें ("बस", "कृपया", "क्रम में")।
- **हर चीज़ के लिए वाक्य केस।** लेबल, शीर्षक, बटन, मेनू आइटम, तालिका कॉलम - सभी वाक्य केस ("मॉडल प्रदाता", "एपीआई कुंजी", "शेड्यूल जोड़ें")। कभी शीर्षक प्रकरण नहीं. सेक्शन हेडर पर CSS के माध्यम से कभी भी `uppercase` न करें। यदि आपको टाइटल-केस या ऑल-कैप्स लेबल मिलता है, तो उसे ठीक करें।
- **फ़ील्ड या सेक्शन के ऊपर कोई कैप्शन-केस "सजावटी" लेबल नहीं है - वे फॉर्म-वाई और दिनांक के रूप में पढ़े जाते हैं। यदि फ़ील्ड स्व-स्पष्ट है तो सामान्य लेबल का उपयोग करें या लेबल छोड़ दें।
- **स्टैंडअलोन लेबल या बटन पर कोई पिछला विराम चिह्न नहीं**। पीरियड्स बॉडी कॉपी और हेल्पर टेक्स्ट के लिए हैं।
- किसी स्ट्रिंग का नाम बदलते समय, पुरानी स्ट्रिंग के लिए कोडबेस को ग्रेप करें और उसके लिए परीक्षण करें - परीक्षण और अनुवाद में लेबल का संदर्भ दिया जाता है।

## घटक और संरचना

- हमेशा मौजूदा घटकों (`Button`, `Input`, `Select`, `Card`, `IconButton`, डायलॉग प्रिमिटिव आदि) से पेज बनाएं। नए घटक अंतिम उपाय हैं और इसके लिए कारण की आवश्यकता होती है।
- किसी मौजूदा लेआउट/टेम्पलेट (सेटिंग्स पृष्ठ, सूची पृष्ठ, विवरण पृष्ठ) को देखें और उसका मचान प्राप्त करें। पृष्ठ संरचना दोबारा प्राप्त न करें.
- सेटिंग्स-शैली पृष्ठ में जोड़ते समय, पड़ोसी अनुभागों द्वारा उपयोग की जाने वाली अनुभाग रिक्ति, विभाजक उपचार और फॉर्म-पंक्ति चौड़ाई का मिलान करें।

## बटन

- **पेज प्राथमिक** (पेज पर मुख्य सीटीए) → शेड्यूल पेज पर "शेड्यूल जोड़ें" बटन से मिलान करें। यह न्यूट्रल डार्क/सॉलिड प्राथमिक उपयोग किया जाने वाला ऐप-व्यापी बाहरी संवाद है।
- **मोडल प्राथमिक** (संवाद/पॉपओवर के अंदर पुष्टि बटन) → ब्रांड प्राथमिक रंग का उपयोग करता है। पन्ने नहीं.
- **माध्यमिक / भूत बटन** → मौजूदा वेरिएंट का पुन: उपयोग करें; नये आविष्कार मत करो.
- **आइकन बटन** → में एक होवर पृष्ठभूमि होनी चाहिए (आमतौर पर `hover:bg-gray-50` या स्थापित IconButton होवर टोकन)। क्लिक लक्ष्य के रूप में कभी भी नंगे होवर रहित आइकन को शिप न करें।
- सभी बटनों को मौजूदा ऊंचाई के टोकन का सम्मान करना चाहिए - एकमुश्त आकार का परिचय न दें।

## इनपुट

- एजेंट विवरण इनपुट को मिरर करें: समान पैडिंग, समान बॉर्डर, समान फोकस रिंग (या उसकी कमी - फोकस रिंग जोड़ने से पहले संदर्भ की जांच करें), समान प्लेसहोल्डर रंग।
- मल्टी-लाइन: एजेंट विवरण टेक्स्टएरिया पैटर्न (संदर्भ के अनुसार ऑटो-ग्रो या निश्चित पंक्तियाँ) का उपयोग करें।
- फ़ील्ड लेबल के अंत में कोलन न लगाएं.
- इनपुट के नीचे सहायक पाठ, म्यूट ग्रे, एकल पंक्ति में।

## ड्रॉपडाउन/चयन

- एजेंट विवरण ड्रॉपडाउन को मिरर करें: समान ट्रिगर उपस्थिति, समान मेनू त्रिज्या, समान आइटम पैडिंग, समान होवर/चयनित स्थिति।
- जब तक सामग्री इसकी मांग न करे, मेनू को उसके ट्रिगर से अधिक चौड़ा नहीं होना चाहिए।
- नेस्टेड सबमेनू से बचें जब तक कि कोई मौजूदा ड्रॉपडाउन पहले से ही उनका उपयोग न करे।

## कार्ड और सतहें

- कार्ड की त्रिज्या और सतह की शैली चैट कंपोज़र कार्ड से मेल खाती है। बिना किसी कारण के छोटे या बड़े दायरे का परिचय न दें।
- बॉर्डर सूक्ष्म हैं (मौजूदा बॉर्डर टोकन में सिंगल हेयरलाइन)। जब तक चैट कंपोजर इसका उपयोग नहीं करता तब तक कोई छाया नहीं गिरती।
- मोबाइल/हल्के भूरे रंग की भरण पर तटस्थ सतहें (सक्रिय गोली पृष्ठभूमि, आइकन कंटेनर भरण, आदि) → `bg-gray-50`। `gray-100` और `gray-200` को बार-बार बहुत अंधेरा कहा गया है - `gray-50` से शुरू करें।

## फोकस और इंटरेक्शन

- नेव/मार्केटिंग तत्वों में कस्टम `:focus-visible` बॉक्स-शैडो या आउटलाइन न जोड़ें - इसके बजाय होवर कलर शिफ्ट का पुन: उपयोग करें। (समान संयम आम तौर पर प्लेटफ़ॉर्म के अंदर लागू होता है जब तक कि किसी संदर्भ घटक में स्पष्ट फ़ोकस रिंग न हो।)
- प्रत्येक इंटरैक्टिव तत्व (बटन, आइकन बटन, पंक्ति, लिंक) को एक दृश्यमान होवर स्थिति की आवश्यकता होती है। डिज़ाइन पर विचार करने से पहले प्रत्येक पर मँडरा कर परीक्षण करें।
- अक्षम राज्य मौजूदा अक्षम टोकन का उपयोग करते हैं; फीके रंग को हाथ से न रोल करें।

## चेकलिस्ट की समीक्षा करें

यूआई तैयार घोषित करने से पहले, निम्नलिखित पर गौर करें:

1. क्या मैंने नए घटकों के निर्माण के बजाय मौजूदा घटकों का पुन: उपयोग किया?
2. क्या मैंने मौजूदा पेज टेम्पलेट/लेआउट से मिलान किया?
3. क्या इनपुट दृश्यतः एजेंट विवरण इनपुट के समान हैं?
4. क्या ड्रॉपडाउन दृश्यतः एजेंट विवरण ड्रॉपडाउन के समान हैं?
5. क्या कार्ड चैट कंपोज़र त्रिज्या और सतह से मेल खाते हैं?
6. क्या प्रत्येक लेबल वाक्य केस है? कोई बचा हुआ टाइटल केस या ऑल-कैप्स?
7. क्या प्रतिलिपि छोटी है और उपयोगकर्ता की सीट से लिखी गई है?
8. क्या पृष्ठ प्राथमिक रूप से "शेड्यूल जोड़ें"-शैली बटन है? क्या ब्रांड प्राइमरी का उपयोग केवल मॉडल्स के अंदर किया जाता है?
9. क्या प्रत्येक आइकन बटन में होवर पृष्ठभूमि होती है?
10. क्या मैंने फीडबैक की पुष्टि के लिए ब्राउज़र में प्रत्येक इंटरैक्टिव तत्व को घुमाया?

यदि कोई उत्तर "नहीं" है, तो पीआर खोलने से पहले इसे ठीक कर लें।

## जब संदेह हो

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

यह सुविधा-विशिष्ट कार्यान्वयन संकेत था:

/ui-implement

संशोधन 04d642bb से प्रारंभ करें। 68px गंतव्य रेल, 300px चैट रेल और अपरिवर्तित वार्तालाप के साथ एक डिफ़ॉल्ट-ऑफ़ डेस्कटॉप स्प्लिट जोड़ें। स्विच बंद होने और मोबाइल चालू होने पर पुराना 300px साइडबार रखें। पांच पिन किए गए स्लॉट रेंडर करें, उपयोगकर्ता-परिभाषित ऑर्डर को संरक्षित करें, और केवल सक्रिय ड्रैग के दौरान पुन: ऑर्डर सामर्थ्य दिखाएं। जब तक स्वतंत्र पैच, परीक्षण और ब्राउज़र साक्ष्य जमे नहीं हो जाते, तब तक ऐतिहासिक सुविधा या बाद के परिशोधन का निरीक्षण न करें।

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

कार्यान्वयन के दौरान, एजेंट को एक महत्वपूर्ण मुद्दा मिला। पुराने उत्पाद को यह याद था कि किन एजेंटों को पिन किया गया था, लेकिन उसे उनका ऑर्डर याद नहीं था। ड्रैग इंटरेक्शन सही दिख सकता है और रिफ्रेश के बाद रीसेट हो सकता है।

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

कार्यान्वयन वितरण ने दो डेस्कटॉप स्थितियाँ दिखाईं जिनकी मुझे समीक्षा करने की आवश्यकता थी। मैं उन्हें पूरी चौड़ाई में दिखाता हूं ताकि इंटरफ़ेस पठनीय बना रहे। मोबाइल व्यवहार बाद में वॉकथ्रू में उच्च-घनत्व वाले फ़ोन कैप्चर के रूप में दिखाई देता है।

डेस्कटॉप विश्राम अवस्था

सक्रिय पुनर्क्रमण

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

4. वास्तविक उत्पाद की समीक्षा करने के लिए ui-walkthrough का उपयोग करें

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

एजेंट के पास एक अंतर्निहित Agent Browser है, इसलिए मैं यह काम उसे सौंप सकता हूं।

वर्कफ़्लो के दो मुख्य चरण हैं:

1. पहले परिदृश्यों को सूचीबद्ध करें। एजेंट डिज़ाइन और कार्यान्वयन दावों को एक चेकलिस्ट में बदल देता है।
2. चेकलिस्ट चलाएँ और साक्ष्य संलग्न करें। यह तैनात पूर्वावलोकन में प्रत्येक परिदृश्य का प्रदर्शन करता है और प्रत्येक सार्थक स्थिति के लिए एक स्क्रीनशॉट के साथ PASS, FAIL, या BLOCKED लौटाता है।

यह निर्देश समीक्षा के बारे में क्या बदलता है

• एजेंट क्लिक शुरू करने से पहले परिदृश्यों को सूचीबद्ध करता है।
• यह अपने अंतर्निहित Agent Browser के माध्यम से वास्तविक तैनात घटक का उपयोग करता है।
• यह प्रत्येक सार्थक स्थिति के लिए एक स्क्रीनशॉट कैप्चर करता है।
• यह प्रत्येक चेकपॉइंट को PASS, FAIL, या BLOCKED को चिह्नित करता है।
• यह कभी भी नकली साक्ष्य के पीछे अनुपलब्ध स्थिति को नहीं छिपाता है।

यह मैन्युअल क्लिकिंग को एक संगठित समीक्षा पैकेज में बदल देता है। मैं इच्छित व्यवहार, परिणाम और साक्ष्य को एक साथ देख सकता हूँ।

पूरा निर्देश नीचे है. पाठक के सामने स्पष्टता के लिए मैंने आंतरिक निर्भरता नाम का अनुवाद "अंतर्निहित Agent Browser" में कर दिया है; वर्कफ़्लो तर्क अन्यथा अपरिवर्तित है.

ui-walkthrough का पूरा मूल निर्देश

# यूआई वॉकथ्रू

इसके वास्तविक प्रति-पीआर पूर्वावलोकन में vm0/Zero फ्रंट-एंड सुविधा का एंड-टू-एंड विज़ुअल QA। यह वर्कफ़्लो परिभाषित करता है कि क्या सत्यापित करना है और परिणाम की रिपोर्ट कैसे करनी है; यह यूआई-ऑपरेशन टूलींग को परिभाषित नहीं करता है।

## आवश्यक निर्भरता: अंतर्निहित Agent Browser

प्रत्येक यूआई इंटरैक्शन के लिए सत्य के एकल स्रोत के रूप में अंतर्निहित Agent Browser का उपयोग करें, जिसमें शामिल हैं:

- प्रति-पीआर पूर्वावलोकन की खोज करना और खोलना।
- पूर्वावलोकन-सुरक्षा प्रबंधन और सत्र सेटअप।
- साइन-अप, ओटीपी, ऑनबोर्डिंग, स्ट्राइप टेस्ट चेकआउट और लाइव ऐप तक पहुंचना।
- सुविधा स्विच सक्षम करना.
- नेविगेट करना, नियंत्रणों के साथ इंटरैक्ट करना, परीक्षण या नकली डेटा की आपूर्ति करना, स्क्रीनशॉट कैप्चर करना, कलाकृतियों को अपलोड करना, समस्या निवारण और सफाई करना।

कोई भी यूआई कार्रवाई करने से पहले वर्तमान अंतर्निहित Agent Browser निर्देशों को पढ़ें और उनका पालन करें। इस वर्कफ़्लो में रनटाइम-विशिष्ट कमांड, इंजन सेटअप, चयनकर्ता यांत्रिकी, पृष्ठ-संदर्भ स्क्रिप्ट, सत्र प्रबंधन, या प्रक्रिया-क्लीनअप विधियों की नकल न करें। यदि अंतर्निहित Agent Browser बदलता है, तो इसके वर्तमान निर्देशों को प्राथमिकता दी जाती है।

## कब उपयोग करें

- इसके परिनियोजित पूर्वावलोकन में vm0 पुल अनुरोध के UI के माध्यम से चलें।
- इन-ऐप सुविधा को सत्यापित करें जिसके लिए प्रमाणीकरण, ऑनबोर्डिंग, बिलिंग, फीचर स्विच या वास्तविक चैट थ्रेड की आवश्यकता होती है।
- लाइव एप्लिकेशन में काम कर रहे फीचर के विश्वसनीय स्क्रीनशॉट या एक छोटा वॉकथ्रू वीडियो कैप्चर करें।

## वॉकथ्रू वर्कफ़्लो

### 1. लक्ष्य और दायरा स्थापित करें

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

### 2. सुविधा तक पहुंचें

पूर्वावलोकन दर्ज करने और लाइव सुविधा स्थिति तक पहुंचने के लिए अंतर्निहित Agent Browser का उपयोग करें। प्रमाणीकरण, ऑनबोर्डिंग, बिलिंग, फीचर स्विच और पूर्वावलोकन-केवल बाईपास के लिए इसके वर्तमान नियमों का पालन करें।

यदि बाईपास का उपयोग किया जाता है, तो अंतिम रिपोर्ट में इसका खुलासा करें। जब ऑनबोर्डिंग का परीक्षण चल रहा हो तो कभी भी ऑनबोर्डिंग बाईपास का उपयोग न करें।

### 3. दृश्य स्थिति मैट्रिक्स को परिभाषित करें

बातचीत करने से पहले, राज्यों के सबसे छोटे सेट को सूचीबद्ध करें जो साबित करता है कि फीचर काम करता है। लागू आइटम शामिल करें:

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

सामान्य धूम्रपान परीक्षण की अपेक्षा वास्तविक बदले हुए व्यवहार का अभ्यास करने को प्राथमिकता दें।

### 4. लाइव कंपोनेंट को ड्राइव करें

सभी इंटरैक्शन और परीक्षण-डेटा तकनीकों के लिए अंतर्निहित Agent Browser का उपयोग करें।

नकली या इंजेक्ट की गई सामग्री का उपयोग केवल वास्तविक अनुप्रयोग घटक को नियतात्मक दृश्य स्थिति में रखने के लिए किया जा सकता है। मूल्यांकन किए जा रहे घटक, स्टाइल और इंटरैक्शन को पीआर पूर्वावलोकन से लाइव कार्यान्वयन रहना चाहिए।

प्रत्येक उपहासित राज्य के लिए:

- रिकॉर्ड करें कि किस सामग्री या शर्त का मज़ाक उड़ाया गया था।
- नकली सामग्री को वास्तविक अनुप्रयोग व्यवहार से अलग करें।
- यह कभी न समझें कि नकली पाठ या डेटा किसी मॉडल या उत्पादन स्रोत से आया है।
- जहां भी पर्यावरण अनुमति दे, वास्तविक नियंत्रण और डाउनस्ट्रीम वायरिंग का प्रयोग करें।

### 5. सबूत कैप्चर करें

प्रमुख चौकियों के साक्ष्य को पकड़ने और अपलोड करने के लिए अंतर्निहित Agent Browser का उपयोग करें। प्रत्येक छवि को एक ही दृश्य को दोहराने के बजाय एक सार्थक स्थिति साबित करनी चाहिए।

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

### 6. वितरित करें और रिपोर्ट करें

प्रतिवेदन:

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

यह दावा न करें कि सुविधा सत्यापित है जब तक कि लाइव पूर्वावलोकन प्रवाह का उपयोग नहीं किया गया हो और सबूत कैप्चर नहीं किए गए हों। यदि पूर्वावलोकन अनुपलब्ध है, तो स्थानीय या स्थिर प्रतिकृति को प्रतिस्थापित करने के बजाय तैनाती साक्ष्य के साथ `BLOCKED` की रिपोर्ट करें।

यह फीचर-विशिष्ट वॉकथ्रू प्रॉम्प्ट था:

/ui-walkthrough

एकमात्र ब्राउज़र सत्य के रूप में अंतर्निहित Agent Browser के माध्यम से तैनात पूर्वावलोकन का उपयोग करें। फ़ीचर-ऑफ़ साइडबार, 68px और 300px स्प्लिट, डेस्टिनेशन ऑर्डर, होवर स्टेट्स, पांच पिन किए गए स्लॉट, ड्रैग-ओनली हैंडल, निरंतर रीऑर्डर, थ्रेड चयन, स्क्रॉलिंग और पूर्ण iPhone ड्रॉअर साबित करें। प्रत्येक चेकपॉइंट के लिए PASS, FAIL, या BLOCKED लौटाएँ। पहुंच से बाहर की स्थिति को प्रतिकृति से न बदलें।

इस सुविधा के लिए, एजेंट ने इन प्रश्नों के इर्द-गिर्द पूर्वाभ्यास का आयोजन किया:

• क्या सुविधा बंद होने पर भी पुराना साइडबार काम करता है?
• क्या नया डेस्कटॉप ढांचा चालू होने पर दिखाई देता है?
• क्या होवर और चयनित अवस्थाएँ दृश्यमान लेकिन शांत हैं?
• क्या पिन किए गए पांच एजेंट पढ़ने योग्य हैं?
• क्या ड्रैग शुरू होने तक पुन: क्रमित नियंत्रण छिपे रहते हैं?
• क्या नया ऑर्डर ताज़ा होने तक जीवित रहता है?
• क्या मैं वास्तविक धागों का चयन और स्क्रॉल कर सकता हूँ?
• क्या मौजूदा मोबाइल ड्रॉअर अभी भी काम करता है?
• क्या सभी नेविगेशन गंतव्य मौजूद हैं और सही क्रम में हैं?

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

परिणाम 11 PASS, 1 FAIL था।

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

परिदृश्य	परिणाम
सुविधा बंद के साथ पुराना साइडबार	PASS
नया तीन-भाग वाला डेस्कटॉप लेआउट	PASS
होवर करें और चयनित राज्य	PASS
पांच पिन किए गए एजेंट	PASS
केवल-खींचकर पुनः क्रमित मार्गदर्शन	PASS
रीफ़्रेश करने के बाद ऑर्डर सहेजा गया	PASS
थ्रेड चयन और स्क्रॉलिंग	PASS
मौजूदा मोबाइल दराज	PASS
गंतव्य सामग्री और क्रम	FAIL

अंतिम डिलीवरी बिना लेबल वाली छवियों के फ़ोल्डर के बजाय एक व्यवस्थित स्क्रीनशॉट सेट था। डेस्कटॉप कैप्चर 1440 × 900 पिक्सल हैं और फोन कैप्चर 1170 × 2532 पिक्सल है। वे नीचे एक-एक करके दिखाई देते हैं ताकि इंटरफ़ेस पठनीय बना रहे; लेख को छोड़े बिना किसी भी छवि को बड़ा करने के लिए उस पर क्लिक करें।

सुविधा बंद

सुविधा सक्षम

डेस्कटॉप लेआउट

गंतव्य होवर

पिन किया हुआ-एजेंट होवर

सक्रिय खींचें

आदेश सहेजा गया

मोबाइल दराज

इससे मुझे किसी सुविधा की संरचित तरीके से समीक्षा करने की सुविधा मिलती है। मैं इच्छित परिदृश्य, वास्तविक परिनियोजित परिणाम और साक्ष्य एक साथ देख सकता हूँ। यदि कुछ विफल हो जाता है, तो मुझे ठीक-ठीक पता है कि काम कहाँ लौटना चाहिए।

एक टीम इस AI उत्पाद डिज़ाइन वर्कफ़्लो को कैसे अपनाती है

पूरी प्रक्रिया संक्षिप्त है. टीम के साथी मेमोरी से प्रक्रिया को फिर से बनाने के बजाय प्रत्येक चरण को साझा Zero वर्कफ़्लो के रूप में सहेज सकते हैं।

अवस्था	इनपुट	उत्पादन
ui-design	वर्तमान स्क्रीन, समस्या, लक्ष्य और बाधाएँ	एक अनुशंसित दिशा, नौ विकल्प और एक चयनित डिज़ाइन रिकॉर्ड
ui-implement	चयनित डिज़ाइन रिकॉर्ड	समीक्षा योग्य कोड परिवर्तन और मुख्य स्थितियों के स्क्रीनशॉट
ui-walkthrough	तैनात सुविधा और उसका अपेक्षित व्यवहार	PASS, FAIL, या BLOCKED स्क्रीनशॉट के साथ एक व्यवस्थित परिदृश्य सूची

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

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

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

अक्सर पूछे जाने वाले प्रश्न

आप AI उत्पाद डिज़ाइन वर्कफ़्लो कैसे बनाते हैं?

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

क्या उत्पाद डिजाइनर Figma के बिना काम कर सकते हैं?

हां, जब उत्पाद में पहले से ही स्थिर घटक, पेज टेम्पलेट और इंटरैक्शन पैटर्न हों। Figma एक नई दृश्य भाषा या अपरिचित बातचीत के लिए उपयोगी रहता है। मुद्दा Figma पर प्रतिबंध लगाने का नहीं है; यह दूसरे कैनवास पर ज्ञात उत्पाद निर्णयों के पुनर्निर्माण से बचने के लिए है।

क्या AI उत्पाद डिजाइनरों की जगह ले रहा है?

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