Ui
ផែនការព្យាបាលលើក្រដាសម៉ាត់
shadcn/ui គឺជាសិក្ខាសាលាសម្រាប់បង្កើតប្រព័ន្ធរចនាពណ៌តែមួយ៖ ផ្ទាំងក្រណាត់ពណ៌សស្អាត ផ្ទៃពណ៌ប្រផេះទន់ក្តៅ និងកាតកាំធំដែលដាក់នៅលើព្រំដែនដ៏ស្រទន់បំផុត។ ចំណុចប្រទាក់ស្ទើរតែទាំងស្រុងគឺគ្មានពណ៌ - អក្សរខ្មៅ ផ្ទៃពណ៌ស សម្លេងបន្ទាប់បន្សំពណ៌ប្រផេះ - ជាមួយនឹងពណ៌ក្រហមតែមួយដែលរំខាន បម្រុងទុកសម្រាប់ស្ថានភាពកំហុស និងគ្មានអ្វីផ្សេងទៀតទេ។ ពុម្ពអក្សរពឹងផ្អែកលើអព្យាក្រឹតភាពធរណីមាត្ររបស់ Geist ជាមួយនឹងកម្ពស់អក្សរតឹងនៅលើអេក្រង់ ដែលបង្កើតអារម្មណ៍ស្ងប់ស្ងាត់ដូចកូដ ដែលមានអារម្មណ៍ដូចជាហេដ្ឋារចនាសម្ព័ន្ធអ្នកអភិវឌ្ឍន៍ជាជាងផលិតផលអ្នកប្រើប្រាស់។
រូបភាពតិចតួចបំផុត—ប្រព័ន្ធនេះមានចំណុចប្រទាក់អ្នកប្រើប្រាស់ស្ទើរតែទាំងស្រុង។ គ្មានរូបថតសំខាន់ៗ រូបភាព ឬក្រាហ្វិកតុបតែងទេ។ ការបង្ហាញផលិតផលត្រូវបានបង្ហាញជាគំរូសមាសភាគ (កាត វាលបញ្ចូល ប៊ូតុង) នៅក្នុងក្រឡាចត្រង្គ ដែលបម្រើទាំងឯកសារ និងខ្លឹមសារដែលមើលឃើញ។ រូបតំណាងគឺជាបន្ទាត់ធរណីមាត្រស្តើងៗ (ទំនងជាខ្ចីពី Lucide) កម្រាស់ 1.5–2px ជាអក្សរ #0a0a0a ឬ #737373 ដែលត្រូវបានប្រើតិចតួចជាសញ្ញាមុខងារ។ ភាសាដែលមើលឃើញគឺជាសមាសធាតុ UI ខ្លួនឯង—ទំព័រដំណើរការជាមគ្គុទ្ទេសក៍រចនាប័ទ្មរស់នៅ ដែលធាតុដែលអាចមើលឃើញនីមួយៗគឺជាធាតុរចនាដែលអាចមើលឃើញ។
ក្ដារលាយពណ៌
អព្យាក្រឹត
- Canvas
#f5f5f5— ផ្ទៃខាងក្រោយទំព័រ, ការបំពេញផ្ទៃស្រអាប់, ប៊ូតុងបន្ថែម។ - Paper
#ffffff— ផ្ទៃកាត, ផ្ទៃខាងក្រោយលេចឡើង, ការបំពេញប៊ូតុងចម្បង - Surface Alt
#fafafa— ផ្ទៃខាងក្រោយរបារចំហៀង ជម្រើសកាតដែលមិនរំខាន ស្ថានភាពទំនេរនៃវាលបញ្ចូល។ - Ink
#0a0a0a— អត្ថបទសំខាន់ ចំណងជើង ស្លាកប៊ូតុង គ្រោងរូបតំណាង។ - Ink Soft
#171717— រូបភាពផ្ទៃខាងក្រោយប៊ូតុងជាមួយនឹងការបំពេញ អក្សរបន្ថែមនៅលើផ្ទៃពណ៌ស្រាល។ - Mid Gray
#737373— អត្ថបទសំខាន់ អត្ថបទជំនួស ស្លាកជំនួយ និងការបំពេញរូបតំណាងនៅពេលសម្រាក សុទ្ធតែត្រូវបានបិទសំឡេង។
អក្សរសាស្ត្រ
ពី 12 ដល់ 48px · 8 ជំហាន
- Geist — ការជំនួស៖ Inter · គ្រោង 400, 500, 600 · អត្ថបទចំណុចប្រទាក់ទាំងអស់—អត្ថបទតួដែលមានទម្ងន់បន្ទាត់ 14px/400 ចំណងជើងដែលមានទម្ងន់បន្ទាត់ 24–48px/600 និងប៊ូតុងដែលមានទម្ងន់បន្ទាត់ 13–14px/500។ ទម្រង់អក្សរធរណីមាត្រ និងទម្ងន់បន្ទាត់ឯកសណ្ឋានរបស់ Geist បង្កើតអារម្មណ៍អព្យាក្រឹតសម្រាប់ឧបករណ៍អ្នកអភិវឌ្ឍន៍។ ទម្ងន់បន្ទាត់ 600 ជាមួយនឹងគម្លាតអក្សរ 48px និងគម្លាតអក្សរ -0.05em ធានាចំណងជើងច្បាស់លាស់ និងមានទំនុកចិត្ត ដែលមើលទៅគួរឱ្យគិតជាជាងការកែសម្រួល។
ចន្លោះពេល និងទម្រង់
| គោលបំណង | អត្ថន័យ |
|---|---|
| ដង់ស៊ីតេ | ក្រាស់ |
| ជំហានមូលដ្ឋាន | 8px |
| កាំប៊ូតុង | 18px |
| កាំកាត | 24px |
| ស្រមោល | គ្មានព្រំដែនជំនួសឱ្យស្រមោល |
| រវាងផ្នែកនានា | 48-80px |
| ទទឹងទំព័រ | 1280px |
បញ្ញាសិប្បនិម្មិត (AI) នឹងបង្កើតគេហទំព័ររបស់អ្នកតាមរចនាបថ Ui ហើយបំពេញវា
- បំពេញជាមួយផលិតផល និងការបង្ហោះតាមរយៈតំណភ្ជាប់ - Instagram, TikTok, Facebook ។
- ផ្ទេរខ្លឹមសារពីគេហទំព័រចាស់របស់អ្នក—គ្រាន់តែបញ្ជាក់អាសយដ្ឋាន។
- ការរចនាទំនើបលើម៉ាស៊ីនល្អបំផុត៖ React ( Next.js) ជាមួយនឹងការបង្ហាញម៉ាស៊ីនមេ និងការបង្កើនប្រសិទ្ធភាព SEO ភ្លាមៗ។
- ការបង្កើនប្រសិទ្ធភាព SEO ដោយស្វ័យប្រវត្តិយ៉ាងពេញលេញសម្រាប់លទ្ធផលស្វែងរក និងអនុសាសន៍បណ្តាញសរសៃប្រសាទ។
រចនាប័ទ្មស្រដៀងគ្នា
- Ventriloc — ការសង្កេតវិចារណកថានៃទិន្នន័យនៅលើក្រដាសក្តៅ - ធ្យូងពណ៌ទឹកក្រូចតែមួយដែលបង្ហាញពីភាពជាក់លាក់នៃពណ៌តែមួយ។
- Geniestudio — សៀវភៅកត់ត្រាពន្លឺថ្ងៃទន់ៗ — ប្រភេទដែលមានគែមធំទូលាយ និងប៊ិចក្រាស់មួយបន្ទាត់
- xAI — មន្ទីរពិសោធន៍ក្រែមក្តៅជាមួយថ្នាំគ្រាប់ខ្មៅ
- Cal — ភាពជាក់ស្តែងពណ៌តែមួយ ជាវិធីសាស្រ្តរបស់មនុស្ស។ ប្រព័ន្ធមួយដែលផ្តល់អាទិភាពដល់ភាពច្បាស់លាស់ និងមុខងារតាមរយៈក្ដារលាយពណ៌ខ្មៅ និងសយ៉ាងតឹងរ៉ឹង ប៉ុន្តែធ្វើឱ្យវាទន់ជាងមុនជាមួយនឹងពុម្ពអក្សរដែលងាយស្រួលប្រើ និងរាងមូល។
- Scale — មន្ទីរពិសោធន៍រូបថតដែលមានគុណភាពខ្ពស់ដូចសារមន្ទីរ រួមផ្សំជាមួយគម្រោងបច្ចេកទេស
- Contractbook — កិច្ចសន្យាក្រដាសក្រែមនៅក្រោមមេឃ ultramarine
- AutoSend — ស្ទូឌីយោថ្មកក់ក្ដៅមួយដែលមានភ្លើងពណ៌ស្វាយតែមួយ — ជាកន្លែងដែលចំណងជើងពណ៌ serif និងការអំពាវនាវឱ្យធ្វើសកម្មភាពពណ៌ indigo ភ្លឺចែងចាំងរួមរស់ជាមួយគ្នានៅក្នុងកន្លែងស្ងាត់មួយ ស្ទើរតែពណ៌ស។
- Air — រូបចម្លាក់ "មេឃពាក់កណ្តាលអធ្រាត្រឆ្លងកាត់កញ្ចក់"
- SpatialChat — ជីពចរពណ៌ស្វាយលើក្រដាស់ពណ៌ស
- Squarespace — វិចិត្រសាលភាពយន្តម៉ូណូក្រូម
- Giga — ជើងមេឃពាក់កណ្តាលអធ្រាត្រលើអ័រស៊ីឌានសាយសត្វ
- Supabase — កម្មវិធីនិពន្ធកូដនៅពាក់កណ្តាលអធ្រាត្រជាមួយនឹងចំណុចពណ៌បៃតងផូស្វ័រ - ជីពចរពណ៌តែមួយនៅលើសមុទ្រធូលីធ្យូងថ្ម