Ui
uhlelo lwezokwelapha ephepheni elingacwebezeli
I-shadcn/ui iyi-workshop yokudala uhlelo lokuklama olunombala owodwa: i-canvas emhlophe ehlanzekile, izindawo ezithambile ezimpunga ezifudumele, namakhadi amakhulu abekwe emingceleni ecashile kakhulu. I-interface cishe ayinawo umbala ngokuphelele—umbhalo omnyama, izindawo ezimhlophe, amathoni esibili ampunga—ngombala obomvu owodwa, ophazamisayo ogcinelwe izimo zamaphutha futhi akukho okunye. Ukuthayipha kuncike ekungathathi hlangothi kwe-geometric kwe-Geist ngokuphakama kwezinhlamvu okuqinile ezikrinini, okudala umuzwa ozolile, ofana nekhodi ozwakala kakhulu njengengqalasizinda yonjiniyela kunomkhiqizo wabathengi.
Izithombe ezincane—isistimu cishe yakhiwe ngokuphelele yi-interface yomsebenzisi. Azikho izithombe ezibalulekile, imidwebo, noma ihluzo zokuhlobisa. Ama-demo omkhiqizo anikezwa njengezibonelo zezingxenye (amakhadi, amasimu okufaka, izinkinobho) kugridi, asebenza kokubili njengombhalo kanye nokuqukethwe okubonakalayo. Izithonjana ziyimigqa emincane yejometri (okungenzeka ukuthi ibolekwe ku-Lucide) ubukhulu obuyi-1.5–2px ku-#0a0a0a noma ku-#737373, esetshenziswa kancane njengezinkomba zokusebenza. Ulimi olubonakalayo yizingxenye ze-UI ngokwazo—ikhasi lisebenza njengomhlahlandlela wesitayela esiphilayo, lapho yonke into ebonakalayo iyisici sokuklama esibonakalayo.
Iphalethi
Okungathathi hlangothi
- Canvas
#f5f5f5— Ingemuva lekhasi, ukugcwaliswa kwendawo okuthulisiwe, izinkinobho ezengeziwe. - Paper
#ffffff— Izindawo zamakhadi, izizinda ezivelelayo, ukugcwalisa izinkinobho okuyinhloko - Surface Alt
#fafafa— Ingemuva lebha eseceleni, inketho yekhadi engaphazamisi, isimo sokungenzi lutho senkambu yokufaka. - Ink
#0a0a0a— Umbhalo oyinhloko, izihloko, amalebula ezinkinobho, izinhlaka zesithonjana. - Ink Soft
#171717— Izithombe zangemuva zezinkinobho ezinombhalo ogcwele, owengeziwe ezindaweni ezikhanyayo. - Mid Gray
#737373— Umbhalo oyinhloko, umbhalo wesibambi-ndawo, amalebula asizayo, kanye nokugcwaliswa kwesithonjana lapho kuphumule konke kuthulisiwe.
Ukuthayipha
kusukela ku-12 kuya ku-48px · izinyathelo ezingu-8
- Geist — esikhundleni: Inter · izinhlaka 400, 500, 600 · Umbhalo wonke wokuxhumana—umbhalo womzimba onesisindo somugqa esingu-14px/400, izihloko ezinesisindo somugqa esingu-24–48px/600, kanye nezinkinobho ezinesisindo somugqa esingu-13–14px/500. Izinhlobo zohlamvu ze-geometric ze-Geist kanye nesisindo somugqa esifanayo kudala umuzwa ongathathi hlangothi wamathuluzi onjiniyela; isisindo somugqa esingu-600 esinesikhala sohlamvu esingu-48px kanye nesikhala sohlamvu esingu--0.05em siqinisekisa izihloko ezicacile nezizethembayo ezibukeka zicabangela kunokuba zihlelwe.
Izikhawu kanye nesimo
| Inhloso | Incazelo |
|---|---|
| Ubuningi | minyene |
| Isinyathelo esiyisisekelo | 8px |
| Irediyasi yenkinobho | 18px |
| Irediyasi yekhadi | 24px |
| Izithunzi | cha - imingcele esikhundleni sezithunzi |
| Phakathi kwezigaba | 48-80px |
| Ububanzi bekhasi | 1280px |
I-AI izokwakha iwebhusayithi yakho ngesitayela se- Ui futhi iyigcwalise
- Gcwalisa ngemikhiqizo kanye nokuthunyelwe ngesixhumanisi - Instagram, TikTok, Facebook.
- Dlulisa okuqukethwe kusuka kusayithi lakho elidala—vele ucacise ikheli.
- Umklamo wesimanje enjinini engcono kakhulu: React ( Next.js) enokunikeza iseva kanye nokwenza ngcono i-SEO ngokungenaphutha.
- Ukwenziwa ngcono kwe-SEO okuzenzakalelayo ngokuphelele kwemiphumela yokusesha kanye nezincomo zenethiwekhi ye-neural.
Izitayela ezifanayo
- Ventriloc — I-observatory yokuhlela yedatha ephepheni elifudumele - i-ember eyodwa e-orange egqamisa ukunemba kwe-monochrome
- Geniestudio — Incwadi yokubhala ethambile yasemini—uhlobo olunemingcele ebanzi kanye nokubhala ipeni elilodwa elijiyile
- xAI — Ilebhu Yokhilimu Ofudumele Enephilisi Elimnyama
- Cal — Ukusebenza kwe-monochrome, indlela yomuntu. Uhlelo olubeka phambili ukucaca nokusebenza ngokusebenzisa i-palette emnyama nemhlophe eqinile, kodwa oluyithambisa ngokuthayipha okunobungane kanye nezimo eziyindilinga.
- Scale — Ilebhu yezithombe esezingeni eliphezulu yemyuziyamu ehlanganiswe nephrojekthi yobuchwepheshe
- Contractbook — izinkontileka zephepha elikhilimu ngaphansi kwesibhakabhaka se-ultramarine
- AutoSend — Isitudiyo samatshe esithokomele esinokukhanya okunsomi okukodwa—lapho izihloko zezindaba ze-serif kanye nezingcingo ze-indigo ezikhanyayo zesenzo zihlala ndawonye endaweni eyodwa ethule, cishe emhlophe.
- Air — isithombe "Isibhakabhaka Sasebusuku Ngengilazi"
- SpatialChat — i-pulse ensomi ephepheni elimhlophe
- Squarespace — Igalari ye-Cinematic Monochrome
- Giga — Umbono ophakathi kwamabili phezu kwe-obsidian eqandisiwe
- Supabase — Umhleli wekhodi phakathi kwamabili onechashazi eliluhlaza okotshani—ukushaya okukodwa kwe-chromatic olwandle lothuli lwamalahle