Imported from ptsertaccalbas-web/claude-deneme (.claude/skills/tasarim-rehberi/SKILL.md). Install upstream with npx skills add ptsertaccalbas-web/claude-deneme --skill tasarim-rehberi. Copyright stays with the author.

name: tasarim-rehberi description: LUMI AI Media proje-ozel talimat (kaynak: .opencode/skill/tasarim-rehberi.md)

Kaynak: .opencode/skill/tasarim-rehberi.md -- opencode ile senkron tutulur, biri guncellenince digeri de guncellenmeli.

Web Sitesi Tasarım Rehberi

2026 — B2B/endüstriyel odaklı. Ne işe yaradığı belli olan kurallar, yasak listesi değil. 30 Temmuz 2026 güncellemesi: Kullanıcı geri bildirimi — tüm siteler aynı kalıp/renk/font/efektle çıkıyordu, özgünlük yoktu. Sebep: "LUMI AI Design DNA" (renk paleti + imza efektleri) her MÜŞTERİ sitesine birebir uygulanıyordu. Düzeltme: bu DNA sadece LUMI'nin kendi sitesi (lumiai-website/) içindir. Müşteri siteleri için her adımda sektöre/markaya özgü TÜRETME zorunlu — aşağıya bak.

⚠️ KİME NE UYGULANIR (önce bunu oku)

Bu ayrım yapılmazsa sonuç: her site aynı koyu+altın renk, aynı custom cursor, aynı noise, aynı marquee ile çıkar — insan eli değmemiş, şablon hissi verir.

LUMI AI Design DNA (SADECE lumiai-website/ için)

Karanlık, Sinematik, Premium.

• Karanlık: #0A0A0A fon, ambient glow, asla düz siyah değil
• Sinematik: Scroll bir video player gibi, her section bir kare
• Premium: ≤4 renk, bold tipografi, bol whitespace

Renk Sistemi (LUMI'nin kendi paleti)

{
  "background": "#0A0A0A",
  "surface": "#1A1A1A",
  "foreground": "#F5F5F0",
  "muted": "#8A8F98",
  "border": "#2D2D2D",
  "accent": "#E5C158",
  "accent-hover": "#D4A530"
}

İmza Efektleri (SADECE LUMI'nin kendi sitesinde)

1. Noise overlay (SVG feTurbulence, opacity: 0.025)
2. Ambient glow (CSS radial gradient, asla floating blob değil)
3. Custom cursor (nokta + halka)
4. Lenis + GSAP ScrollTrigger sync (lenis.on("scroll", ScrollTrigger.update) + gsap.ticker.add())
5. GSAP marquee (CSS @keyframes DEĞİL)
6. Design token (text-white yok, text-foreground)
7. ALL CAPS tracking (+0.04em ila +0.08em)
8. GSAP section reveal (data-reveal + opacity-0 translate-y-8 → gsap.to())

Müşteri Sitesi İçin Türetme Süreci (ZORUNLU — her müşteri sitesinde)

Her müşteri projesine BAŞLAMADAN önce şu 4 soruyu kendi kendine cevapla (gerekirse müşteriden bilgi al), ve palet/font/efekt setini SIFIRDAN türet:

1. Sektör ne? (Endüstriyel / Premium-lüks / Sağlık / Teknoloji / Yerel esnaf / vb.)
2. Müşterinin mevcut markası var mı? (logo, sosyal medya, tabela rengi) — varsa O renkten türet, LUMI'nin altın-koyu paletini KOPYALAMA.
3. Rakipler nasıl? (hepsi aynı görünüyorsa farklılaşma fırsatı; hepsi belli bir dilde konuşuyorsa o dile uy ya da bilinçli şekilde kır)
4. Bu iş kime hitap ediyor? (premium/lüks alıcı mı, günlük/yerel müşteri mi)

Renk Türetme (LUMI paleti değil — her seferinde yeni)

Aşağıdaki gibi sabit bir palet YOK — her proje için 1 primary + 2-3 nötr + 0-1 accent seçilir; kaynak: müşterinin mevcut markası (varsa) → sektör konvansiyonu (yoksa) → bilinçli farklılaşma (rakipler tekdüzeyse). web-design-master skill'indeki "max 5 renk" kuralına uy, ama HANGİ 5 renk olduğu projeye özel olsun.

İmza Efekti Seçimi (araç kutusu, zorunlu liste değil)

Aşağıdakilerden projeye uygun olanları seç — hepsini her sitede kullanma:

• Noise overlay → sinematik/premium hissi gereken projelerde
• Custom cursor → premium/yaratıcı sektörlerde; yerel esnaf/günlük hizmette gereksiz
• GSAP marquee → sosyal kanıt/çeşitlilik vurgulanacaksa
• Ambient glow → koyu temalı projelerde; açık/canlı temada gereksiz
• Kinetik tipografi (SplitText) → hero'da güçlü bir mesaj varsa

Karar verirken sor: "Bu efekt BU müşterinin markasına bir şey katıyor mu, yoksa sadece LUMI'nin imzasını mı tekrarlıyor?" İkincisiyse kullanma.

Tipografi

Font Pairing

Max 2 font ailesi. Display body'de kullanılmaz.

Modular Scale (Major Third 1.25)

• H1-H2: text-wrap: balance, line-height 1.05-1.1
• Body: text-pretty, line-height 1.6
• ALL CAPS: tracking +0.04em, weight 500-600

Referans Kütüphanesi

Proje Tipi → Pattern Eşleştirme (ESAS karar mekanizması — aşağıdaki tek "şablon" değil)

Her proje kendi tipine göre BURADAN layout sırası alır. Aynı proje tipi olsa bile en az bir bölüm sırasını/vurgusunu projeye özgü değiştir (ör. hangi bölüm önce gelir, kaç istatistik gösterilir, kart mı bento mu kullanılır).

Yukarıdaki tabloda proje tipin yoksa UYDURMA — en yakın 2 tipi karşılaştır, hangisine daha yakınsa onu temel al ve projeye göre uyarla.

Örnek Layout (SADECE "Premium brand / chapter-based" tipi için — diğer tipler kendi sırasını kullanır)

Header (fixed, blur)
  → Hero (asimetrik, başlık tek tarafta, min-h-screen)
  → Marquee (GSAP loop, 8+ item)
  → Stats (4 items, scroll-trigger stagger)
  → Services/Products (heterojen kart boyutları)
  → About (2 column grid)
  → Contact (3 column cards + map)
  → CTA (full-width, gradient bg)
  → Footer

• Her section farklı py değeri (20/24/28/32)
• Her section data-reveal wrapper + fade-up
• CTA butonları lenis.scrollTo() ile, <a href="#id"> değil

Pratik Kurallar

Yap

• gsap.to() + CSS initial state (opacity-0 translate-y-8)
• Design token kullan (direkt renk class'ı yok)
• next/font ile self-host, font-display: swap
• clamp() ile fluid typography
• Mobilde canvas partikül sayısını yarıya indir, custom cursor kapat

Yapma

• gsap.from() kullanma
• Emoji ikon olarak kullanma (Lucide kullan)
• Section başlığında ALL CAPS etiket kullanma
• Aynı padding'i her yerde tekrarlama

Ponytail ile Uyum

Tasarım kararlarını verirken ponytail lite seviyesinde çalış. Kod yazma/deploy aşamasında full'a geç. Ponytail "gereksiz şişkinliği kes" der, "tasarımı kötü yap" demez.

Hata Tespit

• 1. hata: düzelt, bildir
• 2. hata: farklı yaklaşım dene
• 3. hata: dur, bana strateji sor