Yapay Zekanın Yaptığı Siteler Neden Hep 'Ucuz' Görünüyor? 'unslop' Kurulum ve Tasarım Rehberi

Bir web sitesine veya SaaS arayüzüne girdiğin ilk saniyede "Bunu kesin yapay zeka yapmış!" diyebiliyorsun değil mi?

Koyu lacivert arka plan üzerine mor-mavi neon gradyanlar, birbirinin kopyası üçlü yuvarlatılmış kartlar (rounded-2xl), her başlığın yanına serpiştirilmiş 🚀 ve ✨ emojileri, gereksiz parlama (glow) efektleri ve hiçbir görsel ağırlığı olmayan ortalanmış metinler... Yazılım ve tasarım dünyasında bu görüntüye "AI Slop UI" (Yapay Zeka Tasarım Çöplüğü) deniyor.

Peki büyük dil modelleri (LLM'ler) neden her seferinde bu ucuz görünen şablonu üretiyor ve GitHub'da birkaç günde binlerce yıldız toplayan açık kaynak heydamir/unslop aracı bu sorunu nasıl çözüyor?

1. Yapay Zeka Neden Hep Aynı "Mor-Mavi" Tasarımı Üretiyor?

LLM'ler internetteki milyonlarca açık kaynak Tailwind CSS, Bootstrap ve başlangıç seviyesi "SaaS Landing Page" şablonuyla eğitildi. Sen modele özel bir tasarım sistemi veya kısıtlama vermediğinde, model istatistiksel olarak en ortalama (ve en çok tekrar eden) deseni seçer:

1. Mor-İndigo Gradyan Tuzağı (from-purple-500 to-indigo-600): Yapay zekanın "modern teknoloji" kelimesiyle en çok ilişkilendirdiği renk paleti.
2. Simetrik 3'lü Kart Klişesi: İçeriğin önemi ne olursa olsun her şeyi eşit boyutlu 3 kutuya bölüp üstüne birer ikon koyma alışkanlığı.
3. Emoji ve "Pazarlama" Dili: Gerçek ürün bilgisini vermek yerine "İş akışınızı süper güçlerle donatın 🚀" gibi içi boş cümleler kurması.
4. Boşluk ve Tipografi Körlüğü: Başlık, alt başlık ve gövde metni arasındaki kontrastı (font ağırlığı ve harf aralığı / tracking) ayarlayamaması.

2. Çözüm: Açık Kaynak unslop Aracı Nedir?

heydamir/unslop, doğrudan Claude Code (veya diğer AI kodlama ajanları) içine bir yetenek (Skill) olarak eklenen açık kaynaklı bir tasarım denetçisi ve dönüştürücüsüdür.

Kod tabanındaki tüm bileşenleri tarar, yapay zeka kokan klişeleri tespit eder ve arayüzü Linear, Stripe veya Vercel standartlarında net bir görsel hiyerarşiyle yeniden yazar:

• Rastgele neon gradyanları kaldırıp ürünün kimliğine uygun tutarlı bir yüzey ve vurgu paleti kurar.
• Gereksiz emojileri, sahte istatistik kutularını ve abartılı gölgeleri temizler.
• Tipografi ölçeğini (line-height, letter-spacing, font-weight) ve boşluk ritmini düzeltir.

3. Adım Adım Kurulum Rehberi

A) Claude Code İçin Tek Komutla Kurulum

Terminalini aç ve aşağıdaki komutla unslop yeteneğini global Claude Code klasörüne klonla:

git clone https://github.com/heydamir/unslop.git ~/.claude/skills/unslop

Eğer sadece tek bir proje içinde aktif olmasını istiyorsan, projenin kök dizininde şu komutu çalıştırabilirsin:

git clone https://github.com/heydamir/unslop.git .claude/skills/unslop

Kurulumdan sonra Claude Code terminalinde projenin arayüzünü düzeltmek için doğrudan şu komutu vermen yeterli:

/unslop mevcut landing page ve dashboard bileşenlerindeki AI tasarım klişelerini temizle ve kurumsal, net bir tipografi hiyerarşisine dönüştür.

B) Cursor veya Windsurf İçinde Kullanım (.cursorrules)

Eğer Cursor kullanıyorsan, unslop deposundaki SKILL.md dosyasını indirip projenin .cursor/rules/unslop.mdc (veya .cursorrules) dosyasına ekleyebilirsin:

mkdir -p .cursor/rules && curl -sL https://raw.githubusercontent.com/heydamir/unslop/main/SKILL.md -o .cursor/rules/unslop.mdc

4. Kendi Projelerinde Hemen Uygulayabileceğin 5 "Anti-Slop" Kuralı

Aracı kurmasan bile kendi prompt'larına veya tasarım sistemine şu 5 kuralı ekleyerek yapay zeka görüntüsünden anında kurtulabilirsin:

1. Gradyan Yasağı: "Arka planlarda veya metinlerde asla mor/mavi bg-gradient-to-r kullanma; tek ve net bir vurgu rengi (Accent Color) seç."
2. Asimetrik Bento Düzeni: "Özellikleri 3 eşit kart yerine, en önemli özelliğin 2 sütun kapladığı asimetrik bir hiyerarşiyle sun."
3. Sıfır Emoji Kuralı: "Arayüz bileşenlerinde, butonlarda veya başlıklarda asla emoji kullanma; yalnızca tek renkli (stroke-width: 1.5) vektörel ikonlar kullan."
4. Sıkı Başlık Tipografisi: "Büyük başlıklarda tracking-tight (-0.03em) ve yüksek kontrastlı, gövde metinlerinde ise maksimum 65ch satır genişliği kullan."
5. Gerçek Veri Gösterimi: "Soyut ikonlar yerine ürünün gerçek ekran görüntüsünü, terminal çıktısını veya canlı kod bloğunu merkeze koy."

🔗 GitHub Deposu: https://github.com/heydamir/unslop