Pratikten notlar

Üreten model oldu. İş, yanıldığı yeri yakalamaktı.

7 dk okumaHalil Eren ÇelikSüreç · Araçlar

Günümüzde tasarımcının değeri; yapay zekânın tasarım yaparken verdiği kararların nedenini bilmek, bununla ilgili ne yapabileceğini düşünebilmek, bunları anlayabilmek ve yönetebilmek. Bunu bir cümle olarak söylemek kolay. Bir ürünü baştan sona öyle üretince ne demek olduğu başka türlü anlaşılıyor.

bugreports kişisel bir ürün denemesi: sorunun kanıtıyla bildirildiği, topluluğun arkasına geçtiği, kurumun panelinden çözdüğü, çözüldüğünü de bildiren kişinin doğruladığı bir sivil bildirim sistemi. Strateji, ürün tanımı, tasarım sistemi, mobil uygulama, kurum paneli — hepsi yapay zekâyla üretildi. Aşağısı o sürecin kaydı: neyin gerçekten işe yaradığı ve insanın nerede devreye girmek zorunda kaldığı.

Önce bir kütüphane

Serbest istem her seferinde başka bir standart üretiyor. Aynı işi iki kez isteyince iki farklı derinlikte cevap geliyor, ikisinin de neyi atladığını görmek için ikisini de baştan okumak gerekiyor. Bunun çözümü daha iyi istem yazmak değil; yöntemi yazıya dökmek.

Kendi beceri kütüphanemi bunun için kurdum: DEINS — 15 bölüm, 119 hizmet. Her hizmetin yazılı bir tanımı var: ne zaman çağrılır, hangi adımlarla yürür, ne teslim eder, ne zaman bitmiş sayılır, çıktısını hangi hizmete devreder. Bir hizmeti çağırdığımda bir istem değil, bir yöntem çağırıyorum.

Kütüphane bu proje için kurulmadı; bu proje kütüphaneyi sınayan iş oldu. bugreports'ta 119 hizmetin 93'ü fiilen çalıştı. Yirmisi işi taşıdı:

  • Deneyim Stratejisi
  • Pazar Araştırması
  • Rekabet İstihbaratı
  • Ürün Tanımı
  • Yol Haritası
  • Bilgi Mimarisi
  • UX Tasarımı
  • UI Tasarımı
  • Etkileşim Tasarımı
  • UX Metni
  • Tasarım Token'ları
  • Component Sistemleri
  • Erişilebilirlik
  • Çözüm Mimarisi
  • Mobil Geliştirme
  • Teknik Teslim
  • MVP Geliştirme
  • Tasarımdan Koda
  • Lansman
  • Kalite Mühendisliği

İş bölümü şöyleydi: strateji, ürün tanımı ve rakip analizi ChatGPT'yle; tasarım sistemi, arayüzler, mobil uygulama ve kurum paneli Claude Code'la. Her aşamada bir beceri çağrıldı, raporu okundu, iş onaylandı ya da geri gönderildi. Süreç otonom değil — her adımda bir insan duruyor.

Onaylamak da bir iş

Yapay zekâ her zaman kusursuz, her zaman piksel hassasiyetinde sonuç üretemiyor. Birçok konuda ona fazlasıyla güveniyoruz; hata yaptığını çoğu zaman fark etmiyoruz. Bu farkındalığı yakalayacak kadar uzman olmak, insanı kilit oyuncu yapıyor.

Bunun en net örneği projenin kendi sayfasında çıktı. 119 hizmetin projede çalışan 93'ünü işaretlemek istedim. Tek renkle işaretlendiler ve ortaya çıkan şey otoriter görünen ama hiçbir şey söylemeyen bir liste oldu: sayfanın dörtte üçü vurguluydu, yani hiçbiri vurgulu değildi. Çıktı bozuk değildi — makuldü. Yakalanması en zor olan da bu.

Çözüm üç ağırlık oldu: işi fiilen taşıyan yirmi hizmet turuncu, ayrıca çalışan yetmiş üçü ince kenarla, çalışmayan yirmi altısı sönük. Aynı veri, üç kat okunaklılık. Bu kararı model vermedi; modele “işaretle” dendi, o da işaretledi.

Bozuk çıktıyı herkes görür. Makul ama yanlış çıktıyı görmek için işi bilmek gerekir.

Ürün kararları hâlâ ürün kararı

Kurum panelinde bir satır var: “Çözüldü” demek kurumun elinde değil. Kurum işi yapar, kapatma önerisini gönderir; çözüldüğünü bildiren kişi doğrular. Bu bir arayüz tercihi değil, ürünün omurgası — çözülme oranını kurumun kendi beyanına bırakmak, ürünün var oluş sebebini ortadan kaldırıyordu.

Böyle bir kararı hiçbir model kendiliğinden önermiyor. Model “onayla / reddet / çözüldü işaretle” aksiyonlarını üretir; hangisinin kimde olduğunu ürünü düşünen kişi söyler.

Gerçekten çalışan iki demo

Sitedeki iki demo ekran görüntüsü değil, derlenmiş uygulamaların kendisi. Mobil uygulama Expo web dışa aktarımı: üç megabayt JavaScript, sunucuya hiç gitmeyen, anahtar taşımayan bir paket. Kurum paneli Next.js App Router'ın statik dışa aktarımı. İkisi de tarayıcıda gerçekten koşuyor.

Buraya gelene kadar çıkan işler, “yapay zekâ ürünü yazdı” cümlesinin altında kalan kısım:

  • Yazı tipleri 404 verdi, uygulama hiç açılmadı. Expo paketlenmiş bağımlılıkları noktayla başlayan bir klasör adının altına yazıyor; Vercel nokta ile başlayan yol parçasını servis etmiyor. Yollar düzleştirilip paket yeniden yazıldı.
  • Fotoğraflar üçüncü bir siteden geliyordu. Yerelleştirildi — hem demo o site yavaşlayınca kararmasın diye, hem de görüntü alma düzeneğinin o adrese çıkışı olmadığı için.
  • Telefonun güvenli alanı sıfır geldi. Tarayıcı iPhone'un çentik ve ana ekran çubuğu boşluklarını sıfır bildiriyor; uygulamanın başlığı adaya, sekmeleri çubuğa giriyordu. Gerçek değerler çerçeveye parametre olarak verildi.
  • Panelin alanları çukur gibiydi. Panel, mobil uygulamanınkinden çok daha derin bir iç gölge taşıyordu — tablet boyutunda bir ekranda her alanın etrafında hendek gibi duruyordu. İki demo aynı token değerlerine getirildi.
  • Yazı tipleri derleme anında indirilmeye çalışıldı. Next.js'in Google font eklentisi derleme sırasında ağa çıkıyor; derleme makinesinin o çıkışı yoktu. Fontlar depoya alınıp düz kurallarla servis edildi.

Bunların hiçbiri tasarım dehası ya da mühendislik zekâsı değil. Bir şeyi gerçekten çalıştırmanın tortusu. Ve model bunu size kendiliğinden getirmiyor: paketi üretiyor, çalışıp çalışmadığını siz açıp bakıyorsunuz.

Takılma

En öğretici hata bu oldu. Demo trackpad'de takılıyordu: parmak hareket ediyor, liste duruyordu. İlk varsayımım yanlıştı — makinenin yorulduğunu, bir yerde kare düştüğünü sandım.

Ölçtüm. Kaydırma boyunca kare süreleri kayda alındı: iki binden fazla karenin yalnız ikisi 33 milisaniyeyi aşmıştı, tek bir uzun görev vardı. Çizim hiç sorun değildi.

Sonra olaylara bakıldı. Teker olayları uygulamaya ulaşıyordu; üç yüz altmış üç olayın hiçbiri iptal edilmemişti. Yani hiçbir kod onları engellemiyordu. Tarayıcı kaydırıyordu — sadece imlecin altındaki listeyi değil.

Sonra teker teker eleme: sayfa kilidi kapatıldı, değişiklik yok. Çerçevenin ölçek dönüşümü kaldırıldı, takılma %73'ten %42'ye indi — bir etken, ama sebep değil. Sonra sırada demo belgesinin içine benim koyduğum tek bir CSS kuralı vardı.

O kural bir sorunu çözmek için oradaydı: imleç telefonun üstündeyken uygulamanın kullanamadığı bir teker adımı çerçeveden taşıp altındaki sayfayı kaydırıyordu. Çözüm için taşma davranışı her öğeye kapatılmıştı. Kaldırıldığında takılma %73'ten kayda değer olmayan bir seviyeye indi — ve sayfa yine bir piksel kaymadı.

Mekanizma şu: bir teker jesti, başladığı anda imlecin altındaki kaydırıcıya kilitleniyor. Her öğede taşma kapalı olunca bir çip sırası, bir avatar şeridi ya da kısa bir iç liste kendi sonuna geldiği anda jestin geri kalanını dış listeye devretmek yerine yutuyordu. Kuralı köke indirmek hem sayfayı yerinde tutuyor hem listeyi serbest bırakıyor.

Aynı sorunun daha eski bir çözümü daha da kötüydü: pasif olmayan bir teker dinleyicisi. O dinleyici tarayıcıyı kaydırmadan önce JavaScript çalıştırmaya zorluyor, kareyi kompozitörden alıyordu; trackpad'de demo parmağın bir kare gerisinden geliyordu.

Bunu hiçbir model bulmazdı. Zor olduğu için değil — yalnızca elde var olduğu için.

Bu hatanın kaydı ancak bir insan trackpad'de gezinip “burada bir şey ters” dediğinde başlıyor. Ölçüm, o hissi sebebe çeviren şey. İkisi de bende kaldı.

Uydurma bir dünya

Demolar gerçek görünmek zorundaydı ama gerçek kurum taşımamalıydı. Karar şu oldu: iki demoda da hiçbir gerçek kurum, marka veya yer adı geçmiyor. Adlar gerçek gibi okunuyor — demo inandırıcı kalsın diye — ama hiçbir kuruma, hak etmediği bir çözülme oranı gösterilmiş olmuyor. İki yüz kırk beş değiştirme yapıldı; şehir, ilçe, ulaşım idaresi, su idaresi, markalar, hepsi.

Bu da modelin kendiliğinden getirmediği bir karar. Getirdiği şey inandırıcı örnek veriydi; inandırıcı olmanın nerede sorun yarattığını görmek ayrı bir iş.

Peki kazanan kim

Yapay zekânın en büyük özelliği, ihtiyaç duyduğunuz hızı ve kaynağı fazlasıyla vermesi. Tek başına bir ürünü strateji aşamasından çalışan iki demoya taşıyabilmenin sebebi bu — daha önce bir ekip ve bir bütçe gerektiren şey artık bir kişiyle ve doğru kurulmuş bir yöntemle mümkün.

Ama fazlasıyla verilen şey hız ve kaynak; yargı değil. Yargı hâlâ nerede duracağını, neyin makul göründüğü hâlde yanlış olduğunu, hangi kararın kimde kalması gerektiğini bilen tarafta.

Ondan faydalanarak doğru şekilde ilerlediğimiz, kendimizi ona göre konumladığımız sürece kazanan hep biz oluruz.

bugreports çalışan bir demo; kullanıcısı, pilotu ve kurumu yok, her rakam örnek veri. Proje sayfasından demoyu telefonda ve panelde açıp gezebilirsiniz.