ai for designersMay 1, 20269 min read

Prompt Yüzeyleri: Yeni UX Temel Bileşeni

Prompt girişi yeni butondur. Prompt yüzeylerini birinci sınıf bir UX temel bileşeni olarak tasarlamak için anatomi, kalıplar, hata modları ve yayın öncesi denetim içeren uygulamalı bir rehber.

By Boone
XLinkedIn
prompt surfaces

Prompt yüzeyi yeni butondur. Prompt yüzeyine arama çubuğu muamelesi yapan bir tasarımcı, 2026'da 2018'den kalma bir ürün çıkarıyor demektir. Metin girişi formu, sihirbazı ve ayarlar panelinin büyük kısmını yuttu. Kazanan ürünler, girişi kağıt uçak ikonlu bir textarea olarak değil, birinci sınıf bir UX temel bileşeni olarak ele alanlar.

Çoğu ekip hâlâ textarea çıkarıyor. Çıplak bir dikdörtgen, "Her şeyi sor" yazan bir placeholder, bir gönder butonu ve başka hiçbir şey. Bu, kuruntuları olan bir arama çubuğu. Gerçek bir prompt yüzeyi anatomisi, affordance'ları, durumu ve bir kurtarma yolu olan bir bileşendir.

Bu yazı işin operasyonel versiyonu. Prompt yüzeyinin gerçekte ne olduğu, her iyi yüzeyin taşıdığı sekiz parça, onları öldüren altı hata modu, en iyi ürünlerin şu an kullandığı altı adlandırılmış kalıp ve yüzeyinizin temel bileşen mi yoksa yer tutucu mu olduğunu üç dakikada söyleyen yedi soruluk bir denetim.

Prompt yüzeyi bir textarea değildir

Prompt yüzeyi, kullanıcının yazdığı, çevresinde ayar yaptığı ve geri okuduğu bölgenin tamamıdır. Giriş görünen kısımdır. Bileşen ise ona monte edilmiş her şeydir.

Giriş alanı tek bir elemandır. Önerili boş durum, ek yuvaları, model seçici, araç anahtarları, gönderme affordance'ı, akış hâlindeki çıktı bölgesi, yeniden üret-düzenle-dallandır kontrolleri ve geçmiş yüzeyi geri kalanıdır. Yalnızca kutuyu tasarlayan ekip buzdağının tepesini göndermiştir.

Cursor, Claude, Linear AI, v0, Lovable, Notion AI, Raycast AI, Vercel AI Playground. Bunların hiçbiri girişi textarea gibi görmez. Her biri, girişin yapılandırılabilir, gözlemlenebilir ve geri alınabilir bir etkileşimin giriş noktası olduğu yapılandırılmış bir yüzey sunar. Çıta bu.

Mimari olarak ele alınmış tek bir iri prompt yüzeyinin voxel render'ı; etrafında mention'lar, ekler, araçlar, model için yüzen çipler ve tıknaz bir gönder küpü var
Mimari olarak ele alınmış tek bir iri prompt yüzeyinin voxel render'ı; etrafında mention'lar, ekler, araçlar, model için yüzen çipler ve tıknaz bir gönder küpü var

Çalışan bir prompt yüzeyinin anatomisi

Sekiz parça. Boş durum, öneriler, ek yuvaları, model seçici, araç anahtarları, gönderme affordance'ı, akış hâlindeki çıktı bölgesi, revizyon kontrolleri. Altıdan azını sunan bir prompt yüzeyi eksiktir.

Boş durum, metin yığmadan ürünü öğretmek zorundadır. Cursor'ın komut çubuğu son dosyaları ve son prompt'ları gösterir. Notion AI'ın slash menüsü, niyete göre dallanan boş durumun kendisidir. v0, aynı zamanda kanıt görevi gören bir başlangıç prompt'ları galerisi sunar. "Her şeyi sor" düşmandır. Kullanım senaryosunu kullanıcının icat etmesini talep eder.

Öneriler kullanıcıyla yarı yolda buluşur. Satır içi çip önerileri, son prompt geçmişi, bağlama duyarlı tamamlamalar. Cursor'ın @-mention seçicisi ders kitabı örneğidir: tek tuş vuruşuyla prompt'u bir dosyaya, bir fonksiyona ya da bir dokümana kapsamlar.

Ek yuvaları girişi çok kipli yapar. v0, kullanıcının bir ekran görüntüsü yapıştırıp ona karşı prompt yazmasına izin verir. Claude PDF, görsel ve kod dosyası kabul eder. Lovable bağlam olarak bir Figma frame'i kabul eder. Yuva, sözleşmenin kendisidir.

Model seçici, araç anahtarları ve gönderme affordance'ı yapılandırma katmanıdır. Kullanıcıya, olmadan önce ne olacağını söylerler. Vercel AI Playground model seçiciyi en belirgin kontrol olarak sunar. Cursor, göndermeden önce agent modu ile satır içi düzenleme arasında geçiş yaptırır. Yapılandırmayı gizlerseniz kullanıcı tahmin yürütür.

Akış hâlindeki çıktı bölgesi ve revizyon kontrolleri döngüyü kapatır. Claude'un artifact paneli, çıkmış en temiz örneklerden biridir. Çıktı kendi bölgesini alır, prompt yüzeyi canlı kalır ve kullanıcı iki tarafı da kaybetmeden prompt'u düzenleyebilir ya da artifact'i yeniden üretebilir.

Havada birbirinden ayrı süzülen sekiz etiketli bileşen bloğuna ayrılmış bir prompt yüzeyinin voxel patlatılmış görünüm diyagramı; ince mercan renkli bağlantılar hepsinin tek bir bileşene ait olduğunu gösteriyor
Havada birbirinden ayrı süzülen sekiz etiketli bileşen bloğuna ayrılmış bir prompt yüzeyinin voxel patlatılmış görünüm diyagramı; ince mercan renkli bağlantılar hepsinin tek bir bileşene ait olduğunu gösteriyor

Güven sinyalleri yük taşıyan detaydır

Prompt yüzeyi, kullanıcının modele güvenip güvenmeyeceğine karar verdiği yerdir. Görünen her sinyal ya güven kazandırır ya da yakar.

Güven netlikten gelir. Model kimliği görünürdür. Araç çağrıları çalışmadan önce listelenir ya da çalışırken akıtılır. Akış geri bildirimi dürüsttür; iş yapıyormuş gibi davranan sahte bir spinner değildir. Geri alma affordance'ına bir saniyenin altında ulaşılır. Hata yolu neyin neden başarısız olduğunu söyler. İyi bir agent UI'ın talep ettiği zanaatın aynısı, girişe uyarlanmış hâli.

En ucuz güven sinyali durdur butonudur. Görünür durdurması olmayan akış hâlindeki bir yanıt, düşmanca bir yüzeydir. Kullanıcı modelin zaten yanlış olduğunu bildiği bir şeyi yazmasını izliyor ve tek kaçış sekmeyi kapatmak. Claude, Cursor ve v0 görünür bir durdur sunar. Evde yapılmış sohbet arayüzlerinin çoğu bunu unutur.

Prompt yüzeylerini öldüren altı hata modu

Bugün üretimdeki prompt yüzeylerinin çoğu bunlardan en az birini taşıyor. Çözümler ince değil.

Boş dikdörtgen. Bir textarea, "Nasıl yardımcı olabilirim" yazan bir placeholder ve başka hiçbir şey. Kullanıcı kullanım senaryosunu sıfırdan icat eder. Çözüm: gerçek ürün yeteneklerine bağlı üç ila beş somut başlangıç içeren yapılandırılmış bir boş durum.

Önerisiz giriş. Yüzey prompt kabul eder ama hiç öneri sunmaz. İleri düzey kullanıcılar kalıpları öğrenir. Yeni kullanıcılar terk eder. Çözüm: son prompt'lar, kapsamlı öneriler (Cursor'ın @-mention'ı, v0'ın seçim seçicisi) ve mevcut bağlama göre ayarlanmış satır içi tamamlamalar.

Ölü akış spinner'ı. Model arka planda sessizce on araç çağrısı yaparken bir spinner döner ve kullanıcı bunun ne anlama geldiğini bilmez. Çözüm: asıl işi akıtın. Araç çağrıları görünür, dosya düzenlemeleri görünür, ara çıktı görünür.

Değiştirilemez model. Ürün bir model seçer ve seçimi gizler. İleri düzey kullanıcılar ağır işleri daha güçlü bir modele yönlendiremez, bütçe bilinçli kullanıcılar hafif işleri daha ucuza yönlendiremez. Çözüm: seçiciyi görünür kılın, mantıklı bir varsayılan koyun, seçimi görev başına saklayın.

Amnezi yüzeyi. Her yeni prompt bağlamı sıfırlar. Kullanıcı her turda dosyayı, URL'yi, brief'i yeniden yapıştırır. Çözüm: bir bellek çipi, sabitlenmiş bir bağlam yuvası ya da kullanıcının görüp düzenleyebileceği oturum düzeyinde bir kapsam.

Yıkıcı yeniden üretme. Yeniden üret butonu önceki çıktıyı sürüm geçmişi olmadan ezer. Kullanıcı en iyi yanıtını kaybeder ve geri getiremez. Çözüm: yeniden üretmeyi ezme değil dal olarak sunun; Claude'un geçmişi ve v0'ın sürüm yığını bunu zaten yapıyor.

Prompt yüzeyleri için bir kalıp kütüphanesi

Temel bileşen gibi hissettiren prompt yüzeyleriyle yer tutucu gibi hissettirenleri altı adlandırılmış kalıp ayırır. Herhangi bir şeyi yeniden tasarlamadan önce bu listeden çekin.

Kapsamlı prompt. Giriş, modelin neye dokunabileceğini kısıtlayan bir kapsam token'ı kabul eder. Cursor'ın @-mention seçicisi kanonik örnektir. Kullanıcı @layout.tsx yazar ve prompt o dosyaya kapsamlanır. v0'da benzer, seçim odaklı bir kapsam vardır: kullanıcı canvas'ın bir bölgesine tıklar ve prompt o bölge üzerinde çalışır. Kapsamlama, kullanıcıya daha fazla yazdırmadan belirsiz bir prompt'u kesin hâle getirir.

Seçim odaklı prompt. Kullanıcı üründe bir şey seçer ve prompt yüzeyi, seçim bağlam olarak önceden bağlanmış hâlde belirir. v0 bunu canvas seçimlerinde yapar. Notion AI vurgulanmış metinde yapar. Linear'ın AI'ı issue kapsamını otomatik alır. Kullanıcıya zaten işaret ettiği şeyi tarif ettirmeyin.

Satır içi araç anahtarları. Yüzey, araç çağrılarını giriş çerçevesinde anahtar ya da çip olarak sunar. Cursor agent modunu, düzenleme modunu ve araç setlerini açıp kapatır. Raycast AI komutları sunar. Vercel AI Playground function-calling anahtarlarını sunar. Kullanıcı, göndermeden önce hangi araçların devrede olduğunu bilir.

Bellek çipi. Modelin mevcut oturum hakkında zaten ne bildiğini gösteren kalıcı bir affordance. ChatGPT ve Claude'un ikisi de varyantlar sunar. Çip düzenlenebilir, kaldırılabilir ve görünürdür; bütün hile bu. Gizli bellek, özellik kılığına girmiş bir veri sızdırma riskidir.

Her biri SCOPED PROMPT, SELECTION-DRIVEN, INLINE TOOLS, MEMORY CHIP, BRANCHING, APPROVAL GATE etiketli altı küçük yüzey karosundan oluşan iki satır üç sütunluk voxel ızgara
Her biri SCOPED PROMPT, SELECTION-DRIVEN, INLINE TOOLS, MEMORY CHIP, BRANCHING, APPROVAL GATE etiketli altı küçük yüzey karosundan oluşan iki satır üç sütunluk voxel ızgara

Dallanan prompt. Yeniden üretme, konuşmanın üzerine yazmak yerine onu çatallar. Her dal, kullanıcının geri dönebileceği kayıtlı bir durumdur. Claude'un konuşma geçmişi bunu sunar, v0 üretilen UI'ların bir sürüm yığınını tutar, Cursor'ın sohbet thread'leri dallanabilir. Deney yapmak bir ağaca dönüşür, kumarhane çevirmesine değil.

Onay kapılı araç çağrısı. Yüzey, yıkıcı bir araç çağrısından önce durur ve kullanıcıdan onaylamasını, değiştirmesini ya da iptal etmesini ister. Cursor'ın composer'ı riskli shell komutlarını kapıdan geçirir. Claude Code yıkıcı işlemleri bir izin sisteminin arkasına koyar. ChatGPT Operator tarayıcıda ödeme eylemlerini kapıdan geçirir. Geri alınamayacak anı yavaşlatın ve eylemi çalışmadan önce düz metinle görünür kılın.

Bu kalıplar birleşir. Harika bir prompt yüzeyi genellikle kapsamlı, seçim odaklı, satır içi araçlı ve onay kapılı özellikleri tek bir tutarlı bileşen olarak sunar. Kalıplar birbiriyle gerilim içinde değil, uyum içindedir.

Yedi soruluk prompt yüzeyi denetimi

Bunu yayınlanmadan önce her AI girişinde çalıştırın. Üç ya da daha fazlasında kalırsa yüzey hazır değildir.

  1. Boş durum. Yüzey kullanıcıya ne yazacağını öğretiyor mu, yoksa üstüne boş bir alan mı boşaltıyor?
  2. Öneriler. Yüzey, bağlama, son geçmişe ya da seçime göre bir sonraki prompt'u öneriyor mu?
  3. Kapsam. Kullanıcı daha fazla yazmadan prompt'u bir dosyaya, bir seçime, bir bloğa ya da bir oturuma daraltabiliyor mu?
  4. Yapılandırma görünürlüğü. Model, araçlar ve özerklik seviyesi bir ayarlar çekmecesine gömülü değil de gönderilmeden önce görünür mü?
  5. Akış dürüstlüğü. Akış hâlindeki çıktı asıl işi gösteriyor mu, yoksa hiçbir şey ifade etmeyen bir spinner mı?
  6. Durdur ve revize et. Akış sırasında görünür bir durdur butonu, sonrasında yıkıcı olmayan bir yeniden üretme var mı?
  7. Bellek şeffaflığı. Kullanıcı, modelin oturum boyunca neyi hatırladığını görüp düzenleyebiliyor mu?

Yedisini de geçen bir yüzey temel bileşen gibi hissettirir. Üç ya da daha fazlasında kalan bir yüzey arama çubuğu gibi hissettirir. Bu iki sonuç arasındaki fark, AI-native ürün tasarımını AI'ın sonradan eklenmesinden ayıran şeydir.

Prompt yüzeyini gerçek bir bileşen olarak inşa eden ekipler, mühendislik tarafında prompt'ları bileşen olarak ele alan ekiplerle aynıdır. Disiplin aynı şekilde karşılığını verir.

SSS

Prompt yüzeyi nedir?

Prompt yüzeyi, kullanıcının prompt yazdığı, çevresinde ayar yaptığı ve geri okuduğu UI bölgesinin tamamıdır. Giriş alanını, boş durumu, önerileri, ek yuvalarını, model seçiciyi, araç anahtarlarını, gönderme affordance'ını, akış hâlindeki çıktı bölgesini ve revizyon kontrollerini içerir. Onu textarea saymak hatadır. Bileşen saymak çıtadır.

Prompt yüzeyi bir sohbet girişinden nasıl farklıdır?

Sohbet girişi, tur tur ilerleyen bir mesaj kutusudur. Prompt yüzeyi ise yapılandırılabilir, gözlemlenebilir ve geri alınabilir bir etkileşim bileşenidir. Sohbet UI'ı konuşma için optimize edilir. Prompt yüzeyi hedef netliği, model güveni ve görev verimi için optimize edilir. Sohbet girişi, prompt yüzeyinin olası ifadelerinden biridir, eş anlamlısı değildir.

En yaygın prompt UI tasarım hataları nelerdir?

Önerisiz boş dikdörtgenler, ölü akış spinner'ları, değiştirilemez modeller, her prompt'ta bağlamı unutan amnezi yüzeyleri, iyi çıktının üzerine yazan yıkıcı yeniden üret butonları ve akış sırasında eksik durdur butonları. Her biri küçük bir yüzey değişikliğiyle düzelir. Hiçbiri metin yazarlığıyla düzelmez.

2026'da en iyi prompt yüzeylerine hangi ürünler sahip?

Kapsamlı prompt'lar için Cursor, dallanabilir geçmiş ve artifact paneli için Claude, seçim odaklı prompt'lar için v0, gömülü prompt'lar için Linear AI, slash menü boş durumu için Notion AI, seçici disiplini için Raycast AI ve yapılandırma görünürlüğü için Vercel AI Playground. Hiçbiri her kalıbı tam güçte sunmuyor, kategorinin hâlâ ardına kadar açık olmasının sebebi bu.

Girişi ürünün kendisi gibi inşa edin

Prompt yüzeyi, herhangi bir AI-native üründeki en önemli bileşendir ve çoğu ekip onu hâlâ sonradan akla gelen bir şey gibi tasarlıyor. Bir textarea, bir gönder butonu, bir placeholder, yayına al. O yığın, Cursor ve Claude çıtayı yükselttiği gün çürüdü.

Girişe temel bileşen muamelesi yapın. Sekiz parçayı gönderin. Altı hata modundan kaçının. Altı kalıbı birleştirin. Yedi soruluk denetimi çalıştırın. Öbür taraftan çıkan ürün, yeni logolu bir 2022 sohbet kenar çubuğu gibi değil, 2026 gibi hissettirir.

Prompt yüzeylerini textarea olarak değil, tam bileşenler olarak sunan bir ekip istiyorsanız, Brainy'yi tutun. AI-native ürün UI'ını boş durumdan akış hâlindeki çıktı paneline kadar baştan sona tasarlıyoruz; ilk kullanıcı daha tek kelime yazmadan güven sinyalleri içeri işlenmiş oluyor.

Want a prompt surface that earns the click instead of explaining itself? Brainy ships AI-native product UI end to end, from the empty state to the streaming output panel.

Get Started

More from Brainy Papers

Keep reading