Design token၊ spacing နဲ့ accessibility ကို မပျက်အောင် AI ကို UI ခိုင်းနည်း လေ့လာမည်။
ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်
AI က လှတဲ့ UI ကို မြန်မြန်ထုတ်နိုင်ပါတယ်။ ဒါပေမယ့် မတူညီတဲ့ button style၊ raw hex color၊ 12px touch target တွေ ထည့်တတ်ပါတယ်။ Vibe coding မှာ UI prompt က ရှိပြီးသား design system ကို ညွှန်ရပါတယ်။ “site tokens သုံးပါ၊ min-h 44px၊ focus ring ထားပါ” ဆိုရင် ကိုယ့် platform နဲ့ တသားတည်းဖြစ်ပါတယ်။
နေ့စဉ်ဘဝနဲ့ ချိတ်ကြည့်မယ်
Button အသစ်လိုရင် ရှိပြီးသား Button component ကို သုံးခိုင်းပါ။ Card ဆိုရင် ရှိတဲ့ TutorialCard ပုံစံကို ဥပမာပေးပါ။ “Dribbble လိုလှအောင်” မခိုင်းပါနှင့်။ ကိုယ့် site ရဲ့ light/dark tokens ကို ထိန်းချင်ရင် class နာမည် (bg-surface, text-foreground) ကို prompt ထဲရေးပါ။ ပြီးရင် keyboard နဲ့ tab လိုက်ပါ။
အတူတူ လက်တွေ့စမ်းမယ်
// Prompt the AI to reuse tokens, not invent hex colors.
<button
type="button"
className="inline-flex min-h-[44px] items-center rounded-lg bg-accent px-4 text-sm font-medium text-accent-foreground"
>
Save note
</button>Site ရဲ့ design token နဲ့ ကိုက်သော UI slice တစ်ခု ထုတ်နိုင်မည်။၅ မိနစ် စမ်းကြည့်
Empty state card တစ်ခုအတွက် prompt ရေးပါ။ ရှိပြီးသား class နာမည် ၃ ခုကို ကန့်သတ်ချက်အဖြစ်ထည့်ပါ။
သတိလေးတစ်ချက်
AI output ကို အပြီးသတ်အမှန်လို့မယူပါနှင့်။ Code၊ secret နှင့် user data ကို လူကပြန်ဖတ်၊ စမ်းပြီးမှ သုံးပါ။