Büyük Dil Modelleri ile Profesyonel Web Tasarımı: Jenerik AI Estetiğinden Kaçınma Rehberi

❌ Kaçınılması Gereken Klişeler:

• Fontlar: Inter, Roboto, Arial, sistem fontlarının sürekli kullanımı
• Renkler: Mor/mavi gradyan + beyaz arka plan kombinasyonu
• Düzen: Her projede aynı kart yapısı, aynı hero bölümü
• İçerik: “Lorem ipsum” veya anlamsız placeholder metinler
• Genel: Bağlama özgü karakter taşımayan, şablon görünümlü tasarımlar

💡 İpucu: LLM’e prompt verirken bu soruların cevaplarını da ekleyin. Örneğin: “Minimalist, Japon estetiğinden ilham alan, bol beyaz boşluklu bir portfolio sayfası tasarla. Hedef kitle: yaratıcı sektör profesyonelleri.”

⚠️ Kritik: Bir yön seçtikten sonra ona bağlı kalın. Yarı minimalist, yarı maksimalist tasarımlar tutarsız görünür. Önemli olan yoğunluk değil, niyetliliktir.

CSS Değişkenleri ile Tutarlı Palet

:root {
  /* Ana renkler */
  --color-bg: #0f0f1a;
  --color-surface: #1a1a2e;
  --color-primary: #e94560;
  
  /* Metin renkleri */
  --color-text: #eaeaea;
  --color-text-muted: #8b8b8b;
  
  /* Vurgu ve durumlar */
  --color-accent: #00d4aa;
  --color-warning: #ffc107;
  --color-error: #ff5252;
}

Kademeli Görünüm (Staggered Reveal) Örneği

/* Temel animasyon tanımı */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Kartlara uygulama */
.card {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

/* Kademeli gecikme */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }

🎬 Animasyon Öncelikleri:
1. CSS-only çözümler (performans için en iyi)
2. Sayfa yüklemede kademeli görünüm
3. Hover durumlarında sürpriz efektler
4. Scroll-triggered animasyonlar

Grid Kırıcı Hero Görseli

.hero-image {
  position: relative;
  /* Container dışına taşır */
  margin-left: -5vw;
  margin-right: -5vw;
  width: calc(100% + 10vw);
}

/* Örtüşen kartlar */
.card-stack {
  display: grid;
  grid-template-columns: 1fr;
}

.card-stack > * {
  grid-area: 1 / 1;
  transform: translateX(calc(var(--index) * 20px)) 
             translateY(calc(var(--index) * 10px));
}

Noise Texture Overlay

.bg-with-noise {
  position: relative;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.bg-with-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,...");
  opacity: 0.03;
  pointer-events: none;
}

📝 Örnek Prompt Şablonu:

✅ Gerçek Kullanım Örneği:

💡 Hatırlatma

“Yapay zeka olağanüstü yaratıcı işler çıkarabilir.
Geri durmayın, kalıpların dışında düşünün ve cesur olun.”

frontend-tasarim-rehberi.md

---
Yazar: Burak Can KARA
Sürüm: 1.0
Tarih: 4 Aralık 2025
Lisans: Apache 2.0
Açıklama: Büyük Dil Modelleri için Frontend Tasarım Rehberi
---

# Frontend Tasarım Rehberi

Bu rehber, jenerik "AI slop" estetiğinden kaçınan, özgün ve üretim kalitesinde frontend arayüzleri oluşturmak için tasarlanmıştır. Estetik detaylara ve yaratıcı seçimlere olağanüstü dikkat göstererek gerçek çalışan kod üretin.

Kullanıcı frontend gereksinimleri sağlar: oluşturulacak bir bileşen, sayfa, uygulama veya arayüz. Amaç, hedef kitle veya teknik kısıtlamalar hakkında bağlam içerebilir.

## Tasarım Düşüncesi

Kod yazmadan önce bağlamı anlayın ve CESUR bir estetik yöne bağlanın:

- **Amaç**: Bu arayüz hangi problemi çözüyor? Kim kullanıyor?
- **Ton**: Bir uç nokta seçin: brutal minimalizm, maksimalist kaos, retro-fütüristik, organik/doğal, lüks/rafine, oyunsu/eğlenceli, editöryal/dergi, brütalist/ham, art deco/geometrik, yumuşak/pastel, endüstriyel/faydacı, vb. Seçenekler çok fazla. Bunları ilham için kullanın ancak estetik yöne sadık bir tasarım yapın.
- **Kısıtlar**: Teknik gereksinimler (framework, performans, erişilebilirlik).
- **Farklılaşma**: Bu tasarımı UNUTULMAZ yapan ne? Birinin hatırlayacağı tek şey ne?

**KRİTİK**: Net bir kavramsal yön seçin ve hassasiyetle uygulayın. Cesur maksimalizm ve rafine minimalizm ikisi de işe yarar - önemli olan yoğunluk değil, niyetliliktir.

Ardından şu özelliklere sahip çalışan kod uygulayın (HTML/CSS/JS, React, Vue, vb.):
- Üretim kalitesinde ve işlevsel
- Görsel olarak çarpıcı ve akılda kalıcı
- Net bir estetik bakış açısıyla tutarlı
- Her detayda titizlikle işlenmiş

## Frontend Estetik Kuralları

Odaklanılacak noktalar:

- **Tipografi**: Güzel, benzersiz ve ilgi çekici fontlar seçin. Arial ve Inter gibi jenerik fontlardan kaçının; bunun yerine frontend estetiğini yükselten karakterli seçimler yapın. Karakterli bir display fontu ile rafine bir gövde fontunu eşleştirin.

- **Renk ve Tema**: Tutarlı bir estetiğe bağlı kalın. Tutarlılık için CSS değişkenleri kullanın. Keskin vurgulu baskın renkler, çekingen ve eşit dağılmış paletlerden daha iyi performans gösterir.

- **Hareket**: Efektler ve mikro-etkileşimler için animasyonlar kullanın. HTML için CSS-only çözümlere öncelik verin. React için mümkün olduğunda Motion kütüphanesi kullanın. Yüksek etkili anlara odaklanın: kademeli görünümlerle (animation-delay) iyi orkestre edilmiş tek bir sayfa yüklemesi, dağınık mikro-etkileşimlerden daha fazla memnuniyet yaratır. Şaşırtan scroll-triggering ve hover durumları kullanın.

- **Mekansal Kompozisyon**: Beklenmedik düzenler. Asimetri. Örtüşme. Çapraz akış. Grid kırıcı elemanlar. Cömert negatif boşluk VEYA kontrollü yoğunluk.

- **Arka Planlar ve Görsel Detaylar**: Düz renklere varsayılan olarak dönmek yerine atmosfer ve derinlik yaratın. Genel estetiğe uyan bağlamsal efektler ve dokular ekleyin. Gradient mesh'ler, noise texture'lar, geometrik desenler, katmanlı saydamlıklar, dramatik gölgeler, dekoratif kenarlıklar, özel imleçler ve grain overlay'ler gibi yaratıcı formlar uygulayın.

## Kaçınılması Gerekenler

ASLA aşağıdaki jenerik AI-üretimi estetikleri kullanmayın:

- Aşırı kullanılmış font aileleri (Inter, Roboto, Arial, sistem fontları)
- Klişe renk şemaları (özellikle beyaz arka plan üzerinde mor gradyanlar)
- Öngörülebilir düzenler ve bileşen kalıpları
- Bağlama özgü karakter taşımayan kurabiye kalıbı tasarımlar

Yaratıcı yorumlayın ve bağlam için gerçekten tasarlanmış hissettiren beklenmedik seçimler yapın. Hiçbir tasarım aynı olmamalı. Açık ve koyu temalar, farklı fontlar, farklı estetikler arasında çeşitlilik gösterin. Üretimler arasında ASLA ortak seçimlere yakınsamayın.

## Uygulama Karmaşıklığı

**ÖNEMLİ**: Uygulama karmaşıklığını estetik vizyonla eşleştirin:

- Maksimalist tasarımlar kapsamlı animasyonlar ve efektlerle ayrıntılı kod gerektirir
- Minimalist veya rafine tasarımlar kısıtlama, hassasiyet ve boşluk, tipografi ile ince detaylara dikkatli ilgi gerektirir

Zarafet, vizyonu iyi uygulamaktan gelir.

## Son Hatırlatma

Yapay zeka olağanüstü yaratıcı işler yapabilir. Geri durmayın, kalıpların dışında düşündüğünüzde ve kendine özgü bir vizyona tam olarak bağlandığınızda gerçekten ne yaratılabileceğini gösterin.

💾 Kullanım: Yukarıdaki Markdown içeriğini kopyalayıp .md uzantılı bir dosya olarak kaydedin. ChatGPT’de “Custom Instructions” bölümüne, Claude’da “Project Instructions” alanına veya herhangi bir LLM’in sistem prompt’una yapıştırarak kullanabilirsiniz.