2026 में गेम यूआई (UI) और एचयूडी (HUD) डिज़ाइन के लिए सर्वश्रेष्ठ AI कौशल

Vibe Skills

Claude, Cursor और अन्य के लिए सैकड़ों तैयार स्किल्स ब्राउज़ करें।

स्किल्स एक्सप्लोर करें

अभी मुफ़्त शुरू करें

गेम यूआई इंडी डेवलपमेंट का सबसे कठिन हिस्सा है (और इस पर कोई बात नहीं करता)

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

यह गाइड बताता है कि यूआई क्यों रिटेंशन तय करता है, हर गेम को जिन छह यूआई सतहों की आवश्यकता होती है, Vibe Skills पर उपलब्ध एआई गेम यूआई स्किल्स, और एक पूर्ण यूआई किट शिप करने के लिए एक वीकेंड वर्कफ़्लो।

Vibe Skills

Claude, Cursor और अन्य के लिए सैकड़ों तैयार स्किल्स ब्राउज़ करें।

स्किल्स एक्सप्लोर करें

अभी मुफ़्त शुरू करें

गेम यूआई क्यों रिटेंशन तय करता है

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

कुछ संख्याएँ जो आपके दिमाग में रखने लायक हैं:

• 38% खिलाड़ी पहले सत्र में ब्राउज़र गेम छोड़ देते हैं यदि मुख्य मेनू टूटा हुआ या अनस्टाइलिश महसूस होता है (itch.io प्लेटेस्ट डेटा, 2025)।
• होलो नाइट का मुख्य मेनू 4 बटन है, हाथ से खींचा गया है, और 60fps पर चलता है - और यह उन सबसे उद्धृत कारणों में से एक है जिससे खिलाड़ी पहले 30 मिनट की क्रूरता के माध्यम से बने रहते हैं।
• सेलेस्ट के पॉज़ स्क्रीन में 3 टाइप साइज़ और 2 कलर का उपयोग होता है। यह पूरा यूआई सिस्टम है। संयम को गुणवत्ता के रूप में पढ़ा जाता है।
• बड़े बजट वाले गेम अपने पूरे उत्पादन बजट का 15-20% यूआई/यूएक्स पर खर्च करते हैं। इंडी डेवलपर्स आमतौर पर 0% खर्च करते हैं।

यह अंतर ठीक वही है जिसके लिए एआई स्किल्स बनाए गए हैं।

Vibe Skills

Claude, Cursor और अन्य के लिए सैकड़ों तैयार स्किल्स ब्राउज़ करें।

स्किल्स एक्सप्लोर करें

अभी मुफ़्त शुरू करें

हर गेम को जिन छह यूआई सतहों की आवश्यकता होती है

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

6 पॉलिश यूआई सतहों वाला एक गेम पूर्ण लगता है। 6 अनस्टाइलिश यूआई सतहों वाला एक गेम स्कूल प्रोजेक्ट की तरह लगता है, चाहे गेमप्ले कितना भी अच्छा क्यों न हो।

सबसे कठिन हिस्सा सभी 6 को सुसंगत रखना है - एक ही फ़ॉन्ट परिवार, एक ही बटन त्रिज्या, एक ही होवर व्यवहार, एक ही रंग पैलेट। यहीं पर एआई स्किल्स अपनी कीमत वसूलती हैं।

Vibe Skills पर 5 एआई गेम यूआई स्किल्स

Vibe Skills पर 3डी गेम्स श्रेणी में पूर्ण खेलने योग्य गेम और उनके आसपास शिप होने वाले यूआई सिस्टम को कवर करने वाले 30+ स्किल्स हैं। यहाँ पाँच सबसे अधिक इंस्टॉल किए गए यूआई-केंद्रित स्किल्स हैं।

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

Vibe Skills पर 3डी गेम्स स्किल्स ब्राउज़ करें →

एक वीकेंड में एक पूर्ण गेम यूआई किट बनाएँ

यहां इंडी डेवलपर्स द्वारा उपयोग की जाने वाली वास्तविक वर्कफ़्लो है जो itch.io और Newgrounds पर ब्राउज़र गेम शिप करते हैं। कुल समय: एक वीकेंड में ~12 कार्य घंटे।

चरण 1: Vibe Skills पर एक यूआई स्किल चुनें

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

चरण 2: अपने गेम के "वाइब" को 3 शब्दों में परिभाषित करें

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

चरण 3: पहले डिज़ाइन टोकन उत्पन्न करें

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

चरण 4: एक ही बैच में सभी 6 सतहों को उत्पन्न करें

अनुमोदित टोकन के साथ, पूर्ण 6-सतह पीढ़ी चलाएँ। आउटपुट एचटीएमएल/सीएसएस फ़ाइलों (या आपके इंजन के आधार पर रिएक्ट कंपोनेंट्स) का एक फ़ोल्डर है, साथ ही आइकन के लिए एक एसवीजी स्प्राइट शीट है। Three.js या Phaser के लिए, एचटीएमएल ओवरले दृष्टिकोण का उपयोग करें (DOM को pointer-events: none के साथ कैनवास के ऊपर स्टैक किया गया)। Unity WebGL या Godot HTML5 के लिए, स्किल द्वारा शिप किए गए कैनवास-आधारित वेरिएंट का उपयोग करें।

चरण 5: इसे अपने गेम लूप में वायर करें

एचयूडी को अपने गेम स्टेट (स्वास्थ्य मान, स्कोर, टाइमर) से कनेक्ट करें। अधिकांश स्किल्स में एक छोटा GameUIState अडैप्टर शामिल होता है जो setHealth(0.7) एपीआई को उजागर करता है ताकि आपको मैन्युअल रूप से सीएसएस चर को छूने की आवश्यकता न हो। अपने मौजूदा इनपुट हैंडलर से पॉज़, सेटिंग्स और एंड-स्क्रीन इवेंट्स को वायर करें।

चरण 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 पर गेम यूआई स्किल इंस्टॉल करें →

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

क्या मुझे अपने गेम यूआई को एचटीएमएल/सीएसएस ओवरले के रूप में बनाना चाहिए या सीधे कैनवास पर?

अधिकांश ब्राउज़र गेम के लिए, Three.js या Phaser कैनवास के ऊपर एक एचटीएमएल/सीएसएस ओवरले बनाना तेज, सुलभ बनाना आसान है, और किसी भी रिज़ॉल्यूशन पर टेक्स्ट को कुरकुरा रेंडर करता है। केवल तभी कैनवास-आधारित यूआई का उपयोग करें जब आपको पिक्सेल-परफेक्ट आर्ट स्थिरता (एक सख्त पिक्सेल-आर्ट गेम) की आवश्यकता हो या जब डीओएम इवेंट इनपुट के साथ हस्तक्षेप करते हों। Vibe Skills पर स्किल्स दोनों वेरिएंट शिप करते हैं।

क्या यूआई मोबाइल पर काम करेगा, या मुझे एक अलग मोबाइल बिल्ड की आवश्यकता होगी?

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

गेम यूआई यथार्थवादी रूप से कितना सुलभ हो सकता है?

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

क्या वही यूआई किट Unity WebGL और Godot HTML5 बिल्ड के लिए काम करता है?

ज्यादातर हाँ। Unity WebGL और Godot HTML5 दोनों कैनवास पर रेंडर करते हैं, और आप ऊपर एक डीओएम ओवरले स्टैक कर सकते हैं। स्किल्स में दोनों इंजनों के लिए अडैप्टर शामिल हैं ताकि यूआई आपके गेम की स्थिति से बात करे। यूनिटी-विशिष्ट सुविधाओं (जैसे बिल्ट-इन इवेंट सिस्टम) के लिए एक पतले पुल की आवश्यकता होती है - स्किल उस पुल के लिए नमूना कोड शिप करता है।

मैं मेनू, एचयूडी और इन्वेंट्री को दृष्टिगत रूप से सुसंगत कैसे रखूं?

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

क्या मैं स्किल को तोड़े बिना उत्पन्न यूआई को अनुकूलित कर सकता हूं?

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

यदि मेरे गेम में पहले से ही एक आधा-निर्मित यूआई है तो क्या होगा - क्या मुझे इसे फेंक देना चाहिए?

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

यूआई शिप करें, फिर गेम शिप करें

गेम यूआई इंडी प्रोजेक्ट्स का मौन हत्यारा है। गेमप्ले शानदार हो सकता है, लेकिन अगर मेनू एक डिफ़ॉल्ट वर्डप्रेस थीम की तरह दिखता है, तो खिलाड़ी 90 सेकंड में बाउंस कर जाते हैं। पॉलिश यूआई - सुसंगत टोकन, एंकर किया गया एचयूडी, साफ सेटिंग्स, संतोषजनक अंत स्क्रीन - वह है जो 4 घंटे के itch.io डाउनलोड को एक वास्तविक उत्पाद की तरह महसूस कराता है।

4-सप्ताह के यूआई रीडिज़ाइन को छोड़ें। एक वीकेंड में एक पूर्ण 6-सतह किट उत्पन्न करें, इसे वायर करें, और गेम को मजेदार बनाने पर वापस आएं।

Vibe Skills पर गेम यूआई स्किल्स ब्राउज़ करें →

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