Claude, Cursor, ਅਤੇ ਹੋਰਾਂ ਲਈ ਸੈਂਕੜੇ ਤਿਆਰ-ਕੀਤੇ ਹੁਨਰ ਬ੍ਰਾਊਜ਼ ਕਰੋ।
गेम यूआई इंडी डेव का सबसे कठिन हिस्सा है (और कोई भी इसके बारे में बात नहीं करता)
अधिकांश इंडी डेव दो सप्ताह में एक वर्किंग गेम प्रोटोटाइप भेजते हैं। फिर वे अगले तीन महीने यूआई पर अटके रह जाते हैं। बटन जो प्रोग्रामर आर्ट की तरह दिखते हैं। कैमरा से लड़ने वाले एचयूडी ओवरले। position: absolute और प्रार्थनाओं के साथ निर्मित इन्वेंट्री ग्रिड। Vibe Skills पर गेम यूआई के लिए AI स्किल्स एक ही सिटिंग में ब्राउज़र गेम के लिए सुसंगत मेनू सिस्टम, एचयूडी और ओवरले उत्पन्न करते हैं - ताकि आप गेम भेज सकें, न कि सेटिंग्स स्क्रीन।
यह गाइड बताती है कि यूआई क्यों रिटेंशन तय करता है, हर गेम को जिन छह यूआई सतहों की आवश्यकता होती है, Vibe Skills पर उपलब्ध AI गेम यूआई स्किल्स, और एक फुल यूआई किट भेजने के लिए एक वीकेंड वर्कफ़्लो।
Claude, Cursor, ਅਤੇ ਹੋਰਾਂ ਲਈ ਸੈਂਕੜੇ ਤਿਆਰ-ਕੀਤੇ ਹੁਨਰ ਬ੍ਰਾਊਜ਼ ਕਰੋ।
गेम यूआई क्यों रिटेंशन तय करता है
खिलाड़ी आपके गेम को पहले 90 सेकंड में जज करते हैं, और उन सेकंडों में से अधिकांश यूआई के अंदर बिताए जाते हैं। मेन मेन्यू, सेटिंग्स, कंट्रोल संकेत, पहला एचयूडी जो वे गेम शुरू होने पर देखते हैं। यदि यूआई जंकी महसूस होता है, तो गेमप्ले को कभी मौका नहीं मिलता।
ध्यान में रखने योग्य कुछ संख्याएँ:
- 38% खिलाड़ी पहले सत्र में एक ब्राउज़र गेम छोड़ देते हैं यदि मेन मेन्यू टूटा हुआ या अनस्टाइलिश महसूस होता है (itch.io प्लेटेस्ट डेटा, 2025)।
- हॉलो नाइट्स का मेन मेन्यू 4 बटन, हाथ से खींचा हुआ है, और 60fps पर चलता है - और यह उन सबसे अधिक उद्धृत कारणों में से एक है जो खिलाड़ी पहले 30 मिनट के क्रूरता से बचे रहते हैं।
- सेलेस्टे की पॉज़ स्क्रीन 3 टाइप साइज़ और 2 रंगों का उपयोग करती है। यह पूरा यूआई सिस्टम है। संयम गुणवत्ता के रूप में पढ़ा जाता है।
- बड़े बजट वाले गेम यूआई/यूएक्स पर अपने कुल उत्पादन बजट का 15-20% खर्च करते हैं। इंडी डेव आमतौर पर 0% खर्च करते हैं।
यही अंतर ठीक है जिसे AI स्किल्स बंद करने के लिए बनाए गए हैं।
Claude, Cursor, ਅਤੇ ਹੋਰਾਂ ਲਈ ਸੈਂਕੜੇ ਤਿਆਰ-ਕੀਤੇ ਹੁਨਰ ਬ੍ਰਾਊਜ਼ ਕਰੋ।
हर गेम को जिन छह यूआई सतहों की आवश्यकता होती है
कुछ भी उत्पन्न करने से पहले, जान लें कि आप क्या उत्पन्न कर रहे हैं। हर ब्राउज़र गेम - 2डी प्लेटफ़ॉर्मर, 3डी शूटर, आइडल क्लिकर, वॉकिंग सिम - को समान छह यूआई सतहों की आवश्यकता होती है। एक अच्छी AI स्किल उन सभी को एक सुसंगत स्टाइल सिस्टम में भेजती है।
| सतह | उद्देश्य | सामान्य गलतियाँ | "अच्छा" कैसा दिखता है |
|---|---|---|---|
| मेन मेन्यू | पहला इंप्रेशन। कला दिशा निर्धारित करता है। | डिफ़ॉल्ट ब्राउज़र फ़ॉन्ट, केंद्रित टेक्स्ट, कोई हॉवर स्टेट नहीं | अधिकतम 3-5 बटन, कस्टम टाइपोग्राफी, हॉवर माइक्रो-एनिमेशन, पृष्ठभूमि लूप |
| एचयूडी ओवरले | इन-गेम जानकारी: स्वास्थ्य, स्कोर, बारूद, टाइमर | यादृच्छिक कोनों में फ़्लोटिंग नंबर, कोई समूहीकरण नहीं, कैमरा से लड़ना | कोनों से एंकर किया हुआ, अर्ध-पारदर्शी, डेटा प्रकार द्वारा समूहीकृत, निष्क्रिय होने पर फीका पड़ जाता है |
| इन्वेंट्री / लोडआउट | आइटम प्रबंधन स्क्रीन | 16-कॉलम ग्रिड, आइटम दुर्लभता नहीं, स्क्रीन को ब्लॉक करने वाले टूलटिप्स | 4-8 कॉलम ग्रिड, रंग-कोडेड दुर्लभता, साइड में टूलटिप, ड्रैग-एंड-ड्रॉप या क्लिक |
| सेटिंग्स / विकल्प | ऑडियो, नियंत्रण, ग्राफिक्स | टॉगल की एक विशाल स्क्रॉल करने योग्य सूची | टैब (ऑडियो / वीडियो / नियंत्रण), टॉगल के बजाय स्लाइडर, "लागू करें" + "डिफ़ॉल्ट पर रीसेट करें" |
| पॉज़ मेन्यू | मध्य-गेम रुकावट | मोडल जो पूरे गेम को छिपाता है | 60% ओपेसिटी पर ओवरले, 4-5 विकल्प, कीबोर्ड के लिए "फिर से शुरू करें" ऑटो-फोकस |
| अंतिम स्क्रीन | जीत, हार, या रन सारांश | लाल एरियल में "गेम ओवर", कोई रीप्ले बटन नहीं | आँकड़े सारांश, बड़ा "फिर से खेलें" सीटीए, द्वितीयक "मेन मेन्यू" |
6 पॉलिश यूआई सतहों वाला एक गेम पूरा लगता है। 6 अनस्टाइलिश यूआई सतहों वाला एक गेम स्कूल प्रोजेक्ट की तरह लगता है, भले ही गेमप्ले कितना भी अच्छा क्यों न हो।
सबसे कठिन हिस्सा सभी 6 को सुसंगत रखना है - समान फ़ॉन्ट परिवार, समान बटन त्रिज्या, समान हॉवर व्यवहार, समान रंग पैलेट। यहीं पर AI स्किल्स अपना मूल्य अर्जित करती हैं।
Vibe Skills पर 5 AI गेम यूआई स्किल्स
Vibe Skills पर 3डी गेम्स श्रेणी में 30+ स्किल्स हैं जो पूर्ण खेलने योग्य गेम और उनके चारों ओर शिप होने वाले यूआई सिस्टम को कवर करती हैं। यहां पांच सबसे अधिक इंस्टॉल की जाने वाली यूआई-केंद्रित स्किल्स हैं।
| स्किल | किसके लिए सबसे अच्छा | इंजन | आउटपुट |
|---|---|---|---|
| ब्राउज़र गेम यूआई किट जनरेटर | एक सुसंगत स्टाइल में फुल 6-सरफेस यूआई | Three.js, Phaser, वैनिला JS | HTML/CSS ओवरले सिस्टम + स्प्राइट शीट |
| एचयूडी ओवरले सिस्टम | केवल इन-गेम एचयूडी (स्वास्थ्य, स्कोर, मिनीमैप, टाइमर) | Three.js, Phaser, Unity WebGL, Godot HTML5 | CSS-पोजिशन्ड ओवरले या कैनवास स्प्राइट |
| पॉज़ + सेटिंग्स स्क्रीन पैक | पॉज़, सेटिंग्स, नियंत्रण रीमैप | कोई भी वेब-आधारित गेम इंजन | React/HTML मोडल कंपोनेंट्स |
| इन्वेंट्री + लूट टूलटिप सिस्टम | आइटम ग्रिड, ड्रैग-एंड-ड्रॉप, दुर्लभता रंग, टूलटिप्स | Three.js, Phaser, Unity WebGL | कंपोनेंट लाइब्रेरी + आइटम कार्ड टेम्प्लेट |
| मेन मेन्यू + एंड स्क्रीन कॉम्बो | पहला और आखिरी इंप्रेशन | कोई भी | लॉटी के साथ एनिमेटेड मेन्यू + एंड-गेम स्टेट स्क्रीन |
सभी 5 स्किल्स एक साझा डिज़ाइन टोकन फ़ाइल (रंग, फ़ॉन्ट, स्पेसिंग, ईजिंग) के साथ आती हैं ताकि सतहें ऐसी लगें जैसे वे एक ही डिज़ाइनर से आई हों। अधिकांश इंडी यूआई किट इस परीक्षण में विफल हो जाते हैं - मेन्यू एक फ़ॉन्ट का उपयोग करता है, एचयूडी दूसरा उपयोग करता है, और खिलाड़ी तुरंत नोटिस करते हैं।
Vibe Skills पर 3डी गेम्स स्किल्स ब्राउज़ करें →
वीकेंड में फुल गेम यूआई किट बनाएं
यहां इंडी डेव द्वारा उपयोग किया जाने वाला वास्तविक वर्कफ़्लो है जो itch.io और Newgrounds पर ब्राउज़र गेम भेजते हैं। कुल समय: लगभग 12 घंटे एक वीकेंड में।
चरण 1: Vibe Skills पर एक यूआई स्किल चुनें
3डी गेम्स श्रेणी खोलें और ब्राउज़र गेम यूआई किट जनरेटर स्किल इंस्टॉल करें। यह एकमात्र ऐसा है जो एक सुसंगत टोकन सिस्टम में सभी 6 सतहों को भेजता है। यदि आपके गेम में पहले से ही काम कर रहे मेनू हैं और आपको केवल एक एचयूडी की आवश्यकता है, तो इसके बजाय स्टैंडअलोन एचयूडी ओवरले स्किल इंस्टॉल करें।
चरण 2: अपने गेम के "वाइब" को 3 शब्दों में परिभाषित करें
जनरेट करने से पहले, 3 शब्द लिखें जो आपके गेम के टोन का वर्णन करते हों। उदाहरण: "नियॉन, क्रूर, तेज" (एक सिंथवेव शूटर), "नरम, पानीदार, धीमा" (एक मछली पकड़ने का खेल), "मोटा, रेट्रो, पिक्सेल" (एक मेट्रॉइडवानिया)। स्किल इनपुट के रूप में रंग पैलेट, टाइपोग्राफी पसंद और एनीमेशन ईजिंग के लिए इनका उपयोग करती है। इसे छोड़ें नहीं - सामान्य इनपुट सामान्य यूआई उत्पन्न करता है।
चरण 3: पहले डिज़ाइन टोकन उत्पन्न करें
स्किल आपके पैलेट, फ़ॉन्ट स्टैक, बटन रेडियस, स्पेसिंग स्केल और एनीमेशन टाइमिंग के साथ एक tokens.css फ़ाइल या एक टेलविंड कॉन्फ़िगरेशन आउटपुट करती है। किसी भी वास्तविक यूआई को उत्पन्न करने से पहले इसकी समीक्षा करें। यदि टोकन यहां गलत दिखते हैं, तो हर सतह गलत दिखेगी। जब तक आप इसे पसंद न करें तब तक ट्वीक करें।
चरण 4: सभी 6 सतहों को एक साथ बैच में उत्पन्न करें
अनुमोदित टोकन के साथ, पूर्ण 6-सतह जनरेशन चलाएं। आउटपुट HTML/CSS फ़ाइलों का एक फ़ोल्डर है (या आपके इंजन के आधार पर React कंपोनेंट्स) प्लस आइकन के लिए एक SVG स्प्राइट शीट। Three.js या Phaser के लिए, HTML ओवरले दृष्टिकोण का उपयोग करें (कैनवास के ऊपर DOM स्टैक किया गया है जिसमें रैपर पर pointer-events: none है)। Unity WebGL या Godot HTML5 के लिए, स्किल द्वारा शिप किए गए कैनवास-आधारित वेरिएंट का उपयोग करें।
चरण 5: इसे अपने गेम लूप में वायर करें
एचयूडी को अपनी गेम स्थिति (स्वास्थ्य मूल्य, स्कोर, टाइमर) से कनेक्ट करें। अधिकांश स्किल्स में एक छोटा GameUIState एडाप्टर शामिल होता है जो setHealth(0.7) एपीआई को उजागर करता है ताकि आपको मैन्युअल रूप से CSS चर को छूने की आवश्यकता न पड़े। पॉज़, सेटिंग्स और एंड-स्क्रीन ईवेंट को अपने मौजूदा इनपुट हैंडलर से कनेक्ट करें।
चरण 6: 3 अजनबियों के साथ प्लेटेस्ट करें और संशोधित करें
दोस्त आपको बताएंगे कि यूआई बहुत अच्छा है। अजनबी आपको सच्चाई बताएंगे। itch.io पर एक बिल्ड पोस्ट करें, 3 यादृच्छिक लोगों से 5 मिनट खेलने के लिए कहें, और रिकॉर्डिंग देखें। महत्वपूर्ण यूआई बग पहले 60 सेकंड में दिखाई देंगे। उन्हें ठीक करें, प्रभावित सतह को फिर से उत्पन्न करें, शिप करें।
कुल समय: चरण 1-3 (लगभग 1 घंटा) + चरण 4 (लगभग 30 मिनट) + चरण 5 (लगभग 6-8 घंटे एकीकरण) + चरण 6 (लगभग 3 घंटे प्लेटेस्ट चक्र) = एक वीकेंड।
एक फ्रीलांस यूआई डिजाइनर $3,000-$8,000 समान दायरे के लिए शुल्क लेगा और 4-6 सप्ताह लेगा। Vibe Skills पर एक सदस्यता $39/माह से शुरू होती है और आपको असीमित जनरेशन देती है - इसलिए आप तब तक जितनी बार चाहें तब तक पुनरावृति कर सकते हैं जब तक यूआई सही महसूस न हो।
Vibe Skills पर गेम यूआई स्किल इंस्टॉल करें →
अक्सर पूछे जाने वाले प्रश्न
क्या मुझे अपने गेम यूआई को HTML/CSS ओवरले के रूप में बनाना चाहिए या सीधे कैनवास पर?
अधिकांश ब्राउज़र गेम के लिए, Three.js या Phaser कैनवास के ऊपर एक HTML/CSS ओवरले बनाना तेज़, एक्सेसिबल बनाना आसान है, और किसी भी रिज़ॉल्यूशन पर टेक्स्ट को स्पष्ट रूप से रेंडर करता है। कैनवास-आधारित यूआई का उपयोग केवल तभी करें जब आपको पिक्सेल-परफेक्ट कला स्थिरता (एक सख्त पिक्सेल-कला गेम) की आवश्यकता हो या जब डीओएम ईवेंट इनपुट में हस्तक्षेप करते हों। Vibe Skills पर स्किल्स दोनों वेरिएंट भेजती हैं।
क्या यूआई मोबाइल पर काम करेगा, या मुझे एक अलग मोबाइल बिल्ड की आवश्यकता है?
Vibe Skills पर ब्राउज़र गेम यूआई किट रिस्पॉन्सिव लेआउट जेनरेट करता है जो टच डिवाइस पर आउट-ऑफ-द-बॉक्स काम करता है - बड़े टैप टारगेट, स्वैप-इन मोबाइल कंट्रोल ओवरले (डी-पैड और एक्शन बटन), और एक मोबाइल-फर्स्ट पॉज़ मेन्यू। आपको एक अलग बिल्ड की आवश्यकता नहीं है, लेकिन आपको वास्तविक फोन पर परीक्षण करने की आवश्यकता है। ब्राउज़र देव टूल टच प्रदर्शन के बारे में झूठ बोलते हैं।
गेम यूआई यथार्थवादी रूप से कितना एक्सेसिबल हो सकता है?
ब्राउज़र गेम मेनू, सेटिंग्स और एचयूडी के लिए WCAG AA आसानी से हिट कर सकते हैं - कीबोर्ड नेविगेशन, फोकस रिंग, 4.5:1 का रंग कंट्रास्ट, और स्कोर और स्वास्थ्य पर स्क्रीन-रीडर लेबल। HTML ओवरले दृष्टिकोण इन सभी को लगभग मुफ्त बनाता है। Vibe Skills पर स्किल्स डिफ़ॉल्ट रूप से एक्सेसिबल मार्कअप जेनरेट करती हैं। वास्तविक गेमप्ले को एक्सेसिबल बनाना कठिन है, लेकिन यूआई अवरोधक नहीं होना चाहिए।
क्या वही यूआई किट Unity WebGL और Godot HTML5 बिल्ड के लिए काम करता है?
ज्यादातर हाँ। Unity WebGL और Godot HTML5 दोनों एक कैनवास पर रेंडर करते हैं, और आप ऊपर एक डीओएम ओवरले स्टैक कर सकते हैं। स्किल्स में दोनों इंजनों के लिए एडाप्टर शामिल हैं ताकि यूआई आपके गेम की स्थिति से बात करे। Unity-विशिष्ट सुविधाओं (जैसे बिल्ट-इन इवेंट सिस्टम) को एक पतले ब्रिज की आवश्यकता होती है - स्किल उस ब्रिज के लिए नमूना कोड भेजती है।
मैं मेन्यू, एचयूडी और इन्वेंट्री को विज़ुअली सुसंगत कैसे रखूं?
इंडी गेम यूआई के अनाड़ी दिखने का यह #1 कारण है - 6 सतहें जो अलग-अलग डिज़ाइन की गई हैं। फिक्स साझा डिज़ाइन टोकन है: एक फ़ाइल जो रंग, फ़ॉन्ट, स्पेसिंग और ईजिंग को परिभाषित करती है। प्रत्येक सतह उस फ़ाइल से आयात करती है। Vibe Skills पर स्किल्स यह स्वचालित रूप से करती हैं - एक बार टोकन जेनरेट करें, उन टोकन से सभी 6 सतहों को जेनरेट करें, हो गया।
क्या मैं स्किल को तोड़े बिना जेनरेट किए गए यूआई को कस्टमाइज़ कर सकता हूं?
हाँ। स्किल्स संपादन योग्य HTML, CSS, और (वैकल्पिक रूप से) React कंपोनेंट्स आउटपुट करती हैं। आप फ़ाइलों के मालिक हैं। अधिकांश डेव रंग बदलते हैं, एक लोगो बदलते हैं, आइकन बदलते हैं, और एक या दो बटन आकार बदलते हैं - बस इतना ही। यदि आपको बड़े स्टाइल परिवर्तन की आवश्यकता है, तो सतहों को हाथ से फिर से लिखने के बजाय अपडेटेड टोकन से फिर से जेनरेट करें।
क्या होगा अगर मेरे गेम में पहले से ही आधा-निर्मित यूआई है - क्या मुझे इसे फेंक देना चाहिए?
नहीं। एचयूडी ओवरले स्किल या पॉज़ + सेटिंग्स पैक स्टैंडअलोन इंस्टॉल करें और एक बार में एक सतह बदलें। अधिकांश इंडी डेव पहले मेन मेन्यू (उच्चतम दृश्यता), फिर एचयूडी (सबसे अधिक इस्तेमाल किया जाने वाला), फिर सेटिंग्स और पॉज़ (कम से कम इस्तेमाल किया जाने वाला लेकिन सबसे टूटे हुए) को अपग्रेड करते हैं। पहली सतह शिप होने के बाद आपको गुणवत्ता में वृद्धि महसूस होगी।
यूआई शिप करें, फिर गेम शिप करें
गेम यूआई इंडी परियोजनाओं का मौन हत्यारा है। गेमप्ले शानदार हो सकता है, लेकिन अगर मेन्यू डिफ़ॉल्ट वर्डप्रेस थीम की तरह दिखता है, तो खिलाड़ी 90 सेकंड में बाउंस हो जाते हैं। पॉलिश यूआई - सुसंगत टोकन, एंकर किया हुआ एचयूडी, क्लीन सेटिंग्स, संतोषजनक एंड स्क्रीन - वही है जो 4 घंटे के itch.io डाउनलोड को एक वास्तविक उत्पाद की तरह महसूस कराता है।
4-सप्ताह के यूआई रीडिज़ाइन को छोड़ें। एक वीकेंड में एक पूर्ण 6-सतह किट जेनरेट करें, इसे वायर करें, और गेम को मज़ेदार बनाने पर वापस लौटें।
Vibe Skills पर गेम यूआई स्किल्स ब्राउज़ करें →
गेम यूआई को स्क्रैच से बनाना बंद करें। Vibe Skills पर एक यूआई किट स्किल इंस्टॉल करें और एक ही सिटिंग में मेनू, एचयूडी, इन्वेंट्री, सेटिंग्स, पॉज़ और एंड स्क्रीन शिप करें।