Araçlara güvenirseniz, hızlıca "idare eder" görünen bir şey elde edebilirsiniz. Ancak sonuç genellikle daha önce bir yerlerde gördüğünüz, sıradan bir görünüme sahip olur. Bu, "yapay zeka görünümünün" özüdür ve şu anda en büyük farkın yaratıldığı noktadır.
Claude Code (makeLP projesi) üzerine kurulu bir üretim hattı kullanarak aynı temelden birbirinden farklı kişiliklere sahip üç farklı site oluşturma deneyimime dayanarak, tekrarlanabilir bir yöntemi kısaca özetleyeceğim.
Bir Fabrika, Tek Seferlik Sihirli Numara Değil
Bir kere iyi bir şey üretseniz bile, tekrarlanabilir değilse bir varlık haline gelmez. Bu yüzden onu dört aşamadan geçiriyoruz.
Üretim → Kalite → Doğrulama → İyileştirme.
Destekleyici dört bileşen türü vardır:
・Beceriler: Metodolojik şablonlar (oluşturma için motion-lp-builder, yapay zeka karşıtı prensipler için frontend-design, toplu sınıflandırma için bulk-categorize)
・Alt-ajanlar: Uzmanlaşmış roller (çizim ve eleştiri için lp-visual-verifier, referansları şartnameye dönüştürmek için design-reference-analyst, kategorizasyon için bulk-classifier)
・Referans Kütüphanesi: "Site türü × sektör"e göre sınıflandırılmış 4.074 SANKOU listesinden oluşan bir raf
・Gelişen Kurallar: CLAUDE.md (standart akış/disiplin) + Hafıza (eleştirileri kalıcı hale getirme)
Hazırlık ve Ön Koşullar
Temel yapı Vite + React + GSAP (ScrollTrigger) + Lenis olarak sabitlenmiştir. Anahtar, "kaydırma ilerlemesini doğrudan üretime bağlamaktır." Kaydırma miktarı, ifade için girdi haline gelir (arka plan videosu kare silkme, sabitleme, paralaks, giriş açılımları).
Konuya göre seçilen iki tür varlık vardır:
・Yapay Zeka Üretimi (Higgsfield): Tatil köyü gibi gerçekçi görüntüler gerektiğinde
・Kod Çizimi (SVG/Canvas/CSS): Bu, B2B ve teknoloji için daha "doğru" hissettirir. Kredi gerekmez
Emin değilseniz, "fotoğraf mı yoksa diyagram mı olmalı?" sorusuna göre karar verin.
ADIM 1: Üretim
Sıra çok önemlidir. Hemen yazmaya başlamayın; önce bir marka brifingini (kime neyi vaat ettiğiniz, renk, tipografi, hareket yoğunluğu) tek bir sayfada sağlamlaştırın. Aynı temel yapıyla bile, çıktıyı farklılaştıran kod değil brifingdir.
Yapay zeka üretimini seçerseniz, kredi disiplinine uyun:
- Bakiyeyi kontrol edin
- get_cost ile ön tahmin alın
- Önce bir kahraman görseli oluşturun
- Dokuyu birleştirmek için bunu referans olarak kullanarak diğerlerini oluşturun 5. Tamamlanmasını bekleyin ve indirin.
Uygulama için, üretimi doğrudan kaydırmaya bağlayın (kare silkme/sabitleme/paralaks/açılım). Ve her zaman sağlam yapın: prefers-reduced-motion ile statik yedek, eksik varlıklar olsa bile npm run dev'in çalışmasını sağlayın ve dokunmatik ve canvas için güç tasarrufunu göz önünde bulundurun.
ADIM 2: Kalite - Seri Üretim Tasarımdan Kopmak
"Yapay zeka görünümünü" altı parçaya ayırın ve ortadan kaldırın:
- Aşırı gradyan kullanımı (özellikle metin ve mor gradyanlar) → Tek bir renk + bir vurgu rengine indirgeyin
- Standart parçaları standart bir sırayla dizmek → Yapının kendisi için benzersiz bir konseptle oluşturun (örneğin, tüm sayfa bir iş akışı tuvali olarak)
- Yuvarlatılmış "şişirilmiş" sayılar → Somut olun (örneğin, "ayda 600 fatura → 0" öncesi/sonrası)
- Emoji simgeleri → Kullanmayın. Gerekirse SVG çizin
- Blokların sadece sol kenarında renkli çubuklar → Kullanmayın. Rengi yüzeylerde, kenar boşluklarında ve tipografide kullanın
- Her şeyin simetrik, tekdüze, yuvarlatılmış ve yumuşak gölgeli olması → Asimetri ve kenar boşluğu gücünde varyasyonlar ekleyin
Prensip şudur: renk şeması tek renk + bir vurgu, tipografi tek bir karakteristik yazı tipiyle itilir, kenar boşluklarında güç ve "odaklanma" amacıyla hareket.
ADIM 3: Doğrulama - Derlemenin Geçmesi İyi Olduğu Anlamına Gelmez
Kod geçse bile, sabitlemeler, kare silkmeler ve açılımlar gerçek ekranda bozuk olabilir. Bu nedenle, lp-visual-verifier bir geliştirme sunucusu başlatır, puppeteer-core aracılığıyla mevcut bir Chrome/Edge'i çalıştırır, her bölümü işler ve yakalar ve ardından "gözle eleştirir."
Üç kilit nokta:
・Doğrulayıcı kodu düzeltmez (nedeni izole etmek için)
・prefers-reduced-motion ile yakalama, sabitlenmiş alanların ve açılımları bekleyen alt bölümlerin statik görselleştirilmesine olanak tanır
・Her zaman mobil genişliklerde de yakalayın
Sadece bir tur eleştiri → düzeltme, kaliteyi önemli ölçüde artırır. Başarılı bir derlemeden tatmin olmayın.
ADIM 4: İyileştirme + Referans Kütüphanesi
design-reference-analyst, referans siteleri okur ve bunları sadece izlenimlerden ziyade "ortak kalıplara" ve "iyileştirme şartnamelerine (nerede ve nasıl)" çevirir. sankou-reference kütüphanesi, iki eksende sınıflandırılmış 4.074 öğeye sahiptir ve "yalnızca turizm × özel LP örneklerini" anında çekmenize olanak tanır (içerik her satırdaki notlardan bellidir).
Toplu sınıflandırmanın kendisi de şablonlanmıştır (bulk-categorize: böl → alt-ajan paralelleştirmesi → birleştirme → düzeltme).
Gelişen Kurallar
Bu en büyük keşif. Müşteri eleştirilerinin tek seferlik bir düzeltmeyle kalmasına izin vermeyin; bunları kalıcı kurallara yükseltin.
Örnek:
"Emoji simgeleri yapay zeka gibi görünüyor" "Soldaki renk çubukları yapay zeka gibi görünüyor" → Bunları hafızada ve CLAUDE.md'de yasaklı kurallara dönüştürün → O andan itibaren her sitede otomatik olarak bunlardan kaçının.
Başka bir deyişle, ne kadar çok kullanırsanız, "yapay zeka görünümü" o kadar kaybolur. Becerilere ve alt-ajanlara sahip olmak aynı zamanda kolay yatay genişlemeye de olanak tanır.
Üç Farklı Site Oluşturma
・AZURE BAY (Yaz havuzu LP / B2C): Turkuaz + Altın. Higgsfield tarafından oluşturuldu. Kaydırmada havuz videosunu kare silkme.
・FLOWGEAR (n8n uygulama desteği / B2B): Tek mercan rengi + düz, görsel üretimi yok. Sayfanın tamamı bir n8n iş akışı tuvali. Şişirilmiş sayılar yerine somut öncesi/sonrası.
・STATIK (Kurgusal bir stüdyo için deneysel laboratuvar): Siyaha yakın + tek renk + bir asit rengi. Canvas kinetik metin ızgarası + özel imleç. Sadece bir LP'den ziyade sürükleyici bir deneyim.
Ortak noktalar "tek renk + bir vurgu," "somut konuşma" ve "tek bir konseptle atılım." Araçları konuya göre seçmek, ortalamadan uzaklaşmanın ilk adımıdır.
Kendiniz Oluşturmak İçin Minimal Yapılandırma
- Kaydırmaya bağlı temeli şablonlayın (her seferinde sıfırdan yazmayın)
- Seri üretim karşıtı prensipleri tek bir kural sayfasına koyun (gradyan/emoji/sol çubuk yok...)
- Oluşturduktan sonra her zaman gerçek ekranı yakalayın ve inceleyin
- Eleştirileri her seferinde kurallara yükseltin
Yaygın tuzaklar ve karşı önlemler: Kredi israfı (önce kahraman + ön tahmin), doğrulama eksiklikleri (gerçek ekranları yakalayın), hareket erişilebilirliği (reduced-motion) ve mobil bozulmalar (her zaman farklı genişliklerde yakalayın).
Özet
Yapay zeka "hızlı bir eldir," "göz" değildir.
Gözü (doğrulama) ve kuralları (öğrenme) sisteme dahil ettiğiniz an, yapay zeka tarafından yapılan siteler yapay zeka görünümünden kurtulur.
