UI နှင့် Component များကို AI နဲ့ တည်ဆောက်ခြင်း

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 လိုက်ပါ။

• ရှိပြီးသား component ကို အရင်ညွှန်ပါ
• Touch target နှင့် focus ကို ဖော်ပြပါ
• Hex အသစ်မထည့်ခိုင်းပါနှင့်

အတူတူ လက်တွေ့စမ်းမယ်

// 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 တစ်ခု ထုတ်နိုင်မည်။