OpenAI, GPT-5.4 ön uç tasarım yetenekleri hakkında net bir iddiada bulundu[1]: görsellerin kullanımıyla geliştirilmiş arayüz (UI) yeteneklerine odaklanmak ve zayıf görsel hiyerarşiden kaçınmak için eğitilmek. Kullanıcı şikayetlerini duymuşlar veya tasarımıyla Gemini 3.1'i geçmeye karar vermişler gibi duruyor. Her halükarda, meyve veren ağaç taşlanır; ben de bunu test etmeye karar verdim. Nasıl mı? Model olarak GPT-5.4'ü seçip Banani UI tasarım tuvalini kullanarak.
Modelin temel bir prompt ile ilk seferde nasıl sonuç verdiğini ve kendi yönergelerine göre düzenleme promptuyla nasıl geliştiğini görmek için birkaç yaygın UI/UX senaryosunda denemeler yaptım.
UI Tasarımı için GPT 5.4'ü ücretsiz deneyin >
GPT 5.4 ile Mobil Uygulama Arayüzü
Temel Prompt (Baseline)
Saatlik ortak çalışma masası ve toplantı odası rezervasyonu için Airbnb tarzı bir pazar yeri olan DeskBrB adlı bir mobil uygulama tasarla. 3 ekran istiyorum: Ana sayfa/arama akışı, İlan detayları ve Satıcı profili.
Yapay Zeka ile AirBnB Arayüzüne Göz Atın ve Düzenleyin >
Çıktı
Bu tasarımı inceleyin ve düzenleyin >
Geçen Süre: ~1 dakika (3 ekran için) | Tasarım Puanı: 3.5/5
Düzenleme Promptu
Mevcut metni ve akışı beğendim ancak birkaç UI düzeltmesi istiyorum:
- Paleti pişmiş toprak/turuncudan yumuşak pastellere kaydır — mevcut kırık beyaz taban üzerinde mat lavanta, pudra, adaçayı tonları kullan
- Başlıkları daha belirgin hale getirmek için biraz daha kalın/büyük yap
- İlan akışını tekdüze kart ızgarasından çıkarıp asimetrik bir düzene dönüştür
- İlan detayı ana görselini düzelt: başlık metni şu anda fotoğrafla çakışıyor — görselin altına taşı
- Kutulu "ekiplerin burada beğendikleri" alanını daha serbest, etiket tarzı bir düzene dönüştür
- Üst gezinti çubuğuna küçük bir DeskBrB logosu ve ana sayfa ile ilan ekranlarına bir altbilgi/sekme çubuğu (Keşfet, Rezervasyonlar, Mesajlar, Profil) ekle
Düzenlenmiş Çıktı
Bu tasarımı inceleyin ve düzenleyin >
Geçen Süre: ~1 dakika (3 ekran için) | Tasarım Puanı: 4/5
Değerlendirme
GPT-5.4'ün temel çıktısı akışı, içerik alakasını ve marka dilini çok iyi yakaladı ancak temel unsurları kaçırdı. Örneğin ikinci ekranda çakışan bir başlık vardı, logo ve altbilgi yoktu. Kılavuzlu düzenleme bu üç sorunu da çözdü ve paleti başarıyla yumuşattı; ancak "asimetrik" düzen talebi oldukça muhafazakar kaldı.
GPT-5.4 ile Mobil Arayüz Tasarla, Ücretsiz >
GPT 5.4 ile Açılış Sayfası Arayüzü
Temel Prompt
Bir ürün fotoğrafçısının web sitesi ana sayfası: başlık ve CTA içeren ana bölüm, hizmetler/uzmanlıklar satırı, portföy ızgarası, müşteri istatistikleri ve altbilgi. Çeşitli ürünlerin fotoğraflarını göster. Cesur/minimalist bir karakter ver.
Squarespace AI ile Açılış Sayfası Nasıl Oluşturulur >
Çıktı
Bu tasarımı inceleyin ve düzenleyin >
Geçen Süre: ~1:30 dakika | Tasarım Puanı: 3.5/5
Düzenleme Promptu
Mevcut tüm metinleri, görselleri ve sayfa yapısını koru, ancak görsel tasarımı daha az garantici ve daha editoryal hissettirecek şekilde zorla:
- Ana bölüm görselini tam ekran (full-bleed) yap ve başlık yazı tipini daha iddialı seçerek güçlü bir marka sinyali vermesini sağla
- Uzmanlıklar ve Portföy ızgarasını kusursuz hizalamasından çıkar — bilinçli bir kusursuzluk yaratmak için farklı görsel boyutları veya hafif kaymalar kullan
- Sayfanın bir yerinde beklenmedik bir düzen anı yarat — örneğin, ızgara sınırını aşan bir portföy görseli ekle.
- Hafif hareket ipuçları ekle (ör. portföy görsellerinde hover durumu, ana görselde hafif paralel kayma efektleri), çünkü statik kusursuzluk tasarımı katı gösteriyor
- Kolon hizalamasını biraz gevşet, e-tablo gibi hissettirmesin
Düzenlenmiş Çıktı
Bu tasarımı inceleyin ve düzenleyin >
Geçen Süre: ~1 dakika | Tasarım Puanı: 4.5/5
Değerlendirme
Temel çıktı temiz ve görsel odaklıydı ancak fazlasıyla kuralına uygundu. OpenAI'ın jeneriklik karşıtı kurallarını uygulamak (tam ekran görsel, kırık ızgara ritmi, bilinçli kusurlar) gerçekten editoryal bir sonuç ortaya çıkardı; bu da GPT-5.4'ün "iyi tasarım" tavanının gerçek olduğunu, ancak net yönlendirmelerle ulaşılabileceğini kanıtlıyor.
GPT 5.4 ile SaaS Kontrol Paneli
Temel Prompt
Bir içerik pazarlama platformu için SaaS analitik kontrol paneli. Yan menü gezintisi, arama ve profil resmi içeren üst çubuk, üç metrik kartı (yayınlanan gönderiler, etkileşim oranı, aylık erişim), bir trafik grafiği ve durum rozetleri olan son gönderiler tablosu.
Çıktı
Bu tasarımı inceleyin ve düzenleyin >
Geçen Süre: ~1 dakika | Tasarım Puanı: 4.5/5
Düzenleme Promptu
Mevcut sürüm çok muhafazakar — daha çarpıcı, görsel olarak zengin bir kontrol paneli tarzına yönel:
- Metrik kartlarını, küçük bir renk rozeti olan düz beyaz kartlar yerine beyaz metinli, iddialı gradyan bloklara (ör. mercandan pembeye, maviden turkuaza, naneden yeşile) dönüştür
- Sütun grafiğini, tek bir soluk mavi ton yerine 3 farklı canlı renk kullanan daha zengin çok serili bir çizgi veya sütun grafiği ile değiştir
- Trafiği veya etkileşimi kanala göre bölen, iddialı çok renkli segmentlere sahip bir pasta grafik ekle
- Yan menü ve tablo düzenini koru, ancak kontrol panelinin genel olarak daha renkli, enerjik ve görsel olarak zengin hissettirmesini sağla
Düzenlenmiş Çıktı
Bu tasarımı inceleyin ve düzenleyin >
Geçen Süre: ~1 dakika | Tasarım Puanı: 5/5
Değerlendirme
Bu, testin en büyük değişimiydi. Temel çıktı mantıklı ancak görsel hiyerarşisi olmayan, düz çift tonlu bir panel verdi. Gradyanlar, renkli grafikler ve pasta grafik ekleyen düzenleme, bunu gerçekten keskin ve enerjik bir panele dönüştürdü.
GPT 5.4 ile Sunum Tasarımları
Temel Prompt
Yapay zeka arayüz tasarım girişimi için kurumsal bir müşteriye sunum. 4 slayt: başlık/kapak, problem (yavaş tasarım süreçleri), çözüm (Figma/kod dışa aktarımlı yapay zeka tabanlı tasarım tuvali) ve kapanış CTA slaytı.
Çıktı
Bu tasarımı inceleyin ve düzenleyin >
Geçen Süre: ~2 dakika | Tasarım Puanı: 3.5/5
Akış akıllıca, içerik harika, minimalizmi de sevdim.
Ancak bir tasarım şirketi için biraz fazla sade. Ayrıca tüm slayt ekranları aynı boyutta değil, öyle olmalı. Klasik mor tasarım sorunu da var.
Düzenleme Promptu
Tüm metinleri, verileri ve slayt içeriğini olduğu gibi koru, ancak görsel tasarımı geliştir; şu anda bir tasarım şirketinin kendi sunumu için çok sade duruyor:
- Şu an uyuşmayan 4 slaytın hepsini aynı sabit boyutlara/en boy oranına (16:9) getir
- Varsayılan mor vurgudan tamamen vazgeç. Güvenli sans-serif fontu yerine başlıklar için cesur, karakteristik bir yazı tipiyle eşleştirilmiş daha belirgin bir renk yönü seç (örneğin, sıcak kehribar veya elektrik mavisi vurgulu koyu mürekkep/kömür gri)
- Kapak ve CTA slaytlarına güçlü, tam ekran bir görsel an ekle; gradyan ağ (mesh) arka planı, soyut desen veya büyük bir editoryal grafik gibi.
- Problem ve çözüm slaytlarında istatistik/özellik kartlarına daha fazla görsel ağırlık ver: düz beyaz kutular yerine hafif derinlik (gölge, cam veya gradyan dolgu) kullan
- Bunun minimal bir SaaS açılış sayfası gibi değil, premium, yüksek ikna ediciliğe sahip, kendinden emin ve görsel olarak zengin bir kurumsal sunum gibi hissettirmesini sağla
Düzenlenmiş Çıktı
Bu tasarımı inceleyin ve düzenleyin >
Geçen Süre: ~3 dakika | Tasarım Puanı: 5/5
Değerlendirme
Temel içerik ve yapı güçlüydü ancak uygulama jenerikti. Sabit boyutları, gerçek bir renk yönünü ve görsel derinliği zorunlu kılan düzenleme, tüm GPT-5.4 UI testimdeki en yüksek puanlı çıktıyı üretti. Bu da yapının zahmetsiz geldiğini, ancak premium görsel cilanın kasıtlı bir yönlendirme gerektirdiğini doğruluyor.
Web ve UI Tasarımı için Gemini 3.1'i Test Edin >
En İyi GPT 5.4 UI/UX için Prompt İpuçları
GPT-5.4'ün her dört UI/UX demosunda da tekrarlayan bir kalıp fark ettim: temel çıktı işlevsel olarak sağlam ancak görsel olarak garanticiydi. Sıradanlıktan harikalığa geçiş, farklı bir talepte bulunmaktan değil, detaylandırmadan geçti. OpenAI'ın kendi blogu da yetersiz detaylandırılmış promptların modelin varsayılan jenerik şablonlara yönelmesine yol açtığını kabul ediyor[1].
Bunu göz önünde bulundurarak, GPT-5.4'te harika UI/UX tasarlamak için aşağıdaki prompt şablonunu kullanın:
[Uygulama/marka adı] için [sayfa/ekran türü] tasarla, [tek satırlık konsept]. [Sayı] ekran: [onları listele].
Renk: [belirli palet] — [varsayılan/mor/düz mavi-beyaz] renklerden kaçın
Tipografi: varsayılan sistem yazı tipi olmayan, karakteristik gösterim başlığı
Düzen: tekdüze ızgaralardan kaçın — bir adet asimetrik veya sınırları aşan an ekle
Derinlik: düz dolgular yerine ana öğelerde gradyan/cam/gölge kullan
Yapı: kesinlikle [logo, altbilgi/navigasyon, tutarlı boyutlar] içermeli
Kaçın: [jenerik panel klişeleri / aşırı kullanılan hazır şablonlar / kullanım durumunuza özel ne varsa]
Lovable ile Benzersiz UI Nasıl Üretilir >
GPT-5.4 Arayüzünü Ön Uç Koduna Dönüştürme
GPT-5.4 ile oluşturulan tasarımdan memnun kaldığınızda, bunu doğrudan Banani'nin tasarım tuvalinden ön uç geliştirmeye aktarabilirsiniz. Yapay zeka ile tasarımdan koda geçmek için 3 seçeneğiniz var:
Normal bir tasarım dosyası gibi Figma'ya aktarıp Geliştirici Modu (Dev Mode) üzerinden teslim edin
Tek tıkla doğrudan temiz, üretime hazır HTML/CSS kodunu kopyalayın
MCP aracılığıyla tasarımı doğrudan bir kodlama ajanına (Codex dahil) gönderin
GPT-5.4 Tasarımını Koda Dönüştürün, Ücretsiz >
Peki, GPT-5.4 UI Tasarımı İçin İyi mi?
Evet, iyi. Ancak GPT-5.4 UI incelememde ortaya çıkan bir uyarıyla: GPT-5.4 istediğiniz her şeyi tam olarak uygular, ancak kendi başına görsel zevk yaratamaz. Bu yüzden ne istediğinizi net ve detaylı şekilde belirtin.
GPT 5.4'ün UI/UX üretim yeteneğini test etmeye hazır mısınız? Banani AI'da ücretsiz başlayın. Terminal kurulumu, API veya kodlama gerekmez. Sadece kaydolun, model olarak GPT 5.4'ü seçin ve doğrudan tuval üzerinde prompttan tasarıma geçin.
GPT-5.4 ile UI/UX Hakkında SSS
ChatGPT UI/UX tasarımı yapabilir mi?
Hayır, ChatGPT (GPT-5.4 ile bile) sohbet ekranında UI/UX tasarımları oluşturamaz. Bunun için GPT destekli bir yapay zeka arayüz aracı kullanmanız gerekir.
GPT-5.4 görsel üretebilir mi?
Evet, GPT-5.4 yerleşik görsel üretme ve görsel arama yeteneklerine sahiptir. Bunlar arayüz varlıkları oluşturmak için de kullanılabilir.
Flora AI'ın arayüz görselleri oluşturmak için nasıl kullanıldığını görün >
UI tasarımı için en iyi GPT modeli hangisidir?
GPT-5.4, görsel hiyerarşi ve görsel anlama için özel olarak eğitilmiş, OpenAI'ın arayüz/ön uç çalışmaları için şimdiye kadarki en güçlü modelidir. Önceki GPT-5 sürümleri de tasarım oluşturabilir ancak detaylı promptlar olmadan daha jenerik kalır.
Uygulama arayüzü tasarlamak için GPT 5.4 nasıl kullanılır?
En kolay yol, Banani gibi GPT-5.4 entegreli bir tasarım aracı kullanmaktır: istediğiniz uygulamayı ve ekranları prompt ile tanımlayın, o da düzenlenebilir arayüzler üretsin.
GPT 5.4 kullanarak ücretsiz arayüz tasarlayabilir miyim?
Evet. Ücretsiz planında GPT-5.4 model seçeneğini sunan Banani AI tasarımcısı ile yapabilirsiniz. Ücretli plana geçmeden önce aylık ~170 ücretsiz ekran/düzenleme hakkı alırsınız.
Referanslar
[1] developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4
