Claude, Cursor आणि इतरांसाठी शेकडो रेडीमेड कौशल्यांचे ब्राउझिंग करा.
गेम UI हे इंडी डेव्हलपमेंटमधील सर्वात कठीण काम आहे (आणि याबद्दल कोणीही बोलत नाही)
बहुतेक इंडी डेव्हलपर्स दोन आठवड्यांत गेम प्रोटोटाइप तयार करतात. त्यानंतर ते पुढील तीन महिने UI मध्ये अडकून पडतात. प्रोग्रामर आर्टसारखे दिसणारे बटणे. कॅमेऱ्याशी जुळणारे HUD ओव्हरले. position: absolute आणि प्रार्थना वापरून तयार केलेले इन्व्हेंटरी ग्रिड. Vibe Skills वरील गेम UI साठी AI स्किल्स एकाच प्रयत्नात सुसंगत मेनू सिस्टम, HUDs आणि ओव्हरले तयार करतात - जेणेकरून तुम्ही गेम पाठवू शकता, सेटिंग्ज स्क्रीन नाही.
हे मार्गदर्शक UI रिटेन्शन कसे ठरवते, प्रत्येक गेमला आवश्यक असलेल्या सहा UI सर्फेसेस, Vibe Skills वर उपलब्ध असलेल्या AI गेम UI स्किल्स आणि संपूर्ण UI किट पाठविण्यासाठी वीकेंड वर्कफ्लो स्पष्ट करते.
Claude, Cursor आणि इतरांसाठी शेकडो रेडीमेड कौशल्यांचे ब्राउझिंग करा.
गेम UI रिटेन्शन कसे ठरवते
खेळाडू तुमचे गेम पहिल्या 90 सेकंदात जज करतात आणि त्यातील बहुतेक सेकंद UI मध्ये घालवतात. मुख्य मेनू, सेटिंग्ज, कंट्रोल हिंट्स, गेम सुरू झाल्यावर दिसणारे पहिले HUD. जर UI सदोष वाटत असेल, तर गेमप्लेला संधी मिळत नाही.
लक्षात ठेवण्यासारखे काही आकडे:
- 38% खेळाडू ब्राउझर गेम सोडतात, जर मुख्य मेनू सदोष किंवा अनस्टाईलिश वाटला तर (itch.io प्लेटेस्ट डेटा, 2025).
- Hollow Knight's चा मुख्य मेनू 4 बटणे, हाताने रेखाटलेला आहे आणि 60fps वर चालतो - आणि हे त्या कारणांपैकी एक आहे ज्यामुळे खेळाडू पहिल्या 30 मिनिटांच्या कठीण खेळात टिकून राहतात.
- Celeste's च्या पॉज स्क्रीनमध्ये 3 फॉन्ट आकार आणि 2 रंग वापरले आहेत. ही संपूर्ण UI प्रणाली आहे. संयम म्हणजे गुणवत्ता.
- मोठ्या बजेटच्या गेम्समध्ये 15-20% त्यांचे संपूर्ण उत्पादन बजेट UI/UX वर खर्च होतो. इंडी डेव्हलपर्स साधारणपणे 0% खर्च करतात.
हा फरक AI स्किल्स भरून काढण्यासाठी तयार केले गेले आहेत.
Claude, Cursor आणि इतरांसाठी शेकडो रेडीमेड कौशल्यांचे ब्राउझिंग करा.
प्रत्येक गेमला आवश्यक असलेल्या सहा UI सर्फेसेस
काहीही तयार करण्यापूर्वी, तुम्ही काय तयार करत आहात हे जाणून घ्या. प्रत्येक ब्राउझर गेम - 2D प्लॅटफॉर्मर, 3D शूटर, आयडल क्लिकर, वॉकिंग सिम - ला समान सहा UI सर्फेसेसची आवश्यकता असते. एक चांगली AI स्किल एका सुसंगत स्टाईल सिस्टममध्ये या सर्व गोष्टी पुरवते.
| सरफेस | उद्देश | सामान्य चुका | "चांगले" कसे दिसते |
|---|---|---|---|
| मुख्य मेनू | पहिले इंप्रेशन. कला दिशा ठरवते. | डीफॉल्ट ब्राउझर फॉन्ट, मध्यभागी असलेला मजकूर, होवर स्टेट्स नाहीत | कमाल 3-5 बटणे, कस्टम टायपोग्राफी, होवर मायक्रो-ॲनिमेशन, बॅकग्राउंड लूप |
| HUD ओव्हरले | इन-गेम माहिती: आरोग्य, स्कोअर, गोळ्या, टाइमर | यादृच्छिक कोपऱ्यांमध्ये फ्लोटिंग नंबर्स, गटबद्धता नाही, कॅमेऱ्याशी संघर्ष | कोपऱ्यांमध्ये अँकर केलेले, अर्धपारदर्शक, डेटा प्रकारानुसार गटबद्ध, निष्क्रिय असताना अदृश्य |
| इन्व्हेंटरी / लोडआउट | वस्तू व्यवस्थापन स्क्रीन | 16-स्तंभांचा ग्रिड, वस्तूंची दुर्मिळता नाही, स्क्रीन ब्लॉक करणारे टूलटिप्स | 4-8 स्तंभांचा ग्रिड, रंगाने वर्गीकृत दुर्मिळता, बाजूला टूलटिप, ड्रॅग-अँड-ड्रॉप किंवा क्लिक |
| सेटिंग्ज / पर्याय | ऑडिओ, नियंत्रणे, ग्राफिक्स | टॉगलची एक मोठी स्क्रोल करण्यायोग्य यादी | टॅब (ऑडिओ / व्हिडिओ / नियंत्रणे), टॉगलऐवजी स्लाइडर, "लागू करा" + "डीफॉल्टवर रीसेट करा" |
| पॉज मेनू | इन-गेम व्यत्यय | संपूर्ण गेम लपवणारे मॉडेल | 60% अपारदर्शनासह ओव्हरले, 4-5 पर्याय, कीबोर्डसाठी "रिझ्यूम" स्वयंचलितपणे फोकस्ड |
| एंड स्क्रीन | जिंकणे, हरणे किंवा रनचा सारांश | लाल ॲरिअलमध्ये "गेम ओव्हर", रीप्ले बटण नाही | आकडेवारीचा सारांश, मोठे "पुन्हा खेळा" CTA, दुय्यम "मुख्य मेनू" |
6 पॉलिश UI सर्फेसेस असलेला गेम पूर्ण वाटतो. 6 अनस्टाईलिश UI सर्फेसेस असलेला गेम शालेय प्रकल्पासारखा वाटतो, गेमप्ले कितीही चांगला असो.
या सर्वांना सुसंगत ठेवणे सर्वात कठीण आहे - समान फॉन्ट फॅमिली, समान बटण त्रिज्या, समान होवर वर्तन, समान रंग पॅलेट. येथेच AI स्किल्स उपयुक्त ठरतात.
Vibe Skills वर 5 AI गेम UI स्किल्स
Vibe Skills वरील 3D गेम्स श्रेणी मध्ये संपूर्ण खेळण्यायोग्य गेम्स आणि त्यांच्याभोवती शिप होणाऱ्या UI सिस्टीम कव्हर करणाऱ्या 30+ स्किल्स आहेत. येथे सर्वाधिक इन्स्टॉल केलेल्या UI-केंद्रित पाच स्किल्स आहेत.
| स्किल | यासाठी सर्वोत्तम | इंजिन्स | आउटपुट |
|---|---|---|---|
| ब्राउझर गेम UI किट जनरेटर | एका सुसंगत स्टाईलमध्ये संपूर्ण 6-सरफेस UI | Three.js, Phaser, व्हॅनिला JS | HTML/CSS ओव्हरले सिस्टीम + स्प्राइट शीट्स |
| HUD ओव्हरले सिस्टीम | फक्त इन-गेम HUD (आरोग्य, स्कोअर, मिनीमॅप, टाइमर) | Three.js, Phaser, Unity WebGL, Godot HTML5 | CSS-पोझिशन्ड ओव्हरले किंवा कॅनव्हास स्प्राइट्स |
| पॉज + सेटिंग्ज स्क्रीन पॅक | पॉज, सेटिंग्ज, कंट्रोल्स रीमॅप | कोणतेही वेब-आधारित गेम इंजिन | React/HTML मॉडेल कंपोनंट्स |
| इन्व्हेंटरी + लूट टूलटिप सिस्टीम | आयटम ग्रिड्स, ड्रॅग-अँड-ड्रॉप, दुर्मिळता रंग, टूलटिप्स | Three.js, Phaser, Unity WebGL | कंपोनंट लायब्ररी + आयटम कार्ड टेम्पलेट्स |
| मुख्य मेनू + एंड स्क्रीन कॉम्बो | पहिले आणि शेवटचे इंप्रेशन | कोणतेही | Lottie सह ॲनिमेटेड मेनू + एंड-गेम स्टॅट स्क्रीन |
सर्व 5 स्किल्स सामायिक डिझाइन टोकन फाइल (रंग, फॉन्ट, स्पेसिंग, इझिंग) सह येतात, जेणेकरून सर्फेसेस एकाच डिझायनरकडून आल्यासारखे दिसतील. बहुतेक इंडी UI किट्स ही चाचणी अयशस्वी करतात - मेनू एक फॉन्ट वापरतो, HUD दुसरा वापरतो आणि खेळाडू ते त्वरित लक्षात घेतात.
Vibe Skills वर 3D गेम्स स्किल्स ब्राउझ करा →
वीकेंडमध्ये संपूर्ण गेम UI किट तयार करा
itch.io आणि Newgrounds वर ब्राउझर गेम्स शिप करणाऱ्या इंडी डेव्हलपर्सनी वापरलेली ही खरी वर्कफ्लो आहे. एकूण वेळ: वीकेंडवर सुमारे 12 कार्यरत तास.
पायरी 1: Vibe Skills वर UI स्किल निवडा
3D गेम्स श्रेणी उघडा आणि ब्राउझर गेम UI किट जनरेटर स्किल इंस्टॉल करा. ही एकमेव स्किल आहे जी एका सुसंगत टोकन सिस्टीममध्ये सर्व 6 सर्फेसेस पुरवते. जर तुमच्या गेममध्ये आधीच मेनू कार्यरत असतील आणि तुम्हाला फक्त HUD ची आवश्यकता असेल, तर त्याऐवजी स्टँडअलोन HUD ओव्हरले स्किल स्थापित करा.
पायरी 2: तुमच्या गेमची "व्हायब" 3 शब्दांत परिभाषित करा
जनरेट करण्यापूर्वी, तुमच्या गेमचा टोन वर्णन करणारे 3 शब्द लिहा. उदाहरणे: "निऑन, क्रूर, जलद" (एक सिंथवेव्ह शूटर), "मऊ, जलीय, धीमा" (एक मासेमारीचा खेळ), "चंकी, रेट्रो, पिक्सेल" (एक मेट्रॉइडवानिया). स्किल रंग पॅलेट, टायपोग्राफी निवड आणि ॲनिमेशन इझिंगसाठी इनपुट म्हणून यांचा वापर करते. हे वगळू नका - सामान्य इनपुटमुळे सामान्य UI तयार होते.
पायरी 3: प्रथम डिझाइन टोकन्स जनरेट करा
स्किल तुमच्या पॅलेट, फॉन्ट स्टॅक, बटण त्रिज्या, स्पेसिंग स्केल आणि ॲनिमेशन टाइमिंगसह tokens.css फाइल किंवा टेलविंड कॉन्फिगरेशन आउटपुट करते. कोणतेही प्रत्यक्ष UI जनरेट करण्यापूर्वी याचे पुनरावलोकन करा. जर टोकन्स येथे चुकीचे वाटले, तर प्रत्येक सरफेस चुकीचे वाटेल. ते तुम्हाला आवडेल तोपर्यंत बदला.
पायरी 4: एकाच बॅचमध्ये सर्व 6 सर्फेसेस जनरेट करा
मंजूर केलेल्या टोकन्ससह, संपूर्ण 6-सरफेस जनरेशन चालवा. आउटपुट HTML/CSS फाइल्सचे (किंवा तुमच्या इंजिनवर अवलंबून React कंपोनंट्स) फोल्डर आणि आयकॉन्ससाठी SVG स्प्राइट शीट आहे. Three.js किंवा Phaser साठी, HTML ओव्हरले दृष्टिकोन वापरा (कॅनव्हासच्या वर DOM स्टॅक केलेला pointer-events: none सह). Unity WebGL किंवा Godot HTML5 साठी, स्किल शिप केलेल्या कॅनव्हास-आधारित व्हेरिएंटचा वापर करा.
पायरी 5: तुमच्या गेम लूपमध्ये वायर्ड करा
HUD ला तुमच्या गेम स्थितीशी (आरोग्य मूल्य, स्कोअर, टाइमर) कनेक्ट करा. बहुतेक स्किल्समध्ये एक छोटा GameUIState अडॅप्टर असतो जो setHealth(0.7) API उघड करतो, जेणेकरून तुम्हाला CSS व्हेरिएबल्स मॅन्युअली बदलावे लागणार नाहीत. पॉज, सेटिंग्ज आणि एंड-स्क्रीन इव्हेंट्स तुमच्या विद्यमान इनपुट हँडलरशी जोडा.
पायरी 6: 3 अनोळखी लोकांसह प्लेटेस्ट करा आणि सुधारणा करा
मित्र तुम्हाला सांगतील की UI छान आहे. अनोळखी लोक तुम्हाला सत्य सांगतील. itch.io वर एक बिल्ड पोस्ट करा, 3 यादृच्छिक लोकांना 5 मिनिटे खेळायला सांगा आणि रेकॉर्डिंग पहा. महत्त्वाचे UI बग पहिल्या 60 सेकंदात दिसतील. ते फिक्स करा, प्रभावित सरफेस पुन्हा जनरेट करा, शिप करा.
एकूण वेळ: पायरी 1-3 (~1 तास) + पायरी 4 (~30 मिनिटे) + पायरी 5 (~6-8 तास इंटिग्रेशन) + पायरी 6 (~3 तास प्लेटेस्ट सायकल) = एक वीकेंड.
एक फ्रीलान्स UI डिझायनर $3,000-$8,000 आकारेल आणि 4-6 आठवडे घेईल. Vibe Skills वरील सबस्क्रिप्शन $39/महिना पासून सुरू होते आणि तुम्हाला अमर्यादित जनरेशन देते - जेणेकरून तुम्ही UI योग्य वाटेल तोपर्यंत कितीही वेळा पुनरावृत्ती करू शकता.
Vibe Skills वर गेम UI स्किल इंस्टॉल करा →
वारंवार विचारले जाणारे प्रश्न
मी माझा गेम UI HTML/CSS ओव्हरले म्हणून तयार करावा की थेट कॅनव्हासवर?
बहुतेक ब्राउझर गेम्ससाठी, Three.js किंवा Phaser कॅनव्हासच्या वर HTML/CSS ओव्हरले तयार करणे जलद, ॲक्सेसिबल करणे सोपे आणि कोणत्याही रिझोल्यूशनवर मजकूर स्पष्टपणे प्रस्तुत करते. कॅनव्हास-आधारित UI फक्त तेव्हा वापरा जेव्हा तुम्हाला पिक्सेल-परफेक्ट कला सुसंगतता (एक कठोर पिक्सेल-आर्ट गेम) आवश्यक असेल किंवा जेव्हा DOM इव्हेंट्स इनपुटमध्ये हस्तक्षेप करतात. Vibe Skills वरील स्किल्स दोन्ही व्हेरिएंट शिप करतात.
UI मोबाइलवर काम करेल, की मला वेगळा मोबाइल बिल्ड लागेल?
Vibe Skills वरील ब्राउझर गेम UI किट रिस्पॉन्सिव्ह लेआउट जनरेट करते जे टच डिव्हाइसेसवर आउट-ऑफ-द-बॉक्स काम करते - मोठे टॅप लक्ष्य, स्वॅप-इन मोबाइल कंट्रोल ओव्हरले (डी-पॅड आणि ॲक्शन बटणे), आणि मोबाइल-फर्स्ट पॉज मेनू. तुम्हाला वेगळ्या बिल्डची आवश्यकता नाही, परंतु तुम्हाला प्रत्यक्ष फोनवर चाचणी करण्याची आवश्यकता आहे. ब्राउझर डेव्हलपर टूल्स टच परफॉर्मन्सबद्दल खोटे बोलतात.
गेम UI वास्तविकतेत किती ॲक्सेसिबल असू शकते?
ब्राउझर गेम्स मेनू, सेटिंग्ज आणि HUDs साठी WCAG AA सहजपणे गाठू शकतात - कीबोर्ड नेव्हिगेशन, फोकस रिंग्स, 4.5:1 चा रंग कॉन्ट्रास्ट, आणि स्कोअर आणि आरोग्यावर स्क्रीन-रीडर लेबल्स. HTML ओव्हरले दृष्टिकोन हे सर्व जवळजवळ विनामूल्य बनवते. Vibe Skills वरील स्किल्स डीफॉल्टनुसार ॲक्सेसिबल मार्कअप जनरेट करतात. प्रत्यक्ष गेमप्ले ॲक्सेसिबल करणे कठीण आहे, परंतु UI अडथळा नसावा.
Unity WebGL आणि Godot HTML5 बिल्डसाठी समान UI किट कार्य करते का?
बहुतेकदा होय. Unity WebGL आणि Godot HTML5 दोन्ही कॅनव्हासवर प्रस्तुत करतात आणि तुम्ही त्यावर DOM ओव्हरले स्टॅक करू शकता. स्किल्समध्ये दोन्ही इंजिनसाठी अडॅप्टर्स समाविष्ट आहेत जेणेकरून UI तुमच्या गेमच्या स्थितीशी संवाद साधेल. Unity-विशिष्ट वैशिष्ट्ये (जसे की अंगभूत इव्हेंट सिस्टम) साठी एक पातळ ब्रिज आवश्यक आहे - स्किल त्या ब्रिजसाठी नमुना कोड शिप करते.
मी मेनू, HUD आणि इन्व्हेंटरी दृश्यमानपणे सुसंगत कसे ठेवू?
इंडी गेम UI अव्यवसायिक दिसण्याचे हे #1 कारण आहे - 6 सर्फेसेस जे वेगळे डिझाइन केलेले आहेत. उपाय म्हणजे सामायिक डिझाइन टोकन्स: एक फाइल जी रंग, फॉन्ट, स्पेसिंग आणि इझिंग परिभाषित करते. प्रत्येक सरफेस त्या फाइलमधून इंपोर्ट करते. Vibe Skills वरील स्किल्स हे आपोआप करतात - टोकन्स एकदा जनरेट करा, त्या टोकन्सवरून सर्व 6 सर्फेसेस जनरेट करा, पूर्ण झाले.
मी स्किल न बिघडवता जनरेट केलेले UI कस्टमाइझ करू शकतो का?
होय. स्किल्स संपादन करण्यायोग्य HTML, CSS आणि (पर्यायाने) React कंपोनंट्स आउटपुट करतात. तुमच्या मालकीच्या फाइल्स आहेत. बहुतेक डेव्हलपर्स रंग बदलतात, लोगो बदलतात, आयकॉन्स बदलतात आणि एक किंवा दोन बटणांचे आकार बदलतात - एवढेच. जर तुम्हाला मोठ्या स्टाईल बदलाची आवश्यकता असेल, तर सर्फेसेस हाताने पुन्हा लिहिण्याऐवजी अद्ययावत टोकन्समधून पुन्हा जनरेट करा.
जर माझ्या गेममध्ये आधीच अर्धे-निर्मित UI असेल तर - मी ते फेकून द्यावे का?
नाही. HUD ओव्हरले स्किल किंवा पॉज + सेटिंग्ज पॅक स्टँडअलोन इंस्टॉल करा आणि एकावेळी एक सरफेस बदला. बहुतेक इंडी डेव्हलपर्स प्रथम मुख्य मेनू (सर्वाधिक दृश्यमानता) अपग्रेड करतात, नंतर HUD (सर्वाधिक वापरलेले), नंतर सेटिंग्ज आणि पॉज (सर्वात कमी वापरलेले परंतु सर्वाधिक सदोष). पहिली सरफेस शिप केल्यानंतर तुम्हाला गुणवत्तेत वाढ जाणवेल.
UI शिप करा, मग गेम शिप करा
गेम UI हे इंडी प्रोजेक्ट्सचे छुपे मारेकरी आहे. गेमप्ले उत्कृष्ट असू शकते, परंतु जर मेनू डीफॉल्ट वर्डप्रेस थीमसारखा दिसत असेल, तर खेळाडू 90 सेकंदात सोडून जातात. पॉलिश UI - सुसंगत टोकन्स, अँकर केलेले HUD, स्वच्छ सेटिंग्ज, समाधानकारक एंड स्क्रीन - हे 4-तासांच्या itch.io डाउनलोडला एक वास्तविक उत्पादन बनवते.
4-आठवड्यांच्या UI रीडिझाइनला वगळा. वीकेंडमध्ये संपूर्ण 6-सरफेस किट जनरेट करा, ते वायर्ड करा आणि गेमला मजा आणण्यासाठी परत जा.
Vibe Skills वर गेम UI स्किल्स ब्राउझ करा →
गेम UI स्क्रॅचपासून तयार करणे थांबवा. Vibe Skills वर UI किट स्किल इंस्टॉल करा आणि एकाच प्रयत्नात मेनू, HUD, इन्व्हेंटरी, सेटिंग्ज, पॉज आणि एंड स्क्रीन शिप करा.