İzleyen Ajanlar İçin Tasarım

Kullanıcı artık ekranın başında yalnız değil. İnsan başlığı okurken bir AI ajanı DOM'u ayrıştırıyor, butonlara isim veriyor, seçicileri tartıyor ve ürününüzün, başkası adına kullanabileceği bir şey olup olmadığına karar veriyor. Tek kullanıcı için tasarım yapmak 2024 lüksüydü.

Bu kayma yapısal, kozmetik değil. Cursor butonlarınızı çağırıyor. Claude ekran görüntülerinizi okuyor. Anthropic Computer Use formlarınızda geziniyor. OpenAI Operator ödeme sayfanızda alışveriş yapıyor. Bir insanın dokunduğu her yüzeye artık bir ajan da dokunuyor, üstelik iyinin ne olduğuna dair farklı ölçütlerle.

İki kitle, tek ekran

2026'da her ürün yüzeyi, aynı DOM içinde üst üste binmiş bir insan katmanına ve bir makine katmanına sahip.

İnsan katmanı, tasarımcıların hep teslim ettiği şey. Akış, zevk, hiyerarşi, bir butonun etiketin vaat ettiğini yaptığında kullanıcının hissettiği güven. Makine katmanı ise aynı yüzeyin farklı bir kullanıcı tarafından okunmuş hâli. Kararlı seçiciler, isimlendirilmiş eylem imkânları, anlamsal HTML, makine tarafından okunabilir durum, bir ajanın belirsizlik olmadan ayrıştırabileceği bir yapı.

Çoğu ekibin yaptığı hata, iki katmanı öncelikleri farklı tek bir katman sanmak. Öyle değiller. Bir buton insana kusursuz görünebilir ama erişilebilir adı "buraya tıklayın" ise ya da DOM düğümü tıklama işleyicili bir div ise ajan için görünmezdir.

Ajan izlemesinin ortaya çıktığı beş katman

Ajan izlemesi bir yığındır. Beş katman var ve her biri, insan katmanı ile makine katmanının ya hizalandığı ya da çatıştığı bir yer: araç yüzeyleri, seçici kararlılığı, makine tarafından okunabilir yapı, durum okunabilirliği, güven sinyalleri. Çift kullanıcı için tasarım yapan her ürün, bu isimlerle anmasa bile beşinde de karar veriyor.

Katman 1: araç yüzeyleri, ajanların çağırdığı isimli butonlardır

Araç yüzeyi, bir ajanın adıyla çağırabileceği her ürün yeteneğidir. Cursor'ın araç çağrıları, Claude'un araç kullanımı, Anthropic Computer Use'un ekran eylemleri, Vercel Sandbox'ın çalıştırma komutları. Ajan piksellerle düşünmez, isimli fiillerle düşünür.

Ürününüzdeki her birincil eylem, aday bir araç yüzeyidir. Stripe altın standart, ajan çağından onlarca yıl eski: her eylemin isimli, belgelenmiş, öngörülebilir bir imkânı var. customers.create adının dediğini yapar. Birincil eylemleri etiketsiz butonların içine gömülmüş bir ürünü, ajan tahmin yürütmeden kullanamaz.

Tasarım hamlesi, her önemli eylemi isimli bir araç olarak ele almak. Etiket, ARIA açıklaması, rota, API uç noktası ve Model Context Protocol işleyicisi aynı fiili taşımalı. Ajanlar ve insanlar da aynı eylem imkânına farklı kapılardan ulaşır.

Katman 2: seçici kararlılığı, tasarımcının ajanla sözleşmesidir

2024'te bir tasarımcı <div onClick={handle}> yazıp işi bitmiş sayabilirdi. 2026'da aynı div, biri sarmalayıcıyı yeniden düzenlediği gün her ajan entegrasyonunu bozar.

Seçici kararlılığı, bir ajanın dün öğrendiği eylem imkânlarının yarın da çalışmasını sağlamaktır. Üç karar var. Anlamsal HTML varsa onu kullanın, <div> değil <button>. Bir ajanın veya test çalıştırıcısının bulması gereken her şeye data-testid ekleyin. Erişilebilir adları sürümler boyunca, API alan adlarını sabit tuttuğunuz gibi sabit tutun.

Linear bunda alışılmadık ölçüde iyi, çünkü Linear API öncelikli kuruldu ve arayüz birçok yüzeyden yalnızca biri. Her birincil eylemin kararlı bir seçicisi ve kararlı bir adı var. Çoğu kurumsal SaaS, yeniden düzenlemede bir sınıf adını değiştirip ona dokunan her entegrasyonu sessizce bozuyor. Ajan kullanımdan kaldırma bildirimi almaz. Sadece çalışmayı bırakır.

Katman 3: makine tarafından okunabilir yapı, eskiden atladığınız tasarım çıktısıdır

Ürününüzü okuyan ajan aynı zamanda Open Graph etiketlerinizi, JSON-LD'nizi, site haritanızı ve giderek llms.txt ile AGENTS.md dosyalarınızı da okuyor. Bunların her biri 2026'da bir geliştirici angaryası değil, bir tasarım çıktısı.

AGENTS.md yeni README, tek farkla: hedef kitlesi bir model. Ajana ürününüzün ne yaptığını, hangi yüzeylerin güvenli olduğunu ve hangi geleneklerin önemli olduğunu söyler. JSON-LD ajana her sayfanın ne olduğunu söyler. Model Context Protocol uç noktası ise ajana ürününüzün hangi araçları sunduğunu ve nasıl çağrılacaklarını söyler.

Bunu mühendislik alanı sanan tasarımcılar kaldıraç gücünü kaçırıyor. Ajanın önce ne gördüğünün hiyerarşisi, araçlarınıza verdiğiniz isimler, her yüzey için yazdığınız açıklamalar, hepsi ajanın ürününüze dair zihinsel modelini, başlıkların ve mikro metinlerin insanınkini kurduğu gibi kurar.

Katman 4: durum okunabilirliği, bir makinenin az önce ne olduğunu anlayabilmesidir

Yükleniyor göstergesi insan için yeterli, ekrana bakan gözü olmayan bir ajan için görünmez. Yalnızca yeşil bir yanıp sönmeyle iletilen bir başarı durumu, yeşili göremeyen herkes için okunamaz. Sessizce kapanan bir modal, ajan açısından gerçekleşmemiş bir durum değişikliğidir.

Durum okunabilirliği, her durumu bir makinenin algılayabileceği hâle getirir. Linear'ın API'si her eylem için kararlı bir yanıt nesnesi döndürür. Vercel'in dağıtım durum makinesinin READY, BUILDING, ERROR gibi isimli durumları ve her geçişte yapılandırılmış bir yükü var. Claude Code her araç çağrısını ve sonucunu, ajanın ayrıştırabileceği yapılandırılmış metin olarak akıtır.

Tasarım hamlesi, ajanın görsel katmanın yanında okuduğu bir durum katmanı. Yeni durumu duyuran bir ARIA live bölgesi. Yapılandırılmış bir role="status" taşıyan bir toast. Ajan aracı çağırdığında geri aldığı bir yanıt nesnesi. İnsan yükleniyor göstergesini tutar, ajan yapılandırılmış olayı alır. Aynı anda iki katmanda da okunması gereken AI gecikmesi için tasarım ile aynı duruş.

Katman 5: güven sinyalleri, ajan eylem yaptıktan sonra döngüyü kapatır

Bir ajan kullanıcı adına bir şey yaptığında, kullanıcının ne yaptığını hızlıca görmesi gerekir. Çoğu ürün bu katmanı atlıyor ve entegrasyonun ikinci kez kullanılacak kadar güvenilir olup olmadığını belirleyen tam da bu katman.

Cursor'ın diff onayı ders kitabı örneği. Ajan dosyaları düzenler, diff satır içinde belirir, kullanıcı parça parça kabul eder ya da reddeder. Claude artifact'ları aynı kalıbı farklı bir biçimde sunar. GitHub Copilot Workspace, her adımda kabul-ret olan çift panelli bir planla ve uygula yüzeyi.

Güven sinyali süs değil. Ajan özerkliğini taşınabilir kılan yük taşıyıcı yüzey. Ajanın eylem yaptığı ve insanın yalnızca sonraki durumu gördüğü bir ürün, bir şeyler ters gittiği ilk anda güveni kaybeder.

İyi yapan ürünlerin gerçekte neyi yayınladığı

Çift kullanıcı çerçevesi yayınlanmış üründe daha kolay görülür. Kısa incelemeler, her biri somut.

Cursor. Ajan diff onayı, güven döngüsünün tamamı. Parça başına satır içi kabul ve ret, tam dosya diff'i görünür, ajan rıza olmadan asla commit atmaz.

Claude artifact'ları. Artifact önizleme paneli, ajan ile insan arasındaki sözleşme. Ajan üretir, insan inceler, artifact'ın kararlı bir URL'si ve bir sonraki ajanın devralabileceği yapılandırılmış bir çıktısı vardır.

Anthropic Computer Use. Ekran görüntüleri, ajan ile ürün arasındaki sözleşme. Her görsel hiyerarşi ve etiket kararı artık bir ajan okunabilirliği kararı. Erişilebilir adı olmayan bir ikon butonu, ajanın tahmin etmek zorunda kaldığı bir butondur.

Vercel v0. İnsanın prompt'u ile ajanın render'ı arasındaki sözleşme yüzeyin tamamı. Kullanıcı tarif eder, ajan render eder, her render incelenebilir bir çıktıdır.

Linear ve Stripe. İkisi de duruş olarak AI-native, mimari olarak API öncelikli. Her birincil eylem isimli, kararlı, çağrılabilir. İkisi de bu disiplini ajan anı gelmeden önce yayınladı, bu yüzden her ajan ürünü onlarla sorunsuz entegre oluyor.

Replit Agent, Raycast ve GitHub Copilot Workspace kadroyu tamamlıyor. Replit ajanın işini canlı, düzenlenebilir bir çalışma alanı olarak sunar. Raycast'in komut paleti, insanların ve ajanların doğal olarak paylaştığı bir yüzey. Copilot Workspace'in çift panelli planla ve uygula kalıbı, eylemden önce planı yazılı olarak sabitler ve çalışma sırasında düzeltmeyi mümkün kılar.

Bu ürünlerin paylaştığı tam kalıp kütüphanesi için AI ajan arayüz tasarım kalıpları dökümü haritayı çıkarıyor, altta yatan mimariyi ise AI-native ürün tasarımı yazısı anlatıyor.

Ajan entegrasyonlarını bozan anti-kalıplar

Beş hata biçimi tekrar tekrar karşımıza çıkıyor. Her biri bir mühendislik gafı değil, bir tasarım kararı.

Div çorbası. Stillendirmesi kolay diye tıklanabilir her şey <div> içine sarılmış. Her yeniden düzenleme her seçiciyi bozar. Çözüm: varsayılan olarak anlamsal HTML ve sınıf adı değişikliğinden sağ çıkması gereken her şeye data-testid.

Hover gerektiren gizli eylem imkânları. Yalnızca fare üzerine gelince beliren "düzenle" butonu. Ajanlar hover yapmaz. Çözüm: işaretçi durumundan bağımsız olarak DOM'da bulunan, klavyeyle erişilebilir eylem imkânları.

"Buraya tıklayın" bağlantıları. Aynı sayfadaki beş "buraya tıklayın" bağlantısı, DOM'u okuyan her şey için beş özdeş eylem imkânıdır. Çözüm: hedefi adlandıran bağlantı metni.

Yalnızca renkle iletilen başarı durumları. Yeşil bir kenarlık, yeşil bir yanıp sönme, yeşil bir ikon. Bunların hiçbiri görsel model olmadan algılanamaz. Çözüm: görsel sinyalin yanında yapılandırılmış bir olay, bir ARIA live bölgesi veya bir yanıt nesnesi.

Kapatma düğmesi bulunamayan modal pencereler. Etiketi olmayan bir <svg> olan "X". Çözüm: her modalda erişilebilir adı olan bir kapat butonu ve belgelenmiş bir kaçış davranışı.

Beşinin ortak örüntüsü: bir insan gözüne veya işaretçisine bağlı olan her şey kullanıcılarınızın yarısı için görünmezdir.

Çift kullanıcı denetimi

Bunu yayına çıkmadan önce her yüzeyde çalıştırın. Yedi soru, üç dakika.

1. İsimli eylem. Her birincil eylemin kararlı bir erişilebilir adı ve kararlı bir seçicisi var.
2. Makine durumu. Her durum değişikliği yapılandırılmış bir olay yayar.
3. Görünür diff. Ajan kaynaklı her değişiklik, commit'ten önce incelenebilir bir çıktı olarak ortaya çıkar.
4. Klavye yolu. Yalnızca hover ile erişilen her eylem imkânına işaretçi olmadan da ulaşılabilir.
5. Kararlı seçici. Her etkileşimli öğenin, yeniden düzenlemeden sağ çıkan bir data-testid'si veya anlamsal eşdeğeri var.
6. Döngüde insan. Yıkıcı eylemler onay ister, felaket düzeyindeki eylemler çift onay ister, geri alınabilir eylemler geri alma ile çalışır.
7. Belgelenmiş yüzey. Ürün, ajana burada ne olduğunu, neyin güvenli olduğunu ve hangi geleneklerin önemli olduğunu söyleyen bir AGENTS.md veya eşdeğerini yayınlar.

Yedi üzerinden yedi geçen yüzey çift kullanıcı açısından tamdır. Üç veya daha fazlasında kalan yüzey, insan katmanı ne kadar iyi görünürse görünsün, ajanı dışarıda bırakarak yayına çıkıyor demektir.

Denetim tek seferlik bir alıştırma değil, bir alışkanlık. Her yeni yüzey, her yeniden düzenleme, her marka yenilemesi yayına çıkmadan önce bu yedi sorudan geçer, tıpkı her yeniden tasarımın erişilebilirlikten geçtiği gibi. Ajan okunabilirliği yeni erişilebilirliktir ve aynı şekilde birikerek büyür.

Bu disiplinin girdi katmanı sürümü için prompt yüzeyleri yazısına bakın. Boş durum sonucu için boş durumlar üründür yazısına bakın. Altta yatan temel için web tasarım ilkeleri yapının neden artık estetik olduğunu anlatıyor.

SSS

2026'da AI ajanları için tasarım yapmak gerçekte ne demek?

Ajanı savunulacak bir bot değil, ürününüzün birinci sınıf kullanıcısı olarak görmek. Ajan DOM'unuzu okur, butonlarınızı çağırır ve arayüzünüzü insanın asla görmeyeceği ölçütlerle değerlendirir. Her yüzeyin, aynı eylem imkânlarını, durumu ve kelime dağarcığını paylaşan bir insan katmanına ve bir makine katmanına ihtiyacı var.

Bu, erişilebilirlik tasarımından nasıl farklı?

Çoğu örtüşüyor. Kararlı erişilebilir adlar, anlamsal HTML, klavyeyle erişilebilirlik, yapılandırılmış durum, bunların hepsi yeni bir kullanıcıya uygulanan erişilebilirlik disiplini. Yeni katman, MCP uç noktaları, AGENTS.md dosyaları ve JSON-LD dahil olmak üzere araç yüzeyleri ve makine tarafından okunabilir yapı. Erişilebilirliği temel, ajan okunabilirliğini bir üst kat olarak düşünün.

Ajana hazır olmak için bir MCP sunucusuna ihtiyacım var mı?

İlk günden değil. Temiz DOM'u, isimli eylemleri, kararlı seçicileri, yapılandırılmış durumu ve incelenebilir çıktıları olan bir ürün zaten yüzde 80 ajana hazır. Bir MCP sunucusu ajanın işini daha hızlı ve güvenilir kılar, ama önce yapıyı, sonra protokolü yayınlayın.

İki kullanıcı, tek ekran, tek iş

Ajan tasarım için bir tehdit değil. Farklı ihtiyaçları olan ikinci bir kullanıcı ve onu böyle ele alan ürünler, almayanlardan şimdiden uzaklaşıyor.

Çoğu ekip hâlâ tek kullanıcı için tasarım yapıyor. Marka brifi insandan bahseder, moodboard insanı resmeder, araştırma insanla röportaj yapar. Ajan lansmandan sonra, bir entegrasyon talebi geldiğinde ortaya çıkar ve ekip seçicileri, isimleri, yapıyı, güveni sonradan düzeltmek zorunda kalır. Sonradan düzeltmek, ilk günden iki katman için tasarlamaktan her zaman daha pahalıya gelir.

Kayma teknik değil, bir duruş meselesi. Her yüzeyi çift kullanıcılı kabul edin, yayına çıkmadan önce denetimi çalıştırın, ajana insana gösterdiğiniz özeni gösterin. Reddederseniz, ajan trafiğini, ortaklığı ve geliri bir başkasının ürünü alır.

Marka ve ürün arayüzünü, iki katman sonradan birbirine dikilmek yerine aynı anda tasarlanmış şekilde yayınlayan bir ekip istiyorsanız, Brainy'yi tutun. İnsan katmanını hep yaptığımız gibi, makine katmanını da gerçekte olduğu gibi, ikinci bir kullanıcı olarak tasarlıyoruz.