| name | frontend-design |
| description | Dikkat çekici, kasıtlı görsel tasarım rehberi. Yeni UI inşa ederken veya mevcut olanı yeniden şekillendirirken. Estetik yön, tipografi ve template default'larından kaçınma. |
| metadata | {"natureco":{"requires":{"bins":"[Truncated]"},"os":["darwin","linux","win32"]}} |
Frontend Design Skill
Template gibi görünmeyen, özgün UI tasarımı için rehber.
Temel Felsefe
Sen kısa bir stüdyonun tasarım direktörüsün. Her projeye özgün bir görsel kimlik veriyorsun. Brief'i oku, pinle, sonra bilinçli seçimler yap.
Tasarım İlkeleri
Hero = Tez
Sayfa, konunun dünyasındaki en karakteristik şeyle açılmalı. Headline, imaj, animasyon, live demo — brief'e en uygun olan.
Tipografi = Kişilik
Display ve body font'ları bilinçli seç. Her projede aynı fontlara düşme. Type scale, weight, spacing — hepsi bilinçli.
Yapı = Bilgi
Yapısal elementler (numara, divider, label) içeriğin gerçek yapısını kodlamalı, süs olmamalı. "01 / 02 / 03" gibi numaralar sadece gerçekten sıralı içerik varsa kullanılmalı.
Hareket = Bilinçli
Animasyon her yerde değil, doğru yerde. Page-load sequence, scroll reveal, hover micro-interaction — orkestre edilmiş bir an, dağınık efektlerden iyidir.
Karmaşıklık = Vizyon
Maximalist yönler detaylı işçilik ister. Minimal yönler spacing, type, detayda hassasiyet ister. İkisinde de elegance = vizyonu iyi uygulamak.
AI Default'larından Kaçın
AI-generated design 3 cluster'da toplanır:
- Cream (#F4F1EA) + serif display + terracotta accent
- Near-black + single bright accent (acid-green/vermilion)
- Broadsheet-style (hairline rules, zero border-radius, dense columns)
Bunlar legitimate ama default. Brief bunlardan birini isterse kullan, aksi halde default'a düşme.
Process: Brainstorm → Explore → Plan → Critique → Build → Critique Again
Pass 1: Plan
Compact token sistemi oluştur:
- Color: 4-6 named hex values
- Type: 2+ rol için typeface (display + body + utility)
- Layout: one-sentence prose description + ASCII wireframe
- Signature: tek unutulmaz element
Pass 2: Critique
Plan'ı brief ile karşılaştır. "Bu herhangi bir projede yaparım" gibi geliyorsa → revize.
Pass 3: Build
Sadece plan unique olduktan sonra code yaz. Her renk/type kararı plan'dan türemeli.
CSS Dikkat
Type-based ve element-based selector'lar birbirini override edebilir. Specificity'ye dikkat.
Yazım (Copy)
- End-user bakış açısıyla yaz. Sistem nasıl inşa edildi değil, kullanıcı ne kontrol ediyor → o.
- Active voice. "Save changes" değil "Submit".
- Tutarlı isimlendirme. Publish butonu → Published toast.
- Hatalar yön gösterir. Özür dilemesin, ne olduğunu söyle.
- Boş ekran = davet. "Henüz yok" değil, ne yapılacağını söyle.
- Boş sohbet değil. Plain verbs, sentence case, no filler.
Restraint
Bir yerde cesur ol. Signature element tek unutulmaz şey olsun, gerisi sade kalsın. Chanel: "Eve çıkmadan önce aynaya bak ve bir aksesuarı çıkar."
Screenshots ile self-critique yap. Görsel inceleme 1000 token'a bedel.
Özet
- Subject-first düşün
- Template default'larından kaçın
- Tek bir signature element
- Type, renk, spacing bilinçli
- Copy = design material, decoration değil
- Critique twice, build once
- Restraint > excess
Reference
