Cursor
မီးခိုးတလူလူဖြင့် ထွန်းထားသော သက်တောင့်သက်သာရှိသော သိုးသားရေချုပ်အလုပ်ရုံ
Cursor သည် နွေးထွေးသော စက္ကူကဲ့သို့ စာလုံးပုံစံကို အသုံးပြုထားသည်- ခရင်မ်ရောင်ကင်းဗတ်စ်၊ မင်မည်းရောင်စာသားနှင့် မီးခိုးရောင်လိမ္မော်ရောင်တစ်ခုတည်းဖြင့် ခလုတ်များကို ဖြည့်မည့်အစား လင့်ခ်များနှင့် ရွေးချယ်မှုများကို အသက်ဝင်စေသည်။ CursorGothic တွင် 400 အလေးချိန်ဖြင့် သတ်မှတ်ထားသော ခေါင်းစဉ်များသည် အရွယ်အစားတိုးလာသည်နှင့်အမျှ စာလုံးအကွာအဝေး တဖြည်းဖြည်းလျော့နည်းလာသည် - ရဲရင့်မှုထက် ထိန်းချုပ်မှုနှင့် ပါးလွှာသောစာလုံးအလေးချိန်များဖြင့် အခွင့်အာဏာကို ရရှိသည်။ မျက်နှာပြင်များကို ပြားချပ်ချပ်နှင့် စက္ကူကဲ့သို့ ထားရှိပြီး၊ အနားသတ်ပါးလွှာများနှင့် နူးညံ့ပြီး နွေးထွေးသော မီးခိုးရောင်အရိပ်များဖြင့် ထိန်းသိမ်းထားပြီး၊ စာသားတစ်လျှောက်တွင် ထောင့်များသည် 4px အလေးချိန်တွင် ကြည်လင်ပြတ်သားစွာ ရှိနေပါသည်။ EB Garamond ကို ခေါင်းစဉ်ခွဲများနှင့် စကားပြေအတွက် ရွေးချယ်အသုံးပြုပြီး berkeleyMono သည် ကုဒ်၊ တဂ်များနှင့် မက်တာဒေတာများကို ကိုင်တွယ်ပြီး စနစ်အား SaaS ဒိုင်ခွက်ထက် စာပေမဂ္ဂဇင်းတစ်ခုကဲ့သို့ ခံစားရစေသော စာလုံးပုံစံကို ပေးစွမ်းသည်။
အများဆုံးအကျယ်- အလယ်ဗဟိုတွင် 1300px၊ အနားသတ် 24px။ အပေါ်ဆုံး navigation- ဘယ်ဘက်တွင် logo နှင့် စာသားအမှတ်အသားပါသည့် 52px အမြင့်ရှိသော transparent header၊ အလယ်ဗဟိုတွင် 4 ခုရှိသော navigation link များ၊ ညာဘက်တွင် "Login / Contact / Download" cluster ညှိထားသည်။ Hero- ဘယ်ဘက်ညှိထားသော header + ဘယ်ဘက်အပေါ်ထောင့်မှ စာသားပါသည့် double call-to-action block၊ ထို့နောက် စာမျက်နှာ၏ အကျယ်တစ်ခုလုံးကို လွှမ်းခြုံထားသော full-width product mockup card။ Trust stripe- section အကျယ်တစ်လျှောက်တွင် logo tile 8 ခုပါသော အလျားလိုက်တန်းတစ်တန်း။ Feature section များသည် ဘယ်ဘက်တွင် alternate text နှင့် ညာဘက်တွင် screenshot တစ်ခု၊ ကော်လံနှစ်ခုပါ layout တစ်ခုစီတွင် 50/50 စီရှိပြီး၊ section များအကြားတွင် 64-96px ဒေါင်လိုက်စည်းချက်ရှိသည်။ feature screenshot အားလုံးသည် macOS style တူညီသော window mockup များဖြစ်သည်။ Footer- ဘယ်ဘက်တွင် brand mark ပါသော link များ၏ ကော်လံလေးခုပါ grid။ section များကို ပိုင်းခြားမည့်အစား ကျယ်ဝန်းသော breathing space ဖြင့် ပိုင်းခြားထားသည် - cream canvas သည် ခွဲခြားမှုကို ပေးစွမ်းသည်။
ထုတ်ကုန် ဖန်သားပြင်ဓာတ်ပုံများသည် အဓိကဇာတ်ခုံတွင် ရှိသည်- Cursor IDE ကို လက်တွေ့လုပ်ဆောင်နေသည်ကို ပြသသည့် macOS window mockup ကြီးများသည် ဖိုင် tab များ၊ diff views များ၊ agent plan များ၊ terminal panel များနှင့် Slack/chat ပေါင်းစပ်မှုတို့ဖြစ်သည်။ window mockup တစ်ခုစီကို #f2f1ed ကတ်ဖြင့် နူးညံ့ပြီး နွေးထွေးသော contrast ဖြင့် ဘောင်ခတ်ထားသည်။ တိတ်ဆိတ်သော ရှုခင်းဓာတ်ပုံ (တောင်တန်းများ/သဲကန္တာရ မိုးကုတ်စက်ဝိုင်း) သည် အဓိကအပိုင်းထက် ကျော်လွန်နေပြီး UI နှင့် ယှဉ်ပြိုင်ခြင်းမရှိဘဲ နွေးထွေးမှုကို ပေါင်းထည့်ပေးသည်။ Client လိုဂိုများ ( Stripe ၊ OpenAI၊ Linen၊ Datadog၊ NVIDIA၊ Figma၊ Ramp၊ Adobe) ကို ဆေးပြားပုံ Linen tile များအတွင်း monochrome စာလုံးများအဖြစ် တင်ပြထားသည်။ လူများ၊ ရုပ်ပုံများ သို့မဟုတ် abstract အလှဆင်ဂရပ်ဖစ်ဒြပ်စင်များ၏ ဓာတ်ပုံများ မပါဝင်ပါ - visual weight အားလုံးသည် ထုတ်ကုန်၏ UI နှင့် branding ကို အာရုံစိုက်ထားသည်။ Icons များသည် #7a7974 Ash ဖြင့် ပြည့်နှက်နေသော ပါးလွှာပြီး monolinear glyphs များဖြစ်သည်။
ရောင်စုံ
ကြားနေ
- Ink
#26251e— အဓိကစာသား၊ အဓိကလုပ်ဆောင်ချက်ခလုတ်နောက်ခံ၊ လမ်းညွှန်စာသား - နွေးထွေးပြီး အနက်ရောင်နီးပါး၊ ဘယ်တော့မှ မသန့်စင်သော #၀၀၀ - Parchment
#f7f7f4— စာမျက်နှာနောက်ခံ၊ အဓိကကင်းဗတ်စ်သည် ဆန့်ကျင်ဘက်ကို ပျော့ပျောင်းစေပြီး ဒစ်ဂျစ်တယ်ပုံနှိပ်ခြင်းထက် မင်ပုံနှိပ်ခြင်း၏ခံစားချက်ကို ဖန်တီးပေးသည့် နွေးထွေးသော ခရင်မ်ရောင်ဖြစ်သည်။ - Bone
#f2f1ed— ကတ်ထူပြားမျက်နှာပြင်များနှင့် ပတ္တူထက် တစ်ရောင်ပိုမှောင်သော ကွန်တိန်နာများသည် အလွှာလိုက်၊ ဘောင်မဲ့ "စက္ကူပေါ်စက္ကူ" အကျိုးသက်ရောက်မှုကို ဖန်တီးပေးသည်။ - Linen
#e6e5e0— မှောင်သောမျက်နှာပြင်များပေါ်ရှိ ခလုတ်များအတွက် ပေါ့ပါးသော ကြားနေဖြည့်ခြင်း။ - Stone
#cdcdc9— အနားသတ်ပါးပါးများ၊ ပိုင်းခြားထားသောနေရာများ၊ သိမ်မွေ့သော ပိုင်းခြားမှုများ - နွေးထွေးသောအရောင်များဖြင့် 1px မျဉ်းကြောင်းများ - Mist
#a1a19f— တတိယအဆင့် အရန်စာသား၊ စာတန်းထိုးများ - အသံတိတ်ထားသောနှင့် ဒုတိယစာသားကြားတွင်။
စာလုံးပုံစံ
၁၂ မှ ၇၂ px အထိ · အဆင့် ၆ ဆင့်
- CursorGothic — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400, 500 · အသုံးပြုသူမျက်နှာပြင်၊ ခေါင်းစဉ်များ၊ လမ်းညွှန်မှု၊ ကိုယ်ထည်မိတ္တူနှင့် ထုတ်ကုန်ဒီဇိုင်းအတွက် အဓိကဖောင့်။ ၄၀၀-ပွိုင့်အလေးချိန်နှင့် တဖြည်းဖြည်းလျော့နည်းလာသော စာလုံးအကွာအဝေး (-၀.၀၀၅em at 22px → -၀.၀၃em at 72px) ရှိသော ခေါင်းစဉ်များသည် ဖောင့်၏ထူးခြားသောအင်္ဂါရပ်တစ်ခုဖြစ်သည်- ခေါင်းစဉ်များသည် ဘယ်တော့မှ စာလုံးထူမည်မဟုတ်ပါ။ ss08၊ ss09 နှင့် tnum ဖောင့်လုပ်ဆောင်ချက်များသည် စတိုင်လ်ဆိုင်ရာအခြားရွေးချယ်စရာများနှင့် ဇယားပုံများကို အသက်ဝင်စေသည်။
- EB Garamond — အစားထိုးခြင်း: Iowan Old Style · မျဉ်းကြောင်းများ 400, 500 · ခေါင်းစဉ်ခွဲတစ်ခုချင်းစီ၊ ကိုယ်ထည်စာသားနှင့် ဇယားဒေတာအတွက် အယ်ဒီတာ့အာဘော် serif စာလုံးပုံစံ CursorGothic သည် interface ကို စာပေဆန်ဆန် အသွင်အပြင်တစ်ခု ထည့်သွင်းပေးသည်။
- berkeleyMono — အစားထိုးခြင်း: ui-monospace · မျဉ်းကြောင်းများ 400, 500 · Monospace - ကုဒ်ဘလောက်များ၊ command line snippets များ၊ metadata၊ file paths နှင့် developer labels များအတွက် - နည်းပညာဆိုင်ရာဘာသာစကားတစ်ခုဖြစ်သည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | သိပ်သည်းသော |
| အခြေခံအဆင့် | 8px |
| ခလုတ်အချင်းဝက် | 4px |
| ကတ်အချင်းဝက် | 4px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 64-96px |
| စာမျက်နှာအကျယ် | 1300px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Cursor ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Amplemarket — နေရောင်အောက်က အလုပ်ခွင်ဟာ စက္ကူစတွေနဲ့ ပြန့်ကျဲနေတယ်
- Getharvest — ရွှေရောင်အချိန်အခါတွင် စားပွဲတစ်လုံး - နွေးထွေးသော ခရင်မ်ပတ္တူတစ်ချပ်၊ ပတ္တူပေါ်တွင် ချိတ်ဆွဲထားသော အဖြူရောင်ပို့စကတ်များနှင့် တောက်ပသော လိမ္မော်ရောင်မီးတောက်တစ်ခု
- Drive Capital — နွေးထွေးသောစက္ကူပေါ်တွင် Retro လမ်းခရီးစဉ်ပိုစတာ
- Wealthsimple — ပြခန်းမီးအလင်းရောင်ပါရှိသော ကက်ရှ်မီးယားခင်းထားသော ဂိုဒေါင်
- Huddle — ခရင်မ်စက္ကူပေါ်တွင် pastel inventory ကတ်များ
- Fuser — ဒီဇိုင်နာတစ်ယောက်ရဲ့ အလုပ်နံရံပေါ်မှာ ပြန့်ကျဲနေတဲ့ ပိုလာရွိုက်ပုံတွေ
- Campsite — နေရောင်အောက်က အယ်ဒီတာရဲ့ အလုပ်စားပွဲ - လိမ္မော်ရောင် ရည်ရွယ်ချက်တံဆိပ်တစ်ခုတည်းပါတဲ့ နွေးထွေးတဲ့ ခရင်မ်စက္ကူ
- Redis Agency — အလုပ်ချိန်ပြီးနောက် ဖွင့်လှစ်သော အယ်ဒီတာ့အာဘော် အလုပ်ရုံဆွေးနွေးပွဲသည် အလွန်မှောင်မိုက်သော နေရာတစ်ခုဖြစ်ပြီး အမှတ်တံဆိပ်လုပ်ငန်းအားလုံးကို serif ဖောင့်များနှင့် အနီရောင်မုန်လာဥနီတစ်လုံးဖြင့် လုပ်ဆောင်သည်။
- AI Product Generation — အဖြူရောင်စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော် ဓာတ်ပုံစတူဒီယို - ခေါင်းစဉ်ကို မျက်နှာဖုံးအဖြစ်၊ အယ်ဒီတာ့အာဘော် မီးမောင်းထိုးပြရန်အတွက် လိမ္မော်ရောင်
- Getanchor — နေရောင်ဖျော့ဖျော့ ခရင်မ်နောက်ခံပေါ်တွင် နွေးထွေးသော မြေနီရောင်
- Flatfile — နွေးထွေးသော စက္ကူပေါ်တွင် တိတ်ဆိတ်သော အချက်အလက် ဒိုင်ယာရီတစ်ခု
- Inthememory — နွေးထွေးသောအလင်းရောင်တစ်ခုတည်းဖြင့် အဖြူရောင်စကျင်ကျောက်ပေါ်တွင် ဗိသုကာပုံဆွဲခြင်း။ လိမ္မော်ရောင်တစ်ချက်တည်းဖြင့်သာ ကွဲအက်နေသော ကြည်လင်သောအဖြူရောင်မျက်နှာပြင်များပေါ်တွင် နက်ရှိုင်းသောပြာလဲ့ရောင်မင်နှင့် ဆေးပြားပုံသဏ္ဍာန် ထိန်းချုပ်မှုများသည် ပေါလောမျောနေသည့် တိတ်ဆိတ်ငြိမ်သက်သော အယ်ဒီတာ့အာဘော်ဒေတာခန်း။