Ders 1 / 1

Claude ile Site Yapıyoruz — Proje 1: Teknik Servis Sitesi

Beginner · TR · 8 adım

Birlikte ilerleyin

Repoyu indir

GitHub sayfasında yeşil Code → Download ZIP. İçinde mockup, 3 prompt, build kit, logo ve kamera görüntüleri var.

https://github.com/fatihborasoftware-sudo/kalkan-teknik

WordPress kur, connector’ı yükle

Boş bir WordPress kur. Eklentiler → Yeni Ekle → Eklenti Yükle ile Claude Connector zip’ini yükle. Claude Connection → Kurulum → Sunucu kontrolü; Genel Bakış’ta seviyeyi Site maintainer yap.

Claude’a connector’ı ekle

Claude → Ayarlar → Connectors → Add custom connector. Adres, Kurulum sayfasındaki tam connector adresi olmalı; sonra Allow.

https://siteniz.com/wp-json/fbsa/v1/mcp

Mockup’ı yaptır

1. prompt’a firma adını, şehrini ve hizmetlerini yaz. Claude koyu lacivert-amber, canlı kamera panelli bir tek sayfa tasarlar. Beğenene kadar aynı sohbette düzelttir.

Gerçek kamera görüntüleri

Kamera kutuları için Pexels’ten 4 ücretsiz klip seçtik, siyah-beyaz yaptık ve 6–8 saniyelik sessiz döngülere kısalttık (~180 KB). Repodaki assets/video klasöründe hazır.

Build kit’i hazırlat

Mockup’ı onaylayınca 2. prompt’u gönder. Claude sayfayı, CSS’i, formu, menüyü, footer’ı ve tema ayarlarını tek bir kit dosyasında toplar. Hazır kit repoda: Kalkan-build-kit.md.

Yeni sohbette kur, planı tek tıkla onayla

Yeni bir sohbet aç, kiti ekle, 3. prompt’u firma bilgilerinle doldurup gönder. Claude Connection → Onaylar’dan build planı bir kez onayla, Watch Me Live’dan izle.

Haritayı ekle ve son kontrol

WordPress içerikteki iframe’i siler; haritayı elle ekliyoruz: Google Haritalar → Paylaş → Harita yerleştir → HTML’yi kopyala → Anasayfa’daki harita kartının (Özel HTML) yerine yapıştır.

Bu ders hakkında

Serinin ilk projesi: elektrik, güvenlik kamerası, yangın ve hırsız alarm, network ve Wi-Fi hizmeti veren bir teknik servis için tek sayfalık premium bir web sitesi. Bize gelen gerçek bir site talebinden yola çıktık: tek sayfa, WhatsApp butonu, harita konumu.

Önce Claude ile tasarımı yapıyoruz: canlı kamera görüntüleri oynayan bir güvenlik paneli, altı hizmet kartı, çalışma adımları, hizmet bölgesi ve iletişim formu. Sonra onaylanan tasarımı bir build kit dosyasına çeviriyoruz ve boş bir WordPress’e FB AI Engine – Claude Connector ile tek onayla kurduruyoruz.

Mockup’ı aşağıda gezebilirsin. Tüm dosyalar GitHub’da: indir, 3. prompt’a kendi firma bilgilerini yaz ve aynı siteyi kendin için kur.

Başlamadan önce

Boş bir WordPress kurulumu (alt klasör de olur, ör. siteniz.com/test)
Özel connector destekleyen bir Claude planı
FB AI Engine – Claude Connector 1.2.2 veya üstü (ücretsiz)
Firmanın bilgileri: ad, telefon, WhatsApp, adres, çalışma saatleri

Kalkan Teknik — mockup'ı gez

Derste kurduğumuz tek sayfalık site. Bölümlere atla, kamera panelini izle, mobil görünüme geç.

kalkan-teknik.com/ Yeni sekmede aç ↗

Mockup, 3 prompt ve build kit (GitHub) ↗ Claude Connector'ı indir ↗

Bu projeden

Bu ders, FB AI Engine – Claude Connector geliştirilirken ortaya çıktı.

Projeyi görüntüle

Başlamadan önce gerekenler0 program

Boş bir WordPress kurulumu (alt klasör de olur), özel connector destekleyen bir Claude planı ve ücretsiz FB AI Engine – Claude Connector eklentisi.

Bu kursa 4 dosya eşlik ediyor. Ücretsiz bir hesap onları açar.

Ücretsiz hesap oluştur

Bu ders

1 — Mockup prompt: firman için tek sayfalık site tasarlat

Teknik servis firmam için tek sayfalık, premium görünümlü bir web sitesi tasarla ve bana önce bir mockup göster.

Firma: [FİRMA ADI]
Şehir ve hizmet bölgeleri: [ŞEHİR, İLÇELER]
Hizmetler: elektrik tesisatı, güvenlik kamerası, yangın alarm sistemi, hırsız alarm sistemi, network ve kablolama, Wi-Fi çözümleri

Sayfada olsun:
1. Üstte logo, sayfa içi menü ve telefon butonu
2. Güçlü bir giriş bölümü, WhatsApp butonu ve güvenlik kameralarını anımsatan bir görsel
3. Altı hizmetin her biri için ikon, kısa açıklama ve 3 madde
4. Nasıl çalıştığımızı anlatan 4 adım (keşif, teklif, kurulum, destek)
5. Hizmet bölgesi ve Google Haritalar konumu
6. İletişim formu (ad, telefon, hizmet seçimi, mesaj, KVKK onayı)
7. Sağ altta sabit WhatsApp butonu; mobilde altta "Ara" ve "WhatsApp" çubuğu

Koyu lacivert ve amber renkler kullan. Telefon, adres gibi bilmediğin bilgileri uydurma; köşeli parantezle yer tutucu bırak. Sayı, müşteri yorumu veya ödül uydurma.

Mockup'u ben onaylayana kadar siteye hiçbir şey kurma.

2 — Build kit prompt: onaylanan mockup’ı kite çevir

Mockup'u onaylıyorum. Şimdi bunu FB AI Engine – Claude Connector ile kurulacak şekilde hazırla:

1. Tek bir build kit dosyası (Markdown): build planı (sayfa, tema, eklentiler, çöp kutusuna taşınacak varsayılan içerik), görsel listesi (adres + alt metin), Kadence renk/yazı tipi/header/footer ayarları, site CSS'i, iletişim formu, footer widget'ları, menü ve sayfa için hazır WordPress blok kodu.
2. Görseller için {{img:ANAHTAR}} yer tutucusu kullan; sayfalara  etiketi koyma, stiller site CSS'inde olsun.
3. Yeni bir sohbette bu kiti adım adım kuracak bir prompt yaz: önce build plan, sonra WPvivid + yedek, tema, eklentiler, temizlik, görseller, tasarım, form, sayfa, menü, footer ve site kontrolü.

Sitemin adresi: [SİTE ADRESİ]

3 — Build prompt: yeni sohbette siteyi tek onayla kur (firma bilgilerini doldur)

Build the one-page website in the attached file Kalkan-build-kit.md on my WordPress site through my connector (FB AI Engine – Claude Connector). The kit has everything: the build plan, images, theme settings, CSS, form, footer, menu and the page as ready block markup. I already approved the mockup.

My site address: [SITE ADDRESS, e.g. https://example.com]

My business details (replace the kit's placeholders and the name "Kalkan Teknik" with these; leave anything I left empty as a placeholder):
- Business name: [Kalkan Teknik]
- Phone: [0 5XX XXX XX XX]
- WhatsApp number (with country code, digits only): [905XXXXXXXXX]
- E-mail: [ornek@firma.com]
- City: [Şehir]
- Districts we serve: [İlçe 1, İlçe 2, İlçe 3]
- Address: [Açık adres]
- Opening hours: [Hafta içi 09:00–19:00 · Cumartesi 09:00–17:00]

The site is fresh: only the connector is installed. Work in this order and keep me posted live:

0. task_status at the start with all steps below (and a short spoken "brief"), at every step, and with done=true at the end.
1. content_list to find the ids of "Hello world!" and "Sample Page", then build_plan_submit with kit section 1 (those ids in "trash"). Tell me it is waiting, wait until I approve it, then check build_plan_status.
2. plugins_install wpvivid-backuprestore → backup_create → wait until backup_status shows a fresh backup.
3. theme_install kadence.
4. plugins_install contact-form-7.
5. content_trash the two ids from step 1.
6. media_upload every image in kit section 2 (url + alt). Keep a list of key → id + url. (Skip "logo" if my business name is not Kalkan Teknik.)
7. custom_css_set with kit section 4 (mode replace). Then theme_settings_get, and set the Kadence palette, fonts, page layout, logo, header, header button and footer with theme_settings_set (kit section 3), keeping Kadence's exact structures. If a header or footer part cannot be set through theme settings, link your browser first (the connector tells you how) and use the Customizer.
8. form_create with kit section 5 and keep the shortcode.
9. The page: content_create_draft (post_type page, title "Anasayfa", content exactly as kit section 8, with {{site}}, {{img:KEY}}, {{form_shortcode}} and my business details filled in), then content_publish.
10. menu_set (kit section 7, primary + mobile). site_settings: front page = Anasayfa, title = my business name, tagline "Elektrik, güvenlik ve network teknik servisi". widgets_set footer1–footer4 (kit section 6, same replacements).
11. site_check. Fix every problem it finds, then run it again.
12. Finish with task_status done=true and a brief: what was built, the link, and what is left for me: the Google map (kit section 9) and any placeholder I did not fill in.

Rules: follow the kit's markup and texts exactly. Don't add  or  tags. Ask me before anything outside the plan. If a step fails, tell me the exact error and the step number before trying something else.

Bu kursta henüz kod yok.