Uzun Süreli Uygulama Geliştirme için Koşum Tasarımı: Yapay Zeka Ajanları, Ön Yüz İş Akışları ve UI Mühendisliğinin Geleceği

Anthropic'in mühendislik ekibi yakın zamanda "koşum tasarımı" olarak adlandırdıkları, yapay zeka ajanlarının uzun süreler boyunca güvenilir bir şekilde çalışmasını sağlayan mimari desenler ve araçlar hakkında derinlemesine bir inceleme yayınladı. Bu sadece bir terminal penceresini açık tutmakla ilgili değil. Bir yapay zeka modelinin saatler hatta günler süren sürekli geliştirme çalışmaları boyunca plan yapabileceği, yürütebileceği, gözlemleyebileceği ve kendini toparlayabileceği yapılandırılmış bir ortam oluşturmakla ilgili. Ön yüz geliştiricileri için sonuçları derin. Karmaşık bir React panosunu aşamalı olarak oluşturabilen, eski bir CSS kod tabanını yeniden düzenleyebilen veya kullanıcı geri bildirimlerine göre bir kullanıcı arayüzünü yinelemeli olarak ince ayar yapabilen uzun süreli bir ajan, bir paradigma değişimini temsil ediyor.

Ancak güçlü bir ajan, yalnızca çalıştığı ortam kadar etkilidir. Koşum tasarımının özü budur. Bunu bir inşaat sahasındaki iskele gibi düşünün. Ajan yetenekli işçidir, ancak sağlam bir iskele, net özellikler, yapılandırılmış araç erişimi, durum yönetimi ve hata kurtarma döngüleri olmadan bir gökdelen inşa edemez. Bir kulübe bile zar zor monte edebilir. Bu yazıda, Anthropic'in temel bulgularını parçalara ayıracağız, bunları pratik ön yüz iş akışlarına çevireceğiz ve DivMagic, Claude Code ve yapılandırılmış terminal koşumları gibi araçların uzun süreli, üretim kalitesinde web uygulamalarını nasıl yeniden şekillendirdiğini göstereceğiz.

Anthropic'in araştırması, temel zorluğun model "zekası" değil, ajanın binlerce sıralı araç çağrısı ve birden çok insan kontrolü boyunca tutarlı, uygulanabilir bir planı sürdürme yeteneği olduğunu ortaya koyuyor.

Bir Geliştirme Koşumunun Anatomisi: Bir Sanal Alan Kutusundan Daha Fazlası

Anthropic mühendisleri bir "koşum" hakkında konuştuklarında, dikkatlice enstrüman edilmiş bir döngüye atıfta bulunuyorlar. Ajan, bir terminale, bir dosya sistemine ve tanımlanmış bir dizi araca erişimi olan, kapsayıcılaştırılmış bir ortamın içinde bulunur. Sadece kod yazmaz; kod yazar, testleri çalıştırır, hataları ayrıştırır, günlükleri okur ve ardından daha fazla kod yazar. Koşum, model ile sistem arasındaki bu devam eden konuşmanın durumunu tutan şeydir. Bir ön yüz geliştiricisi için eşdeğer, çalışan bir geliştirme sunucusu, Playwright gibi bir tarayıcı otomasyon aracı ve bir sıcak-modül-değiştirme hattına sahip bir Node.js ortamı olabilir. Koşum hepsini tutarlı tutar.

Anthropic, yapılandırılmamış, geçici komut zincirlemenin uzun süreli görevlerde feci şekilde başarısız olduğunu vurguluyor. Model kısıtlamaları unutur, araç çıktılarını hayal eder veya tekrarlayan döngülere takılıp kalır. İyi tasarlanmış bir koşum, bunu birkaç mekanizma aracılığıyla hafifletir: bir TODO.md dosyasında saklanan yapılandırılmış çalışma planları, kontrol noktası tabanlı commit'ler ve açık insan-odaklı geri bildirim geçitleri. Bu, bir yapay zeka ajanını basit bir sohbet robotundan, saatlerce karmaşık, çok dosyalı bir UI projesinde özerk bir şekilde gezinebilen dirençli bir geliştirme ortağına dönüştürür.

Etkili Bir Koşumun Temel Özellikleri

Anthropic'in araştırması, üretim kalitesinde bir koşum için tartışılmaz birkaç özellik belirliyor. Bunlar doğrudan ön yüz araçları için en iyi uygulamalara dönüşüyor:

• Gözlemlenebilirlik: Ajan, eylemlerinin sonuçlarını görebilmelidir. Bir ön yüz bağlamında bu, başsız tarayıcı anlık görüntüleri, konsol günlükleri ve ağ isteği şelaleleri anlamına gelir ve bunların tümü modelin bağlamına geri yansıtılır.
• Durum Bilgisi: Koşum, kalıcı bir dosya sistemi ve hafıza sağlar. Bir UI projesi için bu, Git deposudur. Ajan dal oluşturabilir, commit yapabilir ve geri alabilir.
• Araç Modülerliği: Her aracın (ör. write_file, run_terminal_command, take_browser_screenshot) net, dar bir kapsamı vardır ve belirsizliği azaltır.
• Kurtarma Döngüleri: Bir derleme başarısız olduğunda veya bir test iddiası geçmediğinde, koşum bu hatanın tam mesajını ajana geri besler, "bir şeyler ters gitti" gibi belirsiz bir mesaj değil.

Claude Code ve Terminal Koşumu: Yeni Bir Ön Yüz İş Akışı

Anthropic'in Claude Code 'u, koşum tasarımının eylem halindeki başlıca örneğidir. Doğrudan terminalinizde yaşayan, geniş bir araç takımıyla donatılmış bir ajandır. Ön yüz geliştiricileri için bu oyunun kurallarını değiştiriyor. Claude Code'dan yeni bir Vite projesi başlatmasını, Tailwind CSS kurmasını, bir bileşen kitaplığı iskeleti oluşturmasını ve karmaşık bir sürükle-bırak arayüzü uygulamasını isteyebilirsiniz; tüm bunları yaparken yinelemeli olarak TypeScript hatalarını düzeltir ve tasarım geri bildirimlerinize göre ayarlamalar yapar. Terminal koşumu kararlı ortamı sağlar; Claude Code ise zeki, kalıcı iş gücünü sağlar.

Yaygın bir senaryoyu ele alalım: birden çok etkileşimli grafiğe sahip bir veri panosu oluşturmak. Bir ajan olmadan, saatlerce ortak kod yazarak, Chart.js veya D3'ü bağlayarak ve veri dönüşümlerinde hata ayıklayarak harcarsınız. Uygun bir koşumdaki uzun süreli bir ajanla, üst düzey tasarımı ve veri şemasını belirtebilir ve çalışmasına izin verebilirsiniz. Bileşenleri yazar, geliştirme sunucusunu çalıştırır, takılıp kalmış yükleme durumlarını algılar ve veri getirme mantığını yeniden düzenler. Anahtar nokta, koşumun, geliştirme sırasında kaçınılmaz olarak bir çubuk grafikten dağılım grafiğine geçmek istediğinizde ajanın yoldan çıkmasını engellemesidir.

Bağlam şişmesini önlemek için özetleyici bir commit kancası kullanın. Önemli bir iş parçasından sonra, ajandan değişikliklerini bir Git commit mesajında özetlemesini isteyin. Bu özet daha sonra ajana uyumlu kalması için gelecekteki komutlara enjekte edilebilir.

Koşum Tasarımını Ön Yüz SPA Mimarisine Çevirmek

Koşum tasarımının ilkeleri yalnızca yapay zeka ajan altyapısı için geçerli değildir. Özellikle uzun kullanıcı oturumları sırasında durum bilgisi olan ve duyarlı kalması gereken tek sayfa uygulamaları (SPA'lar) için modern ön yüz mimarisine şaşırtıcı derecede iyi uyarlanır. Figma gibi sofistike bir web tabanlı tasarım aracını veya gerçek zamanlı bir panoyu düşünün. Bunlar kendi başlarına uzun süreli uygulamalardır ve durumu, yan etkileri ve hata sınırlarını yönetmek için kendi iç "koşumlarına" ihtiyaç duyarlar.

"Dayanıklı bir uygulama mimarisi, kullanıcının niyeti için bir koşumdur. Tek bir oturumda yüzlerce durum geçişinde gezinirken bile iş akışlarını tutarlı tutar."

Bir React veya Vue uygulamasında bu koşum, birkaç somut uygulamaya dönüşür. Redux Toolkit veya Zustand gibi bir StateManager , kalıcı, gözlemlenebilir durum sağlar. React Query veya SWR , sunucu durumu için bildirimsel bir koşum görevi görerek önbelleğe almayı, arka plan güncellemelerini ve eski-iken-yeniden-doğrula döngülerini yönetir. Hata sınırları, kurtarma döngüleri olarak işlev görür, çökmüş bir bileşeni yakalar ve tüm sayfayı yenilemeden kullanıcı arayüzünü çalışan bir duruma geri yükler. Uygulama yapısının kendisi, iş mantığınız için bir koşum haline gelir ve uzun süreli bir kullanıcı etkileşimi boyunca kararlılık sağlar.

Bileşen Düzeyinde Koşumlama: Karmaşıklığı Kapsüllemek

Anthropic, araç modülerliğini vurgular. Bir bileşen ekosisteminde bu, tek sorumluluk ve izolasyon ilkesidir. İyi tasarlanmış bir bileşen, daha büyük uygulama düzeninin (harness) orkestre edebileceği dar kapsamlı bir araçtır. Bileşen, prop'lar (yapılandırılmış girdi) alır, çıktı (gözlemlenebilirlik) oluşturur ve olaylar (ana düzene geri araç çağrıları) yayar. Bileşenleri modüler tutarak ve durum yönetimlerini açık hale getirerek, Anthropic'in kötü yönetilen AI ajanlarında gözlemlediği türden bağlamsal bozulmayı, ancak bu kez kullanıcı arayüzünüzde önlemiş olursunuz. Bir bileşen, kimlik doğrulama mantığına dolanmamalıdır. Düzen (harness), yani uygulamanızın durum yönetimi katmanı, zaman içinde güvenli bir şekilde işbirliği yapmalarını sağlar.

Kullanıcı Arayüzü Darboğazı: Düzen Mükemmel Ama Tasarım Değil

Mükemmel bir şekilde mimarisi yapılmış bir geliştirme düzeni ve yorulmak bilmez bir AI ajanı olsa bile, bir ön uç darboğazı kritik olmaya devam eder: istenen bir kullanıcı arayüzü tasarımının üretime hazır koda dönüştürülmesi. Ajan mantıklı, hatasız TypeScript yazabilir, ancak karmaşık bir degradeyi, özel bir kaydırma çubuğunu veya bir tasarımcının Figma maketini piksel piksel yeniden üretmek için saatlerce uğraşırsa, düzenin verimlilik kazanımları buharlaşır. İşte bu noktada geliştiricilerin, UI dönüştürme sürecini kısaltacak, düzene belirsiz görsel açıklamalar yerine anında, doğru başlangıç noktaları besleyecek bir yola ihtiyacı vardır.

İşte bu tam olarak DivMagic 'in doldurduğu boşluktur. Claude Code gibi bir terminal düzeni, uygulama mantığını oluşturmak için akıllı döngüyü sağlarken, DivMagic görsel katman için hassas bir araç görevi görür. Herhangi bir web sitesinden herhangi bir UI öğesini anında kopyalamanıza, tam, hesaplanmış CSS'sini, HTML yapısını ve tasarım token'larını çıkarmanıza izin vererek, uzun soluklu ön uç projelerinin en sıkıcı, zaman kaybettiren kısmını ortadan kaldırır. Artık bir gölgeyi doğal dilde tanımlayıp ajanın doğru yorumlamasını ummanız gerekmez. Onu kopyalar, projenize yapıştırır ve ajanın onu daha büyük düzen içinde entegre etmesine izin verirsiniz.

DivMagic: AI Düzeni İş Akışındaki Eksik Araç

Anthropic tarzı bir geliştirme düzeninde, ajanın araçları her şeydir. Tipik bir araç seti read_file, write_file, run_shell ve web_fetch'i içerir. Bunların hala eksik olduğu şey, görsel tasarım niyetini koda dönüştürmenin güvenilir bir yoludur. Bir insan "Stripe'ın ödeme formu gibi görünsün" diyebilir, ancak bir ajan, görüntüleme yetenekleri olsa bile, yalnızca bir ekran görüntüsünden sadık, üretime hazır bir kopya üretmekte zorlanır. Ortaya çıkan CSS genellikle şişkin, anlamsal olarak yanlış veya yanlış boşluklar kullanır.

DivMagic 'i düzene yeni bir araç olarak veya manuel bir ön işleme adımı olarak entegre ederek iş akışı dönüşür. Bir geliştirici referans bir UI bileşeni, bir buton, bir modal, bir fiyatlandırma kartı belirler. Tarayıcıda tek bir tıklamayla DivMagic, canlı, hesaplanmış stillerini yakalar. Bu bozulmamış, izole edilmiş CSS daha sonra doğrudan projedeki bileşen dosyasına kaydedilebilir. Terminal düzeni içinde çalışan AI ajanına daha sonra şu talimat verilir: "Stil için yeni kaydedilen PricingCard.module.css 'i kullan. Az önce yazdığımız dinamik faturalandırma mantığıyla entegre et." Ajan entegrasyonu, durumu ve erişilebilirlik mantığını halleder, ancak görsel DNA en başından mükemmel bir şekilde işlenir.

Claude Code gibi güçlü bir AI düzenini, DivMagic gibi hassas bir UI klonlama aracıyla birleştirmek, bileşik bir üretkenlik etkisi yaratır. Düzen artık görsel yorumlama görevleriyle boğuşmaz, bu da bağlam penceresini karmaşık mimari ve mantık sorunlarına harcamasına olanak tanır.

Uzun Süreli Bir Pano Oluşturma: Pratik Bir Orkestrasyon

Somut bir örnek üzerinden gidelim. Bir IoT platformu için uzun süreli bir analitik panosu oluşturmanız gerektiğini varsayalım. Panonun gerçek zamanlı veri akışlarına, karmaşık veri görselleştirmelerine ve sofistike bir kullanıcı yönetim paneline ihtiyacı var. Bu çok günlük bir iştir. Düzeniniz, Node.js, bir Vite React projesi ve Claude Code içeren bir Docker konteyneridir. İş akışınız şöyle olacaktır:

1. Düzeni Başlatın: Git deposunu kurun, bağımlılıkları yükleyin ve test ile linting kancalarını yapılandırın. Claude Code'un özerk bir şekilde yöneteceği bir TODO.md dosyası oluşturun.
2. Görsel Kimliği Tohumlayın: Panonun görünümünü tanımlamak yerine, birkaç üst düzey SaaS panosundan bir dizi cilalı bileşeni (bir kenar çubuğu, bir istatistik kartı, bir veri tablosu ve bir filtre çubuğu) kopyalamak için DivMagic'i kullanırsınız. Bunları projenizdeki ayrı CSS modüllerine yapıştırırsınız.
3. Mantığı Ajana Devredin: Ajana şu talimatı verin: "Stil verilmiş bileşenler ekledim. useWebSocket içinde WebSockets kullanarak gerçek zamanlı bir veri akışı uygula. StatCard bileşenlerini mock API'mizden gelen canlı verilerle doldur. Kenar çubuğu navigasyonunun ana içerik alanını güncellediğinden emin ol."
4. Yineleyin ve Gözlemleyin: Ajan kancaları yazar, veri akışına bağlanır ve hemen geliştirme sunucusunu çalıştırır. Ekran görüntüsü almak için Playwright'ı kullanır, hatalar için konsolu ayrıştırır ve eski kapanışlar (stale closures) tespit ettiğinde kendi veri işleme kodunu yeniden düzenler.
5. Son Cila: Mantık sağlamlaştığında, UI üzerinde geri döngü yaparsınız. Ajandan, DivMagic ile kopyalanmış tüm bileşenleri etkileyen bir karanlık mod geçişi eklemesini isteyin. Tanımladığınız CSS değişkenlerini ve durum bağlamını değiştirir. Konseptten, üretim benzeri, veriye bağlı bir prototipe kadar tüm döngü, günler yerine saatler sürer.

Ön Uç Dayanıklılığı için Düzeni Tasarlamak

İster bir AI ister bir insan kullanıcı tarafından yönetilsin, uzun süreli bir uygulama ancak hata yönetimi kadar dayanıklıdır. Anthropic, uzun süreli bir ajanın bağlamını kaybettiği ve yeniden başlamak zorunda kaldığı "sıfırlama sorununu" tartışır. Bir ön uç uygulamasında bu, yakalanmamış bir JavaScript hatasının UI'ın bir bölümünü çökertmesine ve kullanıcıyı sayfayı yenilemeye zorlayarak kaydedilmemiş çalışmasını kaybetmesine benzer. Düzen tasarım felsefesi bir çare sunar: ayrıntılı hata sınırları, durum denetim noktaları ve kendi kendini iyileştiren kurtarma döngüleri.

Bu kavramları yansıtan bir geliştirme düzeni uygulamak, başarısızlık altında öngörülebilir kod yazmak anlamına gelir. React geliştiricileri için, her büyük özellik bölümünü bir ile sarmak ve bir yedek UI sağlamak bir düzen desenidir. Kritik uygulama durumunun bir kısmını localStorage 'a veya bir servis çalışanına kalıcı hale getirmek başka bir desendir. Uygulama, kullanıcının form verilerini veya gezinme bağlamını kaybetmeden bir bileşen ağacını "yeniden başlatabilir". Bu, bir AI ajanının bir ağ hatasından sonra bir kodlama oturumuna devam etmesini sağlayan prensibin aynısıdır: düzen, önemli olan durumu korumuştur.

Düzenin Kendisini Test Etmek

Anthropic ekibi, aracı donanımlarını ağ hatalarını simüle ederek, aracıyı görevin ortasında yeniden başlatarak ve ara dosyaları bozarak stres testine tabi tutar. Frontend geliştiricileri de aynı zihniyeti QA süreçlerine uygulayabilir. Bileşenin doğru şekilde render edilip edilmediğini test etmekle kalmayın. Veri kaynağı başarısız olduğunda kurtarılıp kurtarılamayacağını test edin. Bir prop'a null işaretçisi enjekte edin, bir WebSocket bağlantı kesintisini simüle edin ve "donanımın" (durum yönetiminiz ve hata sınırı mimariniz) kullanıcı arayüzünü tam bir sayfa yenilemesi olmadan kullanılabilir bir duruma geri yönlendirdiğini doğrulayın. DivMagic gibi bir araç, yedek kullanıcı arayüzünün, belki de güzelce tasarlanmış bir hata kartının, uygulamanın geri kalanı kadar cilalı olmasını sağlar, çünkü sağlam bir üretim uygulamasından herhangi bir zarif başarısızlık tasarım desenini anında yakalayıp uyarlayabilirsiniz.

"Bir yapay zeka aracısının dayanıklılığı ne sıklıkla başarılı olduğuyla değil, ne kadar zarif bir şekilde kurtarıldığıyla ölçülür. Aynı şey ürettiği frontend kodu için de geçerlidir."

Frontend Donanımlarının Geleceği: Çoklu Aracı Orkestrasyonu

Anthropic'in araştırması, birden fazla uzmanlaşmış aracının paylaşılan bir donanım içinde işbirliği yaptığı yakın bir geleceğe işaret ediyor. Bir aracı CSS tasarım sistemi uzmanı, diğeri TypeScript mantık ustası ve üçüncüsü test ve erişilebilirlik denetçisi olabilir. Hepsi bir Git deposunu paylaşır ve ortak bir görev panosu aracılığıyla koordine olur. Uzun süreli bir frontend projesi için bu, donanım tasarımının mantıksal son noktasıdır. Tek bir aşırı yüklenmiş bağlam pencereniz olmaz; yığının her katmanı için özel, dar odaklı bir aracınız olur.

Böyle bir çoklu aracı kurulumunda DivMagic gibi bir araç, belirlenmiş "görsel bağlam sağlayıcısı" haline gelir. Tasarım aracısı, bir metin isteminden CSS oluşturmaz; bir hedef kullanıcı arayüzünün doğrudan, bozulmamış bir klonunu alır. Görevi daha sonra bu klonu akıllıca bir tasarım sistemine genellemek, renk tokenlerini çıkarmak, bir varyant sistemi oluşturmak ve erişilebilirliği sağlamaktır. Bu desenleri, bunları gerçek verilere bağlayan mantık aracısına iletir. Donanım tasarımı ilkeleri üzerine inşa edilen bu tür bir orkestrasyon, yapay zeka destekli frontend mühendisliğinin bir sonraki neslini tanımlayacaktır.

Sonuç: Önce Donanımı Oluşturun, Sonra Uygulamayı

Anthropic'in donanım tasarımına derinlemesine dalışı, günlük işlerinde yapay zekadan yararlanmayı ciddiye alan her frontend geliştiricisi için mutlaka okunması gereken bir kaynaktır. Ders açıktır: mükemmel hepsi bir arada istemi bulmaya çalışmayı bırakın. Mükemmel bir ortam oluşturmaya başlayın. Yapılandırılmış planlama, hata kurtarma ve deterministik araç çağrıları ile güvenilir bir terminal donanımı, içine yerleştirdiğiniz herhangi bir modelin etkinliğini katlayacaktır. Bu donanımı daha sonra UI uygulamasının benzersiz zorluğunu çözmek için DivMagic gibi özel, hassas araçlarla donattığınızda, daha hızlı, daha dayanıklı ve gerçekten uzun süreli, karmaşık uygulama yapılarının üstesinden gelebilecek bir geliştirme hattı oluşturursunuz.

Frontend geliştirmenin geleceği geliştiricileri değiştirmekle ilgili değildir. Yapay zeka araçlarımız için o kadar etkili bir donanım tasarlamakla ilgilidir ki, UI mühendisliği zanaatı piksel ittirmekten üst düzey orkestrasyona, davranışı, durumu ve dayanıklılığı tanımlamaya kayar. Donanım, yeni IDE'dir.