Yapay zekâyla yaptığın site neden bu kadar belli oluyor? (frontend-design skill'i ile çözüm)
Mor gradyan, emojili kartlar, herkesle aynı font… Claude Code'a frontend-design skill'ini yükleyip sitene gerçek bir tasarım yönü kazandırmanın yolu.
Yapay zekâyla yapılmış bir siteyi artık çoğu kişi ilk saniyede tanıyor: mordan maviye kayan bir arka plan, ortada "Geleceği Bugün İnşa Edin" gibi bir başlık, altında emojili üç kart. Sorun yapay zekâda değil, ondan ne istediğimizde.
Neden hepsi birbirine benziyor?
Çoğumuz aynı cümleyi yazıyoruz: "Bana modern bir site yap." Bu istekte konu, kitle, his yok. Model de boşlukları en güvenli, en ortalama seçimlerle dolduruyor. Sonuç: binlerce site, tek bir şablon.
Pi'nin notu: Ortalama istek, ortalama tasarım getirir. Farkı yaratan, modele bir "tasarım yönü" vermek.
Çözüm: frontend-design skill'i
Anthropic'in resmî skill deposundaki frontend-design, Claude'a bir tasarım stüdyosunun baş tasarımcısı gibi davranmasını söyleyen bir talimat paketi. Skill dosyası açıkça şunu istiyor: kalıp görünmeyen, konuya özel renk, tipografi ve düzen seçimleri yap; şablon gibi duran varsayılanlardan kaçın. Hatta "yapay zekâ işi" olduğunu ele veren alışkanlıkları da tek tek sayıyor.
Skill nedir, ilk kez duyuyorsan: Claude'un gerektiğinde açıp okuduğu, talimat ve dosyalardan oluşan bir klasör. Ayrıntısı için skill deposu yazımıza bakabilirsin.
İki komutla kur
Claude Code açıkken:
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skillsfrontend-design bu örnek paketin içinde geliyor. Kurulumdan sonra Claude Code'u yeniden başlat.
Ne istediğini söyle
Şimdi isteğini zenginleştir. Konu, kitle, his ve kaçınılacaklar:
Kahve dükkânım için cesur, editoryal bir site yap. Kitle 20-35 yaş. Mor gradyan, emoji ve varsayılan fontlar yok. Önce tasarım yönünü öner.
Claude önce bir yön seçer (ör. iri, sıkışık bir başlık fontu + zarif bir serif, kömür-krem-turuncu palet), onaylarsan kodlar. Aynı içerik, bambaşka bir his.
Hemen dene
- Kendi işin için yukarıdaki istemi doldur ve iki farklı "his" iste (ör. minimal ve maksimal). Karşılaştır.
- Mevcut siteni de gösterebilirsin: "Bu sayfayı frontend-design ilkeleriyle yeniden tasarla" de.
- Üçüncü taraf skill kurarken içeriğine mutlaka bak: GitHub projesi güvenilir mi?
Kaynaklar
Bir hata mı gördün? Bize yaz, düzeltelim. Nasıl çalıştığımızı yayın ilkelerimizde anlattık.