एआई डिज़ाइन के 3 स्तर... केवल कुछ ही लोग स्तर 2 तक पहुँच पाते हैं

AAI LABS
Computing/SoftwarePhotography/Art

Transcript

00:00:00यदि आप कुछ समय से इस चैनल को देख रहे हैं, तो आप शायद जानते हैं कि हमने बहुत कुछ कवर किया है
00:00:03डिज़ाइन वर्कफ़्लो और टूल का। हम महीनों से उन सभी का परीक्षण कर रहे हैं और हमने आखिरकार पता लगा लिया है
00:00:08कि एक ही मॉडल आपको ऐसी चीज़ क्यों दे सकता है जो पूरी तरह से कस्टम दिखती है या ऐसी चीज़ जो तुरंत
00:00:13एआई जनरेटेड लगती है। यह तीन स्तरों पर निर्भर करता है। स्तर एक एक सिंगल पेज डिज़ाइन करना है और
00:00:19एक बात है जिसे ज्यादातर लोग छोड़ देते हैं, यही कारण है कि उनका आउटपुट सामान्य दिखता है। स्तर
00:00:23दो वह है जहाँ आप पेज डिज़ाइन करना बंद कर देते हैं और सिस्टम डिज़ाइन करना शुरू कर देते हैं और यहाँ वर्कफ़्लो
00:00:28पूरी तरह से अलग है। और स्तर तीन यह है कि हम उस संस्करण को खोजने के लिए एक-दूसरे के खिलाफ डिज़ाइनों का परीक्षण कैसे करते हैं जो वास्तव में काम करता है
00:00:34जो कि वह हिस्सा है जिसका उपयोग हम अब हर वास्तविक प्रोजेक्ट पर करते हैं। तो स्तर एक है
00:00:39एक सिंगल पेज के लिए एक अच्छा डिज़ाइन बनाना। यह वह स्तर है जिसे अधिकांश लोग सिखाते हैं क्योंकि यह
00:00:44हर अच्छे डिज़ाइन की नींव है। हमने अपने पिछले वीडियो में बात की थी कि कैसे Opus 4.7 की डिज़ाइन
00:00:50क्षमता बहुत बेहतर हो गई है और बहुत सारा एआई स्लोप जो हम हुआ करते थे, गायब हो गया है। पहले जब हम
00:00:55इसे एक लैंडिंग पेज बनाने जैसा एक साधारण संकेत देते थे, तो यह सीधे तौर पर लेता था
00:00:59बैंगनी और सफेद थीम और इसके चारों ओर सब कुछ बनाते हैं। वह विशिष्ट पैटर्न बेहतर हो गया है। पर
00:01:04किसी भी अन्य एआई मॉडल की तरह, यह भी सुरक्षित पैटर्न में परिवर्तित हो जाता है। और हमारे सभी परीक्षणों से और
00:01:09इसके साथ प्रयोग करते हुए, हमने पाया है कि यह हर बार एक विशेष शैली में डिफ़ॉल्ट हो जाता है। तो अब जब भी
00:01:15हम वह शैली देखते हैं, तो यह एक पक्का संकेत है कि साइट Opus 4.7 से आई है और यह कुछ समय की बात है
00:01:21इससे पहले कि यह अगला एआई स्लोप बन जाए। इसलिए हमें इस वेबसाइट को बेहतर दिखाने के लिए अन्य तरीकों की आवश्यकता है।
00:01:25अब यह स्तर ज्यादातर प्रॉम्प्ट इंजीनियरिंग पर आता है और हम ऐप को कैसे निर्दिष्ट करते हैं क्योंकि
00:01:30यदि आप अपने प्रॉम्प्ट को ठीक से संरचित करते हैं, तो आप ऐप को पूरी तरह से वन शॉट कर सकते हैं। प्रॉम्प्ट शुरू होना चाहिए
00:01:35उस वेबसाइट के इरादे के साथ जिसे आप बनाने का लक्ष्य बना रहे हैं, फिर गैर-परिसम्य का उल्लेख करें, जैसे
00:01:39सटीक चीजें जो आप ऐप में चाहते हैं और आप यूआई तत्वों को कैसे दिखना चाहते हैं। उसके बाद, आप निर्दिष्ट करते हैं
00:01:44रंग प्रणाली। अब यहाँ हम OKLCH का उपयोग करते हैं, जो मूल रूप से हल्कापन, क्रोमा और ह्यू का माप है।
00:01:49सामान्य RGB या HSL के बजाय OKLCH का उपयोग करना बेहतर है क्योंकि यह रंगों का प्रतिनिधित्व करता है जिस तरह से
00:01:55मानव आँख वास्तव में उन्हें मानती है, इसलिए यह हल्कापन और संतुलन को बेहतर संभालती है। यह भी बनाता है
00:01:59चिकने ग्रेडिएंट, हेक्स कोड के विपरीत जो ऐसे उत्पन्न हो सकते हैं जो असमान दिखते हैं। अब एक बार आपके पास
00:02:04रंग योजना सेट करें, आपको कंट्रास्ट प्रवाह का भी उल्लेख करने की आवश्यकता है। कंट्रास्ट एक बहुत ही महत्वपूर्ण है
00:02:08यूआई डिज़ाइन का कारक क्योंकि यह वास्तव में एक पदानुक्रम बनाता है जो आपकी आँखों को उन चीज़ों की ओर निर्देशित करता है
00:02:13मायने रखता है। स्पष्ट कंट्रास्ट के बिना, मॉडल प्रत्येक तत्व को समान रूप से महत्वपूर्ण मानता है,
00:02:18जिससे विजुअल पदानुक्रम बनाना मुश्किल हो जाता है। और यह सुनिश्चित करने के लिए कि वेबसाइट की तरह न दिखे
00:02:22एआई स्लोप, आपको प्रॉम्प्ट से टाइपोग्राफी को भी नियंत्रित करना होगा, ताकि आप परिभाषित करें कि कौन से फोंट प्रतिबंधित हैं
00:02:27एआई स्लोप के कारण और डिज़ाइन के विभिन्न क्षेत्रों में किन का उपयोग करना है। इंटर और गीस्ट जैसे फ़ॉन्ट
00:02:33एआई स्लोप गिवअवे बन गए हैं क्योंकि हर एजेंट डिफ़ॉल्ट रूप से उनके पास पहुँचता है, इसलिए उन्हें बाहर बुला रहा है
00:02:38स्पष्ट रूप से मॉडल को कहीं और देखने के लिए मजबूर करता है। फिर आप वेबसाइट के लेआउट और ताल को परिभाषित करते हैं,
00:02:42लेकिन पहले आपको समरूपता और विषमता के बारे में जानने की जरूरत है। सममित लेआउट में घटक होते हैं
00:02:47संतुलित रूप के साथ ग्रिड पर समान रूप से रखा गया है, जो पेशेवर और के लिए अधिक उपयुक्त है
00:02:51सीधे डिज़ाइन. लेकिन अधिक कलात्मक रूप के लिए, विषमता के लिए जाएं क्योंकि यह आपको अधिक जगह देता है
00:02:56प्रयोग करने के लिए. यह तब विशेष रूप से अच्छा होता है जब आपको नकारात्मक स्थान का उपयोग करने की आवश्यकता होती है क्योंकि इससे डिज़ाइन होता है
00:03:01सांस लो। आप जिस प्रकार का उत्पाद बना रहे हैं वह तय करता है कि कौन सा बेहतर फिट बैठता है। फिर सभी अनुभागों को परिभाषित करें
00:03:06जो आप चाहते हैं, जो सामग्री आप उपयोग करेंगे, और वेबसाइट को उत्तरदायी रूप से कैसे व्यवहार करना चाहिए। और सबसे महत्वपूर्ण बात
00:03:11हिस्सा एंटी-पैटर्न का उल्लेख कर रहा है। ये एआई स्लोप की पहचान हैं जैसे साधारण केंद्रित सीटीए,
00:03:17ल्यूसिड आइकन, और ग्लासमाफिक डिज़ाइन के साथ ग्रेडिएंट्स। इसलिए एक बार जब आप यह प्रॉम्प्ट क्लाउड कोड को दे देते हैं या
00:03:22आप जिस किसी भी एजेंट का उपयोग कर रहे हैं, वह आपके ऐप का विश्लेषण करेगा और कार्यान्वयन विवरण के माध्यम से जाएगा। तब यह होगा
00:03:27कलात्मक लक्ष्य और नकारात्मक स्थान के उचित उपयोग के कारण विषमता के साथ, जैसा कि संकेत में वर्णित है, ऐप का निर्माण करें।
00:03:34तो स्तर 2 साइट के प्रत्येक पृष्ठ पर एक ही डिज़ाइन रखने के बारे में है क्योंकि अधिकांश एजेंट जनरेट किए गए ऐप
00:03:40लैंडिंग पेज को छोड़ते ही अलग हो जाते हैं। अक्सर एजेंटों के साथ पूरे ऐप जनरेट करते समय, आप कर सकते हैं
00:03:45बिल्कुल इसका सामना करना पड़ा है। लैंडिंग पेज ज्यादातर काफी अच्छा है, लेकिन जब आप अन्य पृष्ठों पर जाते हैं,
00:03:50वे यूआई शैली का उतनी सुसंगतता से पालन नहीं करते जितना उन्हें करना चाहिए। डैशबोर्ड विभिन्न के साथ समाप्त होता है
00:03:55बटन शैलियाँ, अलग रिक्ति, अलग टाइपोग्राफी, लगभग ऐसे जैसे एजेंट भूल गया हो कि वह निर्माण कर रहा है
00:04:00वही ऐप। अन्य पृष्ठ ऐसे दिखते हैं जैसे वे एक ही साइट का हिस्सा भी नहीं हैं और यह दूर हो जाता है
00:04:05कि साइट किसी एजेंट द्वारा बनाई गई थी। कभी-कभी डिज़ाइन प्रमाणीकरण पृष्ठों पर रहता है, लेकिन फिर चालू होता है
00:04:10डैशबोर्ड पर, शैली पूरी तरह से टूट जाती है। तो इसके लिए, आपको सबसे महत्वपूर्ण में से दो बनाने की जरूरत है
00:04:15फ़ाइलें, Claude.md और Design.md। ये दोनों फाइलें वही हैं जो पूरी साइट पर डिज़ाइन को सुसंगत रखती हैं।
00:04:21Claude.md में, जैसा कि हमने कई बार बात की है, आप केवल अपनी प्रोजेक्ट जानकारी डालते हैं, डिज़ाइन नहीं।
00:04:27ऐसा इसलिए है क्योंकि फ़ाइल हर समय सत्र में लोड रहती है और वहाँ डिज़ाइन सामग्री केवल करेगी
00:04:32जब एजेंट किसी अन्य चीज़ पर काम कर रहा हो तो उसे विचलित करें, लेकिन यह अभी भी मुख्य फ़ाइल है क्योंकि यह रहता है
00:04:37प्रोजेक्ट का संदर्भ जो अच्छे डिज़ाइन को सूचित करता है। डिज़ाइन के लिए ही, हमें एक अलग फ़ाइल की आवश्यकता है
00:04:42जो विजुअल सिस्टम, लेआउट, रंगों, टाइपोग्राफी और सभी के लिए सब कुछ उल्लेख करता है
00:04:47विवरण हमने स्तर 1 में शामिल किया। Design.md उस प्रकार की फ़ाइल होनी चाहिए जिसे कोई भी एजेंट उठा सके और
00:04:52तुरंत समझें कि विजुअल सिस्टम क्या है। और पिछले स्तर की तरह, आपको इसकी आवश्यकता है
00:04:57यहाँ भी OKLCH में रंग प्रणाली को परिभाषित करें। इन दोनों फाइलों को बनाने के लिए, हमने क्लाउड कोड को एक विस्तृत जानकारी दी
00:05:03प्रत्येक फ़ाइल की क्या आवश्यकता है और इसने हमारे लिए दोनों फ़ाइलें जनरेट कीं। Claude.md छोटा है, बस
00:05:09प्रोजेक्ट का विवरण युक्त। Design.md रंग कोड सहित प्रत्येक विवरण के साथ लंबा है,
00:05:15टाइपोग्राफी विकल्प, और बाकी सब कुछ। लेकिन वह Design.md का अंत नहीं है। हमें चालू रखना होगा
00:05:20समय के साथ इसे परिष्कृत करना। इसलिए हम शुरुआत में एक लाइन रखते हैं, जो एजेंट को किसी भी नए डिज़ाइन मान को जोड़ने के लिए कहती है
00:05:25इसे इस फ़ाइल में मिलता है। उस तरह, प्रत्येक सत्र डिज़ाइन के अधिक परिष्कृत संस्करण से शुरू होता है
00:05:30सिस्टम पिछले वाले की तुलना में। लेकिन सिर्फ क्लाउड को Design.md बनाने देना ही काफी नहीं है,
00:05:35क्योंकि यह जो उत्पन्न करता है वह सर्वोत्तम प्रथाओं का ठीक से पालन नहीं करता है। Google ने अपना ओपन-सोर्स किया है
00:05:40Design.md फ़ाइल के लिए उनका टेम्पलेट। टेम्पलेट में आपके Design.md को क्रॉस-सत्यापित करने के लिए कमांड भी शामिल हैं
00:05:46इसके खिलाफ और किसी भी त्रुटि को फ्लैग करें। इसलिए आप Design.md को परफेक्ट बनाने के लिए उन कमांड्स का उपयोग करके अपने एजेंट को प्रेरित कर सकते हैं।
00:05:51और यह अभी भी स्तर 2 का अंत नहीं है। इस स्तर पर पर्याप्त अच्छे डिज़ाइन तैयार करने के लिए,
00:05:56आपको मौजूदा डिज़ाइन सिद्धांतों के विरुद्ध उनका ऑडिट भी करना होगा। इसके लिए कई हैं
00:06:00ओपन-सोर्स कौशल जो बिल्कुल यही करते हैं। आप उनमें से किसी का भी उपयोग कर सकते हैं, लेकिन हम VersaLab के कौशल का उपयोग करते हैं,
00:06:06क्योंकि कौशल के अंदर सभी सिद्धांतों को हार्ड-कोड करने के बजाय, यह एक बाहरी स्रोत की ओर इशारा करता है
00:06:11कि वे सक्रिय रूप से रखरखाव कर रहे हैं। इसलिए सिद्धांत वर्तमान सर्वोत्तम प्रथाओं के साथ अद्यतित रहते हैं इसके बजाय
00:06:16कौशल पहली बार लिखे जाने पर अत्याधुनिक जो कुछ भी था, उस पर凍结 किया जा रहा है। आप इस कौशल को स्थापित करते हैं
00:06:21प्रोजेक्ट में, इसे चलाएं, और आपका डिज़ाइन पहले की तुलना में बहुत बेहतर आकार में बाहर आता है। लेकिन इससे पहले कि हम
00:06:25आगे बढ़ते हैं, हमारे प्रायोजक द्वारा एक शब्द है। तो मैंने हाल ही में ZillysCloud का उपयोग करना शुरू किया और मुझे बताने दें
00:06:30आप क्यों। अधिकांश RAG ऐप्स मुट्ठी भर डॉक्स के साथ ठीक काम करते हैं, लेकिन जिस क्षण आप वास्तविक डेटा में फेंकते हैं,
00:06:35वे अलग होने लगते हैं क्योंकि सेटअप को उस तरह के भार को संभालने के लिए डिज़ाइन नहीं किया गया था।
00:06:40Milvus GitHub पर 44,000 से अधिक सितारों के साथ सबसे अधिक स्टार वाला ओपन-सोर्स वेक्टर डेटाबेस है,
00:06:46और इसे उस तरह کے भार को संभालने के लिए बनाया गया है, लेकिन सेल्फ-होस्टिंग का मतलब बुनियादी ढांचें का खुद प्रबंधन करना है।
00:06:51तो यहीं पर ZillysCloud आता है, उसी एपीआई के साथ पूरी तरह से प्रबंधित संस्करण जो ऊपर है
00:06:5610 गुना तेज, और आप बिना एक भी लाइन कोड बदले इसे मिनटों में सेट कर सकते हैं।
00:07:00इसलिए हमने ZillysCloud पर एक सिमेंटिक खोज क्वेरी चलाई, और परिणाम वास्तव में प्रासंगिक हैं क्योंकि यह
00:07:05केवल कीवर्ड ही नहीं बल्कि अर्थ को समझता है, और एक बड़े के साथ भी प्रतिक्रिया समय लगभग तुरंत होता है
00:07:11डेटासेट। हमने एक लेख को देखते हुए एक अनुशंसा क्वेरी भी चलाई। इसने पाँच सबसे समान लोगों को पाया
00:07:16पूरे डेटासेट में एक सेकंड से भी कम समय में समानता द्वारा स्थान दिया गया। और डैशबोर्ड आपके क्लस्टर को ट्रैक करता है
00:07:21प्रदर्शन, भंडारण उपयोग, और वास्तविक समय में संग्रह और इकाई गिनती सहित डेटा मेट्रिक्स। कोई क्रेडिट कार्ड नहीं
00:07:27आवश्यक है, बस पिन की गई टिप्पणी में दिए गए लिंक पर क्लिक करें और ZillysCloud को निःशुल्क आज़माएं।
00:07:31तो स्तर तीन प्रोग्रामेटिक रूप से डिज़ाइन का परीक्षण करने के बारे में है, उसी तरह जिस तरह इंजीनियर सत्यापित करते हैं
00:07:36TDD के साथ कोड। अब हम जानते हैं कि आप उस तरह से परीक्षणों को दृष्टिगत रूप से नहीं लिख सकते जिस तरह से आप कोड के साथ करते हैं। कोड के साथ,
00:07:41हर चीज़ के लिए स्पष्ट इनपुट और आउटपुट होते हैं। डिज़ाइन में ऐसा नहीं है क्योंकि यह अधिक व्यक्तिपरक है
00:07:46और इसे कोड की तरह मात्रा निर्धारित नहीं किया जा सकता है, लेकिन सिर्फ इसलिए कि यह व्यक्तिपरक है इसका मतलब यह नहीं है कि हम नहीं लिख सकते
00:07:51इसके लिए परीक्षण. कोड के लिए TDD के काम करने का कारण यह है कि परीक्षण यह तय करता है कि व्यवहार क्या होना चाहिए,
00:07:57और कार्यान्वयन को उस पिन को संतुष्ट करना होगा। यही विचार अलग-अलग के साथ डिज़ाइन पर लागू होता है
00:08:01पिन के प्रकार। जिस ऐप का हम निर्माण कर रहे थे, उसमें पहला चरण पहले जैसा ही था,
00:08:05कार्यान्वयन के बारे में सोचने से पहले clod.md और design.md फ़ाइलें बनाना। अब परीक्षण हमेशा होने चाहिए
00:08:12कोड से पहले लिखा जाना चाहिए, इस तरह कार्यान्वयन वास्तव में उनके खिलाफ परीक्षण किया जा सकता है। यदि हम परीक्षण लिखते हैं
00:08:17कार्यान्वयन के बाद, एजेंट सुस्त हो जाता है। यह सिर्फ परीक्षण के मामले लिखता है जो अनुकूलित करते हैं
00:08:22मौजूदा कोड, क्योंकि वह कोड पहले से ही उसके संदर्भ में है। पहले परीक्षण लिखने से मजबूर होता है
00:08:27कार्यान्वयन परीक्षण के अनुकूल होने के बजाय परीक्षण के अनुकूल होना चाहिए। इसलिए हम डिज़ाइन का उपयोग करते हैं
00:08:32परीक्षणों के लिए सत्य के स्रोत के रूप में फ़ाइलें क्योंकि इन फ़ाइलों में सभी एंटी-पैटर्न शामिल हैं जिन्हें हम कर सकते हैं
00:08:37इसके विरुद्ध प्रोग्रामेटिक रूप से सत्यापन करें। design.md में हर एंटी-पैटर्न एक परीक्षण मामला बन जाता है। हर रंग का नियम,
00:08:44हर रिक्ति की बाधा, हर टाइपोग्राफी पसंद को एक प्रोग्रामेटिक जांच मिलती है। हमने क्लाउड कोड को एक दिया
00:08:49हर उस अनुभाग को निर्दिष्ट करते हुए परीक्षण मामलों को लिखने के लिए विस्तृत संकेत जिस पर उसे ध्यान केंद्रित करना चाहिए। इसके अलावा अगर आप कर रहे हैं
00:08:54हमारी सामग्री का आनंद ले रहे हैं, हाई बटन दबाने पर विचार करें क्योंकि इससे हमें ऐसी और सामग्री बनाने में मदद मिलती है
00:08:59यह और अधिक लोगों तक पहुँचें। आपके प्रॉम्प्ट के साथ, यह ऐप के डिज़ाइन के लिए सभी परीक्षण मामले लिखेगा
00:09:04यह कई प्रकार के परीक्षण लिखता है। स्थिर परीक्षण हैं, जो सीधे तौर पर जांच करते हैं
00:09:09एंटी-पैटर्न जिसका हमने प्रॉम्प्ट में उल्लेख किया है। फिर दृश्य परीक्षण है, जो मूल रूप से उपयोग करता है
00:09:14प्ले राइट के नीचे और साइट को वृद्धिशील रूप से बेहतर बनाने के लिए प्रतिगमन परीक्षण चलाता है। यह भी करेगा
00:09:19अन्य घटकों के लिए परीक्षण मामले लिखें और सहायक कार्य जैसे स्कैन और रिपोर्ट। अब ये परीक्षण
00:09:24स्थिर एंटी-पैटर्न की जाँच करें, लेकिन डिज़ाइन परीक्षण को किसी अन्य चीज़ की आवश्यकता है। इसके लिए है
00:09:28Visly Test नामक एक अन्य टूल, जो मूल रूप से एक CLI है जो UI के लिए TDD का संचालन करता है। यह जिस तरह से काम करता है वह यह है
00:09:34यह स्थानीय TDD चलाता है, जहाँ आप कोड बदलते ही डिज़ाइन की जाँच कर सकते हैं। तो आप इसकी निगरानी कर सकते हैं
00:09:39एजेंट की स्व-निगरानी पर भरोसा करने के बजाय स्वयं अंतर। आपको इसके साथ बेहतर अंतर भी मिलता है
00:09:44मेटाडेटा और अन्य विवरण, जो समीक्षा को तेज बनाते हैं। उस मेटाडेटा के बिना, आप केवल दो की तुलना कर रहे हैं
00:09:49स्क्रीनशॉट साथ-साथ और उम्मीद है कि आप अंतर देख लेंगे। इसके साथ, Visly आपको बिल्कुल बताता है कि कौन सा
00:09:54पिक्सेल बदल गए और कितने से। इसका उपयोग करने के लिए, पहले डॉक्स से इंस्टॉल कमांड चलाकर CLI इंस्टॉल करें।
00:10:00एक बार जब यह सेट हो जाता है और आरंभ हो जाता है, तो यह जाने के लिए तैयार है। अब बस क्लाउड कोड खोलें और इसे उपयोग करने के लिए कहें
00:10:05TDD और परीक्षण माध्यम के रूप में Visly CLI का उपयोग करके UI के जिस भी हिस्से को आप चाहते हैं उसे लागू करें। कब
00:10:10आप Visly TDD कमांड चलाते हैं, एक स्थानीय सर्वर शुरू होता है और स्क्रीनशॉट परिवर्तनों की निगरानी करता है। भेजने के लिए
00:10:16स्क्रीनशॉट, क्लाउड मूल रूप से Visly नाम से अलग परीक्षण लिखता है। ये परीक्षण नाटककार का उपयोग करते हैं
00:10:21छवियों को सर्वर पर दर्शक के पास धकेलने के लिए स्क्रीनशॉटिंग तंत्र। वहां से, आप अनुमोदन या अस्वीकार कर सकते हैं
00:10:27डिज़ाइन और पिछले संस्करण से तुलना करते हुए अंतर देखें। प्रत्येक अस्वीकृत अंतर प्रतिक्रिया बन जाता है
00:10:32एजेंट अगले पास को समायोजित करने के लिए उपयोग करता है। कुछ पुनरावृत्तियों पर, डिज़ाइन उस चीज़ में परिवर्तित हो जाता है जो आप वास्तव में करते हैं
00:10:37चाहते हैं इसके बजाय एजेंट को क्या लगता है कि आप चाहते हैं। अब यहाँ प्रयुक्त संकेतों को AI Labs Pro में पाया जा सकता है
00:10:43इस वीडियो के लिए और हमारे सभी पिछले वीडियो के लिए जहाँ से आप इसे अपने लिए डाउनलोड और उपयोग कर सकते हैं
00:10:47परियोजनाओं। यदि आपको हमारे काम में मूल्य मिला है और आप चैनल का समर्थन करना चाहते हैं, तो ऐसा करने का यह सबसे अच्छा तरीका है।
00:10:52विवरण में लिंक. यह हमें इस वीडियो के अंत में लाता है। यदि आप चैनल का समर्थन करना चाहते हैं
00:10:57और इस तरह के वीडियो बनाना जारी रखने में हमारी मदद करें, आप नीचे दिए गए सुपर थैंक्स बटन का उपयोग करके ऐसा कर सकते हैं। जैसा
00:11:02हमेशा, देखने के लिए धन्यवाद और मैं आपसे अगले में मिलूंगा।

Key Takeaway

एआई अनुप्रयोगों में सामान्य और दोहराए जाने वाले डिज़ाइन पैटर्न को समाप्त करने के लिए ठीक से संरचित प्रॉम्प्ट, Design.md फ़ाइलों और Visly CLI आधारित यूआई परीक्षणों के तीन-स्तरीय ढांचे का उपयोग किया जाता है।

Highlights

  • एआई जनरेटेड डिज़ाइन पैटर्न (एआई स्लोप) से बचने के लिए ओकेएलसीएच (OKLCH) रंग प्रणाली का उपयोग किया जाता है, जो मानव आंख की धारणा के अनुसार हल्कापन और क्रोमा को संतुलित करती है।

  • एकाधिक पृष्ठों वाले ऐप में डिज़ाइन की एकरूपता बनाए रखने के लिए Claude.md और Design.md नामक दो विशिष्ट कॉन्फ़िगरेशन फ़ाइलों का उपयोग किया जाता है।

  • VersaLab जैसे बाहरी रूप से अनुरक्षित कौशल का उपयोग करके डिज़ाइन सिद्धांतों का ऑडिट करने से वर्तमान सर्वोत्तम प्रथाओं का पालन सुनिश्चित होता है।

  • यूआई डिज़ाइन के लिए टेस्ट-ड्रिवन डेवलपमेंट (TDD) लागू करने हेतु Visly CLI का उपयोग किया जाता है, जो स्थानीय सर्वर पर स्क्रीनशॉट अंतर और पिक्सेल-स्तरीय बदलावों को ट्रैक करता है।

Timeline

एआई डिज़ाइन के स्तर और प्रॉम्प्ट-आधारित यूआई निर्माण

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

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

सिस्टम डिज़ाइन, Design.md फ़ाइलें और डिज़ाइन ऑडिट

  • संपूर्ण ऐप के सभी पृष्ठों पर यूआई शैली की सुसंगतता बनाए रखने के लिए Claude.md और Design.md फ़ाइलों का उपयोग किया जाता है।
  • Design.md फ़ाइल में रंग प्रणालियाँ, टाइपोग्राफी और विजुअल सिस्टम के सभी विवरण शामिल होते हैं, जिसे Google के ओपन-सोर्स टेम्पलेट से सत्यापित किया जाता है।
  • VersaLab जैसे बाहरी रूप से अनुरक्षित कौशल का उपयोग करने से डिज़ाइन सिद्धांत वर्तमान सर्वोत्तम प्रथाओं के साथ अद्यतित रहते हैं।

अधिकांश एआई एजेंट लैंडिंग पेज के बाद अन्य पृष्ठों (जैसे डैशबोर्ड या प्रमाणीकरण पृष्ठ) पर शैली की सुसंगतता खो देते हैं। इस समस्या को हल करने के लिए प्रोजेक्ट संदर्भ के वास्ते Claude.md और दृश्य नियमों के वास्ते Design.md का उपयोग किया जाता है। इसके अतिरिक्त, बड़े डेटासेट और तेज सिमेंटिक खोज के लिए Milvus और ZillysCloud जैसे प्रबंधित वेक्टर डेटाबेस वास्तुकला को समर्थन प्रदान करते हैं।

प्रोग्रामेटिक डिज़ाइन परीक्षण और Visly CLI का उपयोग

  • कोड की तरह डिज़ाइन के लिए टेस्ट-ड्रिवन डेवलपमेंट (TDD) लागू करने हेतु कार्यान्वयन से पहले परीक्षण मामले लिखे जाते हैं।
  • Design.md फ़ाइल में मौजूद प्रत्येक एंटी-पैटर्न, रंग नियम और रिक्ति बाधा को स्थिर और दृश्य परीक्षण मामलों में बदला जाता है।
  • Visly CLI एक स्थानीय सर्वर चलाकर स्क्रीनशॉट परिवर्तनों की निगरानी करता है और पिक्सेल-स्तरीय अंतर को सटीक रूप से ट्रैक करता है।

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

Community Posts

No posts yet. Be the first to write about this video!

Write about this video