Blog
Yapay Zeka 2 Dakikada Tam Bir WordPress Sitesini Nasıl Oluşturur
PAGEnza'nın site oluşturucusunu destekleyen tasarım yetkisi sistemi, palet oluşturma ve Gutenberg blok montajına derinlemesine bir bakış.
Herkes PAGEnza'ya bir işletme açıklaması yazıp oluştur düğmesine bastığında, arka planda oldukça karmaşık bir şey olur — yaklaşık 90 saniyede. Bu gönderi tam olarak ne olduğunu açıklıyor.
Şablonlarla Sorun
Çoğu yapay zeka web sitesi oluşturucu şöyle çalışır: bir şablon seçerler, metninizi değiştirirler ve buna "yapay zeka tarafından oluşturulmuş" derler. Sonuç, o platformda oluşturulan diğer tüm sitelere benzer.
PAGEnza farklı çalışır. Şablon yok. Her site boş bir Gutenberg tuvalinden başlar ve Tasarım Yetkisi adını verdiğimiz bir dizi tasarım kuralından algoritmik olarak oluşturulur.
Tasarım Yetkisi Nedir?
Tasarım Yetkisi, belirli bir site için her görsel ve yapısal kararı açıklayan yaklaşık 8.000 token'lık yapılandırılmış bir istemdir. Herhangi bir yapay zeka çağrısı yapılmadan önce, girdinize dayanarak Python'da oluşturulur.
Altı bölümden oluşur:
Bölüm A — Marka Kimliği: sektör, işletme adı, ton (örneğin "profesyonel" ve "oyuncu" arasında), hedef kitle.
Bölüm B — Renk Sistemi: algoritmik olarak oluşturulan ve WCAG AA kontrast kurallarına karşı doğrulanan 4 renkli bir palet (mürekkep, bg1, bg2, vurgu). Her palet gerçek parlaklık matematiği ile kontrol edilir — tahminlerle değil.
Bölüm C — Tipografi: 80'den fazla Google Font'tan seçilen bir yazı tipi üçlüsü (başlık / gövde / vurgu), sektör arketipine göre filtrelenir ve latin-ext karakter desteğini içerdiği doğrulanır.
Bölüm D — Düzen Taslağı: sayfa yapısı — hangi bölümlerin görüneceği, hangi sırada ve hangi varyantla (örneğin tam genişlikte resimle kahraman veya bölünmüş düzenle kahraman).
Bölüm E — Tasarım Kısıtlamaları: kenar yarıçapı stili (keskin / yumuşak / yuvarlak), bölüm ayırıcı şekilleri, resim işleme, boşluk sistemi.
Bölüm F — İçerik Kuralları: metnin nereye gideceği, başlıkların nasıl yapılandırılacağı, hangi CTA'ların görüneceği.
Paletler Nasıl Oluşturulur
Renk, çoğu yapay zeka aracının başarısız olduğu yerdir. Bir LLM'den renk seçmesini istemek, izole edilmişken iyi görünebilecek ancak erişilebilirlik testlerini geçemeyen — veya sadece sıradan görünen rastgele hex kodları verir.
Farklı bir yaklaşım benimsiyoruz. Palet sistemimiz şöyle çalışır:
- Sektörünüze ve arketipinize (örneğin "lüks", "cesur", "toprak tonları") dayanarak 20 önceden denetlenmiş palet grubundan birini seçeriz
- Her grubun içinde,
mürekkeprenginin tüm arka planlara karşı ≥4.5:1 kontrastı olduğu bir palet seçeriz Vurgurengininbg1vebg2'ye karşı ≥3.0:1 kontrastı olduğunu doğrularız- İki arka plan renginin zıt renk sıcaklıklarına (biri sıcak, biri soğuk) sahip olmasını sağlarız, böylece bölümler farklı hissettirir
Bir palet herhangi bir kontrolü geçerse, otomatik olarak değiştirilir. Bu adımda LLM müdahalesi yok — bu saf matematik.
Gutenberg Blokları Nasıl Birleştirilir
Tasarım Yetkisi hazır olduğunda, aşağıdaki özellikleri belirten katı bir istemle Gemini Flash'a gider:
- Hangi blokların izin verildiği (yaklaşık 40 Gutenberg blok türünün beyaz listesi)
- Her blok türü için gerekli öznitelikler
- Çıktı için tam JSON formatı
Yapay zeka, HTML veya React değil, gerçek WP blok işaretlemesi olan ham Gutenberg blok JSON'u döndürür. Bu JSON daha sonra birkaç doğrulama aşamasından geçer:
- Şema doğrulama — gerekli öznitelikler mevcut, bilinmeyen blok türü yok
- CSS sınıfı temizleme — icat edilen sınıf adları kaldırılır, tasarım sistemi sınıflarımızla değiştirilir
- Onarım adımları — boşluk öznitelikleri senkronize edilir, kapak bloğu gradyanları normalleştirilir, şekil ayırıcılar eklenir
Sonuç doğrudan WP REST API aracılığıyla WordPress'e yüklenir ve sitenin ana sayfası olarak etkinleştirilir.
Her Siteyi Benzersiz Kılan Nedir
Her oluşturma arasında birkaç şey değişir, aynı sektör için bile:
- Palet: 20'den fazla grup, her biri birden fazla paletle
- Yazı tipi üçlüsü: arketip başına 6+ kombinasyon
- Bölüm sırası ve varyantları: kahraman düzeni, istatistik stili, özellik kartı düzenlemesi
- Şekil ayırıcılar: organik ve geometrik, genlik/frekans varyasyonları
Blob şekilleri: organik sektörler için resim ve kart blob'ları 12 varyanttan rastgele oluşturulur
Sonuç, aynı gün oluşturulan iki pizza restoranının farklı renklere, farklı yazı tiplerine, farklı düzenlere sahip olmasıdır — ve her ikisi de WCAG AA uyumlu olacaktır.
Sonraki Adımlar
Şu anda üzerinde çalışıyoruz:
- Çok sayfalı oluşturma — aynı yetkiden
/hakkimizda,/hizmetlerve/iletisimsayfaları oluşturma - Canlı önizleme — site WordPress'e dağıtılmadan önce görmek
- Stil aktarımı — beğendiğiniz bir sitenin ekran görüntüsünü yükleyip tasarım DNA'sını çıkarma
Sistemi uygulamada görmek isterseniz, oluşturucu denemek için ücretsizdir — ilk site için hesap gerekmez.