Claude Code’a “bir ajans sitesi yap” dediğinizde sonuç çoğu zaman kötü olmuyor. Daha can sıkıcı bir şey oluyor: tanıdık geliyor. Aynı mor gradyan, aynı yuvarlak kartlar, aynı kocaman başlık ve sağ tarafta ne işe yaradığı pek anlaşılmayan parlak bir şekil…
Brandon Melville’in Taste Skill videosunu izlerken ilk dikkatimi çeken buydu. Claude’un kod yazma becerisini tartışmıyor, doğrudan tasarım alışkanlıklarına müdahale ediyor. Bu yazıda videodaki örneği kısa yoldan anlatacağım, Taste Skill’in içinde ne olduğuna bakacağım ve kendi projenizde denerken nereden başlamanız gerektiğini göstereceğim.
Taste Skill neyi değiştiriyor?
Taste Skill, yapay zeka ajanlarına arayüz tasarlarken uyacakları kuralları veren açık kaynaklı bir skill paketi. Claude Code, Codex ve Cursor gibi araçlarla kullanılabiliyor. Repo bu yazıyı hazırladığım sırada 87 binin üzerinde yıldız almış durumda ve MIT lisansıyla yayımlanıyor.
Şöyle düşünün: Elinizde hızlı çalışan bir frontend geliştirici var ama yaptığı her site aynı hazır temadan çıkmış gibi görünüyor. Taste Skill bu geliştiriciye iyi örnekler, sınırlar ve bir tasarım kontrol listesi veriyor. Kod yazma yeteneğini değiştirmiyor, karar verirken baktığı pusulayı değiştiriyor.
Videoda aynı mekanik servisi sitesi iki kez üretiliyor. İlk deneme çalışıyor ama tek dosyalı, düz ve kolay unutulan bir arayüz çıkıyor. Skill devreye girdiğinde yükleme hareketleri, daha cesur bir sayfa düzeni, kaydırmayla değişen bölümler ve daha düzenli bir görsel hiyerarşi geliyor. Yeni sayfada nereden başlayıp nereye bakacağınız daha net.
Paketin içinde tek bir tasarım dili yok
Repo içinde 13 farklı skill bulunuyor. Hepsini birden kurabilirsiniz ama her projede hepsini çalıştırmak gerekmiyor.
Yeni bir arayüz için design-taste-frontend genel başlangıç noktası. GPT ve Codex tarafında daha sert kurallar istiyorsanız gpt-taste var. Mevcut bir siteyi elden geçirmek için redesign-existing-projects, ekran görüntüsünü koda çevirmek için image-to-code daha doğru seçim.
Görsel karakteri baştan biliyorsanız seçenekler ayrılıyor. minimalist-ui daha sakin ve editoryal sayfalar çıkarıyor, industrial-brutalist-ui sert kontrast ve mekanik düzen kullanıyor, high-end-visual-design ise boşluk, tipografi ve hareket tarafında daha rafine davranıyor.
Benim sevdiğim tarafı bu: “Güzel bir site yap” gibi ucu açık bir komutu modele bırakmak zorunda değilsiniz. Ne tür bir sonuç istediğinizi skill seçimiyle baştan daraltabiliyorsunuz.
Kurulum birkaç dakika sürüyor
Tüm paketi kurmak için terminalde şu komut yeterli:
npx skills add https://github.com/Leonxlnx/taste-skillYalnızca genel frontend skill’ini eklemek isterseniz:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"Kurulum aracı hangi ajanlarda kullanacağınızı ve skill’in proje bazlı mı yoksa global mi kurulacağını soruyor. Ben olsam önce tek projede denerim. Sonucu görmeden bütün çalışma ortamına yaymak, yeni bulduğunuz bir baharatı tenceredeki her yemeğe dökmeye benziyor; bazısına yakışıyor, bazısını bozuyor.
Bir güvenlik notu da düşeyim. Skill dosyaları, ajana verilen talimatlardır. GitHub’dan bulduğunuz herhangi bir skill’i kurmadan önce SKILL.md içeriğini okuyun, hangi komutları çalıştırdığını ve hangi dosyalara dokunduğunu kontrol edin. Yıldız sayısı iyi bir sinyal olabilir ama güvenlik incelemesinin yerine geçmez.
Üç ayar, sonucu ciddi biçimde değiştiriyor
Ana skill’in üstünde üç ayar var: DESIGN_VARIANCE, MOTION_INTENSITY ve VISUAL_DENSITY.
İlk ayar sayfa düzeninin ne kadar alışılmış ya da deneysel olacağını belirliyor. İkincisi animasyonların dozunu, üçüncüsü de ekrana ne kadar bilgi sığacağını değiştiriyor. Videoda bu değerler bir portfolyo sitesi için yüksek seçiliyor, Claude ise gerekçesini anlatarak daha dengeli rakamlar öneriyor.
Bu küçük ayrıntı hoşuma gitti. Skill, her talebi körü körüne uygulayan bir şablon gibi davranmıyor; projenin hedefiyle tercihlerin çarpıştığı yerde itiraz edebiliyor. İyi bir tasarımcıdan beklediğimiz de biraz bu zaten.
Her arayüzü kurtarır mı?
Hayır. Kötü içerik, belirsiz hedef kitle ve eksik ürün bilgisi varsa hiçbir skill bunları sihirli biçimde tamamlayamaz. Üstelik yüksek hareket ve sıra dışı düzen ayarları, kurumsal bir yönetim panelinde gereksiz gösteriye dönüşebilir.
Videodaki en işe yarar bölüm, prompt hazırlarken verilen sıra. Önce ne üretileceği söyleniyor, ardından eldeki marka malzemeleri ve referanslar ekleniyor. Sonra hedef kitle, ziyaretçinin yapacağı ana işlem ve görsel yön tarif ediliyor. Skill en sona geliyor. Bu sıralama, modele yalnızca “şunu kullan” demekten daha sağlıklı.
Bir sonraki arayüzde denemeye değer
- Yeni site için önce
design-taste-frontendile başlayın. - Mevcut projede
redesign-existing-projectskullanın. - Ayarları sona dayamadan önce düşük ve orta değerlerle iki sürüm alın.
- Üretilen sayfayı mobil görünüm, erişilebilirlik ve performans açısından ayrıca kontrol edin.
- Kurmadan önce ilgili
SKILL.mddosyasını okuyun.
Taste Skill, iyi tasarım zevkini tek komutla bilgisayara yüklemiyor. Ama modelin sürekli aynı güvenli kalıplara dönmesini zorlaştırıyor; benim bu repoyu listeme alma sebebim bu.
Siz de denerseniz hangi skill’in daha iyi sonuç verdiğini yorumlara yazın, örnekleri birlikte karşılaştıralım.
