Yapay zekaya sayfa yaptırınca hep aynı görünümün çıkmasının sebebi, modelin tasarım zevkinin olmaması değil, kendisine hiçbir referans verilmemiş olması. Model ortalama bir sonuç üretiyor, çünkü hangi ortalamayı hedefleyeceğini bilmiyor. Referans verdiğin anda çıktı değişiyor.
Bunu yapan eklentiler var. Aşağıda yedisi var ve hepsi ücretsiz. Hepsini kurma, aşağıdaki sıraya bak.
🎨 1. Tasarım zevki veren üçlü
Üç ayrı eklenti aynı işi farklı taraftan yapıyor ve üçü tek bir pakette birleştirilmiş durumda.1
Emil Kowalski tarafı hareketi getiriyor: geçişler, yumuşama eğrileri, bir öğenin ekrana nasıl gireceği. Arayüzün donuk durmasını bu kısım çözüyor.1
Impeccable tarafı kuralları getiriyor: renk sistemi, bileşenlerin sekiz ayrı durumu, odaklanma halkaları ve yapay zeka çıktısına özgü kusurların açık bir yasak listesi.1
Taste tarafı işe başlamadan önce brifi okutuyor. Tasarıma girmeden önce ne istendiğini soruyor ve gerçek bir tasarım sistemi mi kurulacak yoksa tek sayfalık bir iş mi olduğunu netleştiriyor.1
Üçünü ayrı ayrı kurmak yerine birleştirilmiş halini kurmak daha doğru, çünkü üçü aynı bakışı tekrarlıyor ve üst üste kurulunca bağlamı şişiriyor.
Claude uygulamasının Kod bölümünü aç, projeni seç ve şunu yapıştır:
Şu yeteneği projeme kur: https://github.com/h3nryprod01/design-taste
Kurulumdan sonra bana ne değiştiğini tek paragrafta anlat: tasarım yaparken artık hangi adımları uygulayacaksın.
📐 2. Yayına çıkmadan önce denetleyen
Vercel'in arayüz kuralları, yazdığın arayüzü erişilebilirlik, klavye kullanımı, form davranışı, hareket ve hız başlıklarında denetliyor.2 Bu bir tasarım eklentisi değil, bir kontrol listesi. Farkı şu: birincisi güzel yapıyor, bu doğru yapıyor.
Şu yeteneği projeme kur: https://vercel.com/design/guidelines
Sonra şu sayfayı bu kurallara göre denetle: [dosya adı]
Bulduğun her sorunu üç sütunlu bir tabloda ver: sorun, neden sorun, düzeltilmiş hali.
Düzeltmeleri ben onaylamadan uygulama.
🖼️ 3. Referans görselden koda
Beğendiğin bir tasarımın ekran görüntüsünü verip aynısını koda çevirten eklentiler var.3 Bu, tasarım zevki eklentilerinden farklı bir iş yapıyor: orada modele kural veriyorsun, burada doğrudan hedefi gösteriyorsun.
En işe yarayan kullanım şekli, tüm sayfayı değil tek bir bölümü vermek. Sayfanın tamamını verdiğinde model ortalama alıyor ve hiçbir bölüm doğru çıkmıyor.
🔍 4. Kendi işini gözüyle kontrol eden
Playwright, tarayıcıyı açıp yapılan işin ekran görüntüsünü alan ve hataları sen görmeden yakalayan bir araç. Yapay zeka ajanları için hazır bir yetenek olarak da geliyor.4
Bu, listedeki en çok fark yaratan parça ve en az kurulanı. Sebebi şu: bu eklenti olmadan model kodu yazıyor ve çalıştığını varsayıyor. Bu eklentiyle yazdığı sayfayı açıyor, görüyor ve bozuksa kendi düzeltiyor.
Şu yeteneği projeme kur: https://github.com/microsoft/playwright-cli
Bundan sonra bir sayfayı her değiştirdiğinde şunu yap: sayfayı tarayıcıda aç, ekran görüntüsünü al, görüntüye bak ve bozuk bir şey varsa bana söylemeden önce düzelt. Sonra öncesi ve sonrası görüntüsünü bana göster.
📋 Kurulum sırası
Hepsini aynı gün kurma. Sıra şöyle olsun:
Birinci gün: tasarım zevki paketi ve Playwright. Bu ikisi tek başına çıktının görünümünü değiştiriyor.
Bir hafta sonra: arayüz kuralları denetimi. İlk hafta zaten değişen görünüme alışıyorsun, denetim ikinci adımda anlam kazanıyor.
İhtiyaç çıkınca: referans görselden koda çeviren eklenti. Bu, elinde somut bir referans varken işe yarıyor, sürekli açık durmasına gerek yok.
⚠️ Tek bir eklenti kuracaksan
Playwright'ı kur. Diğerleri modelin ne yapacağını iyileştiriyor, bu ise yaptığını kontrol ettiriyor. Kontrol edilmeyen güzel bir kural, uygulanmamış bir kuraldır.
Özetle
- Yapay zeka tasarımlarının sıradan çıkmasının sebebi referanssızlık, yetenek eksikliği değil.
- Tasarım zevki veren üç eklenti tek pakette birleştirilmiş halde kurulmalı, ayrı ayrı değil.
- Vercel'in arayüz kuralları güzelliği değil doğruluğu denetliyor ve ikisi ayrı iştir.
- Referans görselden koda çevirirken tüm sayfayı değil tek bölümü ver.
- Tek eklenti kuracaksan Playwright'ı kur: model yazdığı sayfayı görüp kendi düzeltiyor.
Sen hangi tarafta takılıyorsun: çıktı çirkin mi çıkıyor, yoksa güzel çıkıp bozuk mu çalışıyor? Yaz, hangisini önce kurman gerektiğine birlikte bakalım.