Ders 4 / 4
ChatGPT ile Master Prompt, Claude ile Mind Map #4 | Claude WordPress Sitesini Canlı Kuruyor
Birlikte ilerleyin
Bu derste ne yapıyoruz
Önceki derste hazırladığımız Master Prompt'un ne işe yaradığını hatırlıyoruz: Claude WordPress paneline girecek, Mind Map'teki aşamaları okuyacak ve eklenti, tema, menü, banner ve Elementor kurulumunu bir insan gibi yapacak. Bu videoda tüm süreci canlı izliyoruz.
Master Prompt'u hazır et
ChatGPT'ye "Master Prompt'u hazırla" dediğinizde 3. bölümdeki gibi bir prompt üretir. Aynı prompt bu dersin Promptlar bölümünde ve GitHub'da da var; buradan kopyalayıp kendi projenize göre düzenleyebilirsiniz.
Claude'da yeni bir proje oluştur
Claude → Create new project. "What are you working on" kısmına projenin adını, "What are you trying to achieve" kısmına projenin amacını yazıyoruz (Promptlar → 1). Proje kaydedilince dosya, görsel ve logo yükleyebileceğiniz projeye özel bir alan açılıyor.
Master Prompt'u yapıştır ve panel adresini ekle
Master Prompt'u sohbet kutusuna yapıştırıyoruz; Shift+Enter ile yeni satıra geçip Claude'un Chrome eklentisi ile gireceği WordPress panelinin adresini ekliyoruz. Bu derste siteyi değil Mind Map'i yaptırıyoruz ama iki süreç birebir aynı.
WordPress tarafını hazırla: FB Mind Map kur
Sıfır bir WordPress kurulumunda Eklentiler → FB Mind Map'i yüklüyoruz, çünkü Master Prompt bu eklentiyi bekliyor. Eklentinin Dashboard sayfası Claude'un çalışacağı ekran. Not: Bu prompt benim; siz kendi projenize göre kendi promptunuzu yazın.
Başlat ve Claude'un onay sorularını cevapla
Claude başlar başlamaz Master Prompt'ta netleştirmesi gereken bir noktayı buldu ve seçenek sundu: önerilen seçenek, ikinci seçenek ve serbest düzeltme. Ben önerilen seçenekle ilerliyorum ama bu onay noktaları önemli: bazen Claude projeyi farklı bir yöne götürebilir.
Tarayıcı yetkisi ver: Allow Claude to use the browser
"Allow Claude to use the browser in [siteniz]" uyarısı geliyor. "Once" sadece bir seferlik, "Always allow" her seferinde bu adrese girmesine izin verir. Ben Always allow diyorum. Bu videoda Claude'un çalışmasını backstage'den izliyorsunuz.
Claude Mind Map'i arka planda kuruyor
Claude tarayıcıya girip tıklaya tıklaya Mind Map'i oluşturuyor. İlk seferde 10, 20 hatta 40 dakika sürebilir, panik yapmayın. Bu yöntem çok token harcıyor; daha az token kullanan Playwright yöntemini ayrı bir videoda anlatacağım. Mind Map bitince Claude siteye başlamak için onay bekliyor.
Onay vermeden önce Mind Map'i incele
Tam ekranda Mind Map'e bakıyoruz: Master Prompt düğümü, hedef site adresi doğrulandı, Mind Map oluşturuldu, sıralı adımlar... Claude bütün adımları kendisi yazdı. Text, HTML, prompt, video ve imaj düğümleri sonradan siteyi yaparken kullanılacak (örneğin yüklediğiniz bir görsel banner olacak). Promptunuzun doğru olup olmadığını ancak son üründe görürsünüz; hataları düzeltip ilk promptu güncellersiniz — Master Prompt böyle olgunlaşır.
Proceed: HTML mockup aşaması
Master Prompt'ta önce mockup, onaydan sonra WordPress demiştik. Proceed diyoruz; sağdaki progress barda Claude'un planı görünüyor: HTML mockup'ı kur, render'ı doğrula, masaüstü ve mobil ekran görüntüsü al, Mind Map durum günlüğünü güncelle ve 7. aşamada onay için dur. Yaklaşık 3 dakika sürüyor.
Mockup'ı aç ve revize et
Claude bir artifact üretti; Publish deyip açıyoruz. Tasarım koyu tema çıktı, biz açık istiyoruz ve hero alanında banner yok. Promptlar → 3 ile açık/koyu iki versiyon ve banner'lı hero istiyoruz. Burada onayladığımız şey nihai site değil, sadece tasarım yönü, renkler ve tonlar; ton ayarını Mind Map'ten de değiştirebilirsiniz.
Mockup onayı ve WordPress'e geçiş
İki versiyon geldi; online randevu, periyodik bakım, fiyat listesi, blog ve harita mockup'ta hazır. Promptlar → 4 ile "açık temayı kullan ve devam et" diyoruz. Claude "Mockup approved, moving to the WordPress build" diyerek plana geçiyor: giriş, WPvivid yedek, Kadence, Elementor, sayfalar, menü.
Claude Chrome'da siteyi kuruyor
Ekranın kenarındaki turuncu parlama ve "Claude started debugging this browser" uyarısı Claude'un Chrome'da çalıştığını gösterir. Sırasıyla genel ayarlar, kalıcı bağlantılar, WPvivid ile yedek, Elementor (kayıt ekranını atlıyor), Kadence teması, iletişim formu, sayfalar ve menü, ardından bütün sayfaların mobil uyumu. Çalışma şekli: ekran görüntüsü al → bak → adım at → tekrar; bu yüzden token maliyeti yüksek, ajanslar için Playwright yöntemi daha uygun.
Son yedek ve site turu
Claude işi bitirip son yedeği alıyor ve bize haber veriyor. Sitede: WhatsApp butonu, harita, açılış-kapanış saatleri ve menü olan bir ana sayfa; hakkımızda, periyodik bakım (fiyatlı), harici fiyat listesi, blog, sık sorulan sorular, iletişim ve randevu formu. Dikkat: Claude iletişim bilgisine bir telefon numarası uydurmuş — bu tür alanları mutlaka kontrol edin ve prompta gerçek bilgileri koyun.
Elementor kontrolü
Asıl soru: Claude siteyi Elementor ve WordPress kurallarına uyarak mı yaptı? Ana sayfayı Elementor ile düzenle diyoruz; başlık, paragraf ve düğmeler gerçek Elementor widget'ları. Yani siteye görsel eklemek, ikon değiştirmek ya da kendi tasarımınıza geçmek için panelden istediğinizi yapabilirsiniz.
Kapanış: 4–5 gün yerine 5 saat
Eskiden temayı hazırlamak 2 gün, çekim 1 gün, montaj 3 gün sürerdi; bu dersi 5 saatte hazırladım. Prompt bir kere yazılır, sonra sizin olur ve tekrar tekrar kullanılır. Yapay zekaya "bana site yap" demekle site yapılmaz: yedek, SMTP, güvenlik, e-posta gibi arka plan süreçlerinin sırasını bilmeniz gerekir; ben bu promptu WordPress'i bildiğim için yazabildim. Yorumlarınızı bekliyorum; yeni eklenti ve yazılımları GitHub hesabımda paylaşıyorum — indirdiyseniz yıldız vermeyi unutmayın.
Bu ders hakkında
Serinin 3. bölümünde ChatGPT ile konuşarak bir Master Prompt hazırlamıştık. Bu derste o Master Prompt’u Claude’a veriyoruz ve Claude’un bir insan gibi çalışmasını baştan sona canlı izliyoruz: önce WordPress panelindeki FB Mind Map eklentisinin içine girip projenin bütün aşamalarını Mind Map olarak kuruyor, sonra bir HTML mockup hazırlayıp onayımızı bekliyor, onaydan sonra da Chrome üzerinden WordPress’e giriyor ve siteyi gerçekten kuruyor.
Bu ders diğer derslerden farklı: ekran kaydında ne yaptığımı anlatmak yerine Claude’un neler yaptığını, hangi ekranların karşımıza çıktığını, hangi noktalarda onay istediğini ve bu onay noktalarında nasıl karar verdiğimi gösteriyorum. Claude yedek için WPvivid’i, tema olarak Kadence’i, sayfa tasarımı için Elementor’u ve iletişim formu eklentisini kendisi kuruyor; sayfaları, menüyü, harita ve WhatsApp butonunu ekliyor, mobil uyumu kontrol ediyor ve işin sonunda tekrar yedek alıyor. Sonuçta ortaya yapay zekanın ürettiği bir HTML şablonu değil, Elementor widget’larıyla kurulmuş, panelden düzenleyebileceğiniz gerçek bir WordPress sitesi çıkıyor.
Örnek proje yine oto servis ve araç bakım web sitesi. Dersin sonunda ana sayfa, hakkımızda, periyodik bakım, fiyat listesi, blog, sık sorulan sorular ve randevu formlu iletişim sayfası hazır oluyor; ana sayfayı Elementor ile açıp Claude’un gerçekten Elementor ve WordPress kurallarına uyup uymadığını birlikte kontrol ediyoruz.
Akış: Master Prompt → Claude Projesi → Mind Map (WordPress panelinde) → HTML Mockup → Onay → WordPress Kurulumu (Chrome üzerinden) → Elementor kontrolü
Dersin altındaki Promptlar bölümünde videoda Claude’a yazdığım metinlerin tamamı, İndirmeler bölümünde ise FB Mind Map eklentisi ve bu dersin GitHub’daki prompt klasörü var. Videoda da söylediğim gibi: bu promptları olduğu gibi kopyalamak yerine kendi projenize göre değiştirin — prompt büyülü bir şey değil, sizin yazdığınız bir plan.
Başlamadan önce
- Serinin 3. bölümü "Yapay Zeka ile Konuşarak Prompt Geliştirme" izlenmiş ve Master Prompt'unuz hazır olmalı (kendi ChatGPT çıktınız ya da Promptlar bölümündeki oto servis örneği)
- Claude hesabı ve Chrome tarayıcıda kurulu Claude in Chrome eklentisi — Claude, WordPress panelini bu eklenti üzerinden kullanacak ve sizden tarayıcı izni isteyecek
- Kurulu ve boş bir WordPress sitesi (canlı sunucu ya da localhost, ikisi de olur) ve yönetici (administrator) girişi — Claude bu siteye gerçekten eklenti ve tema kuracağı için müşteri sitesi değil deneme sitesi kullanın
- FB Mind Map eklentisi sitede kurulu ve aktif olmalı (İndirmeler bölümünden alabilirsiniz)
- Elementor, Kadence, WPvivid ve iletişim formu eklentilerini önceden kurmanıza gerek yok; Master Prompt'a göre Claude kendisi kuracak
- Zaman ve token payı: ilk Mind Map ve site kurulumu 10–40 dakika sürebilir; tarayıcı yöntemi ekran görüntüsü ala ala ilerlediği için fazla token harcar, planınızı buna göre yapın
FB Software SolutionsDersVideolar ücretsiz. Hesap; dosyaları, promptları ve nerede kaldığını açar.