Ҳазорҳо маҳоратҳои тайёр барои Claude, Cursor ва ғайраро омӯзед.
UI-и бозӣ душвортарин қисми таҳияи мустақил аст (ва касе дар ин бора ҳарф намезанад)
Аксари таҳиягарони мустақил дар тӯли ду ҳафта прототипи бозии корӣ мебароранд. Сипас, онҳо се моҳи ояндаро дар UI саргарм мегузаронанд. Тугмаҳо, ки ба санъати программист монанданд. Сарпӯши HUD, ки бо камера меҷанганд. Шабакаҳои инвентарӣ, ки бо position: absolute ва дуоҳо сохта шудаанд. Маҳорати AI барои UI-и бозӣ дар Vibe Skills системаҳои муттаҳидаи меню, HUDҳо ва сарпӯшҳоро барои бозиҳои браузерӣ дар як нишаст ба вуҷуд меоранд - то шумо метавонед бозиро бароваред, на экрани танзимот.
Ин дастур мефаҳмонад, ки чаро UI нигоҳдории бозигаронро муайян мекунад, шаш сатҳи UI, ки ҳар бозӣ ба онҳо ниёз дорад, маҳорати UI-и бозии AI, ки дар Vibe Skills дастрас аст, ва ҷараёни кор дар рӯзи истироҳат барои баровардани як маҷмӯи пурраи UI.
Ҳазорҳо маҳоратҳои тайёр барои 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 барои бастани он сохта шудааст.
Ҳазорҳо маҳоратҳои тайёр барои Claude, Cursor ва ғайраро омӯзед.
Шаш сатҳи UI, ки ҳар бозӣ ба онҳо ниёз дорад
Пеш аз он ки шумо чизеро ба вуҷуд оред, бидонед, ки шумо чӣ ба вуҷуд меоред. Ҳар бозии браузерӣ - платформачии 2D, тирандози 3D, кликерҳои бекор, симулятори сайругашт - ба шаш сатҳи UI-и якхела ниёз дорад. Як маҳорати хуби AI ҳамаи онҳоро дар як системаи услубии муттаҳида бароварда мебарорад.
| Сатҳ | Мақсад | Хатогиҳои маъмул | "Хуб" чӣ гуна ба назар мерасад |
|---|---|---|---|
| Менюи асосӣ | Таассуроти аввал. Самти санъатро муқаррар мекунад. | Шрифтҳои пешфарзии браузер, матни марказӣ, набудани ҳолатҳои гузариш | Максимум 3-5 тугма, типографияи фармоишӣ, аниматсияи микро-гузариш, такрори замина |
| Сарпӯши HUD | Маълумот дар дохили бозӣ: саломатӣ, хол, муҳимот, таймер | Рақамҳои шинокунанда дар кунҷҳои тасодуфӣ, набудани гурӯҳбандӣ, мубориза бо камера | Ба кунҷҳо васл карда шудааст, нимшаффоф, аз рӯи намуди маълумот гурӯҳбандӣ шудааст, ҳангоми бекор будан пажмурда мешавад |
| Инвентарӣ / боркунӣ | Экрани идоракунии ашё | Шабакаи 16-сутунӣ, набудани ҷойгоҳи ашё, баъзе аз асбобҳо экрани экранро мепӯшонанд | Шабакаи 4-8 сутунӣ, ҷойгоҳи рангӣ, асбоби дар паҳлӯ, кашолакунӣ ва партофтан ё клик |
| Танзимот / имконот | Аудио, идоракунӣ, графика | Як рӯйхати бузурги саҳифаи кашиданӣ | Табҳо (Аудио / Видео / Идоракунӣ), слайдерҳо на тугмаҳо, "Apply" + "Reset to default" |
| Менюи таваққуф | Монеаи миёнаи бозӣ | Модал, ки тамоми бозиро пинҳон мекунад | Сарпӯш дар 70% шаффофият, 4-5 имконот, "Resume" барои клавиатура ба таври худкор ҷойгир карда шудааст |
| Экрани охир | Бурд, бохт ё хулосаи давидан | "Game Over" бо Arial сурх, тугмаи бозӣ надорад | Хулосаи омор, CTA-и бузурги "Play Again", "Main Menu" дуюмдараҷа |
Бозӣ бо 6 сатҳи UI-и баландсифат ба итмомрасида ҳис мекунад. Бозӣ бо 6 сатҳи UI-и бетартиб, новобаста аз он ки бозӣ то чӣ андоза хуб аст, ба лоиҳаи мактабӣ монанд ҳис мекунад.
Қисми душвортарин нигоҳ доштани ҳамаи 6-тои онҳо муттаҳид аст - ҳамон оилаи шрифт, ҳамон радиуси тугма, ҳамон рафтори гузариш, ҳамон палитраи ранг. Ин аст, ки маҳорати AI арзиши худро нишон медиҳад.
5 маҳорати UI-и бозии AI дар Vibe Skills
Категорияи бозиҳои 3D дар Vibe Skills 30+ маҳоратро дар бар мегирад, ки бозиҳои пурраи бозӣ ва системаҳои UI-ро, ки дар атрофи онҳо бароварда мешаванд, фаро мегиранд. Инҳо панҷ маҳорати бештар насбшудаи ба UI нигаронидашуда мебошанд.
| Маҳорат | Беҳтарин барои | Муҳаррикҳо | Натиҷа |
|---|---|---|---|
| Генератори маҷмӯи UI-и бозии браузерӣ | UI-и пурраи 6-сатҳӣ дар як системаи муттаҳидаи услуб | Three.js, Phaser, vanilla JS | Системаи сарпӯши HTML/CSS + маҷмӯи рангҳо |
| Системаи сарпӯши HUD | Танҳо HUD дар дохили бозӣ (саломатӣ, хол, харитаи хурд, таймер) | Three.js, Phaser, Unity WebGL, Godot HTML5 | Сарпӯши ҷойгиршудаи CSS ё рангҳои канвас |
| Маҷмӯи экрани таваққуф + танзимот | Таваққуф, танзимот, аз нав таъин кардани идоракунӣ | Ҳар гуна муҳаррики бозии веб | Компонентҳои модали React/HTML |
| Системаи инвентарӣ + асбоби лут | Шабакаҳои ашё, кашолакунӣ ва партофтан, рангҳои ҷойгоҳ, асбобҳо | Three.js, Phaser, Unity WebGL | Китобхонаи компонентҳо + шаблонҳои кортҳои ашё |
| Комбинатсияи менюи асосӣ + экрани охир | Таассуроти аввал ва охирин | Ҳар гуна | Менюи аниматсионӣ бо Lottie + экрани омори охири бозӣ |
Ҳама 5 маҳорат бо файли муштараки токенҳои тарроҳӣ (рангҳо, шрифтҳо, фосила, осонӣ) бароварда мешаванд, то сатҳҳо чунин ба назар расанд, ки аз як тарроҳ омадаанд. Аксари маҷмӯъҳои UI-и мустақил ин санҷишро аз даст медиҳанд - меню як шрифт, HUD дигареро истифода мебарад ва бозигарон фавран мушоҳида мекунанд.
Маҳорати бозиҳои 3D-ро дар Vibe Skills тамошо кунед →
Маҷмӯи пурраи UI-и бозиро дар як рӯзи истироҳат созед
Ин ҷараёни воқеии кор аст, ки аз ҷониби таҳиягарони мустақил, ки бозиҳои браузерӣ дар itch.io ва Newgrounds бароварда мешаванд, истифода мешавад. Вақти умумӣ: ~12 соати корӣ дар тӯли рӯзи истироҳат.
Қадами 1: Маҳорати UI-ро дар Vibe Skills интихоб кунед
Категорияи бозиҳои 3D -ро кушоед ва маҳорати Browser Game UI Kit Generator -ро насб кунед. Ин ягона маҳоратест, ки ҳамаи 6 сатҳро дар як системаи муттаҳидаи токен бароварда мебарорад. Агар бозии шумо аллакай менюҳои корӣ дошта бошад ва ба шумо танҳо HUD лозим бошад, ба ҷои он маҳорати мустақили HUD Overlay -ро насб кунед.
Қадами 2: "Виб"-и бозии худро дар 3 калима муайян кунед
Пеш аз баровардан, 3 калимае нависед, ки оҳанги бозии шуморо тавсиф мекунанд. Мисолҳо: "неон, бераҳмона, зуд" (як тирандози синтез), "нарм, обӣ, суст" (бозии моҳидорӣ), "кӯрпа, ретро, пиксел" (метроидвания). Маҳорат инҳоро ҳамчун вуруд барои палитраи ранг, интихоби типография ва осонии аниматсия истифода мебарад. Инро аз даст надиҳед - вуруди умумӣ 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 -ро дар бар мегиранд, ки API-и setHealth(0.7) -ро фош мекунад, то шумо набояд тағирёбандаҳои CSS -ро дастӣ идора кунед. Ҳодисаҳои таваққуф, танзимот ва экрани охирро ба интизори идоракунии вуруди мавҷудаи худ васл кунед.
Қадами 6: Бо 3 бегона бозӣ кунед ва аз нав дида бароед
Дӯстон ба шумо мегӯянд, ки UI олиҷаноб аст. Бегонагон ҳақиқатро ба шумо мегӯянд. Як сохторро дар itch.io ҷойгир кунед, аз 3 нафари тасодуфӣ пурсед, ки 5 дақиқа бозӣ кунанд ва сабтро тамошо кунед. Хатогиҳои UI, ки муҳиманд, дар 60 сонияи аввал пайдо мешаванд. Онҳоро ислоҳ кунед, сатҳи осебдидаро аз нав бароваред, бароваред.
Вақти умумӣ: Қадами 1-3 (~1 соат) + Қадами 4 (~30 дақиқа) + Қадами 5 (~6-8 соат васлкунӣ) + Қадами 6 (~3 соат давраҳои бозӣ) = як рӯзи истироҳат.
Як тарроҳи UI-и озод барои ҳамон муҳлат 3000-8000 доллар талаб мекунад ва 4-6 ҳафта вақт мегирад. Обуна дар Vibe Skills аз 39 доллар дар як моҳ оғоз мешавад ва ба шумо имкониятҳои номаҳдуд медиҳад - то шумо метавонед то он даме, ки UI ба назар расад, такроран такрор кунед.
Маҳорати UI-и бозиро дар Vibe Skills насб кунед →
Саволҳои зуд-зуд додашаванда
Оё ман бояд UI-и бозии худро ҳамчун сарпӯши HTML/CSS ё бевосита дар канвас созам?
Барои аксари бозиҳои браузерӣ, сарпӯши HTML/CSS дар болои канваси Three.js ё Phaser барои сохтан зудтар, барои дастрасӣ осонтар ва матнро дар ҳар гуна қарор ҷолиб намоиш медиҳад. UI-и дар канвас асосёфтаро танҳо вақте истифода баред, ки ба шумо мувофиқати дақиқи санъати пикселӣ (як бозии сахти санъати пикселӣ) лозим аст ё вақте ки ҳодисаҳои DOM бо идоракунӣ халал мерасонанд. Маҳоратҳо дар Vibe Skills ҳарду вариантро бароварда мебароранд.
Оё UI дар мобилӣ кор мекунад ё ба ман лозим аст, ки як сохтори алоҳидаи мобилӣ дошта бошам?
Маҷмӯи UI-и бозии браузерӣ дар Vibe Skills тарҳҳои ҷавобгӯро ба вуҷуд меорад, ки аз қуттӣ дар дастгоҳҳои сенсорӣ кор мекунанд - нишондиҳандаҳои калонтарини ламс, сарпӯшҳои идоракунии мобилӣ (D-pad ва тугмаҳои амал) ва менюи таваққуфи мобилӣ-аввал. Ба шумо сохтори алоҳида лозим нест, аммо ба шумо лозим аст, ки онро дар телефони воқеӣ санҷед. Воситаҳои таҳиягари браузер дар бораи иҷрои ламс дурӯғ мегӯянд.
UI-и бозӣ то чӣ андоза дастрас буда метавонад?
Бозиҳои браузерӣ метавонанд барои менюҳо, танзимот ва HUDҳо ба осонӣ ба WCAG AA бирасанд - навигацияи клавиатура, ҳалқаҳои фокусинг, контрасти ранг 4.5:1 ва тамғакоғазҳои хонандаи экран барои хол ва саломатӣ. Усули сарпӯши HTML ин ҳама чизро қариб ройгон месозад. Маҳоратҳо дар Vibe Skills аслиёти дастрасро ба таври пешфарз ба вуҷуд меоранд. Бозии воқеиро дастрас кардан душвортар аст, аммо UI набояд монеа бошад.
Оё ҳамон маҷмӯи UI барои сохторҳои Unity WebGL ва Godot HTML5 кор мекунад?
Асосан ҳа. Unity WebGL ва Godot HTML5 ҳарду ба канвас рендеринг мекунанд ва шумо метавонед як сарпӯши DOM-ро дар болои он ҷойгир кунед. Маҳоратҳо адаптерҳоро барои ҳарду муҳаррик дар бар мегиранд, то UI бо ҳолати бозии шумо ҳарф занад. Хусусиятҳои махсуси Unity (ба монанди системаи чорабинии дарунсохт) ба як пули тунук ниёз доранд - маҳорат намунаи кодро барои он пул бароварда мебарорад.
Чӣ тавр ман меню, HUD ва инвентарӣро аз ҷиҳати визуалӣ муттаҳид нигоҳ дорам?
Ин сабаби №1 аст, ки UI-и бозии мустақил ба назарҳо оммавӣ мерасад - 6 сатҳ, ки дар алоҳидагӣ тарроҳӣ шудаанд. Ҳалли он токенҳои муштараки тарроҳӣ мебошад: як файл, ки рангҳо, шрифтҳо, фосила ва осониро муайян мекунад. Ҳар як сатҳ аз ин файл ворид мекунад. Маҳоратҳо дар Vibe Skills ин корро ба таври худкор иҷро мекунанд - токенҳоро як бор ба вуҷуд оваред, ҳамаи 6 сатҳро аз ин токенҳо ба вуҷуд оваред, анҷом дода шуд.
Оё ман метавонам UI-и баровардашударо бидуни вайрон кардани маҳорат танзим кунам?
Ҳа. Маҳоратҳо файлҳои HTML, CSS ва (ихтиёрӣ) React-ро бароварда мебароранд. Шумо соҳиби файлҳо ҳастед. Аксари таҳиягарон рангҳоро тағир медиҳанд, логотипро иваз мекунанд, иконҳоро иваз мекунанд ва як ё ду шакли тугмаро иваз мекунанд - ин ҳама чиз аст. Агар ба шумо тағироти асосии услуб лозим бошад, ба ҷои ревизияи сатҳҳо дастӣ, аз токенҳои навшуда аз нав бароваред.
Чӣ мешавад, агар бозии ман аллакай UI-и нимсохта дошта бошад - оё ман бояд онро партоям?
Не. Маҳорати HUD Overlay ё маҷмӯи алоҳидаи Pause + Settings Pack -ро насб кунед ва як сатҳро дар як вақт иваз кунед. Аксари таҳиягарони мустақил аввал менюи асосиро (балантарин намоён), сипас HUD (аз ҳама бештар истифодашаванда), баъд танзимот ва таваққуф (камтар истифодашаванда, вале аз ҳама шикаста) такмил медиҳанд. Пас аз баровардани сатҳи аввал, шумо ҷаҳиши сифатро эҳсос хоҳед кард.
UI-ро бароваред, сипас бозиро бароваред
UI-и бозӣ қотилони хомӯши лоиҳаҳои мустақил аст. Бозӣ метавонад олиҷаноб бошад, аммо агар меню ба мавзӯи пешфарзии WordPress монанд бошад, бозигарон дар 90 сония мепаранд. UI-и баландсифат - токенҳои муттаҳид, HUD-и васлшуда, танзимоти тоза, экрани охирини қаноатбахш - ин аст, ки чаро зеркашии 4-соатаи itch.io ба маҳсулоти воқеӣ монанд ҳис мекунад.
Дизайни дубораи UI-и 4-ҳафтаинаро тарк кунед. Маҷмӯи пурраи 6-сатҳиро дар як рӯзи истироҳат ба вуҷуд оред, онро васл кунед ва ба бозӣ шавқовар баргардед.
Маҳоратҳои UI-и бозиро дар Vibe Skills тамошо кунед →
UI-и бозиро аз сифр сохтанро бас кунед. Маҳорати маҷмӯи UI-ро дар Vibe Skills насб кунед ва меню, HUD, инвентарӣ, танзимот, таваққуф ва экрани охирро дар як нишаст бароваред.