Ui
မက်တီစက္ကူပေါ်တွင် လက်တွေ့အစီအစဉ်
shadcn/ui သည် monochrome ဒီဇိုင်းစနစ်တစ်ခု ဖန်တီးရန်အတွက် အလုပ်ရုံဆွေးနွေးပွဲတစ်ခုဖြစ်သည်- သန့်ရှင်းသော အဖြူရောင်ကင်းဗတ်စ်၊ နူးညံ့သော နွေးထွေးသော မီးခိုးရောင်မျက်နှာပြင်များနှင့် အသေးငယ်ဆုံး နယ်နိမိတ်များပေါ်တွင် နေရာချထားသော ကြီးမားသော အချင်းဝက်ကတ်များ။ interface သည် လုံးဝနီးပါး achromatic ဖြစ်သည် - အနက်ရောင်စာသား၊ အဖြူရောင်မျက်နှာပြင်များ၊ မီးခိုးရောင်ဒုတိယအရောင်များ - အမှားအယွင်းအခြေအနေများအတွက်သာ သီးသန့်ထားရှိပြီး အခြားဘာမှမရှိသော တစ်ခုတည်းသော၊ အနှောင့်အယှက်ဖြစ်စေသော အနီရောင်ဖြစ်သည်။ စာလုံးပုံစံသည် Geist ၏ geometric ကြားနေမှုအပေါ် အခြေခံထားပြီး မျက်နှာပြင်များပေါ်တွင် စာလုံးအမြင့်တင်းကျပ်စွာရှိပြီး စားသုံးသူထုတ်ကုန်ထက် developer အခြေခံအဆောက်အအုံကဲ့သို့ ခံစားရသော တည်ငြိမ်ပြီး ကုဒ်ကဲ့သို့သော ခံစားချက်ကို ဖန်တီးပေးသည်။
အနည်းဆုံးပုံများ—စနစ်တွင် အသုံးပြုသူမျက်နှာပြင်၏ အများစုနီးပါးပါဝင်သည်။ အဓိကဓာတ်ပုံများ၊ သရုပ်ဖော်ပုံများ သို့မဟုတ် အလှဆင်ဂရပ်ဖစ်များ မပါဝင်ပါ။ ထုတ်ကုန်သရုပ်ပြမှုများကို အစိတ်အပိုင်းပုံစံငယ်များ (ကတ်များ၊ ထည့်သွင်းကွက်လပ်များ၊ ခလုတ်များ) အဖြစ် grid တစ်ခုဖြင့် တင်ပြထားပြီး စာရွက်စာတမ်းနှင့် အမြင်အာရုံဆိုင်ရာ အကြောင်းအရာ နှစ်မျိုးလုံးအဖြစ် ဆောင်ရွက်ပေးသည်။ အိုင်ကွန်များသည် #0a0a0a သို့မဟုတ် #737373 ဖြင့် 1.5–2px အထူရှိသော ဂျီဩမေတြီမျဉ်းပါးများ (Lucide မှ ယူထားခြင်းဖြစ်နိုင်သည်) ဖြစ်ပြီး လုပ်ဆောင်ချက်ဆိုင်ရာ အချက်ပြမှုများအဖြစ် အနည်းငယ်သာ အသုံးပြုသည်။ အမြင်အာရုံဆိုင်ရာ ဘာသာစကားမှာ UI အစိတ်အပိုင်းများကိုယ်တိုင်ဖြစ်သည်—စာမျက်နှာသည် မြင်သာသော အစိတ်အပိုင်းတိုင်းသည် မြင်သာသော ဒီဇိုင်းဒြပ်စင်တစ်ခုဖြစ်ပြီး နေထိုင်မှုပုံစံလမ်းညွှန်အဖြစ် လုပ်ဆောင်သည်။
ရောင်စုံ
ကြားနေ
- Canvas
#f5f5f5— စာမျက်နှာနောက်ခံ၊ အသံတိတ်မျက်နှာပြင်ဖြည့်ခြင်း၊ အပိုခလုတ်များ။ - Paper
#ffffff— ကတ်မျက်နှာပြင်များ၊ ပေါ့ပ်အပ်နောက်ခံများ၊ အဓိကခလုတ်ဖြည့်မှုများ - Surface Alt
#fafafa— ဘေးဘားနောက်ခံ၊ မမြင်သာသောကတ်ရွေးချယ်မှု၊ ထည့်သွင်းမှုအကွက်၏ အားလပ်ချိန်အခြေအနေ။ - Ink
#0a0a0a— အဓိကစာသား၊ ခေါင်းစဉ်များ၊ ခလုတ်အညွှန်းများ၊ အိုင်ကွန်အကြမ်းဖျင်းများ။ - Ink Soft
#171717— ခလုတ်နောက်ခံပုံများတွင် ဖြည့်စွက်ထားသော၊ အလင်းမျက်နှာပြင်များပေါ်တွင် အပိုစာသားများ။ - Mid Gray
#737373— အဓိကစာသား၊ placeholder စာသား၊ auxiliary label များနှင့် ရပ်တန့်ထားသည့် icon fill အားလုံးကို အသံတိတ်ထားသည်။
စာလုံးပုံစံ
၁၂ မှ ၄၈px အထိ · အဆင့် ၈ ဆင့်
- Geist — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400, 500, 600 · interface စာသားအားလုံး— 14px/400 လိုင်းအလေးချိန်ရှိသော body text၊ 24–48px/600 လိုင်းအလေးချိန်ရှိသော heading များနှင့် 13–14px/500 လိုင်းအလေးချိန်ရှိသော button များ။ Geist ၏ geometric စာလုံးပုံစံများနှင့် uniform line weight သည် developer tool များအတွက် ကြားနေခံစားချက်ကို ဖန်တီးပေးသည်။ 48px စာလုံးအကွာအဝေးနှင့် -0.05em စာလုံးအကွာအဝေးရှိသော 600 လိုင်းအလေးချိန်သည် တည်းဖြတ်ခြင်းထက် တွေးခေါ်မှုရှိသော ရှင်းလင်းပြီး ယုံကြည်မှုရှိသော ခေါင်းစဉ်များကို သေချာစေသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | သိပ်သည်းသော |
| အခြေခံအဆင့် | 8px |
| ခလုတ်အချင်းဝက် | 18px |
| ကတ်အချင်းဝက် | 24px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 48-80px |
| စာမျက်နှာအကျယ် | 1280px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Ui ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Ventriloc — ပူနွေးသောစက္ကူပေါ်ရှိဒေတာ၏ အယ်ဒီတာ့အာဘော်စောင့်ကြည့်ရေးဌာန - တစ်ရောင်တည်းသောတိကျမှုကို မီးမောင်းထိုးပြသည့် လိမ္မော်ရောင်မီးခဲတစ်လုံး
- Geniestudio — အနားသတ်ကျယ်ပြီး ဘောပင်ထူထူတစ်ချက်တည်းနဲ့ နူးညံ့တဲ့ နေ့အလင်းရောင်မှတ်စုစာအုပ်တစ်အုပ်
- xAI — ဆေးပြားအနက်ရောင်ပါသော နွေးထွေးသော ခရင်မ်ဓာတ်ခွဲခန်း
- Cal — မိုနိုခရုမ်းလက်တွေ့ကျမှု၊ လူသားဆန်သောချဉ်းကပ်မှု။ တိကျသော အဖြူအမည်း palette မှတစ်ဆင့် ရှင်းလင်းပြတ်သားမှုနှင့် လုပ်ဆောင်နိုင်စွမ်းကို ဦးစားပေးသော်လည်း ဖော်ရွေသော စာလုံးပုံစံနှင့် လုံးဝန်းသောပုံသဏ္ဍာန်များဖြင့် နူးညံ့စေသော စနစ်။
- Scale — နည်းပညာဆိုင်ရာ ပရောဂျက်တစ်ခုနှင့် ပေါင်းစပ်ထားသော အရည်အသွေးမြင့် ပြတိုက်အရည်အသွေး ဓာတ်ပုံဓာတ်ခွဲခန်း
- Contractbook — အလွန်တရာ မှောင်မိုက်သော ကောင်းကင်အောက်ရှိ ခရင်မ်စက္ကူ စာချုပ်များ
- AutoSend — ခရမ်းရောင်မီးတစ်ခုတည်းသာရှိသော သက်တောင့်သက်သာရှိသော ကျောက်စတူဒီယိုတစ်ခု—serif ခေါင်းစဉ်များနှင့် တောက်ပသော indigo ရောင်စဉ်တန်းများသည် တိတ်ဆိတ်ငြိမ်သက်ပြီး အဖြူရောင်နီးပါးနေရာတစ်ခုတည်းတွင် တစ်ပြိုင်နက်တည်းတည်ရှိနေသည်။
- Air — ရုပ်တု "ဖန်ခွက်မှတစ်ဆင့် သန်းခေါင်ယံကောင်းကင်"
- SpatialChat — အဖြူရောင်စက္ကူပေါ်တွင် ခရမ်းရောင်သွေးခုန်နှုန်း
- Squarespace — ရုပ်ရှင်ဆန်ဆန် မိုနိုခရုမ်းပြခန်း
- Giga — ရေခဲအော့ဘ်စီဒီယန်ပေါ်က သန်းခေါင်ယံမိုးကုပ်စက်ဝိုင်း
- Supabase — မီးသွေးဖုန်မှုန့်ပင်လယ်ပေါ်တွင် တစ်ခုတည်းသော chromatic pulse ဖြင့် ဖော့စဖရပ်စ်အစိမ်းရောင်အစက်တစ်စက်ဖြင့် သန်းခေါင်ယံတွင် ကုဒ်တည်းဖြတ်သူ