Vibe Skills

Claude، Cursor، اور بہت کچھ کے لیے سینکڑوں تیار سکلز براؤز کریں۔

گیم UI انڈی ڈیولپمنٹ کا سب سے مشکل حصہ ہے (اور کوئی اس کے بارے میں بات نہیں کرتا)

زیادہ تر انڈی ڈیولپرز دو ہفتوں میں ایک کام کرنے والا گیم پروٹو ٹائپ تیار کر لیتے ہیں۔ پھر وہ اگلے تین مہینے UI پر پھنس کر گزارتے ہیں۔ ایسے بٹن جو پروگرامر آرٹ کی طرح نظر آتے ہیں۔ HUD اوورلیز جو کیمرے سے لڑتے ہیں۔ position: absolute اور دعاؤں کے ساتھ بنائے گئے انوینٹری گرڈز۔ Vibe Skills پر گیم UI کے لیے AI مہارت ایک ہی بیٹھک میں ہم آہنگ مینو سسٹم، HUD، اور اوورلیز تیار کرتی ہیں - تاکہ آپ گیم بھیج سکیں، سیٹنگز اسکرین نہیں۔

یہ گائیڈ بتاتا ہے کہ UI ریٹینشن کا فیصلہ کیوں کرتا ہے، ہر گیم کے لیے چھ UI سطحیں جن کی ضرورت ہوتی ہے، Vibe Skills پر دستیاب AI گیم UI مہارتیں، اور ایک مکمل UI کٹ تیار کرنے کے لیے ویک اینڈ کا ورک فلو۔

Vibe Skills

Claude، Cursor، اور بہت کچھ کے لیے سینکڑوں تیار سکلز براؤز کریں۔

اسکلس دریافت کریں

مفت شروع کریں

گیم UI ریٹینشن کا فیصلہ کیوں کرتا ہے

کھلاڑی پہلے 90 سیکنڈ میں آپ کے گیم کو جج کرتے ہیں، اور ان سیکنڈز میں سے زیادہ تر UI کے اندر گزرتے ہیں۔ مین مینو، سیٹنگز، کنٹرول ہنٹس، پہلا HUD جو وہ گیم شروع ہونے پر دیکھتے ہیں۔ اگر UI خراب محسوس ہوتا ہے، تو گیم پلے کو موقع ہی نہیں ملتا۔

کچھ اعداد و شمار جو آپ کو یاد رکھنے کے قابل ہیں:

38% کھلاڑی پہلے سیشن میں براؤزر گیم چھوڑ دیتے ہیں اگر مین مینو ٹوٹا ہوا یا غیر اسٹائلش محسوس ہوتا ہے (itch.io پلے ٹیسٹ ڈیٹا، 2025)۔
Hollow Knight کا مین مینو 4 بٹن، ہاتھ سے بنایا گیا ہے، اور 60fps پر چلتا ہے - اور یہ ان سب سے زیادہ بتائے جانے والے وجوہات میں سے ایک ہے کہ کھلاڑی پہلے 30 منٹ کے مشکل دور سے گزرتے ہیں۔
Celeste کی پاز اسکرین 3 فونٹ سائز اور 2 رنگ استعمال کرتی ہے۔ یہ پورا UI سسٹم ہے۔ تحمل کو معیار کے طور پر پڑھا جاتا ہے۔
بڑے بجٹ والے گیمز اپنے کل پروڈکشن بجٹ کا 15-20% UI/UX پر خرچ کرتے ہیں۔ انڈی ڈیولپرز عام طور پر 0% خرچ کرتے ہیں۔

یہی فرق ہے جسے AI مہارتیں ختم کرنے کے لیے بنائی گئی ہیں۔

Vibe Skills

Claude، Cursor، اور بہت کچھ کے لیے سینکڑوں تیار سکلز براؤز کریں۔

اسکلس دریافت کریں

مفت شروع کریں

ہر گیم کے لیے چھ UI سطحیں جن کی ضرورت ہوتی ہے

کچھ بھی تیار کرنے سے پہلے، جان لیں کہ آپ کیا تیار کر رہے ہیں۔ ہر براؤزر گیم - 2D پلیٹ فارمر، 3D شوٹر، آئیڈل کلکر، واکنگ سم - کو ایک جیسی چھ UI سطحوں کی ضرورت ہوتی ہے۔ ایک اچھی AI مہارت ان سب کو ایک ہم آہنگ اسٹائل سسٹم میں تیار کرتی ہے۔

سطح	مقصد	عام غلطیاں	"اچھا" کیسا لگتا ہے
مین مینو	پہلا تاثر۔ آرٹ کی سمت طے کرتا ہے۔	ڈیفالٹ براؤزر فونٹس، مرکز میں متن، کوئی ہوور اسٹیٹس نہیں	زیادہ سے زیادہ 3-5 بٹن، کسٹم ٹائپوگرافی، ہوور مائیکرو اینیمیشن، بیک گراؤنڈ لوپ
HUD اوورلی	ان-گیم معلومات: صحت، اسکور، ایمو، ٹائمر	بے ترتیب کونوں میں تیرتے نمبر، کوئی گروپنگ نہیں، کیمرے سے لڑتا ہے	کونوں سے جڑا ہوا، نیم شفاف، ڈیٹا کی قسم کے لحاظ سے گروپ شدہ، idle ہونے پر فیڈ ہو جاتا ہے
انوینٹری / لوڈ آؤٹ	آئٹم مینجمنٹ اسکرین	16-کالم گرڈ، کوئی آئٹم ریئرٹی نہیں، اسکرین کو بلاک کرنے والے ٹولٹپس	4-8 کالم گرڈ، کلر-کوڈڈ ریئرٹی، سائیڈ پر ٹولٹپ، ڈریگ-اینڈ-ڈراپ یا کلک
سیٹنگز / آپشنز	آڈیو، کنٹرولز، گرافکس	ٹوگل کی ایک بڑی اسکرول ایبل فہرست	ٹیبز (آڈیو / ویڈیو / کنٹرولز)، سلائیڈرز نہ کہ ٹوگلز، "Apply" + "Reset to default"
پاز مینو	درمیانی گیم میں رکاوٹ	موڈل جو پوری گیم کو چھپا دیتا ہے	60% اپا سٹی پر اوورلی، 4-5 آپشنز، کی بورڈ کے لیے "Resume" آٹو فوکس
اینڈ اسکرین	جیت، ہار، یا رن کا خلاصہ	سرخ Arial میں "Game Over"، کوئی ری پلے بٹن نہیں	اعدادوشمار کا خلاصہ، بڑا "Play Again" CTA، ثانوی "Main Menu"

6 پالش شدہ UI سطحوں والی ایک گیم مکمل محسوس ہوتی ہے۔ 6 غیر اسٹائلش UI سطحوں والی ایک گیم اسکول پراجیکٹ کی طرح محسوس ہوتی ہے، چاہے گیم پلے کتنا ہی اچھا کیوں نہ ہو۔

سب سے مشکل کام سب 6 کو ہم آہنگ رکھنا ہے - وہی فونٹ فیملی، وہی بٹن ریڈیئس، وہی ہوور رویہ، وہی کلر پیلیٹ۔ یہیں پر AI مہارتیں اپنی قیمت ثابت کرتی ہیں۔

Vibe Skills پر 5 AI گیم UI مہارتیں

Vibe Skills پر 3D Games کیٹیگری میں 30+ مہارتیں ہیں جو مکمل طور پر کھیلنے کے قابل گیمز اور ان کے گرد تیار ہونے والے UI سسٹمز کو کور کرتی ہیں۔ یہاں پانچ سب سے زیادہ انسٹال شدہ UI فوکسڈ مہارتیں ہیں۔

مہارت	کے لیے بہترین	انجن	آؤٹ پٹ
Browser Game UI Kit Generator	ایک ہم آہنگ اسٹائل میں مکمل 6-سطح UI	Three.js, Phaser, vanilla JS	HTML/CSS اوورلی سسٹم + اسپرائٹ شیٹس
HUD Overlay System	صرف ان-گیم HUD (صحت، اسکور، منی میپ، ٹائمر)	Three.js, Phaser, Unity WebGL, Godot HTML5	CSS-پوزیشنڈ اوورلی یا کینوس اسپرائٹس
Pause + Settings Screen Pack	پاز، سیٹنگز، کنٹرول ریمیمپ	کوئی بھی ویب پر مبنی گیم انجن	React/HTML موڈل کمپوننٹس
Inventory + Loot Tooltip System	آئٹم گرڈز، ڈریگ-اینڈ-ڈراپ، ریئرٹی کلرز، ٹولٹپس	Three.js, Phaser, Unity WebGL	کمپوننٹ لائبریری + آئٹم کارڈ ٹیمپلیٹس
Main Menu + End Screen Combo	پہلا اور آخری تاثر	کوئی بھی	Lottie کے ساتھ اینیمیٹڈ مینو + اینڈ-گیم اسٹیٹ اسکرین

تمام 5 مہارتیں مشترکہ ڈیزائن ٹوکن فائل (رنگ، فونٹس، اسپیسنگ، ایزنگ) کے ساتھ آتی ہیں تاکہ سطحیں ایسی لگیں جیسے وہ ایک ہی ڈیزائنر سے آئی ہوں۔ زیادہ تر انڈی UI کٹس اس امتحان میں ناکام ہو جاتے ہیں - مینو ایک فونٹ استعمال کرتا ہے، HUD دوسرا استعمال کرتا ہے، اور کھلاڑی اسے فوری طور پر محسوس کرتے ہیں۔

Vibe Skills پر 3D Games کی مہارتیں براؤز کریں →

ویک اینڈ میں ایک مکمل گیم UI کٹ بنائیں

یہ اصل ورک فلو ہے جو itch.io اور Newgrounds پر براؤزر گیمز تیار کرنے والے انڈی ڈیولپرز استعمال کرتے ہیں۔ کل وقت: ویک اینڈ پر تقریباً 12 کام کے گھنٹے۔

مرحلہ 1: Vibe Skills پر ایک UI مہارت منتخب کریں

3D Games کیٹیگری کھولیں اور Browser Game UI Kit Generator مہارت انسٹال کریں۔ یہ واحد مہارت ہے جو ایک ہم آہنگ ٹوکن سسٹم میں تمام 6 سطحیں تیار کرتی ہے۔ اگر آپ کے گیم میں پہلے سے کام کرنے والے مینوز ہیں اور آپ کو صرف HUD کی ضرورت ہے، تو اس کے بجائے تنہا HUD Overlay مہارت انسٹال کریں۔

مرحلہ 2: اپنے گیم کے "وائب" کو 3 الفاظ میں بیان کریں

تیار کرنے سے پہلے، 3 الفاظ لکھیں جو آپ کے گیم کے لہجے کو بیان کرتے ہیں۔ مثالیں: "نیین، پرتشدد، تیز" (ایک synthwave شوٹر)، "نرم، پانی والا، سست" (ایک ماہی گیری کا کھیل)، "چنکی، ریٹرو، پکسل" (ایک metroidvania)۔ مہارت ان کو کلر پیلیٹ، ٹائپوگرافی کے انتخاب، اور اینیمیشن ایزنگ کے لیے ان پٹ کے طور پر استعمال کرتی ہے۔ اسے مت چھوڑیں - عام ان پٹ عام UI پیدا کرتا ہے۔

مرحلہ 3: پہلے ڈیزائن ٹوکن تیار کریں

مہارت آپ کی پیلیٹ، فونٹ اسٹیک، بٹن ریڈیائی، اسپیسنگ اسکیل، اور اینیمیشن ٹائمنگ کے ساتھ tokens.css فائل یا Tailwind کنفیگ آؤٹ پٹ کرتی ہے۔ کسی بھی اصل 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 کٹ رسپانسیو لے آؤٹ تیار کرتا ہے جو ٹچ ڈیوائسز پر فوری طور پر کام کرتے ہیں - بڑے ٹیپ ٹارگٹس، سوپ-ان موبائل کنٹرول اوورلیز (D-pad اور ایکشن بٹن)، اور ایک موبائل-فرسٹ پاز مینو۔ آپ کو الگ بلڈ کی ضرورت نہیں ہے، لیکن آپ کو حقیقی فون پر ٹیسٹ کرنے کی ضرورت ہے۔ براؤزر ڈیولپمنٹ ٹولز ٹچ پرفارمنس کے بارے میں جھوٹ بولتے ہیں۔

گیم UI حقیقت میں کتنا قابل رسائی ہو سکتا ہے؟

براؤزر گیمز مینو، سیٹنگز، اور HUDs کے لیے WCAG AA آسانی سے حاصل کر سکتے ہیں - کی بورڈ نیویگیشن، فوکس رنگ، 4.5:1 کلر کنٹراسٹ، اور اسکور اور صحت پر اسکرین ریڈر لیبل۔ HTML اوورلی اپروچ ان سب کو تقریبا مفت بناتا ہے۔ Vibe Skills پر مہارتیں ڈیفالٹ کے طور پر قابل رسائی مارک اپ تیار کرتی ہیں۔ اصل گیم پلے کو قابل رسائی بنانا مشکل ہے، لیکن UI کو رکاوٹ نہیں بننا چاہیے۔

کیا وہی UI کٹ Unity WebGL اور Godot HTML5 بلڈز کے لیے کام کرتا ہے؟

زیادہ تر ہاں۔ Unity WebGL اور Godot HTML5 دونوں کینوس پر رینڈر ہوتے ہیں، اور آپ اوپر ایک DOM اوورلی اسٹیک کر سکتے ہیں۔ مہارتوں میں دونوں انجنوں کے لیے اڈاپٹر شامل ہیں تاکہ UI آپ کے گیم کی اسٹیٹ سے بات کرے۔ Unity کے مخصوص فیچرز (جیسے بلٹ ان ایونٹ سسٹم) کو ایک پتلے پل کی ضرورت ہوتی ہے - مہارت اس پل کے لیے نمونہ کوڈ تیار کرتی ہے۔

میں مینو، HUD، اور انوینٹری کو بصری طور پر مستقل کیسے رکھوں؟

یہ انڈی گیم UI کے غیر پیشہ ور نظر آنے کی سب سے بڑی وجہ ہے - 6 سطحیں جو الگ الگ ڈیزائن کی گئی ہیں۔ حل مشترکہ ڈیزائن ٹوکن ہیں: ایک فائل جو رنگ، فونٹس، اسپیسنگ، اور ایزنگ کی تعریف کرتی ہے۔ ہر سطح اس فائل سے امپورٹ کرتی ہے۔ Vibe Skills پر مہارتیں یہ خود بخود کرتی ہیں - ایک بار ٹوکن تیار کریں، ان ٹوکن سے تمام 6 سطحیں تیار کریں، ہو گیا.

کیا میں مہارت کو توڑے بغیر تیار شدہ UI کو حسب ضرورت بنا سکتا ہوں؟

ہاں۔ مہارتیں قابل تدوین HTML، CSS، اور (اختیاری طور پر) React کمپوننٹس تیار کرتی ہیں۔ آپ فائلوں کے مالک ہیں۔ زیادہ تر ڈیولپرز رنگوں کو ٹوییک کرتے ہیں، ایک لوگو تبدیل کرتے ہیں، آئیکنز بدلتے ہیں، اور ایک یا دو بٹن شیپس تبدیل کرتے ہیں - بس اتنا ہی۔ اگر آپ کو بڑے اسٹائل کی تبدیلی کی ضرورت ہے، تو سطحوں کو ہاتھ سے دوبارہ لکھنے کے بجائے اپ ڈیٹ شدہ ٹوکن سے دوبارہ تیار کریں۔

اگر میرے گیم میں پہلے سے ہی آدھا بنا ہوا UI ہے تو کیا مجھے اسے پھینک دینا چاہیے؟

نہیں. HUD Overlay مہارت یا Pause + Settings Pack تنہا انسٹال کریں اور ایک وقت میں ایک سطح کو تبدیل کریں۔ زیادہ تر انڈی ڈیولپرز سب سے پہلے مین مینو (سب سے زیادہ مرئیت) کو اپ گریڈ کرتے ہیں، پھر HUD (سب سے زیادہ استعمال ہونے والا)، پھر سیٹنگز اور پاز (سب سے کم استعمال ہونے والا لیکن سب سے زیادہ ٹوٹا ہوا)۔ پہلی سطح بھیجنے کے بعد آپ کو معیار کا جمپ محسوس ہوگا۔

UI بھیجیں، پھر گیم بھیجیں

گیم UI انڈی پروجیکٹس کا خاموش قاتل ہے۔ گیم پلے شاندار ہو سکتا ہے، لیکن اگر مینو ڈیفالٹ ورڈ پریس تھیم کی طرح لگتا ہے، تو کھلاڑی 90 سیکنڈ میں اچھل جاتے ہیں۔ پالش شدہ UI - ہم آہنگ ٹوکن، اینکرڈ HUD، صاف سیٹنگز، اطمینان بخش اینڈ اسکرین - وہ ہے جو 4 گھنٹے کی itch.io ڈاؤن لوڈ کو ایک حقیقی پروڈکٹ کی طرح بناتی ہے۔

4 ہفتے کے UI ری ڈیزائن کو چھوڑ دیں۔ ویک اینڈ میں ایک مکمل 6-سطح کی کٹ تیار کریں، اسے وائر کریں، اور گیم کو مزے دار بنانے پر واپس جائیں۔

Vibe Skills پر گیم UI مہارتیں براؤز کریں →

گیم UI کو شروع سے بنانا بند کریں۔ Vibe Skills پر UI کٹ مہارت انسٹال کریں اور ایک ہی بیٹھک میں مینو، HUD، انوینٹری، سیٹنگز، پاز، اور اینڈ اسکرین بھیجیں۔