Claude Code'u UI Tasarım Asistanına Çevir: 3 Design Skill

Claude Code'la kurduğun site neden hep "AI yapımı" gibi duruyor? Sorun çoğu zaman kodda değil, kurulumunda. Doğru skill'leri eklediğinde aynı araç, bambaşka kalitede arayüzler üretiyor.

Aşağıdaki üç design skill, Claude Code'u sıradan bir kod asistanından gerçek bir UI tasarım asistanına çeviriyor. Üçü de npx veya plugin marketplace üzerinden dakikalar içinde kuruluyor ve Claude Code dışında Cursor, Codex, Gemini CLI gibi araçlarla da çalışıyor.

Neden Bu Üç Skill?

Üretici AI araçlarının ortak sorunu "slop" denen şey: jenerik fontlar, default boşluklar, hareketsiz ve karaktersiz arayüzler. Bu skill'lerin her biri o sorunun farklı bir parçasını çözüyor:

• Hareket ve animasyon → Emil Kowalski
• Boşluk, tipografi, hizalama → Impeccable
• Genel tasarım dili ve referans → Taste Skill

01 — Emil Kowalski: Motion & Design Engineering

Emil Kowalski'nin skill dosyası arayüze doğru hareketi getiriyor: yumuşak geçişler, ölçülü animasyonlar, akıcı etkileşimler. UI'ın statik durmak yerine canlı ve cilalı hissetmesini sağlıyor.

• Animasyon, tasarım, kod ve performans konularında pratik design engineering ilkelerini içeriyor
• Sürekli açık tutmak yerine ihtiyaç anında (örn. bir animasyon kararı verirken) devreye almak öneriliyor
• Claude Code, Codex ve Cursor ile uyumlu

Kurulum:

npx skills add emilkowalski/skill

Daha derin eğitim isteyenler için Kowalski'nin animations.dev üzerindeki ücretli kursu var.

02 — Impeccable: Görsel İncelik ve Düzen

Impeccable, Claude'a görsel inceliği "öğreten" bir agent skill. Tipografi, renk, hareket ve düzendeki refleksif kötü tercihleri temizliyor; tek komutla boşlukları ve hizalamayı toparlıyor.

• AI slop temizliği: Jenerik default'ları kaldırıp tipografi, renk ve layout'u toparlar
• Tasarım sistemine saygı: Mevcut token, component ve konvansiyonların üzerine yazmaz, onları devralır
• 23 komut: Tasarım disiplinlerine eşlenmiş komutlar — /typeset, /colorize, /animate
• DESIGN.md: Taşınabilir tasarım sistemini Google Stitch formatında üretir
• Canlı iterasyon: Çalışan dev server üzerinde anlık HMR ile değişiklik
• Brand vs. product modları: Landing page ile dashboard için farklı kurallar
• Slop detector: "41 deterministik kural, LLM yok" — PR kontrolleri için exit code üretir

Kurulum:

npx impeccable skills install

Claude Code için plugin olarak:

/plugin marketplace add pbakaus/impeccable

Sonra /plugin menüsünden erişebilirsin. Cursor, GitHub Copilot ve Gemini CLI ile de çalışır.

03 — Taste Skill: Anti-Slop Tasarım Dili

İşi asıl değiştiren skill bu. Taste Skill, "Less slop, designs pop" sloganıyla AI agent'larının ürettiği şablonvari arayüzleri engelliyor. Claude'a gerçek, kaliteli tasarım yönü besleyerek "şablon gibi görünmeyen" arayüzler ürettiriyor.

• Tasarım sistemi eşleme: Brief'i uygun sisteme bağlar (Material, Fluent, Carbon, shadcn vb.)
• Default dark mode: Temalar arası paritesi olan koyu mod
• Audit-first: Var olan projeleri yeniden tasarlarken önce denetler
• 13+ skill varyantı: Görsel stiller (soft, minimalist, brutalist), image-to-code, redesign audit, Google Stitch export
• v2 (deneysel): Brief inference (sektör/mood/motion derinliği), daha katı kurallar, block library şeması

Kurulum:

npx skills add Leonxlnx/taste-skill

Varsayılan skill'i açıkça kurmak için:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Cursor, Claude Code, Codex, Gemini CLI, v0, Lovable ve SKILL.md destekleyen her araçla uyumlu.

Hızlı Başlangıç

• Üç skill'i sırayla kur: npx skills add emilkowalski/skill, npx impeccable skills install, npx skills add Leonxlnx/taste-skill
• Yeni bir projede önce Taste Skill ile tasarım dilini belirle
• Düzeni ve tipografiyi Impeccable komutlarıyla (/typeset, /colorize) toparla
• Son rötuş olarak Emil Kowalski skill'iyle hareket ve geçişleri ekle
• Aynı AI aracı, bambaşka sonuçlar

Kaynaklar:

• Emil Kowalski Skill: https://emilkowal.ski/skill
• Impeccable: https://impeccable.style/
• Taste Skill: https://www.tasteskill.dev/