Yapay zeka web tasarımı: site bitmeden önce beş kapı

Yapay zeka web tasarımı bugün makul görünen bir ana sayfayı bir fincan kahve hazırlamak kadar kısa sürede üretebiliyor. Bu hız gerçek, ama tuzak da tam burada: üretilmiş bir sayfa, bitmesinden çok önce bitmiş gibi görünür. Bitmemiş kısımlar ise (kontrast, başlık sırası, aynalanmış yerleşimler, token disiplini) müşterinin lansmandan üç hafta sonra fark ettiği şeylerdir. Aşağıda hızı koruyup sürprizleri elemek için kullandığımız sıra var: her biri net bir geçme ya da kalma koşulu olan beş kapı.

Üretilmiş bir site neden bitmiş gibi görünür, oysa değildir?

Çünkü model, bir ekran görüntüsünde neyin iyi göründüğünü optimize eder. Hero bölümü, üç özellik kartı, bir referans satırı, bir alt bilgi. Bu parçaların her biri istatistiksel olarak tanıdıktır, bu yüzden sayfa ilk bakışta profesyonel görünür. Bir ekran görüntüsünün gösteremediği şeyler ise sitenin müşteri teslimini atlatıp atlatamayacağını belirler.

Erişilebilirlikle başlayalım. WebAIM Million 2026 raporu en çok ziyaret edilen bir milyon ana sayfanın 95.9%'inde tespit edilebilir WCAG 2 hataları buldu ve bunların 83.9%'unda düşük kontrastlı metin vardı. Bu veriyle eğitilmiş bir model o webi yeniden üretir. Size krem rengi bir zemin üzerinde soluk gri bir açıklama yazısını tam bir özgüvenle verecektir.

İkinci görünmez sorun, tasarım kararlarının nerede yaşadığıdır. Üretilmiş bir sayfa, renklerini, boyutlarını ve boşluklarını işaretlemenin içine dağılmış sabit değerler olarak taşıma eğilimindedir. Gelecek çeyrek marka mavisini değiştirdiğinizde kırk bloğu aramanız gerekir. Bu bir bakım faturasıdır ve faturayı modeli değil, serbest çalışan öder.

Dolayısıyla faydalı soru "Yapay zeka bu siteyi tasarlayabilir mi?" değildir. Taslak üretebilir. Faydalı soru, hangi kararları ona bırakacağınız ve işini nerede kontrol edeceğinizdir. Beş kapı bu soruyu yanıtlar.

Birinci kapı: araca dokunmadan önce brief'i yazın

Yapay zekanın bu işteki en hayal kırıklığı yaratan çıktılarının çoğu tek satırlık bir istemden gelir. "Casablanca'daki bir fırın için site" cümlesi modele her şeyi uydurma izni verir: kitle, ton, sayfa listesi, harekete geçirici mesajlar. Bunları gördüğü binlerce fırın sitesinin ortalamasından uydurur.

İşe yarayan bir brief yarım sayfaya sığar. Kim ziyaret eder ve ilk on saniyede ne yapmaya gelmiştir? Mutlaka var olması gereken üç sayfa hangileridir? Site için tek bir hedef eylem nedir: rezervasyon, arama ya da sipariş? Müşterinin beğendiği iki site ve sevmediği bir site hangileridir? Hangi diller olacak ve yön nedir? Site Arapça ya da İbranice yayınlanacaksa bunu şimdi söyleyin, yerleşim onaylandıktan sonra değil.

Son satır göründüğünden daha önemlidir. Sağdan sola yazım bir çeviri işi değil, bir yerleşim özelliğidir. Hiçbir şey söylenmemiş bir model, metni sola hizalı bir tasarıma yapıştırır. Yönü brief'e koymak, aracın hangi yerleşimleri önereceğini değiştirir ve bunun bedeli bir cümledir.

"Modern ve temiz" gibi sıfatları atlayın. Bunlar bilgi taşımaz. "Yoğun ve editoryal, bir gazetenin birinci sayfası gibi" ise çok şey taşır.

İkinci kapı: sayfa değil, yön isteyin

Bu işte yapay zekanın en ucuz kullanımı keşiftir. Her biri için üç ila beş farklı yönü kaba yerleşimler ve yazı tipi eşleşmeleri olarak isteyin, inşa etmeden önce birini seçin. Altı çizim birkaç dakikaya mal olur. Müşterinin reddettiği bir sayfayı yeniden kurmak ise bir öğleden sonra demektir.

Burada disiplin, bunları ucuz tutmaktır. Aracın her yön için üretilmiş fotoğraflarla tam sayfalar üretmesine izin vermeyin. Müşteriler fotoğraflara âşık olur ve sonra yerleşimi görsellerden ayıramazlar. Gri kutular ve gerçek başlıklar yeterlidir. Müşteri üç gri kutulu yerleşim arasında seçim yapamıyorsa sorun brief'tedir ve bunu bedavaya öğrenmiş olursunuz. Yön turu bittiğinde seçtiğiniz yönü tek bir cümleyle tarif edebilmelisiniz. Bu cümleyi yazamıyorsanız, henüz hangi sitenin yapılacağını bilmiyorsunuz demektir ve inşaya geçmek için erken.

Araç kategorisi burada önemlidir ve açık konuşmakta fayda var. 10Web gibi tam site üreticileri bir istemden, bir URL'den ya da bir Figma dosyasından eksiksiz bir WordPress sitesi kurar; tek site için yıllık faturalandırmayla aylık 10 dolardan başlayan planları vardır. Durable gibi barındırılan oluşturucular birkaç yanıttan yaklaşık yarım dakikada bitmiş bir küçük işletme sitesi çıkarır. İkisi de ikinci kapıda mükemmeldir, dördüncü kapıda zayıftır, çünkü tasarım kararlarını size göstermek yerine kendileri sahiplenirler. Seçenek görmek için kullanın. Bakımını yıllarca yapacağınız bir sitenin nihai inşası için kullanmaya karşı temkinli olun.

Üçüncü kapı: inşadan önce tasarımı theme.json'a sabitleyin

Çoğu iş akışının atladığı kapı budur ve bakılabilir bir siteyle sadece demo olabilecek bir siteyi birbirinden ayıran da budur. Bir yön seçildikten sonra kararlarını tokenlara çevirin ve bunları theme.json dosyasına yazın: renk paleti, yazı aileleri ve boyutları, boşluk ölçeği, içerik genişliği. Bundan sonra her blok sabit bir değere değil, bir token slug'ına referans versin.

theme.json referansı tam olarak bu amaç için var. Bir block theme'e palet ve ölçekleri tek bir yerde bildirme imkânı verir ve düzenleyici bunları kontrol olarak sunar. Marka mavisi değiştiğinde tek bir satırı değiştirirsiniz. Müşteri Site Editor'ü açtığında serbest bir renk çemberi yerine sizin paletinizden seçim yapar; bu da markaya uymayan düzenlemelerin bütün bir kategorisini sessizce engeller.

Burada yapay zeka farklı bir şekilde karşılığını verir. Ona seçilen yönü verin, bir token seti isteyin ve sonra iki kurala göre kontrol edin. Her metin ve arka plan çifti normal metin için 4.5:1 oranına ulaşmalıdır (WCAG AA eşiği), yani oranları modelin iddiasına güvenmek yerine kendiniz hesaplayın. Ve ölçek küçük olmalıdır: beş ya da altı boşluk adımı, altı boyutluk bir yazı ölçeği. Modeller on dört birbirine çok benzer gri vermeyi sever. On birini silin.

Bu kontrolün yararı, sonraki değişikliklerde ortaya çıkar. Yeni bir sayfa eklendiğinde ya da bir kampanya renk değiştirdiğinde, değişiklik tek bir token üzerinden yapılır ve tasarımın geri kalanı tutarlı kalır. Token dışına çıkan her değer ise bir sonraki bakım turunda sorun çıkarır. Bu kapının tutup tutmadığını pratikte ölçmenin bir yolu var: bitmiş temada herhangi bir şablonda bir hex kodu arayın. Bulursanız, bir karar sistemden kaçmış demektir.

Dördüncü kapı: yerel bloklarla inşa edin, üreticiyi döngünün dışında tutun

Şimdi inşa edin. Modelin önerdiği yapı genellikle korumaya değerdir: bölüm sırası, sütun mantığı, yoğun ve açık alanlar arasındaki ritim. Ürettiği işaretleme ise genellikle değerli değildir. Bunun nedeni basit: üretilmiş işaretleme çoğunlukla satır içi stiller, sabit genişlikler ve bloklara yapıştırılmış yardımcı sınıflar taşır. Bunları elle temizlemek, baştan kurmaktan daha uzun sürer. Onaylanan yapıyı Group, Columns, Cover ve Query Loop gibi çekirdek bloklarla, sizin tokenlarınızı kullanarak yeniden kurun ve üretilen çıktıyı kaynak dosya değil, referans çizim olarak görün.

Bu daha yavaş görünür. Deneyimimize göre ikinci sayfadan itibaren daha hızlıdır, çünkü yerel bloklar tokenları devralır, Site Editor'e yanıt verir ve müşteri onları düzenlediğinde doğru davranır. Stilini sabit kodlayan üretilmiş işaretleme bunların hepsiyle çatışır. Sayfa oluşturucular aynı takasın öteki ucunda durur. Divi, Şubat 2026'da Divi 5 olarak yeniden yazıldı; Pro katmanında yıllık 277 dolara Divi AI ile geliyor ve çıktısı Divi'nin modül sistemi içinde kalıyor. Divi'ye standartlaşmış bir ajans için bu meşru bir tercihtir. Ama bu bir block theme'den farklı bir üründür, farklı bir çıkış maliyeti vardır ve bu çıkış maliyetini teklifinize dahil etmelisiniz.

Yapay zeka üretiminin inşanın içinde yer bulduğu yer tekrarlayan katmandır: bir fiyatlandırma bölümünün varyasyonu, gerçeğine benzeyen yer tutucu metinler, müşterinin karşılaştırması için alternatif hero düzenleri. Bunların her birine, düzeltilip kaydedilecek bir taslak desen gözüyle bakın, asla bitmiş bir iş olarak değil.

Dürüst bir sınır var: proje gerçek etkileşim gerektiriyorsa (filtrelenmiş arşivler, özel sorgu mantığı, JavaScript davranışı içeren her şey), hiçbir üretici bunu taşıyamaz. Bu kısmı bir geliştirici yazar ve yapay zekanın katkısı kenarlarda kalır.

Beşinci kapı: bir ekran görüntüsünün gösteremediklerini denetleyin

Her sitede aynı kısa denetimi, aynı sırayla çalıştırın ki bir ruh hali olmaktan çıkıp alışkanlığa dönüşsün.

Birincisi kontrast. Gerçekte oluşan renk çiftlerini kontrol edin; görseller üzerindeki metni ve modelin hiç düşünmediği devre dışı ve üzerine gelme durumlarını da dahil edin. İkincisi başlık yapısı: tek bir H1, atlamadan inen başlıklar ve sadece büyük olduğu için seçilmiş hiçbir başlık. Üçüncüsü klavye: sayfanın tamamında sekmeyle gezinin, odağın görünür olduğunu ve sıranın okuma sırasını izlediğini doğrulayın. Dördüncüsü, anlam taşıyan her görselde alt metin, anlam taşımayanlarda ise boş alt özniteliği.

Beşinci kontrol, bu siteyi genel bir kontrol listesinden ayıran kontroldür: yön. Sitenin Arapça ya da İbranice bir sürümü varsa, onu sağdan sola görüntüleyin ve aynalanmamış olanları arayın. Yanlış yöne bakan ikonlar, metnin yanına düşen bir hero görseli, mantıksal bir özellik olan margin-inline-start yerine yazılmış margin-left gibi dolgular. Bunlar bu kapıda bulunduğunda düzeltilmesi ucuzdur; müşterinin ekran görüntüsünde bulunduğunda ise utandırıcıdır.

Denetim kanıtını saklayın: sayfa başına bir önce-sonra çifti, neyin başarısız olduğu notu ve neyi değiştirdiğiniz notu. Bu, "yapay zeka destekli" iddiasını belirsiz bir iddiadan teslim edilebilir bir çıktıya çevirir. Ve müşterinin kendisinin denediği bir üreticiye karşı ücretinizi haklı çıkaran teslim belgesindeki paragraf budur.

Tek istemle site kuran araçlara ne demeli?

Yerleri var, ama dar bir yerleri. Tek istemli bir araç, bir sunum için atılabilir bir prototip, bir hafta sonu etkinliği için açılış sayfası ya da ne istediğini tarif edemeyen bir müşteri için görsel bir başlangıç noktası üretmek için iyi bir yoldur. Framer, yapay zeka site üreticisini serbest bir tuval ve ücretsiz bir katmanla birleştirir. Bu da onu tam olarak böyle hızlı, tek kullanımlık görsel işler için iyi yapar ve Basic planı ayda 10 dolardan başlar.

Site WordPress üzerinde yaşayacaksa, teknik olmayan bir müşteri tarafından düzenlenecekse ya da sağdan sola bir kitleye hizmet edecekse atlayın, çünkü çıktıyı zaten bloklarla yeniden kuracaksınız. Prototip yine de değerliydi; sayfa ise yayımlanmaya değmezdi. Elinizde hangisinin olduğunu bilmek, zamanın en büyük kısmını kurtarır.

Bir sonraki brief'inizde neyi deneyebilirsiniz?

Canlı bir projeyi seçin ve yalnızca birinci ve üçüncü kapıları çalıştırın. Yarım sayfalık brief'i yazın, ardından tek bir sayfa var olmadan seçilen paleti ve ölçekleri theme.json dosyasına sabitleyin. Süreyi tutun ve son sitenizin kararlı bir tasarıma ulaşmasının ne kadar sürdüğüyle karşılaştırın. Sonuç tutarsa, diğer üç kapıyı birer birer ekleyin. Son sitenizde hangi kapı sizi en çok sorundan kurtarırdı?