M
"Hani şu üstteki şey" değil: navbar.
Vibe coding'in en sinsi verimsizliği kod bilmemek değil, parçanın adını bilmemektir: adı bilinmeyen şey üç tur diyalogla tarif edilir; adı bilinen tek turda istenir. Aşağıda her parçanın canlı örneği, adı ve kopyala-yapıştır tarif kalıbı var. Anatomi + promptlar → yazan parçalarda derinlik sayfası seni bekliyor: her alt parçanın adı, yapım promptu ve "huysuzlanırsa" debug promptu.
"hani şu en üstteki bar" diyorsan → adı navbar
Sayfanın tepesindeki logo + menü şeridi; çoğu zaman kaydırınca üstte sabitlenir (sticky).
"soldaki menü sütunu" diyorsan → adı sidebar
Sol/sağ kenarda duran dikey gezinme sütunu; daraltılabilir olabilir.
"üç çizgili menü" diyorsan → adı hamburger menu
Mobilde menüyü açan üç yatay çizgi ikonu.
"üstteki şu Ana sayfa > Ürünler yazısı" diyorsan → adı breadcrumb
Sayfa hiyerarşisinde nerede olduğunu gösteren tıklanabilir iz.
"aynı yerde içerik değiştiren başlıklar" diyorsan → adı tabs
Aynı alanda farklı içerikler arasında geçiş yaptıran yatay başlıklar.
"alttaki 1 2 3 sayfa numaraları" diyorsan → adı pagination
Uzun listeyi sayfalara bölen numara/ok kontrolü.
"tıklayınca aşağı açılan liste" diyorsan → adı dropdown
Bir tetiğe tıklayınca altında beliren seçenek listesi.
"sayfanın en altındaki linkler bölgesi" diyorsan → adı footer
Sayfa sonundaki linkler, iletişim ve yasal bilgiler bölgesi.
"yazı yazılan kutu" diyorsan → adı input
Tek satırlık yazı alanı; tür belirtilebilir (e-posta, sayı, şifre).
"büyük yazı kutusu" diyorsan → adı textarea
Birden çok satır alabilen uzun metin alanı.
"aşağı açılan seçenekli kutu" diyorsan → adı select
Listeden tek seçenek seçtiren açılır kutu.
"tik atılan kare" diyorsan → adı checkbox
İşaretlenip kaldırılabilen kare; birden çok seçime izin verir.
"tek seçilebilen yuvarlaklar" diyorsan → adı radio
Gruptan yalnız BİR seçim yaptıran yuvarlak düğme.
"açma-kapama düğmesi" diyorsan → adı switch
Açık/kapalı durumunu anında değiştiren kaydırmalı düğme.
"kaydırarak değer seçme çubuğu" diyorsan → adı slider
Bir aralıktan kaydırarak değer seçtiren çubuk.
"büyüteçli kutu" diyorsan → adı search bar
Büyüteç ikonlu arama girişi; çoğu zaman yazarken öneri gösterir.
"takvim açılan kutu" diyorsan → adı date picker
Mini takvim açarak tarih seçtiren alan.
"dosya sürükleme alanı" diyorsan → adı file upload
Dosya seçtiren ya da sürükle-bırak kabul eden alan.
"etiketli girdi" diyorsan → adı form field
Etiket + girdi + hata/yardım satırından oluşan üçlü — formların yapı taşı.
"köşede çıkıp kaybolan mesaj" diyorsan → adı toast
Köşede belirip birkaç saniyede kendiliğinden kaybolan küçük durum mesajı.
"ortaya açılan pencere" diyorsan → adı modal
Sayfayı karartıp öne çıkan, kapatılmadan devam edilemeyen pencere.
"sayfanın üstündeki renkli uyarı" diyorsan → adı alert
Sayfa içinde duran renkli bilgi/uyarı kutusu; toast'tan farkı kaybolmamasıdır.
"üzerine gelince çıkan yazı" diyorsan → adı tooltip
Bir öğenin üzerine gelince beliren mini açıklama balonu.
"dolan çubuk" diyorsan → adı progress bar
Bir işin yüzde kaçının bittiğini gösteren dolan çubuk.
"dönen yuvarlak" diyorsan → adı spinner
'Bekle, çalışıyorum' anlamına gelen dönen halka; süre bilinmiyorsa kullanılır.
"içerik gelmeden görünen gri kutular" diyorsan → adı skeleton
İçerik gelmeden önce yerini tutan gri taslak kutular; boş beyaz ekranı önler.
"zildeki kırmızı sayı" diyorsan → adı badge
Bir öğenin köşesindeki sayı/durum göstergesi.
"hiç kayıt yokken çıkan ekran" diyorsan → adı empty state
Liste/veri boşken gösterilen açıklama + ilk-adım aksiyonu; boş beyaz ekranın ilacı.
"kutucuk içinde ürün" diyorsan → adı card
Görsel + başlık + aksiyonu tek pakette toplayan kutu; ızgarada dizilir.
"ana sayfanın en üstündeki büyük alan" diyorsan → adı hero
Ana sayfanın ilk ekranını kaplayan büyük tanıtım alanı: vaat + aksiyon + görsel.
"tıklayınca açılan sorular" diyorsan → adı accordion
Tıklayınca açılıp kapanan dikey başlık listesi; SSS'nin doğal evi.
"kayan resimler" diyorsan → adı carousel
Ok ya da kaydırmayla dönen görsel/içerik şeridi.
| Sipariş ↕ | Müşteri | Tutar | Durum | |
|---|---|---|---|---|
| #1042 | Ayşe Y. | ₺450 | Ödendi | ⋯ |
| #1041 | Mehmet K. | ₺120 | Bekliyor | ⋯ |
| #1040 | Zeynep T. | ₺980 | Ödendi | ⋯ |
"satır sütun liste" diyorsan → adı table
Satır-sütun düzeninde veri görünümü; sıralama ve satır işlemleri eklenebilir.
"üst üste binen yuvarlak fotoğraflar" diyorsan → adı avatar group
Üst üste bindirilmiş yuvarlak profil görselleri; sığmayanlar +N sayacında toplanır.
"küçük hap şeklindeki kategoriler" diyorsan → adı chip
Hap biçimli küçük kategori/filtre etiketi; seçilebilir ya da silinebilir olabilir.
"bölümler arasındaki ince çizgi" diyorsan → adı divider
İçerik bölümlerini ayıran ince çizgi; ortasında etiket taşıyabilir.
"1-2-3 diye giden adımlar" diyorsan → adı stepper
Çok adımlı akışta nerede olduğunu gösteren 1→2→3 haritası.
"sayfadaki asıl büyük buton" diyorsan → adı CTA button
Sayfanın kullanıcıdan istediği ASIL eylemin butonu; sayfada bir tane birincil olur.