Kod yazmadan müşteriye site kurabiliyorsun ama sonucun yapay zeka üretimi gibi durmaması tek bir şeye bağlı: modele referans vermek. Boş bir promptla site isteyince ortalama bir sonuç çıkıyor. Markanın kendi renklerini, kendi görsellerini ve mevcut sayfa yapısını verince sonuç değişiyor.
Aşağıda altı adım var. Sıra önemli, çünkü her adım bir sonrakine referans üretiyor.
1️⃣ Markanın kimliğini çek
Sıfırdan renk ve tipografi seçme. Markanın zaten bir kimliği varsa onu al.
Claude uygulamasının Kod bölümünü aç, boş bir klasörü proje olarak seç ve şunu yapıştır:
Şu siteyi incele ve markanın görsel kimliğini çıkar: [müşterinin mevcut site adresi]
Bana şunları bir dosyaya yaz:
- Ana renk, ikincil renk ve arka plan rengi (kod olarak)
- Kullanılan yazı tipi ve başlık boyutları
- Logo dosyasının adresi
- Sitenin genel tonu: ciddi mi, samimi mi, lüks mü
Sosyal medya hesaplarına da bak, oradaki görsel dili de yaz.
Bu dosya sonraki bütün adımların referansı oluyor. Her yeni sohbette bu dosyayı gösteriyorsun.
2️⃣ Ana sayfa görselini üret
Site için gereken görselleri üret. Bir tane temiz ana sayfa görseli yeter.
Görsel üretirken bir önceki adımda çıkardığın renkleri prompta yaz. Renkleri yazmazsan model kendi seçtiği renkleri koyuyor ve site ile görsel birbirini tutmuyor.
Ana sayfa görselinin hareketli halini de üretmen mantıklı. Hareketli bir açılış görüntüsü siteyi tek başına premium gösteriyor.
3️⃣ Görseli Claude'a ver ve siteyi kurdur
Bu adımda sitenin iskeleti kuruluyor. Görseli veriyorsun ve etrafına siteyi kurmasını istiyorsun.
Ekte bir ana sayfa görseli var ve bir de marka kimliği dosyası.
Bu görselin etrafına bir site kur. Sayfalar şunlar olsun: [sayfa listesi]
Kurallar:
- Marka kimliği dosyasındaki renkler ve yazı tipi dışına çıkma
- Telefonda düzgün görünsün, önce telefonu düşünerek yap
- Her bölümün tek bir işi olsun, bir bölüme iki mesaj sıkıştırma
- Sayfa açılış hızını düşürecek ağır dosya koyma
Kurmadan önce bana sayfa planını yaz, onaylayınca kur.
Planı önce istemek adım atlamayı önlüyor. Model kurmaya başladıktan sonra yapıyı değiştirmek daha uzun sürüyor.
4️⃣ Mevcut siteyi referans olarak ver
Sitenin daha oturmuş görünmesini istiyorsan müşterinin mevcut sitesinin kaynak kodunu Claude'a ver.
Amaç kopyalamak değil. Amaç, hangi bölümlerin hangi sırayla geldiğini modele göstermek. Mevcut sitede zaten çalışan bir sıralama varsa onu koruyup üstüne yeni tasarımı kurmak, sıfırdan bir sıralama uydurmaktan iyi sonuç veriyor.
Şu sitenin bölüm sıralamasını incele: [mevcut site adresi]
Hangi bölüm hangi sırayla geliyor ve her bölüm hangi soruyu cevaplıyor, bunu listele.
Sonra bizim yeni sitede aynı sıralamayı kur ama tasarımı bizim marka kimliğimizle yap. İçeriği kopyalama, sadece sıralamayı al.
5️⃣ Kendi gözüyle kontrol ettir
Bu adım en çok atlanan ve en çok vakit kazandıran adım.
Siteyi tarayıcıda aç, hem telefon hem masaüstü boyutunda ekran görüntüsü al ve görüntülere bak.
Bozuk duran, taşan, üst üste binen ne varsa düzelt. Düzelttikten sonra tekrar görüntü al.
Bana öncesi ve sonrası görüntülerini göster.
Modelin yazdığı kodun çalıştığını varsayması, teslim öncesi en çok sorun çıkaran şey. Kendi gözüyle bakmasını istediğinde bunu kendisi yakalıyor.
6️⃣ Yayına al
Site oturduğunda projeyi GitHub'a bağlayıp Vercel üzerinden yayına alıyorsun. Bu adımı da Claude'a yaptırabilirsin, bağlantı kurma ve yayınlama işini kendisi yapıyor.
Yayından sonra kontrol edilecek üç şey var: telefonda açılış hızı, sayfa başlıklarının aramada nasıl göründüğü ve iletişim formunun gerçekten mesaj gönderip göndermediği. Üçünü de teslim etmeden önce sen dene.
⚠️ Üç tuzak
Renkleri yazmadan görsel üretmek. Görsel ile site birbirini tutmuyor ve iş baştan yapılıyor.
Yüksek çözünürlüklü görsel ve video koymak. Sayfa ağırlaşıyor, açılış hızı düşüyor. Web için gereken çözünürlük düşündüğünden az.
Müşteriye ilk taslağı göstermek. İlk taslak her zaman düzeltme ister. Kendi kontrolünü yapmadan gösterince müşterinin aklında ilk izlenim olarak eksik hali kalıyor.
Özetle
- Sonucun yapay zeka üretimi gibi durmaması referans vermeye bağlı: renk, görsel ve mevcut sayfa yapısı.
- Marka kimliğini bir dosyaya çıkarıp her sohbette o dosyayı göstermek, tekrar tekrar anlatmayı bitiriyor.
- Görselleri site kurulmadan önce üret, çünkü site onların etrafına kuruluyor.
- Mevcut siteden içeriği değil bölüm sıralamasını al.
- Teslimden önce modele kendi yaptığı sayfanın ekran görüntüsünü aldırıp baktır.
Sen hangi aşamada takılıyorsun: görsel mi tutmuyor, site mi yapay zeka üretimi gibi duruyor? Yaz, o adımı birlikte açalım.