✦ Arayüz

Arayüz & Tasarım

Claude'a arayüz yaptırırken elinin altında olması gereken referanslar: stiller canlı örnekle, paletler kopyalanabilir kodla, font eşleşmeleri gerçek yazıyla.

8Uçtan Uca Sistem 20UI Stili 24Renk Paleti 20Font Eşleşmesi 12Sayfa Düzeni 12Grafik Türü 15UX Kuralı

Karta tıkla, arkasındaki hazır prompt'u kopyala.

Animasyon

Süreyi 150-300 ms arasında tut

✓

Arayüz geçişleri 150-300 ms, sayfa geçişleri 300-450 ms. Yumuşama eğrisi giriş için ease-out.

500 ms üstü geçişler arayüzü yavaş hissettirir; kullanıcı animasyonu değil gecikmeyi fark eder.

↻ Prompt

Süreyi 150-300 ms arasında tut

Apply this UX rule: Keep durations between 150-300 ms

Do: UI transitions 150-300 ms, page transitions 300-450 ms. Use ease-out for entrances.
Don't: Anything over 500 ms makes the interface feel slow; users notice the delay, not the animation.

Check the change against this rule before you report the work as done.

Animasyon

prefers-reduced-motion'a uy

✓

Bu tercih açıkken kaydırma bağlı efektleri ve büyük hareketleri kapat, opaklık geçişini bırak.

Dekoratif animasyonu herkese zorlamak; vestibüler rahatsızlığı olanlar için gerçek bir sorun.

↻ Prompt

prefers-reduced-motion'a uy

Apply this UX rule: Respect prefers-reduced-motion

Do: When the preference is set, drop scroll-linked effects and large movement; keep opacity fades.
Don't: Forcing decorative motion on everyone — a real problem for vestibular disorders.

Check the change against this rule before you report the work as done.

Yükleme

İskelet göster, dönen çark değil

✓

Gelecek içeriğin şeklini taşıyan iskelet kullan; algılanan bekleme kısalır.

Tam ekran spinner. Ne geldiğini ve ne kadar süreceğini gizler.

↻ Prompt

İskelet göster, dönen çark değil

Apply this UX rule: Show a skeleton, not a spinner

Do: Use a skeleton shaped like the content that is coming; perceived wait drops.
Don't: A full-screen spinner hides both what is arriving and how long it will take.

Check the change against this rule before you report the work as done.

Yükleme

Kesin sonuçlu eylemlerde iyimser güncelle

✓

Beğeni, favori, oy gibi işlemlerde arayüzü hemen güncelle, hata olursa geri al.

Ödeme veya silme gibi geri alınamaz işlemleri iyimser göstermek.

↻ Prompt

Kesin sonuçlu eylemlerde iyimser güncelle

Apply this UX rule: Update optimistically only for certain outcomes

Do: Like, favorite and vote can update instantly and roll back on error.
Don't: Never show payments or deletions optimistically — they cannot be undone.

Check the change against this rule before you report the work as done.

Erişilebilirlik

Metin kontrastı en az 4.5:1

✓

Gövde metni 4.5:1, 18px+ başlık 3:1. Devre dışı öğeler bile okunabilir kalmalı.

Açık gri üstüne biraz daha koyu gri. Tasarımcı ekranında güzel, güneşte okunmaz.

↻ Prompt

Metin kontrastı en az 4.5:1

Apply this UX rule: Text contrast at least 4.5:1

Do: Body text 4.5:1, headings 18px+ 3:1. Even disabled elements stay readable.
Don't: Slightly darker grey on light grey looks fine on your monitor and vanishes in sunlight.

Check the change against this rule before you report the work as done.

Erişilebilirlik

Klavye odağını görünür bırak

✓

:focus-visible ile belirgin bir halka ver; klavyeyle gezenler nerede olduğunu görsün.

outline: none yazıp yerine bir şey koymamak — sayfayı klavyeyle kullanılamaz hale getirir.

↻ Prompt

Klavye odağını görünür bırak

Apply this UX rule: Keep keyboard focus visible

Do: Give a clear ring via :focus-visible so keyboard users can see where they are.
Don't: outline: none with no replacement makes the page unusable by keyboard.

Check the change against this rule before you report the work as done.

Erişilebilirlik

Bilgiyi yalnızca renkle taşıma

✓

Hata durumunu renk + ikon + metinle göster.

Sadece kırmızı kenarlık. Renk körü kullanıcılar için hiçbir şey ifade etmez.

↻ Prompt

Bilgiyi yalnızca renkle taşıma

Apply this UX rule: Never carry meaning with color alone

Do: Show error state with color plus icon plus text.
Don't: A red border alone means nothing to colorblind users.

Check the change against this rule before you report the work as done.

Mobil

Dokunma alanı en az 44×44 px

✓

Küçük ikonların çevresine görünmez dolgu ekle.

24 px'lik çarpı düğmesi. Parmakla ıskalanır, öfke yaratır.

↻ Prompt

Dokunma alanı en az 44×44 px

Apply this UX rule: Touch targets at least 44x44 px

Do: Add invisible padding around small icons.
Don't: A 24px close button gets missed by thumbs and creates frustration.

Check the change against this rule before you report the work as done.

Düzen

z-index'i ölçekle yönet

✓

Katmanları isimlendir: dropdown 1000, sticky 1100, modal 1300, toast 1400.

z-index: 99999 yazmak. Bir sonraki geliştirici 999999 yazar.

↻ Prompt

z-index'i ölçekle yönet

Apply this UX rule: Manage z-index with a named scale

Do: Name the layers: dropdown 1000, sticky 1100, modal 1300, toast 1400.
Don't: Writing z-index: 99999 — the next developer writes 999999.

Check the change against this rule before you report the work as done.

Durumlar

Boş ekranı yönlendirmeye çevir

✓

Ne olduğunu, neden boş olduğunu ve ilk adımı tek cümleyle söyle; eylemi düğmeye bağla.

'Kayıt bulunamadı' yazıp bırakmak.

↻ Prompt

Boş ekranı yönlendirmeye çevir

Apply this UX rule: Turn the empty screen into guidance

Do: Say what this is, why it is empty and the first step, in one sentence, with the action on a button.
Don't: Printing 'No records found' and stopping there.

Check the change against this rule before you report the work as done.

Durumlar

Hata mesajı ne yapılacağını söylesin

✓

Sorunu ve çözümü birlikte ver: 'Dosya 10 MB'ı aşıyor, küçültüp tekrar dene.'

'Bir hata oluştu' veya ham hata kodu göstermek.

↻ Prompt

Hata mesajı ne yapılacağını söylesin

Apply this UX rule: Error messages must say what to do

Do: Give both problem and fix: 'File exceeds 10 MB, shrink it and try again.'
Don't: 'An error occurred' or a raw error code.

Check the change against this rule before you report the work as done.

Form

Doğrulamayı alandan çıkınca yap

✓

Kullanıcı alanı bıraktığında doğrula, düzeltirken anında geri bildir.

Her tuş vuruşunda kırmızı hata basmak; henüz yazmayı bitirmedi.

↻ Prompt

Doğrulamayı alandan çıkınca yap

Apply this UX rule: Validate on blur, not on every keystroke

Do: Validate when the field is left, then give instant feedback while it is corrected.
Don't: Flashing a red error on each keystroke — they have not finished typing.

Check the change against this rule before you report the work as done.

Güvenlik

Geri alınamaz işlemde onay iste

✓

Ne silineceğini adıyla yaz, onay düğmesini ikincil renkte tut.

Tek tıkla kalıcı silme veya 'Emin misiniz?' deyip ne silineceğini söylememek.

↻ Prompt

Geri alınamaz işlemde onay iste

Apply this UX rule: Confirm irreversible actions

Do: Name what will be deleted; keep the confirm button in a secondary color.
Don't: One-click permanent delete, or asking 'Are you sure?' without naming the target.

Check the change against this rule before you report the work as done.

Veri

Uzun formlarda taslağı sakla

✓

Yerel olarak sakla ve 'kaydedildi' göstergesi ver.

Sekme kapanınca 40 dakikalık yazıyı kaybettirmek.

↻ Prompt

Uzun formlarda taslağı sakla

Apply this UX rule: Keep a draft in long forms

Do: Store locally and show a 'saved' indicator.
Don't: Losing 40 minutes of writing when the tab closes.

Check the change against this rule before you report the work as done.

Liste

Uzun listeyi sayfala veya sanallaştır

✓

50'den fazla kayıtta sayfalama; kaydırma konumunu geri dönüşte koru.

Binlerce satırı tek seferde basmak — düşük cihazlarda sayfa donar.

↻ Prompt

Uzun listeyi sayfala veya sanallaştır

Apply this UX rule: Paginate or virtualize long lists

Do: Paginate past 50 rows; restore scroll position on return.
Don't: Rendering thousands of rows at once freezes the page on low-end devices.

Check the change against this rule before you report the work as done.

Arayüz işi yapan skill ve subagent'ları arıyorsan: kütüphanedeki UI kaynakları →