Claude Tasarımda Berbat. Bu 3 Skill Düzeltiyor.

Claude Neden Her AI Gibi Tasarım Yapıyor?

Claude tasarımı interneti okuyarak öğrendi. İnternetin %80'i Tailwind varsayılanları, Bootstrap template'leri ve SaaS boilerplate'lerinden oluşuyor. Dolayısıyla edindiği tat da bu.

Müdahale olmadan Claude şunları yapacak: sayfadaki en güvenli font kombinasyonunu seçecek (Inter, Roboto, system-ui), dengeli ve eşit dağılımlı renk paletleri kullanacak, üç feature kartlı ortalanmış layout'lara yönelecek, beyaz arka plana mor gradyanlar ekleyecek — AI klişesinin 1 numaralı işareti — ve hiçbir zaman bir ruh haline ya da estetiğe bağlı kalmayacak.

Bunu bir prompt daha yazarak düzeltemezsin. Düzeltmek için Claude'a gerçekten kullanabileceği referans materyal, kelime dağarcığı ve bir düşünce çerçevesi vermen gerekiyor. Üç skill bunu yapıyor — her biri farklı bir parçayı çözüyor.

SKILL #1: Impeccable

Paul Bakaus tarafından

Bilmediğini bilmediğin tasarım kelime dağarcığı

Impeccable'ın tezi şu: çoğu insan AI tasarımlarını düzeltemez çünkü doğru kelimelere sahip değil. Sayfaya bakıyorsun ve çirkin olduğunu biliyorsun ama nedenini söyleyemiyorsun. "Daha iyi yap" yazıyorsun ve Claude aynı klişeyi teslim ediyor.

Impeccable, Claude'a gerçek bir tasarım kelime dağarcığı öğretiyor — tip hiyerarşisi, kontrast, ağırlık, ritim, grid, mekansal yoğunluk, renk teorisi, motion — ve sonucu yönlendirmek için 18 slash komutu sunuyor.

Komutlardan önce skill, bir sayfayı AI ürünü gibi hissettiren anti-pattern'ları Claude'a öğretiyor. Düz gradyanlar. Eşit aralıklı feature grid'leri. Güvenli orta ağırlıklı fontlar. Beyaz üzerine mor. /teach-impeccable komutunu bir kez çalıştır, Claude senin tasarım bağlamını anlasın.

SKILL #2: Design Motion Principles

Kyle Zantos tarafından

İnternetin en iyi 3 tasarımcısından motion denetimleri

Motion, AI üretimi sitelerin %99'unun çöktüğü yerdir. Her şey aynı fade-up ile beliriyor. Dağınık hover micro-interaction'lar. Fizik duygusu yok. Orkestrasyon yok.

Kyle Zantos'un skill'i, Claude'u günümüzde çalışan üç en iyi tasarımcının motion felsefesiyle eğitiyor:

Emil Kowalski

Animate UI'ın kurucusu, Vercel'in motion lead'i. Cilalı, minimal SaaS motion için el kitabını yazdı.

Jakub Krehel

Rauno'nun tasarım ortağı. 15+ yıllık web motion tutkusu. /interactions topluluğunun kurucusu.

Jhey Tompkins

GSAP ustası. Yaratıcı CSS büyücüsü. Sevdiğin interaktif landing page'lerin yarısının var olmasının sebebi.

Skill, kod tabanının motion'ını her birinin bakış açısından denetliyor ve tam olarak neyin yanlış olduğunu söylüyor — "daha fazla animasyon ekle" gibi genel tavsiyeler değil, "Kowalski bu fade'i ease-out ile 200ms opacity + 4px translate-y ile değiştirirdi" gibi bağlama özgü geri bildirimler. Sonra düzeltiyor.

SKILL #3: Frontend Design

Anthropic tarafından

Claude'u kodlamadan önce düşünmeye zorla (en önemlisi bu)

Bu, Claude herhangi bir kod yazmadan önce çalışan skill.

Çözdüğü problem: Claude önce kodlar, sonra tasarım yapar. Eğitim verisinde var olan component'ları alır, bir araya getirir ve buna sayfa der. Tasarım, kodun bir yan etkisidir — tersi değil.

Frontend Design bunu tersine çevirir. Claude'u yürütmeden önce tasarım üzerine düşünmeye zorlar:

• Bu sayfa kim için ve hangi duyguyu yaratmalı?
• Baskın ruh hali ne — minimal, editoryal, brutalist, maksimalist, sıcak, teknik?
• Tipografik ses nedir — ve markaya uyan beklenmedik font seçimi nedir?
• Renk sistemi nedir — güvenli bir palet değil, baskın bir ton + keskin bir vurgu?
• Hangi arka plan işlemi, motion ritmi ve mekansal yoğunluk ruh haliyle örtüşüyor?

Claude önce bu tasarım kararlarını veriyor, yazıyor, sonra onları yürütmek için kodu yazıyor. Sonuç: her sayfa bir yığın component yerine bir bakış açısına sahip oluyor. Buradaki en önemli skill olduğunu söyleyebiliriz — yukarı yönlü düşünce kırıksa tipografi ve motion önem taşımaz.

Stack: Üçünü Birlikte Kullanmak

Her skill farklı bir katmanı çözüyor. Birlikte gerçek bir pipeline oluşturuyorlar:

1. Düşün — Frontend Design (Anthropic)

Kod yazmadan önce ruh halini, tip sesini, renk sistemini ve motion ritmini kilitle.

2. Uygula — Impeccable (Bakaus)

Claude geliştirirken sonucu yönlendirmek için /typeset, /layout, /polish kullan.

3. Denetle — Design Motion Principles (Zantos)

Sayfa bittikten sonra denetimi çalıştır, tasarımcı başına geri bildirim al, düzeltmeleri uygula.

Birini seçmek zorunda değilsin. Üçünü de kur. İş akışının farklı noktalarında yaşadıkları için temiz bir şekilde üst üste geliyorlar: planlama → uygulama → denetim.

Nasıl Kurulur

30 Saniyede Üçünü Birden Kur

En kolay yol — Claude Code'a tek bir mesajla söyle:

install these 3 skills for me:
github.com/pbakaus/impeccable
github.com/kylezantos/design-motion-principles
github.com/anthropics/claude-code (frontend-design plugin)

Manuel yolu tercih edersen Impeccable ve Design Motion Principles için resmi skill installer'ı kullan:

npx skills add pbakaus/impeccable
npx skills add kylezantos/design-motion-principles

Frontend Design için Claude Code içinde /plugin çalıştır ve resmi Anthropic marketplace'ten frontend-design plugin'ini etkinleştir.

Kurulumdan sonra, Impeccable'ın kod tabanının tasarım bağlamını alması için projenizde bir kez /teach-impeccable çalıştır.

Ne Zaman Atlarsın

Bu skill'ler tasarıma önem verdiğinde içindir. Dahili araçlar, hızlı prototipleme, tek seferlik scriptler — geç, token'ları biriktir, hızlı gönder.

Ama müşteriye yönelik olan her şey, markanı temsil eden her şey, bir kitleye sunulacak her şey? Üçünü de çalıştır. "AI klişesi gönderiyorum" ile "insanlar bir tasarımcı tuttuğumu düşünüyor" arasındaki fark bu üç skill.

Tüm Kaynaklar

• Impeccable — Paul Bakaus · Cilalı tasarım için 18 komut
• Impeccable Site — Tam komut referansı ve canlı eleştiri aracı
• Design Motion Principles — Kyle Zantos · 3 üst düzey tasarımcı üzerine eğitilmiş motion denetimleri
• Frontend Design (Anthropic) — Resmi Anthropic skill — kodlamadan önce düşün
• Claude Code — Skill'leri kullanmak için buna ihtiyacın var