6a9af19ef2
Üniversite sayfası (canlı referans ekran /universite/ankara-universitesi): - Program listesi: ad kesilmez/sarar, telefonda taban sıra alt satıra iner, satır butonları 44 px, tür çipi okunur boyda - Başlık bloğu lg altında ortalı (logo başlığın üstünde), kimlik hapları (Devlet/Ankara) navbar ölçüsünde, ikon + metin - Harita yanında 4 özet kartı (OzetKart): sayı solda iri, ikon sağda; 4. kart URAP Türkiye sırası + piksel sıra şeridi (PixelSira) - Akademik göstergeler (URAP + YÖK İstatistik) sayfadan "Akademik göstergeler ›" satırının açtığı alt sayfaya taşındı: kartsız, ortalı, masonry gösterge kareleri, tek ekrana sığar - Hover tek turuncu (orange-500); liste satırı adı mavi kalır - Üst çubuk başlık geçişi (NavBaslik): h1 kaydırılınca üst çubukta logo + ad belirir; bölüm sayfasında da (yalnız ad) Tasarım dili: - DESIGN.md: temel his (§1.1), hover kuralı (§2.1), yazı alt sınırları, yeni tek kaynak parçalar (§4.8–4.15), lg altı ortala (§5.2), reddedilen denemeler (§7), ölç-tahmin-etme ve tuzaklar (§9) - Denetim: gösterge karesi renk istisnası (bg-indigo-500, bg-green-600) ve site taraması için dört uyarı (minik-yazi, buyuk-harf-etiket, mavi-hover, iri-sayi-tabular) Not: universite-icerik.tsx'teki akademik göstergeler bölümü (URAP/YÖK kartları) Bilal'in commit'lenmemiş işiydi; tasarım değişiklikleriyle aynı dosyada iç içe olduğu için bu commit'e girdi. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
4.8 KiB
name, description
| name | description |
|---|---|
| kolaytercih-tasarim | KolayTercih'in kendi görsel dili — piksel imzası (SectionEyebrow, PixelDivider, PixelCorner), Cal Sans/Clarity City/Bricolage tipografisi, mavi bilgi + turuncu aksiyon rengi, slate nötrler, sondaki ArrowRight'lı CTA. Yeni ekran, bileşen, kart, modal, buton, form ya da sayfa tasarlarken; mevcut arayüzü değiştirirken; "AI gibi duruyor", "sitenin diline uymuyor", "piksel detayı kaybolmuş" denince kullanılır. docs/tasarim/DESIGN.md'nin giriş kapısıdır. |
KolayTercih tasarım dili
Bu proje için genel tasarım kütüphanesi (stil katalogları, palet listeleri) kullanılmaz;
yön zaten belli. Kaynak tek: docs/tasarim/DESIGN.md. Bu dosya onu nasıl uygulayacağını söyler.
1. Başlamadan önce (zorunlu)
docs/tasarim/DESIGN.mddosyasını tamamını oku (477 satır). Özellikle §1.1 temel his, §4 tek kaynaklar, §7 yap/yapma ve §9.2 ölç-tahmin-etme. Canlı referans ekran:/universite/ankara-universitesi.- Dört satırlık brief'i doldur (DESIGN.md §9): amaç · referans ekran · tek kaynak parçalar · durumlar.
- Referans ekranı bul ve aç; kopyalayacağın sınıf dizilerini oradan al:
grep -rn "SectionEyebrow" src --include='*.tsx' -l # rozetli başlık bloğu örnekleri
grep -rn "bg-orange-500" src --include='*.tsx' -l # turuncu CTA örnekleri
grep -rn "PixelCorner\|PagePixelDivider" src -l --include='*.tsx' # piksel imzası taşıyan ekranlar
Ana sayfa bölüm iskeleti: src/app/page.tsx (Problem bölümü, ~satır 268). Alt sayfa başlığı: src/app/meraklisina/page.tsx.
2. Yazarken
- Kanonik parçaları içe aktar, yeniden çizme:
SectionEyebrow,PagePixelDivider,PixelCorner(@/components/pixel-decor);Button(@/components/ui/button);Card(@/components/ui/card);DialogContentvarsayılan çarpısı (@/components/ui/dialog);ArrowRight,XIcon(lucide-react). - Sınıf dizilerini DESIGN.md'den birebir kopyala; "yaklaşık aynı" yazma.
- Her piksel süsüne o sayfaya özgü tek
seedver (mevcut seed'ler:grep -rho "seed={[0-9]*}" src | sort -u). - Risk rengi kullanıyorsan metin etiketini
RISK_ETIKET/DILIM_ETIKET'ten (src/lib/risk.ts) al. - Türkçe tanımlayıcı, çevredeki kodla aynı yorum yoğunluğu (AGENTS.md).
3. Bitirmeden önce
pnpm tasarim:denetim # sıfır hata olmadan iş bitmiş sayılmaz
Uyarıları raporda listele; hataları düzelt. Sonra 375 px kontrol notu yaz: taşma, üst üste binme, dokunma hedefi < 44 px, uzun üniversite adı. (Tarayıcı açma kuralı AGENTS.md'de; koddan çıkarım yazıyorsan "koddan çıkarım" de.)
4. Örnekler
İstek: "Bölüm sayfasına 'Bu bölümü okuyanlar ne diyor' başlığı ekle." Çıktı:
<div className="flex flex-col items-center gap-4 text-center">
<SectionEyebrow>Öğrenci görüşleri</SectionEyebrow>
<h2 className="font-heading text-3xl font-bold sm:text-4xl">Bu bölümü okuyanlar ne diyor?</h2>
<p className="max-w-xl text-lg leading-relaxed text-slate-600">…</p>
</div>
İstek: "Paket sayfasına satın alma butonu koy." Çıktı:
<Button size="lg" className="h-12 w-full cursor-pointer bg-orange-500 px-8 text-white transition-colors duration-200 hover:bg-orange-600">
Paketi al
<ArrowRight className="size-4" aria-hidden />
</Button>
(Yanlış: başta <Sparkles />, bg-gradient-to-r, rounded-xl, "Hemen Al ✨".)
İstek: "Üniversite sayfasına URAP kartı ekle." Çıktı:
<div className="relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-5">
<PixelCorner className="absolute right-4 top-4" />
<p className="text-xs font-semibold text-slate-500">URAP Türkiye</p>
<p className="mt-1 font-heading text-2xl font-bold text-slate-900">18 <span className="text-base font-medium text-slate-400">/ 198</span></p>
</div>
İstek: "Modal ekle, çarpı sağ üstte olsun."
Çıktı: DialogContent varsayılanını kullan; hiçbir sınıf verme. Özel yerleşim şartsa showCloseButton={false} + DESIGN.md §4.3'teki sınıf dizisi aynen.
5. Kısa yasak listesi
Badge import'u · elle pill span · CTA'da Sparkles/emoji · indigo/purple/gray/zinc · gradyan metin ·
parlama gölgesi · whileHover scale · her elemanda fade-up · dark: · Inter/Roboto/serif · text-[#hex] · renk tek başına anlam.
6. Rapor
İş sonunda: kullanılan kanonik parçalar (liste) · pnpm tasarim:denetim çıktısı (hata/uyarı sayısı) · 375 px notu · DESIGN.md ile çelişen bir şey bulduysan dosya:satır ile yaz, kendi başına kuralı değiştirme.
7. Skill'i ölçme
Skill'in işe yarayıp yaramadığı evals.md içindeki üç istekle ölçülür (skill kapalı/açık karşılaştırması). Skill metnini ya da DESIGN.md'yi değiştirdikten sonra tekrar koşulur.