- OpenAI, GPT-5.4'ün frontend geliştirme yeteneklerini artırmak için pratik prompt teknikleri ve tasarım rehberleri yayımladı
- Görsel anlama, işlevsel bütünlük ve Computer Use yetenekleri temel iyileştirme eksenleri olarak öne çıkıyor; önceki modellere kıyasla görsel açıdan daha rafine ve iddialı çıktılar üretilebiliyor
- Prompt belirsiz olduğunda modelin eğitim verisindeki yüksek frekanslı kalıplara geri dönerek jenerik tasarımlarda takılı kalabildiğine dikkat çekiliyor ve bunu aşmak için somut yöntemler sunuluyor
- Tasarım sistemi tanımlama, görsel referans sağlama, anlatıyı yapılandırma ve düşük akıl yürütme seviyesi ayarlama dahil 4 temel pratik ipucu vurgulanıyor
- Ayrı bir
frontend-skill prompt paketi açık kaynak olarak yayımlandı; Codex gibi kodlama ajanlarında doğrudan kullanılabiliyor
Modeldeki iyileştirmeler
- GPT-5.4, frontend çalışmalarında üç somut iyileştirmeye odaklanıyor:
- Görsel anlama gücünün artırılması
- Daha tamamlanmış uygulama ve web siteleri üretimi
- Kendi çalışmalarını incelemek, test etmek ve doğrulamak için araç kullanma becerisinin geliştirilmesi
-
Görsel anlama ve araç kullanımı
- Görsel arama ve görsel üretim araçlarını yerel olarak kullanacak şekilde eğitildiği için, tasarım sürecinde görsel akıl yürütmeyi doğrudan gerçekleştirebiliyor
- En iyi sonuçlar için, son varlıklar seçilmeden önce modele önce bir moodboard veya birden fazla görsel seçenek üretmesinin söylenmesi öneriliyor
- Görselin yakalaması gereken özellikler (stil, renk paleti, kompozisyon, atmosfer) açıkça tanımlanarak güçlü görsel referanslar elde edilebiliyor
- Varsayılan olarak yüklenmiş/önceden üretilmiş görsellerin önceliklendirilmesi, bunlar yoksa görsel üretim aracıyla yeni görseller oluşturulmasının prompt içinde açıkça belirtilmesi öneriliyor
-
İşlevsel bütünlüğün artırılması
- Daha eksiksiz ve işlevsel açıdan sağlam uygulamalar geliştirecek şekilde eğitildi
- Uzun süreli görevlerde daha kararlı çalışıyor; daha önce mümkün olmayan oyunlar veya karmaşık kullanıcı deneyimleri bile 1-2 tur içinde uygulanabiliyor
-
Computer Use ve doğrulama
- GPT-5.4, Computer Use için eğitilen ilk ana akım model olarak arayüzleri yerel biçimde gezebiliyor
- Playwright ile birlikte kullanıldığında render edilen sayfayı inceleyebiliyor, farklı viewport'ları test edebiliyor, uygulama akışlarını dolaşabiliyor ve durum/gezinme sorunlarını tespit edebiliyor
- Playwright aracı/becerisi sağlandığında GPT-5.4'ün şık ve işlevsel olarak tamamlanmış arayüzler üretme olasılığı büyük ölçüde artıyor
- Geliştirilmiş görsel anlama sayesinde çıktıları görsel olarak doğrulayabiliyor ve sağlanan referans arayüzle uyumlu olup olmadığını kontrol edebiliyor
Pratik ipuçları hızlı başlangıç
- Uygulanacak yalnızca birkaç yöntem seçilecekse, şu 4 maddeyle başlanması öneriliyor:
- Düşük akıl yürütme seviyesi (low reasoning level) ile başlamak
- Tipografi, renk paleti, düzen gibi tasarım sistemi ve kısıtları önceden tanımlamak
- Ekran görüntüsü eklemek gibi görsel referanslar veya moodboard'lar sağlayarak görsel korkuluklar oluşturmak
- Anlatı veya içerik stratejisini önceden tanımlayarak modelin içerik üretim yönünü belirlemek
- Başlangıç prompt'u
When doing frontend design tasks, avoid generic, overbuilt layouts.- Frontend tasarım görevlerinde jenerik ve aşırı inşa edilmiş düzenlerden kaçının
Use these hard rules:- Şu katı kuralları uygulayın:
One composition: The first viewport must read as one composition, not a dashboard (unless it's a dashboard).- İlk viewport, bir dashboard olmadığı sürece tek bir kompozisyon olarak algılanmalıdır
Brand first: On branded pages, the brand or product name must be a hero-level signal, not just nav text or an eyebrow. No headline should overpower the brand.- Markalı sayfalarda marka veya ürün adı hero düzeyinde bir sinyal olmalı; yalnızca gezinme metni ya da üst etiket olmamalıdır. Hiçbir başlık markayı gölgede bırakmamalıdır
Brand test: If the first viewport could belong to another brand after removing the nav, the branding is too weak.- Gezinme kaldırıldığında ilk viewport başka bir markaya ait gibi durabiliyorsa, markalama fazla zayıftır
Typography: Use expressive, purposeful fonts and avoid default stacks (Inter, Roboto, Arial, system).- İfade gücü olan, amaca hizmet eden yazı tipleri kullanın; varsayılan font stack'lerinden (Inter, Roboto, Arial, system) kaçının
Background: Don't rely on flat, single-color backgrounds; use gradients, images, or subtle patterns to build atmosphere.- Düz tek renk arka planlara yaslanmayın; atmosfer oluşturmak için gradyanlar, görseller veya ince desenler kullanın
Full-bleed hero only: On landing pages and promotional surfaces, the hero image should be a dominant edge-to-edge visual plane or background by default. Do not use inset hero images, side-panel hero images, rounded media cards, tiled collages, or floating image blocks unless the existing design system clearly requires it.- Landing page'lerde ve promosyon yüzeylerinde hero görseli varsayılan olarak tam taşan (edge-to-edge) baskın bir görsel düzlem veya arka plan olmalıdır. Mevcut tasarım sistemi açıkça gerektirmedikçe inset hero, yan panel hero, yuvarlatılmış medya kartları, döşemeli kolajlar veya yüzen görsel bloklar kullanmayın
Hero budget: The first viewport should usually contain only the brand, one headline, one short supporting sentence, one CTA group, and one dominant image. Do not place stats, schedules, event listings, address blocks, promos, "this week" callouts, metadata rows, or secondary marketing content in the first viewport.- İlk viewport genellikle yalnızca marka, tek bir başlık, kısa bir destek cümlesi, bir CTA grubu ve tek bir baskın görsel içermelidir. İstatistikler, takvimler, etkinlik listeleri, adres blokları, promosyonlar, "this week" çağrıları, metadata satırları veya ikincil pazarlama içerikleri ilk viewport'a yerleştirilmemelidir
No hero overlays: Do not place detached labels, floating badges, promo stickers, info chips, or callout boxes on top of hero media.- Hero medya üzerine ayrık etiketler, yüzen rozetler, promosyon çıkartmaları, bilgi çipleri veya çağrı kutuları yerleştirmeyin
Cards: Default: no cards. Never use cards in the hero. Cards are allowed only when they are the container for a user interaction. If removing a border, shadow, background, or radius does not hurt interaction or understanding, it should not be a card.- Varsayılan olarak kart kullanmayın. Hero alanında asla kart kullanmayın. Kartlara yalnızca bir kullanıcı etkileşiminin kapsayıcısı olduklarında izin verilir. Kenarlık, gölge, arka plan veya köşe yuvarlama kaldırıldığında etkileşim ya da anlaşılırlık bozulmuyorsa, bu bir kart olmamalıdır
One job per section: Each section should have one purpose, one headline, and usually one short supporting sentence.- Her bölümün tek bir amacı, tek bir başlığı ve genellikle kısa bir destek cümlesi olmalıdır
Real visual anchor: Imagery should show the product, place, atmosphere, or context. Decorative gradients and abstract backgrounds do not count as the main visual idea.- Görseller ürün, mekân, atmosfer veya bağlamı göstermelidir. Dekoratif gradyanlar ve soyut arka planlar ana görsel fikir sayılmaz
Reduce clutter: Avoid pill clusters, stat strips, icon rows, boxed promos, schedule snippets, and multiple competing text blocks.- Pill kümeleri, istatistik şeritleri, ikon satırları, kutulu promosyonlar, takvim parçacıkları ve birbiriyle yarışan çoklu metin bloklarından kaçının
Use motion to create presence and hierarchy, not noise. Ship at least 2-3 intentional motions for visually led work.- Hareketi gürültü üretmek için değil, varlık ve hiyerarşi oluşturmak için kullanın. Görsel odaklı işlerde en az 2-3 bilinçli hareket ekleyin
Color & Look: Choose a clear visual direction; define CSS variables; avoid purple-on-white defaults. No purple bias or dark mode bias.- Net bir görsel yön seçin; CSS değişkenlerini tanımlayın; mor-beyaz varsayılanlardan kaçının. Mor eğilimi veya dark mode eğilimi olmasın
Ensure the page loads properly on both desktop and mobile.- Sayfanın hem masaüstünde hem mobilde düzgün yüklendiğinden emin olun
For React code, prefer modern patterns including useEffectEvent, startTransition, and useDeferredValue when appropriate if used by the team. Do not add useMemo/useCallback by default unless already used; follow the repo's React Compiler guidance.- React kodunda, ekip kullanıyorsa uygun durumlarda useEffectEvent, startTransition ve useDeferredValue gibi modern kalıpları tercih edin. useMemo/useCallback'i zaten kullanılmıyorsa varsayılan olarak eklemeyin; deponun React Compiler rehberine uyun
Exception: If working within an existing website or design system, preserve the established patterns, structure, and visual language.- İstisna: Mevcut bir web sitesi veya tasarım sistemi içinde çalışılıyorsa, yerleşik kalıpları, yapıyı ve görsel dili koruyun
Daha iyi tasarım için teknikler
-
Önce tasarım ilkeleriyle başlayın
- Tek bir H1 başlık, en fazla 6 bölüm, en fazla 2 yazı tipi, tek vurgu rengi, fold üstünde tek bir birincil CTA gibi kısıtları tanımlayın
-
Görsel referans sağlayın
- Referans ekran görüntüleri veya moodboard'lar; düzen ritmi, tipografi ölçeği, spacing sistemi ve görsel işleme tarzını çıkarsamaya yardımcı olur
- GPT-5.4'ün kullanıcı incelemesi için kendi moodboard'unu üretmesine yönelik bir örnek de veriliyor (NYC kahve kültürü ve Y2K estetiğinden ilhamla)
-
Sayfayı bir anlatı olarak yapılandırın
- Genel pazarlama sayfası yapısı:
- Hero — kimlik ve vaat oluşturma
- Supporting imagery — bağlamı veya ortamı gösterme
- Product detail — teklifin açıklanması
- Social proof — güven oluşturma
- Final CTA — ilgiyi eyleme dönüştürme
-
Tasarım sistemine uyumu açıkça isteyin
- Build'in erken aşamasında net bir tasarım sistemi kurulmasını teşvik edin
- Temel tasarım token'larını tanımlayın:
background, surface, primary text, muted text, accent
- Tipografi rollerini tanımlayın:
display, headline, body, caption
- Çoğu web projesinde React ve Tailwind yığınıyla başlamak etkili oluyor ve GPT-5.4 bu araçlarla özellikle güçlü performans gösteriyor
- Animasyon, overlay ve dekoratif katmanlar üzerinde çalışırken sabit/yüzen arayüz öğelerinin metin, buton gibi temel içeriklerle çakışmamasını sağlayan güvenli düzen davranışlarının da rehbere eklenmesi öneriliyor
-
Akıl yürütme seviyesini düşürün
- Basit web sitelerinde daha fazla akıl yürütme her zaman daha iyi sonuç anlamına gelmiyor
- Düşük (low) ve orta (medium) akıl yürütme seviyeleri çoğu zaman daha güçlü frontend sonuçları veriyor
- Bu sayede model daha hızlı ve odaklı kalıyor, aşırı düşünmeye daha az eğilim gösterirken daha iddialı tasarımlar için hareket alanı kazanıyor
-
Tasarım temelini gerçek içerikle kurun
- Gerçek metinler, ürün bağlamı ve net proje hedefleri sağlamak, frontend çıktısını iyileştirmenin en basit yollarından biri
- Bu bağlam; doğru site yapısını seçmeye, bölüm bazında daha net anlatılar kurmaya ve jenerik placeholder'lar yerine ikna edici mesajlar yazmaya yardımcı oluyor
Frontend Skill prompt paketi
- GPT-5.4'ün genel frontend görevlerinde kullanımını desteklemek için özel
[frontend-skill](https://github.com/openai/skills/…) GitHub'da yayımlandı
- Yapı, zevk ve etkileşim kalıpları için güçlü rehberlik sunarak varsayılan olarak daha rafine, daha bilinçli ve keyifli tasarımlar üretmeyi hedefliyor
- Codex uygulaması içinde
$skill-installer frontend-skill komutuyla kurulabiliyor
-
Frontend Skill'in temel yapısı
- Working Model: Build'den önce üç şeyi yazın — görsel tez (atmosfer, malzeme, enerji), içerik planı (hero, support, detail, final CTA), etkileşim tezi (2-3 hareket fikri)
- Beautiful Defaults: Bileşenlerle değil, kompozisyonla başlayın. Tam taşan hero tercih edin, marka/ürün adını en büyük metin yapın, metinler birkaç saniyede taranabilir olsun, kartsız düzen varsayılanı benimseyin
- Landing Page varsayılan dizilimi: Hero → Support → Detail → Final CTA
- Hero kuralları: tek kompozisyon, tam taşan görsel, marka önceliği, hero alanında kart, istatistik şeridi veya logo bulutu olmaması
- Viewport bütçesi: sabit bir header varsa, hero ile birlikte ilk viewport içine sığması gerekir
- Apps: Varsayılan olarak Linear tarzı bir sadelik — sakin yüzey hiyerarşisi, güçlü tipografi ve spacing, az renk kullanımı; kartlar yalnızca etkileşim için
- Imagery: Görseller anlatıda bir rol oynamalı; soyut gradyanlar veya sahte 3D nesneler yerine gerçeklik hissi veren fotoğraflar tercih edilmeli. İlk viewport'ta gerçek bir görsel çıpa şart
- Copy: Tasarım yorumu değil, ürün diliyle yazın. Başlık anlam taşımalı; metnin %30'unu silmek sayfayı iyileştiriyorsa, silmeye devam edin
- Utility Copy: Dashboard, uygulama ve yönetim araçlarında pazarlama metni yerine varsayılan olarak işlevsel metin kullanın — yön, durum ve eylem öncelikli olsun
- Motion: Hareket gürültü için değil, varlık ve hiyerarşi için kullanılmalı. Hero giriş sekansı, kaydırmaya bağlı efektler, hover/reveal geçişleri gibi en az 2-3 bilinçli hareket ekleyin. Framer Motion tercih ediliyor
- Hard Rules: Varsayılan kart yok, bölüm başına tek baskın fikir, 2'den fazla yazı tipi yok, 1'den fazla vurgu rengi yok, doldurma amaçlı metin yok
- Litmus Checks: İlk ekranda markanın net olup olmadığını, güçlü bir görsel çıpa bulunup bulunmadığını, yalnızca başlıkla sayfanın anlaşılıp anlaşılamadığını, her bölümün tek bir rol üstlenip üstlenmediğini, kartların gerçekten gerekli olup olmadığını ve hareketin hiyerarşiyi iyileştirip iyileştirmediğini kontrol edin
Örnek çıktılar
- Frontend Skill kullanılarak üretilen örnekler landing page, oyun ve dashboard olmak üzere üç kategoride sunuluyor (her biri çok sayıda video demo içeriyor)
Temel çıkarımlar
- GPT-5.4, prompt içinde net tasarım kısıtları, görsel referanslar, yapılandırılmış anlatı ve tanımlı bir tasarım sistemi verildiğinde yüksek kaliteli frontend arayüzleri üretebiliyor
- Codex gibi kodlama ajanlarıyla yalnızca GPT-5.4 kullanılarak tamamen üretilen projeler OpenAI galerisine gönderilerek sergilenebiliyor
5 yorum
Açıkçası, LLM servislerinin frontend’lerine bakınca "bunu ne biçim yapmışlar" dedirtecek kadar yavaş, özellik açısından yetersiz ve etkileşimleri rahatsız edici oluyor; o yüzden böyle yazıları görünce bana sadece komik geliyor.
KakaoTalk yüzünden ChatGPT Pro kullanıyorum ama bence GPT'nin yaptığı ön yüz tasarımlarının hepsi çok kasvetli görünüyor.
Frontend için asla gpt kullanmayın. Berbat. Aynı prompt ile opus'la karşılaştırın.
Ön yüz tasarımı konusunda GPT pek iyi olmadığı için bunu başka bir modele yaptırdım; umarım bununla biraz daha düzgün bir sonuç çıkmıştır.
Claude’un frontend-design’i ile nasıl farklılaştığını merak ediyorum.
"Frontend tasarımını kim daha iyi yapıyor" gibi bir karşılaştırma yapmak zor gibi görünüyor ama Codex’te de yer almış olması önemli bir gerçek olsa gerek, değil mi?