Site Editörü — AI ile Tasarım

Shopizayn'ın AI Studio'su, doğal dil komutlarıyla siteni baştan aşağı özelleştirmeni sağlar. Kod yazmana gerek yok — sadece anlat.

Editör Arayüzü

/site/editor ekranında:

• Üst bar: aktif site (workspace) seçici, "Eleman Seç", viewport switcher (mobil/tablet/masaüstü), Yenile, Yayınla butonu
• Sol panel (gizlenebilir): sohbet — kullanıcı/asistan turn'ları, streaming yanıt
• Sağ panel: canlı önizleme iframe — her değişiklikten sonra otomatik yenilenir

Çoklu Site (Workspace) Yönetimi

Bir tenant'ın birden fazla sitesi olabilir. Tek bir tanesi aktif/yayında, diğerleri taslak.

Yeni Site Oluştur

Üst bardaki workspace dropdown → + Yeni Site Oluştur modal:

1. Site adına bir şey yaz ("Yaz Koleksiyonu", "Outlet", "Test Sitesi"…)
2. 5 temadan birini seç
3. Siteyi Oluştur → seçilen tema klonlanır, dev server başlar, otomatik yayına alınır.

Aktif Etmek

Dropdown'da bir taslağı Aktif Et linkine tıkla → o site otomatik canlıya geçer (Firebase publish), eski aktif site taslağa düşer.

Silmek

Aktif siteyi silemezsin. Önce başka bir siteyi aktif et, sonra eskisini sil.

Eleman Seçici (Element Picker)

Önizleme iframe'inde belirli bir elementi düzenlemek için:

1. Üst bardaki 🖱 Eleman Seç butonuna tıkla → buton mor olur, iframe'de element üstüne gelince çerçevelenir.
2. Düzenlemek istediğin elementi tıkla (örn. "Sepete Ekle" butonu).
3. Composer üstünde chip belirir: <button.bg-rose-500> "Sepete Ekle" gibi.
4. Mesajını yaz: "Bu butonu yeşil yap ve daha büyük göster" — chip otomatik mesajla beraber AI'a gider.

Etkili Promptlar

Yapma	Yap
"Site daha güzel olsun"	"Hero alanına gradient background, header'a sticky özelliği ekle"
"Renkleri değiştir"	"Primary rengi #FF6B6B yap, secondary #4ECDC4 olsun"
"Şu kısmı değiştir"	(Eleman Seç ile element seçtikten sonra) "Bu butonu yeşil yap"
"Tüm her şey daha modern"	"Köşe yuvarlaklığını 12px'ten 24px'e çıkar, gölgeleri yumuşat"

Sık Yapılan İşlemler

Hero başlığını değiştir

Hero başlığını "Yaz Sepeti %30 İndirim" yap, alt yazıya "Tüm koleksiyonda geçerli, kod gerektirmez" ekle.

Yeni bölüm ekle

Ürünler grid'inin altına 3 sütunlu "Müşteri Yorumları" bölümü ekle. Her kartta yıldız reyting, isim, kısa yorum olsun.

Tipografi

Başlık fontunu Inter'den Playfair Display'e çevir. Body fontunu IBM Plex Sans yap.

Animasyon ekle

Ürün kartlarına hover'da yukarı 4px translate ve subtle shadow animasyonu ekle. Geçiş 200ms olsun.

Yayınlama

Üst bardaki 🚀 Yayınla butonu:

1. Workspace dist'ini build eder
2. Firebase Hosting target'ına deploy eder
3. Sonunda URL'i sana verir (browser'da yeni sekmede açabilirsin)
4. Yayında badge'i header'da görünür

İlk yayın ~2 dakika, sonraki yayınlar ~30-60 saniyedir.

Sınırlar & Limitler

Plan	AI Promptu
Trial / yok	Günde 3
Esnaf	Saatte 5
Pro	Sınırsız

Pro'nun sınırsız olması, çok yoğun iterasyon için uygun. Site lansman süresi boyunca Pro önerilir.

Yaygın Sorular

Soru: AI yanlış değişiklik yaptı, geri alabilir miyim? Editör şu an manuel undo desteklemiyor; bunun yerine "az önceki değişikliği geri al ve X yap" diye yazabilirsin. Yakında otomatik versiyonlama gelecek.

Soru: Sohbet geçmişi başkasına gözükür mü? Hayır, sohbet sadece senin tenant'ına özel.

Soru: Eleman Seç ile seçtiğim element bulunamadı diyor. Bazen dynamic-class'lı elementlerde AI dosyayı bulamayabilir. Daha açık tarif et: "Hero altındaki ilk siyah buton".