Figma'yı bir kez bile açmadan bir açılış sayfası oluşturdum. Kullandığım araçlar ağırlıklı olarak Claude Design ve Claude Code oldu. Üretim süresi bir haftaydı ve yapay zekayla toplamda 300'ün üzerinde ileri geri etkileşim oldu.
Bu 300 etkileşimden öğrendiğim şey, yapay zeka sayesinde üretme eyleminin önemli ölçüde kolaylaşmasına rağmen, nihai kalitenin üst sınırının hâlâ insan yargısı tarafından belirlendiği oldu. Yapay zeka, adayları sunmaya kadar her şeyi halleder. Oradan itibaren, istenen tona yükseltmek, kaliteyi değerlendiren ve düzeltmeler için geri gönderen kişinin işiydi.
Tasarımı dört katmanda (kısıtlamalar, bağlam, doğrulama ve değerlendirme) ele alan bir çerçeve olan Design Harness için dokümantasyon sitesini oluşturdum. Tasarımla ilgili bir site olduğu için, yüzey detayları ve etkileşimlerle ne kadar ileri gidebileceğimi görmek de bir alt temamdı.
https://x.com/kgsi/status/2072829167285207077
Attığım adımlara ve bu 300 etkileşimi nerede harcadığıma, gerçek ekran görüntüleri de dahil olmak üzere geri dönüp bakacağım.
Claude Design ve Claude Code'u Nasıl Farklı Kullandım
Bu açılış sayfasını, iki ana araç arasında roller bölerek oluşturdum. Claude Design, sohbet yoluyla talimat verdiğiniz ve anında canlı bir HTML prototipinin göründüğü, konuşmaya dayalı bir tasarım oluşturma aracıdır. Claude Code ise terminalde çalışan ve kod tabanını doğrudan uygulayan bir kodlama aracısıdır.
İş bölümü netti: Claude Design, prototipleri erken aşamada şekillendirmede harikadır. Bu sefer, tasarım politikasını ve tel çerçeveleri özetleyen bir belge sağladım, birkaç soruyu yanıtladım ve ilk açılış sayfası çıktı. Bu yöntem, yönleri deneme ve bir şeyleri bozma aşamasında etkilidir.
Öte yandan, duyarlı destek ve erişilebilirlik detayları gibi üretim kalitesine getirme işi için Claude Code ile iyileştirme yapmanız gerekir.
Tasarımı Design ile kararlaştırın ve Code ile bitirin. Bunları bu sırayla kullandım.
Yapmadan Önce Her Şeyi Söze Dökmek
Bu siteyi yapmaya karar verdiğimde, yön zaten belirlenmişti. Aklımda olan şey, "klasik yurtdışı tarzı bir tona modern yazı tipleri ve efektler eklerseniz ne olur?" sorusuydu. Konseptin kendisi Design Harness dokümantasyonundan alınmıştır.
Claude'un kendi başına görüntü oluşturamadığını unutmayın, bu yüzden bunu ChatGPT Images 2.0'a bıraktım. Örnek site görsellerinden alternatif fikirler türettim, oluşturmak istediğim site için bir ruh hali panosu oluşturdum ve arka plan görüntüleri ürettim. 'İyi' yönü tanımlamak için her şeyi önceden söze ve görsele döktüm. Sonraki tüm etkileşimler esasen buna karşı çapraz kontrol yapmaktı.
Codex (ChatGPT Image 2.0) ile görsel tonları keşfetmek, çeşitli görseller ve ruh hali panoları arasında arama yapmak.
İyileştirme Yüzlerce Etkileşim Gerektirir (En Azından)
Hazırlık bittikten sonra, Claude Design ile ileri geri süreci başladı. Ekran görüntülerine baktığımda, toplamda 200'ün üzerinde etkileşim oldu (toplam üretim süresi açısından yaklaşık bir hafta). Oturumların dökümü şöyle:
- "Açılış sayfası sitesi oluşturma gereksinimleri": yaklaşık 80 tur
- "Design Harness animasyonu": yaklaşık 80 tur
- "KV metin arka plan görüntüleme animasyonu": yaklaşık 50 tur
- "Design Harness açıklamasını iyileştirme": yaklaşık 10 tur
Açılış yükleme animasyonu ve Ana Görsel (KV) efektleri özellikle çok sayıda etkileşim gerektirdi. Efektler tek seferde bitmedi; onları cilalamak için talimatları katmanladım (örneğin, alttan gelen bir efekt, üst üste binen bulanıklık efektleri vb.).
Claude Design ekran görüntüleri. Bağlam arttıkça doğruluk düştüğü için, her önemli görev için keşfetmek üzere yeni oturumlar oluşturdum.
Ayrı ayrı, Claude Code ile duyarlı destek ve erişilebilirliği iyileştiriyordum, bu da yaklaşık 300 etkileşime ekleniyor. Hissiyat olarak, en çok Hero bölümünü aldığını düşünüyorum.
Claude Design'dan Claude Code'a geçerken Paylaş işlevini kullandım, ancak tüm zip dosyasını "Dışa Aktar" yoluyla aktarmanızı öneririm. "Gönder" daha kolay olsa da, görüntü aktarım sınırlamaları vardır ve yeniden üretim doğruluğu o kadar yüksek değildir.
Rakamlara bakıldığında angarya gibi görünebilir, ancak talimat vermek kolaylaştı. Artık HTML ve CSS'yi tam olarak anlamanız gerekmiyor. Claude Design, ekrandaki öğelere doğrudan yorum ekleyebileceğiniz bir açıklama özelliğine sahiptir. Düzeltmek istediğiniz kısmı işaret ederseniz, neredeyse her ayrıntılı talimat işe yarayacaktır. Bu nedenle, verdiğim talimatlar çoğunlukla üç kategoriye ayrıldı:
Ayrıntıları düzeltmek için açıklamalarla öğeleri işaret etmek. KV metin arka plan görüntülemesi gibi hareketleri kelimelerle iletmek. Tonu "klasik yurtdışı stiline" yeniden hizalamak... Geriye kalan tek gerekli beceri, hareketi ve tonu söze dökme yeteneğidir.
İleri geri sürecine bir örnek olarak navigasyonu ele alalım.
Başlangıçta, fareyle üzerine gelindiğinde kayan bir alt çizgi efekti vardı. Anlaşılması zordu, bu yüzden bir referans uygulama URL'si sağladım ve bunu bir karakter karıştırma efekti olarak değiştirmesini sağladım. Ardından, karıştırma sırasında karakter genişliği değişti ve menü konumlarının kaymasına neden oldu. Genişliği sabitlediğimde, boşluk eşit olmadı. "Hâlâ eşit değil" diyerek geri göndermeme rağmen düzelmedi. Sonunda, genişliği ayarlamayı bıraktım ve navigasyon yazı tipini sabit genişlikli bir monospace olarak değiştirerek sorunu çözdüm. Karakter genişliği sabitse, karıştırma sırasında hiçbir şey hareket etmez. Bu, 5 etkileşim sürdü.
300 etkileşim çoğunlukla bu döngünün tekrarıydı. Yönü göstermek için referans almak istediğim sitelerin veya uygulamaların URL'lerini sağlamak. Ortaya çıkan şeyle ilgili rahatsızlığı, "boşluk artık eşit değil" gibi kısaca söze döküp geri göndermek. Aynı düzeltme iki kez başarısız olursa, ince ayar yapmayı bırakıp öncülü değiştirmek. Sonuçta, hiç uzun bir teknik şartname belgesi yazmadım.
Bu arada, bu sefer pek kullanmasam da, Animasyon Kelime Dağarcığı ve Becerileri adında bir belge var; kullanılırsa talimatları daha verimli hale getirmelidir. https://animations.dev/vocabulary
Üretme Eylemi ve Yargılama Eylemi
Etkileşimlerin içeriğine baktığımda, ortaya çıkanın kalitesini yargılama ve tekrar tekrar geri gönderme süreciydi. Üretme eyleminin kendisi artık neredeyse tamamen yapay zeka tarafından halledilebiliyor. Talimat verirseniz, adaylar hemen belirir. Peki animasyon zamanlaması doğru mu? Yeterli boşluk var mı? Neyin iyi neyin kötü olduğunu yapay zeka yargılayamaz. Yapay zekanın istenen tonu tek seferde çıkarmasını sağlamak hâlâ imkansız. Kaliteyi yükseltmek istiyorsanız, yargılamaktan ve geri göndermekten başka seçeneğiniz yok.
Muhtemelen bu yüzden basit çıktılar bu kalite seviyesine ulaşamıyor. UC Berkeley Bilgi Okulu tarafından, üretken yapay zeka araçlarını kullanan 13 tasarımcı oturumunu gözlemleyen bir çalışma, çıktının "yüksek kaliteli" görünen ancak tanıdık bir stile doğru yöneldiği olguyu "Yakınsama Tuzağı" olarak adlandırıyor.
https://x.com/kgsi/status/2074250174986362999
Bir şeyleri geri gönderme yargısı olmadan, çıktı kimseye ait olmayan, genel bir düzenliliğe yerleşir. 300 etkileşimin çoğu, onu oradan istenen tona geri çekmek için kullanıldı.
Yargılayabilen İnsanlara Ne Olacak?
Yapay zekanın sonunda bu estetik ve kalite yargılarını tamamen üstlenebileceği görüşü var. Bunun bazı alanlarda olacağını düşünüyorum.
Ancak, 300'ün üzerindeki etkileşimin her birinde, rahatsızlığı fark edip geri gönderen bendim ve bu süreçte bunun otomatikleştirildiğine dair hiçbir işaret yoktu. Elbette, bu sadece bir açılış sayfası oluşturmaktan elde edilen n=1. Aynı şeyin diğer tasarım çalışmaları için de söylenip söylenemeyeceğini henüz bilmiyorum.
Bu süreci tamamladıktan sonra tahminim, bir şeyler üreten insanlar için "koltukların" azalacağı yönünde. Bir açılış sayfası tasarlamanın bir hafta sürdüğü bir iş, yapay zekayla yarım günlük ileri geri sürecini içeren bir işle değiştirilecek. O zaman, koltuklarında kalan insanlar, sıralanan adayların önünde saniyeler içinde "Sağdaki teklifi al, ama hareketi yeniden yap" diyebilecek bilgi ve yargı kriterlerine sahip olanlar olacak. Yapay zekada ustalaşırken yargılayabilen insanlara olan talebin aslında artacağını düşünüyorum.
Tasarımcıların cilalaması gereken şey ellerinden gözlerine kayacak. Bu 300 etkileşimde yaptığım yargılar, nihayetinde kendi ellerimle bir şeyler yapma deneyimime dayanıyordu. Öyleyse, bir şeyler yapma sayısının azaldığı bir dünyada, sadece gözleri geliştirmenin bir yolu var mı?
Bir dipnot olarak, "tasarım" becerileri edinebileceğiniz küratörlük sitesi "Parascope" şu anda başarıyla faaliyet gösteriyor 👉 http://parascope.design/
