Web tasarımında yapay zeka

Yapay zeka bugün web tasarımında tam olarak ne yapıyor?

Beş iş ve hiçbiri "siteyi kurar" değil. Bir tariften bir yerleşimin ilk taslağını verir. Tekrar eden kodu yazar: formlar, tablolar, ızgaralar, hover durumları. İlk metni önerir. Görsel ve simge üretir. Ve başkasının yazdığı kodu açıklar; en önemsiz görünen ama pratikte en çok zamanı geri veren iş budur.

Yapmadığı ve her araç reklamının satır aralarında kaybolan şey: karar vermez. Bu sayfanın kime ne söyleyeceği, hangi noktanın önce geleceği, neyin çıkarılacağı ve bir iddianın doğru olup olmadığı, bunların hiçbiri bir istemden çıkmaz. O kararlar, tasarımı boyamaktan ayıran şeydir.

Yani gerçek iş bölümü şu: model size yazma hızını verir, siz ona yönü verirsiniz. Sayfanın üstündeki şekil bunu iki sütuna koyuyor ve bilerek hiçbirine çarpı koymuyor; iki sütun da gerekli iştir, soru yalnızca hangisinin kimin işi olduğudur.

Dört araç ailesi ve her birinin işe yaradığı yer

Birinci aile bir cümleden kullanıcı arayüzü kurar. En bilineni v0; kendi belgeleri, React bileşenlerinin yanı sıra prototipler ve iniş sayfaları için HTML ve CSS ürettiğini söylüyor. Lovable de aynı grupta. Doğru yerleri prototiptir: bir fikri hakkında konuşabilmek için görmek istediğinizde. Sorun hâline geldikleri yer, aynı çıktının doğrudan canlı siteye gitmesidir; çünkü yapısını ve bağımlılıklarını sizin seçmediğiniz bir projeyi teslim almış olursunuz.

İkinci aile, Figma gibi tasarım araçlarının içindeki yapay zeka özellikleridir. Bunlar zaten o araçta çalışan birine hizmet eder ve tekrar eden adımların hızından başka bir şeyi değiştirmez.

Üçüncü aile, site kurucularının içindeki yapay zeka panelleridir. Artık her kurucuda bir tane var ve mantığı açık: tasarım öğrenmek istemeyen kullanıcı. Bu konu kendi tartışmasını hak ediyor ve onu yapay zeka site kurucuları yazısında yaptık; burada yalnızca çıktılarının kurucunun kendi şablonundan ayrılamayacağını ve onun sınırlarını miras aldığını söyleyelim.

Dördüncü aile ve en çok kullandığımız olan, kendi düzenleyicinizde ve terminalinizde çalışan, projenin gerçek dosyalarını görebilen kod yardımcılarıdır. Sohbet penceresinden bütün farkları budur. Model sizin CSS dosyanızı okuyabildiğinde yanıtı varsayımsal bir kod hakkında değil, o kod hakkında olur.

İran'dan erişim konusunda açık konuşalım: ilk gruptaki iki aracın da bizim yapay zeka referansımızda sayfası yok, çünkü haklarında ölçülmüş olgular tutmuyoruz. v0'ın bağlı olduğu Vercel şartları, kullanıcının Amerika Birleşik Devletleri'nin ya da birkaç başka merciin yaptırımlarının hedefi olmamasını şart koşuyor; Lovable sayfaları ise okuyabilmemiz için bu sunucudan hiç açılmıyor. Bu yüzden açılmaları ya da ödenebilmeleri hakkında bir iddiada bulunmuyoruz.

Bir model çıktısı neden odanın öbür ucundan tanınır?

Çünkü her yerde olandan öğrendi, dolayısıyla her yerde olanı kurar. İzler belirlidir ve bir kez gördükten sonra görmemezlik edemezsiniz:

• Bir kartın bir kenarı boyunca ince renkli çubuk; genelde üç ya da dört piksel, rengi de o kartın listedeki sırasından gelir.
• Her çip, etiket ve düğme için tam yuvarlak kapsül; yani her üretilmiş şablonda yaşayan doksan dokuz piksellik yarıçap.
• Yuvarlak simgeli üç özellik sütunu ve tam olarak eşit uzunlukta üç cümle; konunun gerçekten üç parçası olmadığı zaman bile.
• Başlığın arkasında mordan maviye bir degrade ve köşede yumuşak parlayan bir leke.
• Metinde: cümle ortasında uzun tire, "yalnızca bu değil aynı zamanda şu" kalıbı ve üstündekinin özetinden başka bir şey olmayan kapanış paragrafı.

Bunların hiçbiri çirkin değil ve sorun estetik değil. Sorun, tanınabilir olmaları. Geçen ay bu işaretleri taşıyan otuz sayfa görmüş bir okuyucunun düşünmesine gerek yoktur; sayfanızı aynı çekmeceye koyar ve söylediğinize tam da o kadar güvenir.

Biz kendi sitemizde bunu yazılı bir kurala çevirdik. rgb.ir içerik kuralları dosyasının onuncu bölümü, bir bloğun kenarındaki renkli çubuğu tam da bu başlıkla, bunun bir makine filigranı olduğu gerekçesiyle yasaklar; aynı dosyanın ikinci bölümü de metinde uzun tireyi ve birkaç karakteri yasaklar. Tasarım kuralının mekanik bir sınaması da var: tema ve eklentilerin tamamında, tek bir kenarda iki piksel ve üzeri bir kenarlık arayan ve sitenin kendi nötr kenarlığını dışarıda bırakan tek bir metin araması. Bu dersin yazıldığı gün o arama tam olarak on dört satır döndürüyor ve on dördü de izinli: her biri iki döndürülmüş kenarlıktan kurulan iki ok ucu için on iki satır, bir açılır üçgen ve tam da bu kuralı belgeleyen bir yorumun içinde duran bir satır. On beşinci satır, birinin bir şerit eklediği anlamına gelir.

Bir de listenin kendisi hakkında bir uyarı: izler değişir. Bugün bir sayfayı ele veren şey seneye sıradan olabilir ve yerini başkası alır. Değişmeyen şey liste değil sorudur: bu kararı ben mi verdim, yoksa kendiliğinden mi geldi?

Bir modelin yazdığı koda ne kadar güvenilir?

Kendiniz okuyabildiğiniz kadar. Pratik ölçüt tek başına budur ve gerisi ondan türer; çünkü sunucunuzda çalışan ve ziyaretçinizin tarayıcısında duran kod, yayımladığınız andan itibaren sizindir, hataları da öyle.

Model çıktısının genelde yetersiz kaldığı dört belirgin yer ve dördü de Farsça bir sitede daha çok görünür:

• Sağdan sola. Modelin varsayılanı İngilizce ve soldan sağadır; bu yüzden margin-left ve text-align: left yazar ve çıktı İngilizcede doğru, Farsçada aynalanmış olur. CSS dersi bunu çözen mantıksal özellikleri gösteriyor.
• Erişilebilirlik. onclick'li bir div, adsız bir düğme ve silinmiş bir odak halkası, üçü de üretilmiş çıktıda yaygındır. Erişilebilirlik dersinde bunun beş dakikalık sınaması var.
• Bağımlılıklar. Model bir kütüphaneyi kolayca ekler, çünkü bedelini o ödemez. Her kütüphane gelecekteki bir güncelleme ve olası bir güvenlik açığıdır; WordPress dünyasında eklentilerin bu birikmesi, gördüğümüz site güvenliği sorunlarının çoğunu üretir.
• Hız bütçesi. Kod çalışır ve ağırdır. Kodu okumayan biri ağırlığını da görmez.

Bir de kod kalitesiyle ilgisi olmayan ve daha ciddi bir madde: bir sohbet penceresine yapıştırdığınız her şey makinenizden çıkmıştır. API anahtarlarının, veritabanı parolalarının, yapılandırma dosyalarının ve müşteri verilerinin orada yeri yoktur. Bu, o hizmetin iyi ya da kötü olduğuna dair bir iddia değil; o metnin bir kopyasının artık başka bir yerde de bulunduğuna dairdir.

Peki zaman gerçekte nerede kazanılıyor?

Hacmi olan ve içinde karar bulunmayan mekanik işlerde. Kendi devrettiğimiz işlerden alınmış gerçek listemiz:

• Bir tasarım belirteci listesini tutarlı adlandırmayla CSS değişkenlerine çevirmek.
• Her görselin sayfasında ne iş yaptığını siz söyledikten sonra kırk alternatif metin yazmak.
• Yeniden yazacağınızı zaten bildiğiniz bir bileşenin ilk taslağı.
• Üç yıl önce başkasının yazdığı CSS'i okumak ve açıklamak.
• Terim sözlüğünü siz verdikten sonra arayüz metinlerini birkaç dile çevirmek.
• Büyük bir dosyadaki tekrar eden stilleri birleştirmek.

Gerçek bir projede toplamı birkaç günlük karar değil birkaç saatlik yazma işidir ve bu farkı açıkça söylemek gerekir. On dakikada eksiksiz bir şirket sitesi vadeden biri ya bir prototipi site diye yutturuyordur ya da sonrasında kimsenin bakımını yapmayacağı bir siteden söz ediyordur.

Bir de daha az anılan ve belki hepsinden büyük olan bir kazanç: öğrenmek. Çıktıyı alıp modelden ne yaptığını ve neden yaptığını satır satır açıklamasını istediğinizde bedel o birkaç dakikadır ve kazandığınız şey bir dahaki sefere sormanıza gerek kalmamasıdır.

Taslağı modelle, yayını hükümle: pratikte bu ne demek?

Çıktıyı almakla sayfayı yayına koymak arasında, her seferinde tek bir şeyi arayarak, üstünden dört kez kendiniz geçmeniz demek.

Birinci geçiş, sağdan sola: bulduğunuz her left ve right'ı mantıksal özelliğe çevirin ve sayfaya iki yönde de bakın. İkinci geçiş, klavye: yukarıdan aşağı Tab'layın; nerede olduğunuzu ve nerede takıldığınızı görün. Üçüncü geçiş, ağırlık: bir yazı tipinden bir kütüphaneye kadar, sayfaya sizin istemediğiniz ne eklenmiş. Dördüncü geçiş, izler: üçüncü bölümdeki listeyi çıktının üstünde gezdirin ve o aileden ne varsa değiştirin.

Dört geçiş toplamda belki yirmi dakikadır ve yapmakla yapmamak arasındaki fark şudur: birincisinde bir sayfanız olur, ikincisinde size ait bir sayfanız.

Kapanışta açık bir şey: amacınız tasarım öğrenmek değilse ve yalnızca işinizin bir sitesi olsun istiyorsanız, model en kısa yol değildir. En kısa yol ya ayrı bir yazıda tarttığımız bir site kurucusudur ya da işi bu dört geçişi bilen birine vermektir.