# Tasarımcı

HTML, CSS ve JavaScript üretimi ve mevcut kodu düzenleme
Kaynak: https://selwise.com/docs/ai-studio/designer

Anlattığınız tasarımı HTML, CSS ve çalışan JavaScript olarak üretir; ardından
siz istedikçe onu düzenler.

## Panelde nerede

Sol menüde **Tasarım → Yapay Zeka Stüdyosu** (Design → AI Studio). Ekranın tamamı Tasarımcı'dır: solda istem (**What should we design?**, Ne tasarlayalım?), değişiklik geçmişi ve kod; sağda **Live preview** (Canlı önizleme). Yerleşimi üstteki düzen düğmesiyle (yan yana, yalnızca önizleme gibi) değiştirebilirsiniz. Ekran **AI Studio** modülüne bağlıdır; modül yoksa menüde görünmez.

## Nasıl çalışır

İstediğiniz tasarımı gündelik dille anlatırsınız. Model dört şey döndürür: HTML,
CSS, JavaScript ve JavaScript'in ne zaman çalışacağı. Sonuç sağdaki önizlemede
**gerçekten çalışır**: geri sayım sayar, kopyala düğmesi kopyalar, sekmeler
geçiş yapar. Kod editörü de açıktır; oradaki her değişiklik önizlemeye anında
yansır.

## Adımlar

1. **Anlatın.** Ne göstereceğini, nasıl davranacağını yazın. Fikriniz yoksa
   örnek isteklerden birine tıklayın. Elinizde kod varsa **Kendi kodumla
   başlayayım** ile yapıştırın.
2. **Design it** (Tasarla) düğmesine basın (veya ⌘/Ctrl + Enter). İstem en fazla 2.000 karakterdir.
3. **Önizlemede kontrol edin.** Mobil, tablet ve masaüstü genişlikleri ile açık
   ve koyu mağaza arka planı arasında geçiş yapabilirsiniz.
4. **Düzenletin.** Ekranda bir tasarım varken yazdığınız istek onu
   **düzenler**: tasarımın tamamı modele gönderilir ve model yalnızca
   değiştirdiği kısmı geri verir (düğme **Apply change**, Değişikliği uygula, olur). "Düğmeyi yeşil yap" dediğinizde HTML ve
   JavaScript olduğu gibi kalır, yalnızca CSS değişir. Sıfırdan başlamak
   isterseniz istem kutusunun üstündeki **What should the AI do?** (Yapay zekâ ne yapsın?) seçicisinden **Create from scratch** (Sıfırdan oluştur) seçeneğini seçin; **Edit this design** (Bu tasarımı düzenle) varsayılandır.
5. **Kampanyaya aktarın.** **Create campaign with this design** (Bu tasarımla kampanya oluştur), HTML, CSS,
   JavaScript ve zamanlaması doldurulmuş bir özel kampanya taslağı açar (ad: "AI Design"). Siz
   kaydetmeden hiçbir şey yayına girmez. Aktarım tarayıcının oturum deposu üzerinden yapılır; tarayıcı site verisini engelliyorsa
   "The design could not be handed to the campaign form" uyarısı çıkar ve tasarım ekranda kalır: site verisine izin verin ya da kodu editörden kopyalayıp özel kampanyaya yapıştırın.

## Geri almak

Her istek **Changes in this session** (Bu oturumdaki değişiklikler) listesine yazılır: ne istediğiniz ve
hangi kısmın değiştiği. Liste son 20 adımı tutar. Bir düzenleme beklediğiniz gibi olmadıysa **Undo last change** (Son
değişikliği geri al) tasarımı o istekten önceki hâline döndürür. **Start over** (Baştan
başla) editörü, istemi ve geçmişi temizler. Sayfayı kapatırsanız oturum geçmişi silinir; tasarımı saklamak için kampanyaya aktarın ya da kodu Kütüphane'ye kaydedin.

## İyi istem yazmak

| Zayıf istem | İyi istem |
|---|---|
| "Bir banner yap" | "Sayfanın üstünde ince, sabit bir şerit; gece yarısına kadar geri sayım ve koyu bir düğme" |
| "İndirim kodu göster" | "İndirim kodunu gösteren bir kart, yanında panoya kopyala düğmesi ve kopyalandı onayı" |
| "Daha güzel yap" | "Kenar boşluklarını artır, başlığı kalınlaştır ve düğmeyi tam genişlik yap" |

Anlatmanız gereken üç şey: **ne görünecek**, **nerede duracak** ve **ne yapacak**.
Davranış belirtmezseniz model statik bir kutu üretir. Düzenlerken neyin
değişeceğini somut yazın; "iyileştir" gibi genel bir istekte model hiçbir şeyi
değiştirmeyebilir ve bunu size söyler.

## Markanız otomatik uygulanır

İstem kutusunun üstündeki satır, tasarımın seçili kanalın **yayındaki**
markasıyla üretileceğini gösterir: renkler, köşeler, yazı tipleri, logo ve
marka sesi. Bunu istemde ayrıca söylemeniz gerekmez.

- Model renkleri `var(--selwise-brand, #c93a63)` gibi marka değişkenleriyle ve
  yanlarında markanızın değeriyle yazar; markanızı sonradan değiştirdiğinizde
  tasarım da onu izler.
- Marka bağlayıcıdır ama kilitli değildir: sezona ya da kampanyaya uygun
  tonlar ve vurgular eklenebilir. İstemde başka renk ya da stil yazarsanız
  isteminiz kazanır.
- Başka bir markanın renkleriyle bir tasarım gerekiyorsa satırdaki anahtarla
  markayı kapatın; seçiminiz bütün yapay zekâ pencerelerinde geçerlidir.

Kanalınızda henüz yayınlanmış bir marka yoksa satır bunu söyler ve model genel
bir tasarım üretir. Markayı tanımlamak için: [Marka Teması](/docs/brand/theme).

## Görseller

Model görsel adresi uyduramaz. Tasarıma bir görsel koymak istiyorsanız istem kutusunun altındaki **Images for the model** (Modele verilecek görseller) alanından ekleyin: **Add image** (Görsel ekle) görsel kütüphanenizi açar, oradan seçebilir ya da yeni görsel yükleyebilirsiniz; bir adresi de yapıştırabilirsiniz. Her görsele "logo", "ürün fotoğrafı" gibi kısa bir etiket yazmak, modelin görseli nereye koyacağını anlamasına yardım eder.

Model yalnızca bu görselleri, kütüphanenizdeki görselleri ve tasarımda zaten bulunan görselleri kullanabilir. Tasarımın başka bir görsele ihtiyacı varsa model onun yerine boş, etiketli bir görsel alanı bırakır; önizlemede kesik çizgili bir kutu olarak görünür. Model kendisine verilmeyen bir adres yazarsa adres kaldırılır, yerine boş alan bırakılır ve bunu bir uyarıyla söyleriz.

Önizlemenin altındaki **Images** (Görseller) paneli tasarımdaki her görseli listeler. Boş alanları buradan yükleyerek, kütüphaneden seçerek ya da adres yapıştırarak doldurursunuz; alternatif metni düzenleyebilir, bir alanı isteğe bağlı yapabilir ya da kaldırabilirsiniz. Zorunlu bir görsel alanı boş olan kampanya yayına alınamaz. Ayrıntılar: [Görseller](/docs/library/images).

## JavaScript

Özel kampanyalar JavaScript çalıştırabilir; model de bunu bilerek üretir.
Üretilen kod sayfada bir IIFE içinde çalışır ve kendisine bir kapsayıcı
değişkeni verilmez; bu yüzden model, HTML'de tanımladığı benzersiz bir kök
kimliği sorgulayarak kendi elemanlarını bulur.

Zamanlama üç değerden biridir ve model uygun olanı seçer:

| Zamanlama | Ne zaman |
|---|---|
| `immediate` | Kod çevresindeki sayfaya bağlı değilse |
| `domReady` | Sayfanın ayrıştırılmış olması gerekiyorsa |
| `customEvent` | Kendi olayınızı tetiklediğinizde çalışsın istiyorsanız |

Bir düzenleme JavaScript'e dokunmadıysa seçtiğiniz zamanlama da korunur.

> **Satır içi olay öznitelikleri çalışmaz**
>
> `onclick="..."` gibi satır içi öznitelikler güvenlik nedeniyle temizlenir ve
> hiçbir zaman tetiklenmez. Davranış `addEventListener` ile bağlanmalıdır; model
> bunu zaten böyle üretir, ancak kodu elle düzenlerken aynı kurala uyun.

Sayfa hedefli, bir kampanyaya bağlı olmayan script'ler için ayrı bir modül
vardır; bkz. [Özel Scriptler](/docs/custom-scripts/overview).

## Kontrol edilecekler

| Kontrol | Neden |
|---|---|
| CSS sınıf adları özgün mü | Genel adlar (`.container`, `.title`) sitenizin stillerini bozar |
| Seçiciler kapsamlı mı | `h3` gibi kapsamsız kurallar tüm sayfayı etkiler |
| Sabit renk var mı | Tema ile uyumsuz kalır |
| Mobilde sığıyor mu | Önizlemede mobil genişliğe geçin |
| Koyu mağazada okunuyor mu | Önizlemedeki ay düğmesi arka planı koyulaştırır |

## "Genel bir tasarım kullanıldı" uyarısı

Sıfırdan oluştururken model kullanılabilir bir tasarım döndürmezse sistem
standart bir promosyon tasarımı koyar ve bunu size **söyler**. Bu uyarıyı
gördüğünüzde editördeki kod istediğiniz şey değildir: daha ayrıntılı bir
istemle tekrar deneyin. Düzenlerken bu hiç olmaz; model kullanılabilir bir
sonuç döndürmezse tasarımınız olduğu gibi bırakılır ve hata gösterilir.

## Neden düğme gri

| Gördüğünüz | Sebep |
|---|---|
| **Design it** pasif, istem kutusu pasif | AI Studio modülü hesapta yok ("AI Studio is not part of this account's subscription"), ya da aylık yapay zekâ kredisi bitti (kırmızı uyarı). Bkz. [Yapay Zekâ Kredileri](/docs/ai-studio/credits) |
| "The current code is too long to edit with AI" | Tasarımın HTML, CSS ve JavaScript toplamı 12.000 karakteri aştı; yalnızca sıfırdan oluşturabilirsiniz |
| Hata şeridi "AI generation failed" | Sağlayıcı ya da sınır hatası; mesaj nedenini söyler |
| Üretim sırasında istem kutusu pasif | Cevap bekleniyor; genellikle 10 ile 40 saniye sürer |

Her üretim 50 kredi harcar; ayrıntı ve hata mesajları için yukarıdaki sayfaya bakın.

## Sınırlar

Model sitenizi görmez. Ürettiği kod sitenizin mevcut tasarımıyla uyumlu
olmayabilir. Daha iyi sonuç için sitenizdeki bir kutunun HTML'ini **Kendi
kodumla başlayayım** ile yapıştırıp "bu yapıya benzer" deyin.

Düzenleme için HTML, CSS ve JavaScript toplamı en fazla 12.000 karakter
olabilir. Daha uzun bir kodu yalnızca sıfırdan oluşturabilirsiniz.

Ürün verisi gösteren bloklar için bu ekran değil, içerik blokları kullanılır;
bkz. [İçerik Blokları](/docs/product-enrichment/content-blocks). Onların kod
sekmesindeki yapay zekâ da mevcut bloğu düzenler.