Anthropic’n Fable 5 modeli çıktı, birkaç gün içinde banlandı ve ardından adeta bir Zümrüdüanka kuşu gibi geri döndü[1]. Ve onunla birlikte, o muhteşem UI/UX ve ön uç (frontend) büyücülüğü spekülasyonları yeniden canlandı. Ben de tek seferde (one-shotting) neler yapabileceğini test etmek için Claude Design aracını kullandım: popüler uygulama/web sitesi arayüzleri için istemler (prompt) yazdım, yaygın referans alınan kullanıcı arayüzlerini yeniden harmanladım ve ürün ekiplerinin iş akışındaki yerini değerlendirmek için ön uç kod kalitesini analiz ettim. Fable 5 ile tasarlanan UI örneklerimi kendiniz inceleyip karar verebilirsiniz.
Sürprizbozan (Spoiler Alert): UI/UX arenasında, Gemini 3.1 PRO ve GPT 5.4'e karşı Fable 5 adeta son canavar (final boss).
Ücretsiz Claude Design Alternatifleri >
Fable 5 ile Metinden Arayüze (Text-to-UI)
Minimalist Meditasyon Uygulaması (Mobil)
İstem (Prompt)
"Mobil için minimalist bir meditasyon uygulaması ekranı tasarla: Yumuşak geçişlere (gradient) sahip, sakin ve nefes aldıran bir arayüz, oturumu başlatmak için tek bir birincil CTA düğmesi, oturum süresi seçici ve seri (streak) takipçisi olsun. Sade, düşük uyarıcılı ve çoğunlukla beyaz boşluklu tut."
Tasarım Çıktısı
Geçen süre: ~3 dakika
İstemi yazarken aklımda Calm uygulaması arayüzü vardı. Ancak Fable 5 işi başka bir minimalist boyuta taşıdı. Özeti neredeyse birebir yakaladı — yumuşak geçişler, daire şeklinde nefes alma CTA'si, süre seçici ve seri takipçisi alt bilgisi (footer) tam yerinde. Renk ve tipografi tercihleri beklentileri tam karşılıyor. Üstelik istemediğim halde hafif bir animasyon ekleyerek bir adım öne geçmiş, hiç de fena olmamış.
AI ile Calm Uygulaması Arayüzünü İnceleyin ve Düzenleyin >
Maksimalist SaaS Paneli (Masaüstü)
İstem (Prompt)
"Masaüstü için yoğun bir fintech SaaS kontrol paneli tasarla. Yoğun ama düzenli olsun — üst gezinti çubuğu (nav), kenar çubuğu, KPI kartları (gelir, aktif hesaplar, işlem hacmi, kayıp oranı), büyük bir gelir/nakit akışı grafiği, son işlemler tablosu ve bildirimler paneli. Veri odaklı, çoklu widget'lı, gerçek bir kurumsal araç yoğunluğunda."
Tasarım Çıktısı
Geçen süre: ~8 dakika
Bu sefer, Claude Design tipik bir AI UI Asistanı gibi netleştirici sorular sordu, bu yüzden bir parantez açmalıyım: Fable 5 kreatif yönünü belirlerken biraz yardım aldı.
Çıktıya gelirsek, gerçekten yoğun ve büyük bir tasarım, sanırım bu yüzden bu kadar uzun sürdü. Oldukça kurumsal görünüyor ama gözü yormadan akıllıca tasarlanmış. Yine de kartlara uyması için yeniden boyutlandırılabilecek birkaç küçük alan fark ettim. Ayrıca her talimatı tek tek uygulamak yerine, zevkli bir tasarımcı gibi hepsini tutarlı bir bütün haline getirmiş.
Banani AI ile Fintech Arayüzünü İnceleyin ve Düzenleyin >
Çok ekranlı katılım (onboarding) akışı
İstem (Prompt)
"Mobil bir arkadaşlık uygulaması için çok ekranlı katılım akışı tasarla. Şunları içersin: hoş geldin/değer önerisi ekranı, fotoğraf yükleme, temel bilgiler (isim, yaş, konum), ilgi alanları seçimi ve son 'kaydırmaya hazır' ekranı. Dikkat çekici, modern ve dinamik olsun."
Tasarım Çıktısı
Geçen süre: ~5 dakika
Bu sefer de Claude Design, Fable 5'i yönlendirmem için bazı sorular sordu; bunu bilerek Tinder benzeri bir arayüz taklidinden kaçınmak için yaptım.
Çok ekranlı prototip harika görünüyor ve eğlenceli etkileşimlerle dolu. İstenen tüm ekranlar ve bileşenler yerli yerinde. Renkler, tipografi, metinler, akış — her şey profesyonelce uygulanmış. Bu arkadaşlık uygulaması için bir MVP yapacak olsaydım, muhtemelen sadece gerçek insan girdileri için AI UX araştırma araçları kullanır ve Fable 5'ten tasarımı buna göre güncellemesini isterdim.
Kusur bulmak gerekirse, daha yaratıcı bir dokunuş için ana ekrana özgün bir görsel oluşturulabilir ve logo stilize bir yazı tipi yerine vektör olabilirdi.
AI ile Kullanıcı Arayüzü (UI) Nasıl Tasarlanır? >
Fable 5 ile Ekran Görüntüsünden Arayüze (Screenshot-to-UI)
Bir ekran görüntüsünü arayüze dönüştüren AI, beğendiğimiz bir uygulama arayüzünü düzenlemek için kullanılır. Genelde bu tasarım yeni ekranlar üretmek için de kullanıldığından, Fable 5'in bunu nasıl anladığını, düzenlediğini ve harmanladığını görmek istedim. Bunun için birkaç Duolingo arayüz ekran görüntüsü yükledim, yeni bir özellik ekranı eklemesini ve görseller üretmesini istedim — iki aşamada.
İstem (Prompt)
“Adım 1 — Navigasyon barı simge değişimi:
Bu Duolingo ekran görüntüsünün tasarım sistemini birebir eşleştir. Liderlik tablosu/kalkan simgesini yeni bir 'Kültür' simgesiyle değiştir — diğerleriyle aynı çizgi kalınlığında ve tarzında basit bir dünya veya kartpostal olsun. Diğer her şeyi değiştirmeden bırak.
Adım 2 — Özellik ekranı:
Aynı tasarım sistemini kullan. Bu simgenin açtığı 'Kültür Kartları' ekranını tasarla — dikey kayan kartlar olsun, her birinde dili konuşulan ülkeden gerçek bir fotoğraf (sokak, pazar, kafe, sembol yapı), onu bir kelimeye bağlayan kısa bir açıklama ve 'Bu kelimeyi pratik yap' butonu yer alsın. Duolingo kart stilini ve renklerini koru ama odak nokta fotoğraf olsun.”
Tasarım Çıktısı
Geçen süre: ~12 dakika (iki denemede)
İlk dikkatimi çeken şey vektör ve görsel olmamasıydı. Pek iyi değil. Ancak Fable 5, Duolingo ekranının hatlarını genel arayüze uyacak şekilde mükemmel kopyaladı, yeni özellik ekranı şablonunu oluşturdu ve Duo'nun dünyasına ait hissettiren bir renk tonunu akıllıca seçti. Eksikleri düzeltmesini özel olarak istediğimde, işlemesi ~6 dakika daha sürdü ve bu kez vektörler ile görselleri ekledi. İlginçtir ki, görselleri üretmek yerine Wikimedia Commons'tan çekmiş gibi görünüyor. Vektörler Duolingo'nun birebir aynısı olmasa da, bu tarz özel varlıkların sisteme hazır yüklenmesi gerektiğini düşünüyorum.
(*Not: Bu arada, tam bu aşamada günlük Claude kredim bitti. Sanırım Fable 5 gerçekten çok fazla kredi harcıyor.)
Figma Weave Kullanıcı Arayüzü Varlıkları Üretmek İçin Değer mi? >
Fable 5 Tasarım Sistemi Uyumluluğu
2026'da, Design MD artık yeni tasarım brifingi haline geldi. Fable 5'in bir arayüze bağlı kalma performansını ölçmek için, Airbnb UI tasarım MD dosyasını yükledim ve aynı çizgide ‘Deskbrb’ adında hayali bir uygulama tasarlamasını istedim.
İstem (Prompt)
"Ekli Airbnb tasarım sistemi/tarz rehberini referans alarak, DeskBrB adında bir mobil uygulama tasarla. Saatlik ortak çalışma masası ve toplantı odası kiralamak için Airbnb tarzı bir pazar yeri olsun. 3 ekran içersin: Ana sayfa/arama akışı (filtreler ve ilan kartlarıyla), İlan detayları (fotoğraflar, olanaklar, fiyatlandırma, uygunluk) ve Satıcı profili (puanlar, yorumlar, doğrulama rozetleri — Airbnb güven sinyali şablonlarıyla uyumlu)."
Tasarım Çıktısı
Geçen süre: ~5:30 dakika
Bu deneme oldukça ilginçti çünkü burada yaratıcı bir tasarımcıdan ziyade titiz bir ürün yöneticisi gibi davrandı. Simgeleri, tipografiyi ve kavisleri doğru yakaladı. Daha da önemlisi, yerleşimi ve öğeleri o kadar iyi tutturdu ki, birisi bunu Airbnb UI ile karıştırabilir. Fable 5'in görsel üretme/kaynak bulma sınırı burada da kendini gösterdi, ancak UI/UX performansı yine de muazzam.
Ücretsiz Tasarım Sistemi Oluşturucu AI >
Fable 5 Ön Uç (Frontend) Kod Kalitesi
Claude Fable 5 ile web tasarımı işin sadece yarısı, diğer yarısı ise başarılı ön uç kod üretimi. Ben de önceki tasarımlardan ikisinin kodunu inceledim: meditasyon uygulaması (standart HTML/CSS/JS) ve DeskBrB (modern React + Tailwind).
Meditasyon uygulaması: Tek dosyada HTML/CSS/JS
Herhangi bir kütüphane kullanılmamış ve her şey satır içi (inline). Anlamsız olmayan etiketler (header, footer, main), renk sistemi için CSS özel değişkenleri, seçicide aria-pressed durum yönetimi ve nefes animasyonunda prefers-reduced-motion kuralına gösterilen özen... Adeta erişilebilirliği alışkanlık edinmiş kıdemli bir geliştiricinin elinden çıkmış gibi.
DeskBrB uygulaması: Bileşenlere Ayrılmış React + Tailwind
İşte burada sadece kod dışa aktaran bir tasarım aracı olmaktan çıkıp, küçük bir ekibin gerçek proje deposuna dönüştü. Tam 18 dosya. Gerçek bileşen sınırları — Button, StarRating, ListingCard, PhotoCarousel — hepsi yeniden kullanılabilir ve props odaklı yapıda.
Tailwind konfigürasyonu, Airbnb'nin tasarım MD'sinden doğrudan alınan gerçek belirteçleri (Rausch kırmızısı, ton skalası, gölge katmanı) içeriyor. Hatta Vite kurulum adımlarını ve lisans bilgisini içeren bir README dosyasıyla geldi. Ayrıca, Airbnb'nin Cereal yazı tipi tescilli olduğu için varsayılan olarak Inter kullanmış ve bunu belirtmiş. Harika.
Çıktı Analizi
Her iki örnekte de, Fable 5 ön uç kod kalitesi ölçekten bağımsız olarak mükemmel iş çıkarıyor. Erişilebilirlik öznitelikleri, anlamsız yapı ve tasarım belirteci disiplini geçici değil, kalıcı bir standart olarak sunuluyor. Tasarım sadakati de koda birebir yansıyor. Bu gerçekten de frontend teslimine en yakın deneyim, 2026'nın özel Tasarımı Koda Dönüştüren AI araçlarına adeta meydan okuyor.
Tasarımı Koda Dönüştüren AI'yı Ücretsiz Deneyin >
Arayüzde (UI) Fable 5 vs Gemini vs GPT
2026'da UI/UX ve ön uç dünyasını domine eden iki büyük model Gemini 3.1 PRO ve GPT-5.4'tü. Fable 5'in gücünü test etmek için aynı istemi üçüne de gönderdim. Üstelik karmaşık bir senaryo seçtim: tek bir fintech uygulaması ekranının hem mobil hem masaüstü arayüzünü oluşturmalarını istedim.
Fable 5'i Claude Design üzerinde, Gemini ve GPT modellerini ise Banani AI UI Designer üzerinde çalıştırıyorum.
İstem (Üçü için de aynı, referans dosyasız)
"'My Card' adında, kullanıcı tarafı bir mobil bankacılık uygulaması ekranı tasarla. Sanal bir banka kartı, bakiye, hızlı işlemler, harcama istatistikleri ve son işlemler listesini göster. Detayları ve metinleri uygun şekilde doldur. Estetik olarak, premium hissettiren ama göz yormayan, koyu ve cesur bir görünüm tercih et. Modern tipografi ve tek bir vurgu renginin öne çıktığı, geçişli ve yarı saydam yüzeyler (glassmorphism tarzı) kullan."
Tasarım Çıktısı (Üçü yan yana)
Gemini 3.1 PRO tasarımını görüntüleyin ve düzenleyin | GPT 5.4 tasarımını görüntüleyin ve düzenleyin
Üçü de bana netleştirici sorular sordu (yine de Banani'nin AI UI Asistanı daha az yönlendirmeye ihtiyaç duydu). Ve Banani ile yapılan tasarımlar 2 dakikadan kısa sürdü (mobil ve masaüstü için yaklaşık birer dakika), Fable 5 ise Claude Design içinde aynı işlem için ~6 dakika harcadı.
Tasarım kalitesine gelirsek, öncelikle üçü de mobil görünüm detaylarımı doğru anladı. İlginç bir şekilde, Fable 5 ve GPT 5.4 benzer bir yeşil-siyah kombinasyonunu seçerken, Gemini 3.1 PRO farklı bir yol izleyerek Mor-Siyah tonlarını kullandı. Yazı tipleri, simgeler ve yerleşim kararları her üçünde de başarılı. Ancak bana göre, Fable 5'in yarı saydam kart tasarımı çok daha premium bir his veriyor. Masaüstü görünümü ise tek ekranda çok şeyi sade bir şekilde sunmayı başarmış. Diğer ikisi de kötü değil elbette, ama GPT yan gezinti çubuğunu atlamış ve Gemini biraz sıkışık görünüyor.
Bu üçlüyü karşılaştırmak gerçekten zor, ancak kullanıcı arayüzünde (UI) Fable 5 bir adım önde görünüyor.
Ücretsiz Gemini veya GPT ile UI Tasarlayın >
Karar: Fable 5 UI/UX İçeriklerinde Başarılı mı?
Evet, Fable 5 web tasarımında gerçekten sınıfının üzerinde bir performans gösteriyor. İstemleri anlama yetisi, tasarım kalitesi ve kod çıktısı oldukça güçlü. Statik ekranlar oluşturabiliyor, mikro animasyonlar ekleyebiliyor ve etkileşimli çok ekranlı prototipler yapabiliyor. Ancak kredi tüketimi yüksek ve biraz yavaş (en azından Claude Design üzerinde).
Yapay zeka ile göz alıcı tasarımların yanında kesintisiz bir tasarımdan koda (design-to-code) akışı istiyorsanız, Banani ile ücretsiz başlayın! En güncel modelleri destekler, derin Figma entegrasyonu sunar ve tek tıkla HTML/CSS aktarımı sağlar.
Fable 5 ile UI/UX Tasarımı Hakkında SSS
Claude Design içinde Fable 5'e nasıl erişilir?
Claude Design arayüzündeki istem kutusunda model açılır menüsünü göreceksiniz. Buradan Fable 5'i seçip harcayacağı efor düzeyini (düşükten maksimuma) ayarlayabilirsiniz.
Claude Design'da Fable 5'ten ön uç kodu nasıl alınır?
AI sohbet robotuna Fable 5 tasarımınızın bağımsız kodunu doğrudan istediğiniz dilde yazmasını söyleyebilirsiniz. Veya sağ üst köşedeki Paylaş → Geliştirici paketi için Claude Code'a Gönder adımlarını takip edebilirsiniz.
Fable 5 ön uç kod kalitesi iyi mi?
Evet, kesinlikle. Fable 5 tarafından üretilen ön uç kodlarını incelediğimde, küçük ölçekte semantik ve erişilebilir HTML/CSS/JS, çok ekranlı projelerde ise bileşenlere ayrılmış, React + Tailwind kodları gördüm. Gerçek bir geliştirici teslimine oldukça yakın.
Fable 5 kullanıcı arayüzü için görseller oluşturabilir mi?
Bu konuda tam olarak güvenilir değil. Claude Design içindeki testlerimde, birçok denemeye rağmen görsel üretmek yerine Wikimedia Commons'tan gerçek fotoğraflar çekmeyi tercih etti. Ancak özel vektör simgeler istemlerle başarılı şekilde üretilebiliyor.
