Stil Sözlüğü: Vibe'ın Adını Koy — Atlas

KAZANIM Bu dersin sonunda: "şöyle havalı, camsı bir şey" yerine stilin ADINI söyler, tanıma sinyallerinden her stili gözünle ayırt eder ve ajanına kopyala-yapıştır bir stil brief'i verirsin.

Bu dosyanın rolü: ui-sozlugu parçanın adını verir; burası havanın adını verir. İkisi aynı derdin iki yarısıdır: adı bilinmeyen şey üç tur diyalogla tarif edilir. 🖼️ Canlı hâli sitede: akademi.sololabs.tr/stil-sozlugu — aynı "Kayıt ol" kartı 12 stilde gerçekten çizili (görsel değil, kod) + 8 animasyon kalıbı çalışır hâlde + her brief tek tıkla kopyalanır.

📅 Son tarama: 7 Ağustos 2026. Stil dünyası trend dünyasıdır; 6 ayda bir sondaki istemle tazele.

---

12 stil — ad, sinyal, ne zaman

Kural: bir ürün = bir stil. Vibe'ı seçtikten sonra brief'i ajana ver ve her yeni istemde stilin adını tekrar et ("neubrutalism stilinde kalarak...") — tutarlılık, stilin kendisinden değerlidir.

Örnek brief (canlı sayfada 12'si de kopyalanabilir)

Glassmorphism uygula: canlı mor-mavi degrade arka plan; paneller
rgba(255,255,255,0.15) + backdrop-filter: blur(14px) + 1px rgba(255,255,255,0.4)
kenarlık + 16px köşe; metinler beyaz, kontrastı koru.

Derin madde örneği: Cam Efekti (pilot)

Maddeler sırayla bu derinliğe çekiliyor. Bir maddenin "tam" sayılması için yontem dosyasındaki dört kapıyı geçmesi gerekir: görünürlük → adın statüsü → birincil kaynak → en yakın benzerinden ayırt edilebilirlik. Cam Efekti pilot maddedir; canlı sayfada tam hâli var: akademi.sololabs.tr/stil-sozlugu/glassmorphism

Tam derinlikte olanlar (8/12): Cam Efekti · Sıvı Cam · Frutiger Aero · Yumuşak Kabartma · Kil Efekti · Neo-Brütalizm · Web Brütalizmi · Ev Yapımı Web. Bu maddelerde doğal habitat sahnesi, kategorili ve ağırlıklı sinyaller, tarihli köken, birincil kaynaklar, erişilebilirlik bölümü ve "sık karıştırılanlar" karşılaştırması var. Sırada: Minimalizm · Düz Tasarım · Gerçekçi Taklit · Y2K.

Aileler halinde ilerliyoruz, çünkü bir stilin sınırı ancak komşusuyla birlikte anlaşılıyor: cam ailesi (Cam Efekti ↔ Sıvı Cam ↔ Frutiger Aero), yumuşak aile (Yumuşak Kabartma ↔ Kil), ham aile (Neo-Brütalizm ↔ Web Brütalizmi ↔ Ev Yapımı Web).

Adın statüsü — sektör terimi. Efekt adından eskidir ve her firma başka ad kullanıyordu (Apple'da vibrancy, Microsoft'ta acrylic). Ortak adı bir platform sahibi değil bir tasarımcı koydu; bu yüzden marka dili değil sektör terimi sayılır.

Köken. Apple iOS 7'de (2013) bulanık saydam katmanları sistem diline soktu; Microsoft 2017'de Fluent Design ile aynı malzemeyi acrylic adıyla belgeledi. Ortak bir ad yoktu. Kasım 2020'de Michal Malewicz glassmorphism adını koydu (glass + skeuomorphism); aynı yıl macOS Big Sur akımı büyüttü. 2025'te Apple kendi cam dilini Liquid Glass adıyla yeniden tanımlayınca cam ailesi ikiye ayrıldı: dekoratif deri (glassmorphism) ve kontrol katmanı malzemesi (Liquid Glass).

Kaynaklar. Malewicz — Glassmorphism in user interfaces (UX Collective, Kas 2020) (birincil) · Microsoft Learn — Acrylic material (birincil) · MDN — backdrop-filter · MDN — prefers-reduced-transparency · W3C — WCAG 2.2 Contrast (Minimum)

Ayırt edici kararlar.

• Sıvı Cam değil: glassmorphism'de cam herhangi bir yüzeye giydirilen dekoratif bir deridir; içerik kartı da cam olabilir. Liquid Glass'ta cam, içeriğin üstünde yüzen kontrol katmanının malzemesidir — düğmelerin ve çubukların, içeriğin değil.
• Frutiger Aero değil: camda parlaklık arkayı görmekten gelir; Frutiger Aero'da parlaklık yüzeyin kendi cilasındandır — opak, sulu bir jele bakarsın, içinden değil.

Erişilebilirlik. Kontrastı en kötü zeminde ölç (en iyisinde değil), gerekiyorsa panel altına koyu scrim ekle ve 4.5:1'i garanti et · prefers-reduced-transparency açıkken opak yüzeye düş · blur'lu panel sayısını sınırla, blur'suz fallback ver · klavye odak halkasını camın 1px kenarından açıkça farklı yap.

8 animasyon kalıbı

Hareket görgü kuralları: her animasyon prefers-reduced-motion'a saygı duyar; giriş animasyonu 0.5s'i geçmez; aynı ekranda en çok 2 hareket dili; hareket süs değil SİNYALDİR (ne değişti, nereye bak).

Denetim penceresi

Kırmızı bayraklar: sayfada iki farklı stil karışmış (glass panel + brutalist buton) · metin-zemin kontrastı stil uğruna feda edilmiş (cam/kabartma stillerinin klasik günahı — WCAG'ye baktır) · her öğe animasyonlu (sinyal değeri sıfırlanır) · stil adı istemlerde geçmiyor (ajan her turda kendi kafasına göre savruluyor). Kontrol istemi: "Bu sayfanın stilini tek kelimeyle adlandır; stile uymayan 3 öğeyi ve kontrast sorunu olan yerleri listele."

Mini egzersiz (SANDBOX)

Sandbox ürününün kayıt kartını seç; canlı sayfadan iki FARKLI stilin brief'ini kopyalayıp aynı kartı iki stille yaptır (ör. glassmorphism vs neubrutalism). Yan yana koy: hangisi ürününün sesine uyuyor? Seçtiğinin adını projenin CLAUDE.md'sine tek satır yaz: "Bu ürünün stili X'tir; tüm yeni ekranlar bu stille üretilir."

Kontrol soruları

(1) Glassmorphism'i neumorphism'den ayıran iki sinyal nedir? (2) "Bir ürün = bir stil" kuralı ajanla çalışırken neden özellikle kritiktir? (3) Cam/kabartma stillerinin klasik erişilebilirlik günahı nedir? (4) Tilt animasyonu nerede şık, nerede yasak?

Mentor istemi

AI Maestro "Stil Sözlüğü" hocası ol. Bana 5 stil tarifini adsız oku, adlarını bileyim.
Sonra ürünümü sorup 2 stil öner (gerekçeli), seçtiğimin brief'ini benim ürünüme göre
uyarla ve stil-tutarlılık kuralını CLAUDE.md satırı olarak yazdır. Sonunda 4 kontrol
sorusunu sor.

🔄 Güncelleme istemi (bu rehber bayatlarsa)

stil-sozlugu.md'yi güncelle: yükselen yeni arayüz stilleri var mı web'den tara
(kaynak: tasarım trend raporları); ölen trendleri "retro" etiketine taşı; canlı
sayfadaki (site/components/stiller.tsx) kartlarla MD tablosunun senkron olduğunu
doğrula; "Son tarama"yı yenile.

---

Bu rehber nerede derinleşiyor? (sarmal harita)

• Parçaların adı → ui-sozlugu · görsel/animasyon üretim araçları → uretim-rehberi · stil brief'ini iş tarifine gömme → 1.1
• Çift-kaynak kuralı: canlı kartlar site/components/stiller.tsx'te — yeni stil eklerken MD tablosu + canlı kart birlikte güncellenir.

İlham: namethatui.com/styles (stil adları sektör terimleridir; içerik özgün ve Türkçedir).